diff --git a/packages/threat-composer-app/src/containers/App/components/Full/index.tsx b/packages/threat-composer-app/src/containers/App/components/Full/index.tsx index 003d3d90..5c0c736e 100644 --- a/packages/threat-composer-app/src/containers/App/components/Full/index.tsx +++ b/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(() => { diff --git a/packages/threat-composer-app/src/containers/MitigationPacks/index.tsx b/packages/threat-composer-app/src/containers/MitigationPacks/index.tsx index 240bf827..ffa60ac6 100644 --- a/packages/threat-composer-app/src/containers/MitigationPacks/index.tsx +++ b/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 ( generateUrl( - ROUTE_MITIGATION_PACK, - searchParms, - workspaceId, - undefined, - { - mitigationPackId, - }, - )} />); + return (); }; export default MitigationPacks; \ No newline at end of file diff --git a/packages/threat-composer-app/src/containers/ThreatPack/index.tsx b/packages/threat-composer-app/src/containers/ThreatPack/index.tsx index f7fe00aa..8cd0cd26 100644 --- a/packages/threat-composer-app/src/containers/ThreatPack/index.tsx +++ b/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) { diff --git a/packages/threat-composer-app/src/containers/ThreatPacks/index.tsx b/packages/threat-composer-app/src/containers/ThreatPacks/index.tsx index 7fe72c6b..33a648d5 100644 --- a/packages/threat-composer-app/src/containers/ThreatPacks/index.tsx +++ b/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 ( generateUrl( - ROUTE_THREAT_PACK, - searchParms, - workspaceId, - undefined, - { - threatPackId, - }, - )} />); + return (); }; export default ThreatPacks; \ No newline at end of file diff --git a/packages/threat-composer-app/src/containers/ThreatStatementEditor/index.tsx b/packages/threat-composer-app/src/containers/ThreatStatementEditor/index.tsx index c08a43ab..99613b58 100644 --- a/packages/threat-composer-app/src/containers/ThreatStatementEditor/index.tsx +++ b/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'), diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx index 310a5bfb..94676b60 100644 --- a/packages/threat-composer-app/src/index.tsx +++ b/packages/threat-composer-app/src/index.tsx @@ -13,7 +13,6 @@ 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'; @@ -21,10 +20,9 @@ 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( diff --git a/packages/threat-composer-app/src/utils/isMemoryRouterUsed/index.ts b/packages/threat-composer-app/src/utils/isMemoryRouterUsed/index.ts new file mode 100644 index 00000000..5db6c8dd --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/threat-composer/src/components/workspaces/MitigationPacks/index.tsx b/packages/threat-composer/src/components/workspaces/MitigationPacks/index.tsx index 9036f1e1..354c8079 100644 --- a/packages/threat-composer/src/components/workspaces/MitigationPacks/index.tsx +++ b/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 = ({ - getMitigationPackLinkHref, + onMitigationPackLinkClicked, }) => { const { mitigationPackUsage, mitigationPacks } = useMitigationPacksContext(); @@ -36,7 +36,9 @@ const MitigationPacks: FC = ({ id: 'id', minWidth: 100, header: 'Id', - cell: (data) => {data.id}, + cell: (data) => (), sortingField: 'id', isRowHeader: true, }, @@ -62,9 +64,9 @@ const MitigationPacks: FC = ({ { 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 ( diff --git a/packages/threat-composer/src/components/workspaces/ThreatPacks/index.tsx b/packages/threat-composer/src/components/workspaces/ThreatPacks/index.tsx index a51f0dbe..fe381a6e 100644 --- a/packages/threat-composer/src/components/workspaces/ThreatPacks/index.tsx +++ b/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 = ({ - getThreatPackLinkHref, + onThreatPackLinkClicked, }) => { const { threatPackUsage, threatPacks } = useThreatPacksContext(); @@ -36,7 +36,7 @@ const ThreatPacks: FC = ({ id: 'id', minWidth: 100, header: 'Id', - cell: (data) => {data.id}, + cell: (data) => , sortingField: 'id', isRowHeader: true, }, @@ -64,7 +64,7 @@ const ThreatPacks: FC = ({ header: 'Referenced threats', cell: (data) => (threatPackUsage[data.id] && Object.keys(threatPackUsage[data.id]).length) || 0, }, - ], [threatPackUsage, getThreatPackLinkHref]); + ], [threatPackUsage, onThreatPackLinkClicked]); return ( diff --git a/packages/threat-composer/src/components/workspaces/WorkspaceInsights/components/Overview/index.tsx b/packages/threat-composer/src/components/workspaces/WorkspaceInsights/components/Overview/index.tsx index efa9f45f..39d48e36 100644 --- a/packages/threat-composer/src/components/workspaces/WorkspaceInsights/components/Overview/index.tsx +++ b/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,