fix: Fix an issue where the add threat links are not working at the W…

…orkspace Insight (#92)

packages/threat-composer/src/components/assumptions/AssumptionCreationCard/index.tsx

@@ -18,7 +18,7 @@ import { FC, useState, useCallback } from 'react';
 import { DEFAULT_NEW_ENTITY_ID } from '../../../configs';
 import { useMitigationsContext } from '../../../contexts/MitigationsContext/context';
 import { useThreatsContext } from '../../../contexts/ThreatsContext/context';
-import { Assumption } from '../../../customTypes';
+import { Assumption, AssumptionSchema } from '../../../customTypes';
 import GenericEntityCreationCard, { DEFAULT_ENTITY } from '../../generic/GenericEntityCreationCard';
 import MitigationLinkView from '../../mitigations/MitigationLinkView';
 import ThreatLinkView from '../../threats/ThreatLinkView';
@@ -67,6 +67,7 @@ const AssumptionCreationCard: FC<AssumptionCreationCardProps> = ({ onSave }) =>
     header='Add new assumption'
     onSave={handleSave}
     onReset={handleReset}
+    validateData={AssumptionSchema.shape.content.safeParse}
     customEditors={<SpaceBetween direction='vertical' size='s'>
       <ThreatLinkView
         linkedThreatIds={linkedThreatIds}

packages/threat-composer/src/components/mitigations/MitigationCreationCard/index.tsx

@@ -18,7 +18,7 @@ import { FC, useState, useCallback } from 'react';
 import { DEFAULT_NEW_ENTITY_ID } from '../../../configs';
 import { useAssumptionsContext } from '../../../contexts/AssumptionsContext/context';
 import { useThreatsContext } from '../../../contexts/ThreatsContext/context';
-import { Mitigation } from '../../../customTypes';
+import { Mitigation, MitigationSchema } from '../../../customTypes';
 import AssumptionLinkView from '../../assumptions/AssumptionLinkView';
 import GenericEntityCreationCard, { DEFAULT_ENTITY } from '../../generic/GenericEntityCreationCard';
 import ThreatLinkView from '../../threats/ThreatLinkView';
@@ -67,6 +67,7 @@ const MitigationCreationCard: FC<MitigationCreationCardProps> = ({ onSave }) =>
     header='Add new mitigation'
     onSave={handleSave}
     onReset={handleReset}
+    validateData={MitigationSchema.shape.content.safeParse}
     customEditors={<SpaceBetween direction='vertical' size='s'>
       <ThreatLinkView
         linkedThreatIds={linkedThreatIds}

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

@@ -22,19 +22,23 @@ import {
   BarChart,
   BarChartProps,
 } from '@cloudscape-design/components';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import {
   ALL_LEVELS,
   LEVEL_NOT_SET,
   LEVEL_SELECTOR_OPTIONS_INCLUDING_ALL,
+  DEFAULT_NEW_ENTITY_ID,
 } from '../../../../../configs';
 import { useThreatsContext } from '../../../../../contexts/ThreatsContext';
+import { useWorkspacesContext } from '../../../../../contexts/WorkspacesContext';
 import filterThreatsByMetadata from '../../../../../utils/filterThreatsByMetadata';
 import DashboardNumber from '../../../../generic/DashboardNumber';
 import useLinkClicked from '../../hooks/useLinkClicked';
 
 const STRIDEAllocation = () => {
   const { statementList, addStatement } = useThreatsContext();
+  const { onThreatEditorView } = useWorkspacesContext();
+
   const [selectedPriority, setSelectedPriority] = useState<string | undefined>(
     ALL_LEVELS,
   );
@@ -43,6 +47,11 @@ const STRIDEAllocation = () => {
     return filterThreatsByMetadata(statementList, 'Priority', selectedPriority);
   }, [statementList, selectedPriority]);
 
+  const handleAddStatement = useCallback(() => {
+    addStatement();
+    onThreatEditorView?.(DEFAULT_NEW_ENTITY_ID);
+  }, [addStatement, onThreatEditorView]);
+
   const missingStride = useMemo(
     () => filterThreatsByMetadata(filteredStatementList, 'STRIDE').length,
     [filteredStatementList],
@@ -120,7 +129,7 @@ const STRIDEAllocation = () => {
           <Box variant="p" color="text-body-secondary">
             Start by adding a threat to this workspace
           </Box>
-          <Button variant="primary" onClick={() => addStatement()}>Add a threat</Button>
+          <Button variant="primary" onClick={() => handleAddStatement()}>Add a threat</Button>
         </Box>
       ) : (
         <div>

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

@@ -26,17 +26,20 @@ import {
   colorChartsPaletteCategorical2,
   colorChartsPaletteCategorical1,
 } from '@cloudscape-design/design-tokens';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import {
   ALL_LEVELS,
   LEVEL_SELECTOR_OPTIONS_INCLUDING_ALL,
+  DEFAULT_NEW_ENTITY_ID,
 } from '../../../../../configs';
 import { useThreatsContext } from '../../../../../contexts/ThreatsContext';
+import { useWorkspacesContext } from '../../../../../contexts/WorkspacesContext';
 import filterThreatsByMetadata from '../../../../../utils/filterThreatsByMetadata';
 import DashboardNumber from '../../../../generic/DashboardNumber';
 
 const ThreatGrammar = () => {
   const { statementList, addStatement } = useThreatsContext();
+  const { onThreatEditorView } = useWorkspacesContext();
 
   const [selectedPriority, setSelectedPriority] = useState<string | undefined>(
     ALL_LEVELS,
@@ -46,6 +49,11 @@ const ThreatGrammar = () => {
     return filterThreatsByMetadata(statementList, 'Priority', selectedPriority);
   }, [statementList, selectedPriority]);
 
+  const handleAddStatement = useCallback(() => {
+    addStatement();
+    onThreatEditorView?.(DEFAULT_NEW_ENTITY_ID);
+  }, [addStatement, onThreatEditorView]);
+
   const countThreatSource = useMemo(
     () => filteredStatementList.filter((s) => s.threatSource).length,
     [filteredStatementList],
@@ -138,7 +146,7 @@ const ThreatGrammar = () => {
           <Box variant="p" color="text-body-secondary">
             Start by adding a threat to this workspace
           </Box>
-          <Button variant="primary" onClick={() => addStatement()}>Add a threat</Button>
+          <Button variant="primary" onClick={() => handleAddStatement()}>Add a threat</Button>
         </Box>
       ) : (
         <div>

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

@@ -25,21 +25,23 @@ import {
   colorChartsStatusHigh,
   colorChartsStatusNeutral,
 } from '@cloudscape-design/design-tokens';
-import { useMemo } from 'react';
-
+import { useMemo, useCallback } from 'react';
 import {
   LEVEL_HIGH,
   LEVEL_LOW,
   LEVEL_MEDIUM,
   LEVEL_NOT_SET,
+  DEFAULT_NEW_ENTITY_ID,
 } from '../../../../../configs';
 import { useThreatsContext } from '../../../../../contexts/ThreatsContext';
+import { useWorkspacesContext } from '../../../../../contexts/WorkspacesContext';
 import filterThreatsByMetadata from '../../../../../utils/filterThreatsByMetadata';
 import DashboardNumber from '../../../../generic/DashboardNumber';
 import useLinkClicked from '../../hooks/useLinkClicked';
 
 const ThreatPrioritization = () => {
   const { statementList, addStatement } = useThreatsContext();
+  const { onThreatEditorView } = useWorkspacesContext();
 
   const handleLinkClicked = useLinkClicked();
 
@@ -62,6 +64,11 @@ const ThreatPrioritization = () => {
     [statementList],
   );
 
+  const handleAddStatement = useCallback(() => {
+    addStatement();
+    onThreatEditorView?.(DEFAULT_NEW_ENTITY_ID);
+  }, [addStatement, onThreatEditorView]);
+
   return (
     <ColumnLayout columns={1} borders="horizontal">
       {!statementList.length ? (
@@ -75,7 +82,7 @@ const ThreatPrioritization = () => {
           <Box variant="p" color="text-body-secondary">
             Start by adding a threat to this workspace
           </Box>
-          <Button variant="primary" onClick={() => addStatement()}>Add a threat</Button>
+          <Button variant="primary" onClick={() => handleAddStatement()}>Add a threat</Button>
         </Box>
       ) : (
         <Box padding="s">

packages/threat-composer/src/contexts/ContextAggregator/index.tsx

@@ -50,7 +50,10 @@ const ContextAggregator: FC<PropsWithChildren<ContextAggregatorProps>> = ({
       onDefineWorkload={onDefineWorkload}
       composerMode={composerMode}>
       <WorkspaceExamplesContext>
-        <WorkspacesContextProvider onWorkspaceChanged={onWorkspaceChanged} {...props}>
+        <WorkspacesContextProvider
+          onWorkspaceChanged={onWorkspaceChanged}
+          {...props}
+        >
           {(workspaceId) => (<WorkspaceContextAggregator
             workspaceId={workspaceId}
             requiredGlobalSetupContext={false}