chore: Fix the examples navigation (#59)

awslabs · Nov 22, 2023 · 1908a88 · 1908a88
1 parent 72ed1e5
commit 1908a88
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 26 deletions.
diff --git a/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx b/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx
@@ -25,7 +25,6 @@ import {
   DEFAULT_WORKSPACE_ID,
   DEFAULT_WORKSPACE_LABEL,
   EXAMPLES_SECTION_WORKSPACE_LABEL,
-  EXAMPLES_WORKSPACE_ID_PREFIX,
 } from '../../../configs/constants';
 import { useGlobalSetupContext } from '../../../contexts/GlobalSetupContext';
 import { useWorkspaceExamplesContext } from '../../../contexts/WorkspaceExamplesContext';
@@ -89,7 +88,7 @@ const WorkspaceSelector: FC<PropsWithChildren<WorkspaceSelectorProps>> = ({
         label: EXAMPLES_SECTION_WORKSPACE_LABEL,
         options: workspaceExamples.map(we => ({
           label: we.name,
-          value: `${EXAMPLES_WORKSPACE_ID_PREFIX}${we.name}`,
+          value: we.id,
         })),
       },
     ];

diff --git a/packages/threat-composer/src/contexts/ApplicationContext/index.tsx b/packages/threat-composer/src/contexts/ApplicationContext/index.tsx
@@ -25,8 +25,11 @@ const ApplicationContextProvider: FC<PropsWithChildren<ApplicationContextProvide
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<ApplicationLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.applicationInfo} {...props} />) :
-    (<ApplicationLocalStorageContextProvider {...props} />);
+    (<ApplicationLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.applicationInfo}
+      {...props} />) :
+    (<ApplicationLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default ApplicationContextProvider;

diff --git a/packages/threat-composer/src/contexts/ArchitectureContext/index.tsx b/packages/threat-composer/src/contexts/ArchitectureContext/index.tsx
@@ -25,8 +25,11 @@ const ArchitectureContextProvider: FC<PropsWithChildren<ArchitectureContextProvi
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<ArchitectureLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.architecture} {...props} />) :
-    (<ArchitectureLocalStorageContextProvider {...props} />);
+    (<ArchitectureLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.architecture}
+      {...props} />) :
+    (<ArchitectureLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default ArchitectureContextProvider;

diff --git a/packages/threat-composer/src/contexts/AssumptionLinksContext/index.tsx b/packages/threat-composer/src/contexts/AssumptionLinksContext/index.tsx
@@ -25,8 +25,11 @@ const AssumptionLinksContextProvider: FC<PropsWithChildren<AssumptionLinksContex
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<AssumptionLinksLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.assumptionLinks} {...props} />)
-    : (<AssumptionLinksLocalStorageContextProvider {...props} />);
+    (<AssumptionLinksLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.assumptionLinks}
+      {...props} />)
+    : (<AssumptionLinksLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default AssumptionLinksContextProvider;

diff --git a/packages/threat-composer/src/contexts/AssumptionsContext/index.tsx b/packages/threat-composer/src/contexts/AssumptionsContext/index.tsx
@@ -25,8 +25,11 @@ const AssumptionsContextProvider: FC<PropsWithChildren<AssumptionsContextProvide
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<AssumptionsLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.assumptions} {...props} />) :
-    (<AssumptionsLocalStorageContextProvider {...props} />);
+    (<AssumptionsLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.assumptions}
+      {...props} />) :
+    (<AssumptionsLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default AssumptionsContextProvider;

diff --git a/packages/threat-composer/src/contexts/DataflowContext/index.tsx b/packages/threat-composer/src/contexts/DataflowContext/index.tsx
@@ -25,8 +25,11 @@ const DataflowContextProvider: FC<PropsWithChildren<DataflowContextProviderProps
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<DataflowLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.dataflow} {...props} />) :
-    (<DataflowLocalStorageContextProvider {...props} />);
+    (<DataflowLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.dataflow}
+      {...props} />) :
+    (<DataflowLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default DataflowContextProvider;

diff --git a/packages/threat-composer/src/contexts/MitigationLinksContext/index.tsx b/packages/threat-composer/src/contexts/MitigationLinksContext/index.tsx
@@ -25,8 +25,11 @@ const MitigationLinksContextProvider: FC<PropsWithChildren<MitigationLinksContex
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<MitigationLinksLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.mitigationLinks} {...props} />) :
-    (<MitigationLinksLocalStorageContextProvider {...props} />);
+    (<MitigationLinksLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.mitigationLinks}
+      {...props} />) :
+    (<MitigationLinksLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default MitigationLinksContextProvider;

diff --git a/packages/threat-composer/src/contexts/MitigationsContext/index.tsx b/packages/threat-composer/src/contexts/MitigationsContext/index.tsx
@@ -25,8 +25,10 @@ const MitigationsContextProvider: FC<PropsWithChildren<MitigationsContextProvide
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<MitigationsLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.mitigations} {...props} />) :
-    (<MitigationsLocalStorageContextProvider {...props} />);
+    (<MitigationsLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.mitigations} {...props} />) :
+    (<MitigationsLocalStorageContextProvider key={props.workspaceId} {...props} />);
 };
 
 export default MitigationsContextProvider;

diff --git a/packages/threat-composer/src/contexts/ThreatsContext/index.tsx b/packages/threat-composer/src/contexts/ThreatsContext/index.tsx
@@ -26,10 +26,13 @@ const ThreatsContextProvider: FC<PropsWithChildren<ThreatsContextProviderProps>>
   const { getWorkspaceExample } = useWorkspaceExamplesContext();
 
   return isWorkspaceExample(props.workspaceId) ?
-    (<ThreatsLocalStateContextProvider initialValue={getWorkspaceExample(props.workspaceId)?.value.threats} {...props} >
+    (<ThreatsLocalStateContextProvider
+      key={props.workspaceId}
+      initialValue={getWorkspaceExample(props.workspaceId)?.value.threats}
+      {...props} >
       {children}
     </ThreatsLocalStateContextProvider>) :
-    (<ThreatsLocalStorageContextProvider {...props} >
+    (<ThreatsLocalStorageContextProvider key={props.workspaceId} {...props} >
       <ThreatsMigration>
         {children}
       </ThreatsMigration>

diff --git a/packages/threat-composer/src/contexts/WorkspaceExamplesContext/context.ts b/packages/threat-composer/src/contexts/WorkspaceExamplesContext/context.ts
@@ -14,11 +14,11 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import { useContext, createContext } from 'react';
-import { WorkspaceExample } from '../../customTypes';
+import { WorkspaceExampleWithId } from '../../customTypes';
 
 export interface WorkspaceExamplesContextApi {
-  workspaceExamples: WorkspaceExample[];
-  getWorkspaceExample: (workspaceExampleId?: string | null) => WorkspaceExample | undefined;
+  workspaceExamples: WorkspaceExampleWithId[];
+  getWorkspaceExample: (workspaceExampleId?: string | null) => WorkspaceExampleWithId | undefined;
 }
 
 const initialState: WorkspaceExamplesContextApi = {

diff --git a/packages/threat-composer/src/contexts/WorkspaceExamplesContext/index.tsx b/packages/threat-composer/src/contexts/WorkspaceExamplesContext/index.tsx
@@ -14,22 +14,28 @@
   limitations under the License.
  ******************************************************************************************************************** */
 /** @jsxImportSource @emotion/react */
-import { FC, PropsWithChildren, useCallback } from 'react';
+import { FC, PropsWithChildren, useCallback, useMemo } from 'react';
 import { WorkspaceExamplesContext, useWorkspaceExamplesContext } from './context';
 import { EXAMPLES_WORKSPACE_ID_PREFIX } from '../../configs';
-import workspaceExamples from '../../data/workspaceExamples/workspaceExamples';
+import workspaceExamplesData from '../../data/workspaceExamples/workspaceExamples';
 
 const WorkspaceExamplesContextProvider: FC<PropsWithChildren<{}>> = ({
   children,
 }) => {
+  const workspaceExamples = useMemo(() => {
+    return workspaceExamplesData.map(x => ({
+      ...x,
+      id: `${EXAMPLES_WORKSPACE_ID_PREFIX}${x.name.replace(/\s/g, '')}`,
+    }));
+  }, [workspaceExamplesData]);
+
   const handleGetWorkspaceExample = useCallback((workspaceExampleId?: string | null) => {
     if (workspaceExampleId) {
-      const workspaceExampleName = workspaceExampleId.substring(EXAMPLES_WORKSPACE_ID_PREFIX.length);
-      return workspaceExamples.find(x => x.name === workspaceExampleName);
+      return workspaceExamples.find(x => x.id === workspaceExampleId);
     }
 
     return undefined;
-  }, []);
+  }, [workspaceExamples]);
 
   return (<WorkspaceExamplesContext.Provider value={{
     workspaceExamples,

diff --git a/packages/threat-composer/src/customTypes/dataExchange.ts b/packages/threat-composer/src/customTypes/dataExchange.ts
@@ -42,8 +42,14 @@ export const WorkspaceExampleSchema = z.object({
   value: DataExchangeFormatSchema,
 });
 
+export const WorkspaceExampleWithIdSchema = WorkspaceExampleSchema.extend({
+  id: z.string(),
+});
+
 export type WorkspaceExample = z.infer<typeof WorkspaceExampleSchema>;
 
+export type WorkspaceExampleWithId = z.infer<typeof WorkspaceExampleWithIdSchema>;
+
 export interface HasContentDetails {
   applicationName: boolean;
   applicationInfo: boolean;