chore: Fix issues re: Memory Router

packages/threat-composer-app/src/containers/App/components/Full/index.tsx

@@ -110,7 +110,11 @@ const Full: FC = () => {
   const handleThreatEditorView = useCallback((newThreatId: string, idToCopy?: string) => {
     navigate(generateUrl(ROUTE_THREAT_EDITOR, searchParms, workspaceId, newThreatId, undefined, idToCopy ? {
       idToCopy,
-    } : undefined));
+    } : undefined), {
+      state: {
+        idToCopy,
+      },
+    });
   }, [navigate, workspaceId, searchParms]);
 
   const navigationItems: SideNavigationProps.Item[] = useMemo(() => {

packages/threat-composer-app/src/containers/MitigationPacks/index.tsx

@@ -14,28 +14,33 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import { MitigationPacksComponent } from '@aws/threat-composer';
-import { FC } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { FC, useCallback } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ROUTE_MITIGATION_PACK } from '../../config/routes';
 import generateUrl from '../../utils/generateUrl';
 
 const MitigationPacks: FC = () => {
   const [searchParms] = useSearchParams();
   const { workspaceId } = useParams();
+  const navigate = useNavigate();
+
+  const handleMitigationPackLinkClicked = useCallback((mitigationPackId: string) => {
+    workspaceId && navigate(generateUrl(
+      ROUTE_MITIGATION_PACK,
+      searchParms,
+      workspaceId,
+      undefined,
+      {
+        mitigationPackId,
+      },
+    ));
+  }, []);
 
   if (!workspaceId) {
     return null;
   }
 
-  return (<MitigationPacksComponent getMitigationPackLinkHref={(mitigationPackId) => generateUrl(
-    ROUTE_MITIGATION_PACK,
-    searchParms,
-    workspaceId,
-    undefined,
-    {
-      mitigationPackId,
-    },
-  )} />);
+  return (<MitigationPacksComponent onMitigationPackLinkClicked={handleMitigationPackLinkClicked} />);
 };
 
 export default MitigationPacks;

packages/threat-composer-app/src/containers/ThreatPack/index.tsx

@@ -32,7 +32,12 @@ const ThreatPack: FC = () => {
         threatPackId: selectedThreatPackId,
         threatPackThreatId: threat.id,
       });
-    navigate(url);
+    navigate(url, {
+      state: {
+        threatPackId: selectedThreatPackId,
+        threatPackThreatId: threat.id,
+      },
+    });
   }, [workspaceId, searchParms]);
 
   if (!threatPackId) {

packages/threat-composer-app/src/containers/ThreatPacks/index.tsx

@@ -14,28 +14,32 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import { ThreatPacksComponent } from '@aws/threat-composer';
-import { FC } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { FC, useCallback } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ROUTE_THREAT_PACK } from '../../config/routes';
 import generateUrl from '../../utils/generateUrl';
 
 const ThreatPacks: FC = () => {
   const [searchParms] = useSearchParams();
   const { workspaceId } = useParams();
+  const navigate = useNavigate();
+
+  const handleThreatPackLinkClick = useCallback((threatPackId: string) => {
+    workspaceId && navigate(generateUrl(
+      ROUTE_THREAT_PACK,
+      searchParms,
+      workspaceId,
+      undefined,
+      {
+        threatPackId,
+      }));
+  }, []);
 
   if (!workspaceId) {
     return null;
   }
 
-  return (<ThreatPacksComponent getThreatPackLinkHref={(threatPackId) => generateUrl(
-    ROUTE_THREAT_PACK,
-    searchParms,
-    workspaceId,
-    undefined,
-    {
-      threatPackId,
-    },
-  )} />);
+  return (<ThreatPacksComponent onThreatPackLinkClicked={handleThreatPackLinkClick} />);
 };
 
 export default ThreatPacks;

packages/threat-composer-app/src/containers/ThreatStatementEditor/index.tsx

@@ -23,13 +23,19 @@ import {
   ThreatPack,
 } from '@aws/threat-composer';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { v4 as uuidV4 } from 'uuid';
+import isMemoryRouterUsed from '../../utils/isMemoryRouterUsed';
 
 const ThreatStatementEditor = () => {
   const { threatId } = useParams();
+  const location = useLocation();
 
   const [idToCopy] = useState(() => {
+    if (isMemoryRouterUsed()) {
+      return location.state?.idToCopy;
+    }
+
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get('idToCopy');
   });
@@ -38,6 +44,13 @@ const ThreatStatementEditor = () => {
     threatPackId,
     threatPackThreatId,
   }] = useState(() => {
+    if (isMemoryRouterUsed()) {
+      return {
+        threatPackId: location.state?.threatPackId,
+        threatPackThreatId: location.state?.threatPackThreatId,
+      };
+    }
+
     const urlParams = new URLSearchParams(window.location.search);
     return {
       threatPackId: urlParams.get('threatPackId'),

packages/threat-composer-app/src/index.tsx

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { APP_MODE_IDE_EXTENSION } from '@aws/threat-composer';
 import NorthStarThemeProvider from '@aws-northstar/ui/components/NorthStarThemeProvider';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
 import App from './containers/App';
 import reportWebVitals from './reportWebVitals';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import isMemoryRouterUsed from './utils/isMemoryRouterUsed';
 
-const appMode = process.env.REACT_APP_APP_MODE;
-
-const Router = appMode === APP_MODE_IDE_EXTENSION ? MemoryRouter : BrowserRouter;
+const Router = isMemoryRouterUsed() ? MemoryRouter : BrowserRouter;
 
 ReactDOM.render(
   <React.StrictMode>

packages/threat-composer-app/src/utils/isMemoryRouterUsed/index.ts

@@ -0,0 +1,24 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ ******************************************************************************************************************** */
+import { APP_MODE_IDE_EXTENSION } from '@aws/threat-composer';
+
+const appMode = process.env.REACT_APP_APP_MODE;
+
+const isMemoryRouterUsed = () => {
+  return appMode === APP_MODE_IDE_EXTENSION;
+};
+
+export default isMemoryRouterUsed;

packages/threat-composer/src/components/workspaces/MitigationPacks/index.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import Box from '@cloudscape-design/components/box';
-import Link from '@cloudscape-design/components/link';
+import Button from '@cloudscape-design/components/button';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import { FC, useMemo } from 'react';
 import GeneralInfo from './components/GeneralInfo';
@@ -23,11 +23,11 @@ import { MitigationPack } from '../../../customTypes/referencePacks';
 import Table, { ColumnDefinition } from '../../generic/Table';
 
 export interface MitigationPacksProps {
-  getMitigationPackLinkHref?: (id: string) => string;
+  onMitigationPackLinkClicked?: (id: string) => void;
 }
 
 const MitigationPacks: FC<MitigationPacksProps> = ({
-  getMitigationPackLinkHref,
+  onMitigationPackLinkClicked,
 }) => {
   const { mitigationPackUsage, mitigationPacks } = useMitigationPacksContext();
 
@@ -36,7 +36,9 @@ const MitigationPacks: FC<MitigationPacksProps> = ({
       id: 'id',
       minWidth: 100,
       header: 'Id',
-      cell: (data) => <Link href={getMitigationPackLinkHref?.(data.id)}>{data.id}</Link>,
+      cell: (data) => (<Button variant="inline-link" onClick={() => onMitigationPackLinkClicked?.(data.id)}>
+        {data.id}
+      </Button>),
       sortingField: 'id',
       isRowHeader: true,
     },
@@ -62,9 +64,9 @@ const MitigationPacks: FC<MitigationPacksProps> = ({
     {
       id: 'countReferencedMitigations',
       header: 'Referenced mitigations',
-      cell: (data) =>(mitigationPackUsage[data.id] && Object.keys(mitigationPackUsage[data.id]).length) || 0,
+      cell: (data) => (mitigationPackUsage[data.id] && Object.keys(mitigationPackUsage[data.id]).length) || 0,
     },
-  ], [mitigationPackUsage, getMitigationPackLinkHref]);
+  ], [mitigationPackUsage, onMitigationPackLinkClicked]);
 
   return (<SpaceBetween direction='vertical' size='s'>
     <GeneralInfo />

packages/threat-composer/src/components/workspaces/ThreatPacks/index.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import Box from '@cloudscape-design/components/box';
-import Link from '@cloudscape-design/components/link';
+import Button from '@cloudscape-design/components/button';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import { FC, useMemo } from 'react';
 import GeneralInfo from './components/GeneralInfo';
@@ -23,11 +23,11 @@ import { ThreatPack } from '../../../customTypes/referencePacks';
 import Table, { ColumnDefinition } from '../../generic/Table';
 
 export interface ThreatPacksProps {
-  getThreatPackLinkHref?: (id: string) => string;
+  onThreatPackLinkClicked?: (id: string) => void;
 }
 
 const ThreatPacks: FC<ThreatPacksProps> = ({
-  getThreatPackLinkHref,
+  onThreatPackLinkClicked,
 }) => {
   const { threatPackUsage, threatPacks } = useThreatPacksContext();
 
@@ -36,7 +36,7 @@ const ThreatPacks: FC<ThreatPacksProps> = ({
       id: 'id',
       minWidth: 100,
       header: 'Id',
-      cell: (data) => <Link href={getThreatPackLinkHref?.(data.id)}>{data.id}</Link>,
+      cell: (data) => <Button variant="inline-link" onClick={() => onThreatPackLinkClicked?.(data.id)}>{data.id}</Button>,
       sortingField: 'id',
       isRowHeader: true,
     },
@@ -64,7 +64,7 @@ const ThreatPacks: FC<ThreatPacksProps> = ({
       header: 'Referenced threats',
       cell: (data) => (threatPackUsage[data.id] && Object.keys(threatPackUsage[data.id]).length) || 0,
     },
-  ], [threatPackUsage, getThreatPackLinkHref]);
+  ], [threatPackUsage, onThreatPackLinkClicked]);
 
   return (<SpaceBetween direction='vertical' size='s'>
     <GeneralInfo />

packages/threat-composer/src/components/workspaces/WorkspaceInsights/components/Overview/index.tsx

@@ -32,9 +32,12 @@ import useLinkClicked from '../../hooks/useLinkClicked';
 
 const styles = {
   container: css({
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
+    'height': '100%',
+    'display': 'flex',
+    'flexDirection': 'column',
+    '& a': {
+      textDecoration: 'none !important',
+    },
   }),
   contentContainer: css({
     flex: 1,