fix: Use context instead of params for navigation (#1056)

frontend/package.json

@@ -16,9 +16,21 @@
     "license": "MIT",
     "manifest": {
         "name": "Barrier Management Tool",
-        "shortName": "BMT",
+        "shortName": "bmt",
+        "description": "Barrier Management Tool",
+        "owners": [
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]"
+        ],
         "admins": [
-            "[email protected]"
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]"
         ]
     },
     "icon": "../docs/app-icon.svg",
@@ -28,7 +40,7 @@
         "@equinor/eds-icons": "^0.10.0",
         "@equinor/eds-tokens": "^0.7.0",
         "@equinor/fusion": "^3.4.9",
-        "@equinor/fusion-components": "^2.10.5",
+        "@equinor/fusion-components": "2.10.2",
         "@equinor/fusion-framework-module-ag-grid": "^3.0.1",
         "@equinor/fusion-framework-module-msal": "^1.0.23",
         "@equinor/fusion-framework-react": "^4.0.6",
@@ -51,7 +63,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.16.11",
-        "@equinor/fusion-cli": "3.0.0-beta.37",
+        "@equinor/fusion-cli": "3.0.0-beta.39",
         "@graphql-codegen/cli": "2.5.0",
         "@graphql-codegen/typescript": "2.4.3",
         "@testing-library/react": "^12.1.2",

frontend/src/App.tsx

@@ -27,6 +27,7 @@ const App = () => {
                         <Route path="/apps/bmt/:fusionProjectId" exact component={ProjectTabs} />
                         <Route path="/:fusionProjectId/evaluation/:evaluationId" exact component={EvaluationView} />
                         <Route path="/apps/bmt/:fusionProjectId/evaluation/:evaluationId" exact component={EvaluationView} />
+                        <Route path="/" component={ProjectTabs} />
                     </Switch>
                 </BrowserRouter>
             </ErrorBoundary>

frontend/src/api/graphql.ts

@@ -31,7 +31,7 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (networkError) console.log(`[Network error]: ${networkError}`)
 })
 
-const getToken = (): string => {
+export const getToken = (): string => {
     return window.sessionStorage.getItem("token") ?? ""
 }
 
@@ -45,19 +45,16 @@ const refreshLink = new TokenRefreshLink({
     fetchAccessToken: () => {
         const contextStore: { [key: string]: any } = window
         const context: IFusionContext = contextStore[FUSION_APP_KEY]
-        return context.auth.container.acquireTokenAsync(config.AD_APP_ID).then(token => {
-            // This code might not run since fusion refreshes after acquiring
-            return new Response(token)
-        })
+        return new Promise(() => getToken())
     },
     handleFetch: (token: string) => {
         // This code might not run since fusion refreshes after acquiring
         // Should save here, but fusion does it.
     },
 })
 
-export const createClient = (apiUrl: string) =>
-    new ApolloClient({
+export const createClient = (apiUrl: string) => {
+    return new ApolloClient({
         link: authLink
             .concat(refreshLink)
             .concat(errorLink)
@@ -68,3 +65,4 @@ export const createClient = (apiUrl: string) =>
             ),
         cache: new InMemoryCache(),
     })
+}

frontend/src/index.tsx

@@ -6,7 +6,7 @@ import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import { ReactPlugin } from '@microsoft/applicationinsights-react-js'
 import { createBrowserHistory } from 'history'
 
-import { createClient } from './api/graphql'
+import { createClient, getToken } from './api/graphql'
 import App from './App'
 import { config } from './config'
 
@@ -46,10 +46,15 @@ const Start = () => {
 
     useEffect(() => {
         (async () => {
-            const scopes = ["api://8829d4ca-93e8-499a-8ce1-bc0ef4840176/user_impersonation"]
-            const token = await window.Fusion.modules.auth.acquireAccessToken({ scopes })
+            try {
+                const scopes = ["api://8829d4ca-93e8-499a-8ce1-bc0ef4840176/user_impersonation"]
+                const token = await window.Fusion.modules.auth.acquireAccessToken({ scopes })
 
-            window.sessionStorage.setItem("token", token ?? "")
+                window.sessionStorage.setItem("token", token ?? "")
+            }
+            catch (error) {
+                console.log("error: ", error)
+            }
         })()
     }, [])
 
@@ -70,12 +75,18 @@ const Start = () => {
 
 registerApp('bmt', {
     AppComponent: createLegacyApp(Start),
-    name: 'Barrier Management Tool',
     context: {
         types: [ContextTypes.ProjectMaster],
-        buildUrl: (context: Context | null) => (context ? `/${context.id}` : ""),
-        getContextFromUrl: (url: string) => url.split("/")[1],
+        buildUrl: (context: Context | null) => {
+            const result = (context ? `/${context.id}` : "")
+            return result
+        },
+        // getContextFromUrl: (url: string) => {
+        //     const result = url.split("/")[1]
+        //     return result
+        // },
     },
+    name: 'Barrier Management Tool',
 })
 
 if (module.hot) {

frontend/src/views/Project/Dashboard/Components/EvaluationsTable.tsx

@@ -16,6 +16,7 @@ import { getEvaluationActionsByState } from '../../../../utils/actionUtils'
 import Bowtie from '../../../../components/Bowtie/Bowtie'
 import SortableTable, { Column } from '../../../../components/SortableTable'
 import ProgressStatusIcon from './ProgressStatusIcon'
+import { useCurrentContext } from '@equinor/fusion'
 
 const { Row, Cell } = Table
 
@@ -46,6 +47,12 @@ interface Props {
 }
 
 const EvaluationsTable = ({ evaluations }: Props) => {
+    const currentProject = useCurrentContext()
+
+    if (currentProject === null || currentProject === undefined) {
+        return <p>No project selected</p>
+    }
+
     const sortOnAccessor = (a: Evaluation, b: Evaluation, accessor: string, sortDirection: SortDirection) => {
         switch (accessor) {
             case 'name': {
@@ -80,7 +87,6 @@ const EvaluationsTable = ({ evaluations }: Props) => {
     }
 
     const renderRow = (evaluation: Evaluation, index: number) => {
-        const project = useProject()
         const isWorkshopOrLater =
             evaluation.progression === Progression.Workshop ||
             evaluation.progression === Progression.FollowUp ||
@@ -91,10 +97,17 @@ const EvaluationsTable = ({ evaluations }: Props) => {
             : []
         const actionsByState = getEvaluationActionsByState(evaluation)
 
+        const getEvaluationLink = (location: any) => {
+            if (location.pathname.includes('bmt/')) {
+                return ({ ...location, pathname: `${currentProject.id}/evaluation/${evaluation.id}` })
+            }
+            return ({ ...location, pathname: `bmt/${currentProject.id}/evaluation/${evaluation.id}` })
+        }
+
         return (
             <Row key={index}>
                 <CellWithBorder>
-                    <Link to={`${project.fusionProjectId}/evaluation/${evaluation.id}`} style={{ textDecoration: 'none' }}>
+                    <Link to={location => getEvaluationLink(location)} style={{ textDecoration: 'none' }}>
                         <Typography
                             color="primary"
                             variant="body_short"

frontend/src/views/Project/ProjectTabs.tsx

@@ -33,6 +33,14 @@ const ProjectTabs = ({ match }: RouteComponentProps<Params>) => {
 
     const isAdmin = currentUser && getCachedRoles()?.includes('Role.Admin')
 
+    if (!currentProject) {
+        return (
+            <>
+                <p>Please select a project.</p>
+            </>
+        )
+    }
+
     if (loading) {
         return <>Loading...</>
     }