feat: Support Mitigation Candidates for Threat Packs

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

@@ -101,7 +101,11 @@ const ThreatStatementEditor = () => {
     setEditingStatement(editingStatement);
   }, [editingStatement]);
 
-  return <ThreatStatementEditorComponent onThreatListView={() => handleNavigateView(ROUTE_THREAT_LIST)} />;
+  return <ThreatStatementEditorComponent
+    onThreatListView={() => handleNavigateView(ROUTE_THREAT_LIST)}
+    threatPackId={threatPackId}
+    threatPackThreatId={threatPackThreatId}
+  />;
 };
 
 export default ThreatStatementEditor;

packages/threat-composer/src/components/generic/Table/index.tsx

@@ -35,6 +35,8 @@ const Table: FC<TableProps> = ({ disableSettings, preferences: collectionPrefere
   const [preferences, setPreferences] = useState<CollectionPreferencesProps.Preferences>({
     pageSize: props.defaultPageSize,
     visibleContent: props.columnDefinitions.map((cd) => cd.id || ''),
+    wrapLines: true,
+    stripedRows: true,
   });
 
   const visibleContentOptions = useMemo(() => {

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

@@ -13,10 +13,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+import { SpaceBetween } from '@cloudscape-design/components';
 import Autosuggest from '@cloudscape-design/components/autosuggest';
 import ExpandableSection, { ExpandableSectionProps } from '@cloudscape-design/components/expandable-section';
 import TokenGroup from '@cloudscape-design/components/token-group';
-import React, { FC, useMemo } from 'react';
+import React, { FC, PropsWithChildren, useMemo } from 'react';
 import { Mitigation } from '../../../customTypes';
 
 export interface MitigationLinkProps {
@@ -27,12 +28,13 @@ export interface MitigationLinkProps {
   onRemoveMitigationLink: (mitigationId: string) => void;
 }
 
-const MitigationLinkComponent: FC<MitigationLinkProps> = ({
+const MitigationLinkComponent: FC<PropsWithChildren<MitigationLinkProps>> = ({
   variant,
   linkedMitigationIds,
   mitigationList,
   onAddMitigationLink,
   onRemoveMitigationLink,
+  children,
 }) => {
   const [searchValue, setSearchValue] = React.useState('');
 
@@ -54,39 +56,44 @@ const MitigationLinkComponent: FC<MitigationLinkProps> = ({
     variant={variant}
     headingTagOverride={variant === 'container' ? 'h3' : undefined}
     headerText={`Linked mitigations (${linkedMitigations.length})`}>
-    <Autosuggest
-      onChange={({ detail }) => setSearchValue(detail.value)}
-      value={searchValue}
-      options={filteredMitigations.map(x => ({
-        value: x.id,
-        label: x.content,
-      }))}
-      onSelect={({ detail }) => {
-        onAddMitigationLink(detail.value);
-        setSearchValue('');
-      }}
-      filteringType='manual'
-      enteredTextLabel={value => `Add new mitigation: "${value}"`}
-      placeholder="Search mitigation"
-      empty="No matches found"
-    />
-    <div
-      style={{
-        display: 'flex',
-      }}
-    >
-      <TokenGroup
-        items={
-          linkedMitigations.map(x => ({
+    <SpaceBetween direction='vertical' size="l">
+      <div>
+        <Autosuggest
+          onChange={({ detail }) => setSearchValue(detail.value)}
+          value={searchValue}
+          options={filteredMitigations.map(x => ({
+            value: x.id,
             label: x.content,
-            dismissLabel: `Unlink mitigation ${x.numericId}`,
-          }))
-        }
-        onDismiss={({ detail: { itemIndex } }) => {
-          onRemoveMitigationLink(linkedMitigations[itemIndex].id);
-        }}
-      />
-    </div>
+          }))}
+          onSelect={({ detail }) => {
+            onAddMitigationLink(detail.value);
+            setSearchValue('');
+          }}
+          filteringType='manual'
+          enteredTextLabel={value => `Add new mitigation: "${value}"`}
+          placeholder="Search mitigation"
+          empty="No matches found"
+        />
+        <div
+          style={{
+            display: 'flex',
+          }}
+        >
+          <TokenGroup
+            items={
+              linkedMitigations.map(x => ({
+                label: x.content,
+                dismissLabel: `Unlink mitigation ${x.numericId}`,
+              }))
+            }
+            onDismiss={({ detail: { itemIndex } }) => {
+              onRemoveMitigationLink(linkedMitigations[itemIndex].id);
+            }}
+          />
+        </div>
+      </div>
+      {children}
+    </SpaceBetween>
   </ExpandableSection>);
 };
 

packages/threat-composer/src/components/threats/FieldSelector/index.tsx

@@ -43,7 +43,7 @@ export interface FieldSelectorProps {
   setEditor: (type: ThreatFieldTypes) => void;
   statement: TemplateThreatStatement;
   suggestions?: string[];
-  onGiveExampleClick: () => void;
+  onGiveExampleClick?: () => void;
   setCustomTemplateEditorVisible: (visible: boolean) => void;
   onStartOver?: () => void;
 }
@@ -153,7 +153,7 @@ const FieldSelector: FC<FieldSelectorProps> = ({
       info={composerMode === 'Full' ? undefined : <Button variant='icon' iconName='status-info' onClick={showInfoModal} />}
       actions={<SpaceBetween direction='horizontal' size='s'>
         {composerMode === 'EditorOnly' && <Button onClick={onStartOver}>Start over</Button>}
-        <Button onClick={onGiveExampleClick}>Give me a random example</Button>
+        {onGiveExampleClick && <Button onClick={onGiveExampleClick}>Give me a random example</Button>}
         <ButtonDropdown items={[
           { id: 'customTemplate', text: 'Custom Template' },
         ]}

packages/threat-composer/src/components/threats/Header/index.tsx

@@ -40,7 +40,7 @@ const Header: FC<HeaderProps> = ({
     return (
       <SpaceBetween direction="horizontal" size="xs">
         <Button onClick={onCancel}>Threat list</Button>
-        <Button onClick={onStartOver}>Start over</Button>
+        {onStartOver && <Button onClick={onStartOver}>Start over</Button>}
         <Button variant="primary" onClick={onComplete} disabled={!statement.statement}>
           {saveButtonText}
         </Button>

packages/threat-composer/src/components/threats/MitigationCandidates/index.tsx

@@ -0,0 +1,124 @@
+/** *******************************************************************************************************************
+  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 Button from '@cloudscape-design/components/button';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useMemo, FC, useState, useEffect } from 'react';
+import { METADATA_KEY_SOURCE_THREAT_PACK, METADATA_KEY_SOURCE_THREAT_PACK_MITIGATION_CANDIDATE } from '../../../configs';
+import { useThreatPacksContext } from '../../../contexts';
+import { Mitigation } from '../../../customTypes/mitigations';
+import getMetadata from '../../../utils/getMetadata';
+import Table, { ColumnDefinition } from '../../generic/Table';
+
+export interface MitigationCandidatesProp {
+  threatPackId: string;
+  threatPackThreatId: string;
+  linkedMitigationIds: string[];
+  mitigationList: Mitigation[];
+  onAddMitigationsFromMitigationCandidates: (mitigationCandidates: Mitigation[], threatPackId: string) => void;
+}
+
+const MitigationCandidates: FC<MitigationCandidatesProp> = ({
+  threatPackId,
+  threatPackThreatId,
+  linkedMitigationIds,
+  mitigationList,
+  onAddMitigationsFromMitigationCandidates,
+}) => {
+  const [selectedItems, setSelectedItems] = useState<Mitigation[]>([]);
+  const { getMitigationCandidates } = useThreatPacksContext();
+  const [mitigations, setMitigations] = useState<Mitigation[]>([]);
+
+  const linkedMitigationsFromThreakpack = useMemo(() => {
+    return mitigationList.map(x => {
+      if (linkedMitigationIds.includes(x.id)) {
+        const metadata = getMetadata(x.metadata);
+        if (metadata[METADATA_KEY_SOURCE_THREAT_PACK] == threatPackId) {
+          return metadata[METADATA_KEY_SOURCE_THREAT_PACK_MITIGATION_CANDIDATE];
+        }
+      }
+
+      return undefined;
+    }).filter(x => !!x);
+  }, [mitigationList, linkedMitigationIds, threatPackId]);
+
+  useEffect(() => {
+    const setupMitigations = async () => {
+      if (threatPackId && threatPackThreatId) {
+        const mitigationCandidates = await getMitigationCandidates(threatPackId, threatPackThreatId);
+        setMitigations(mitigationCandidates);
+      } else {
+        setMitigations([]);
+      }
+    };
+
+    setupMitigations().catch(err => console.log('Error', err));
+  }, [threatPackId, threatPackThreatId, getMitigationCandidates]);
+
+  const items = useMemo(() => {
+    return mitigations.map(x => {
+      const metadata = getMetadata(x.metadata);
+      return {
+        ...x,
+        comments: metadata.Comments || '',
+      };
+    });
+  }, [mitigations]);
+
+  const colDef: ColumnDefinition<{
+    content: string;
+    comments: string;
+  }>[] = useMemo(() => [
+    {
+      id: 'content',
+      header: 'Mitigation',
+      cell: (data) => data.content,
+      minWidth: 400,
+      sortingField: 'content',
+    },
+    {
+      id: 'comments',
+      header: 'Comments',
+      cell: (data) => data.comments,
+      sortingField: 'comments',
+    },
+  ], []);
+
+  if (items.length === 0) {
+    return (<></>);
+  }
+
+  return (<Table
+    columnDefinitions={colDef}
+    actions={<SpaceBetween direction='horizontal' size='s'>
+      <Button
+        variant='primary'
+        disabled={selectedItems.length === 0}
+        onClick={() => onAddMitigationsFromMitigationCandidates(selectedItems, threatPackId)}
+      >
+        Add as mitigations
+      </Button>
+    </SpaceBetween>}
+    header="Mitigation Candidates"
+    headerVariant='h3'
+    variant='embedded'
+    items={items || []}
+    selectedItems={selectedItems}
+    onSelectionChange={({ detail }) => setSelectedItems([...detail.selectedItems])}
+    isItemDisabled={(item) => linkedMitigationsFromThreakpack.includes(item.id)}
+  />);
+};
+
+export default MitigationCandidates;