feat: Allow users to set status for mitigations and threats. Close #61. Close #126

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

@@ -14,9 +14,13 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import { MitigationList as MitigationListComponent } from '@aws/threat-composer';
+import { useLocation } from 'react-router-dom';
 
 const MitigationList = () => {
-  return <MitigationListComponent />;
+  const { state } = useLocation();
+  return <MitigationListComponent
+    initialFilter={state?.filter}
+  />;
 };
 
 export default MitigationList;

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

@@ -13,8 +13,8 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { WorkspaceHome as WorkspaceHomeComponent, ThreatStatementListFilter } from '@aws/threat-composer';
-import { ROUTE_APPLICATION_INFO, ROUTE_THREAT_EDITOR, ROUTE_THREAT_LIST } from '../../config/routes';
+import { WorkspaceHome as WorkspaceHomeComponent, ThreatStatementListFilter, MitigationListFilter } from '@aws/threat-composer';
+import { ROUTE_APPLICATION_INFO, ROUTE_MITIGATION_LIST, ROUTE_THREAT_EDITOR, ROUTE_THREAT_LIST } from '../../config/routes';
 import useNavigateView from '../../hooks/useNavigationView';
 
 const WorkspaceHome = () => {
@@ -33,6 +33,11 @@ const WorkspaceHome = () => {
         filter,
       } : undefined,
     })}
+    onMitigationListView={(filter?: MitigationListFilter) => handleNavigateView(ROUTE_MITIGATION_LIST, undefined, undefined, undefined, {
+      state: filter ? {
+        filter,
+      } : undefined,
+    })}
   />;
 };
 

packages/threat-composer-app/src/utils/convertToDocx/getMitigations.ts

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { Mitigation, MitigationLink, AssumptionLink, DataExchangeFormat, standardizeNumericId } from '@aws/threat-composer';
+import { Mitigation, MitigationLink, AssumptionLink, DataExchangeFormat, standardizeNumericId, mitigationStatus, STATUS_NOT_SET } from '@aws/threat-composer';
 import { Paragraph, HeadingLevel, TextRun, TableCell, TableRow } from 'docx';
 import Table from './components/Table';
 import getAnchorLink from './getAnchorLink';
@@ -64,7 +64,7 @@ const getDataRow = async (mitigation: Mitigation, data: DataExchangeFormat) => {
   const mitigationId = `M-${standardizeNumericId(mitigation.numericId)}`;
   const threatLinks = data.mitigationLinks?.filter(ml => ml.mitigationId === mitigation.id) || [];
   const assumptionLinks = data.assumptionLinks?.filter(al => al.linkedId === mitigation.id) || [];
-
+  const status = (mitigation.status && mitigationStatus.find(ms => ms.value === mitigation.status)?.label) || STATUS_NOT_SET;
   const renderedComents = await renderComment(mitigation.metadata);
 
   const tableRow = new TableRow({
@@ -81,6 +81,9 @@ const getDataRow = async (mitigation: Mitigation, data: DataExchangeFormat) => {
       }),
       getThreatLinksCell(threatLinks, data),
       getAssumptionLinksCell(assumptionLinks, data),
+      new TableCell({
+        children: [new Paragraph(status)],
+      }),
       new TableCell({
         children: renderedComents,
       }),
@@ -111,7 +114,7 @@ const getMitigations = async (
 
   const table = new Table({
     rows: [
-      getHeaderRow(['Mitigation Number', 'Mitigation', 'Threats Mitigating', 'Assumptions', 'Comments']),
+      getHeaderRow(['Mitigation Number', 'Mitigation', 'Threats Mitigating', 'Assumptions', 'Status', 'Comments']),
       ...dataRows,
     ],
   });

packages/threat-composer-app/src/utils/convertToDocx/getThreats.ts

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { AssumptionLink, DataExchangeFormat, MitigationLink, TemplateThreatStatement, standardizeNumericId } from '@aws/threat-composer';
+import { AssumptionLink, DataExchangeFormat, MitigationLink, TemplateThreatStatement, standardizeNumericId, threatStatus, STATUS_NOT_SET } from '@aws/threat-composer';
 import { Paragraph, HeadingLevel, TextRun, TableRow, TableCell } from 'docx';
 import Table from './components/Table';
 import getAnchorLink from './getAnchorLink';
@@ -64,6 +64,7 @@ const getDataRow = async (threat: TemplateThreatStatement, data: DataExchangeFor
   const assumptionLinks = data.assumptionLinks?.filter(al => al.linkedId === threat.id) || [];
   const threatId = `T-${standardizeNumericId(threat.numericId)}`;
   const comments = await renderComment(threat.metadata);
+  const status = (threat.status && threatStatus.find(x => x.value === threat.status)?.label) || STATUS_NOT_SET;
   const priority = threat.metadata?.find(m => m.key === 'Priority')?.value as string || '';
   const STRIDE = ((threat.metadata?.find(m => m.key === 'STRIDE')?.value || []) as string[]).join(', ');
 
@@ -81,6 +82,9 @@ const getDataRow = async (threat: TemplateThreatStatement, data: DataExchangeFor
       }),
       getMitigationLinksCell(mitigationLinks, data),
       getAssumptionLinksCell(assumptionLinks, data),
+      new TableCell({
+        children: [new Paragraph(status)],
+      }),
       new TableCell({
         children: [new Paragraph(priority)],
       }),
@@ -119,8 +123,8 @@ const getThreats = async (
   const table = new Table({
     rows: [
       getHeaderRow(
-        threatsOnly ? ['Threat Number', 'Threat', 'Comments', 'Priority', 'STRIDE', 'Comments']
-          : ['Threat Number', 'Threat', 'Mitigations', 'Assumptions', 'Priority', 'STRIDE', 'Comments']),
+        threatsOnly ? ['Threat Number', 'Threat', 'Status', 'Priority', 'STRIDE', 'Comments']
+          : ['Threat Number', 'Threat', 'Mitigations', 'Assumptions', 'Status', 'Priority', 'STRIDE', 'Comments']),
       ...dataRows,
     ],
   });

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

@@ -15,11 +15,12 @@
  ******************************************************************************************************************** */
 import SpaceBetween from '@cloudscape-design/components/space-between';
 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, AssumptionSchema } from '../../../customTypes';
-import GenericEntityCreationCard, { DEFAULT_ENTITY } from '../../generic/GenericEntityCreationCard';
+import getNewAssumption from '../../../utils/getNewAssumption';
+import getNewMitigation from '../../../utils/getNewMitigation';
+import GenericEntityCreationCard from '../../generic/GenericEntityCreationCard';
 import MitigationLinkView from '../../mitigations/MitigationLinkView';
 import ThreatLinkView from '../../threats/ThreatLinkView';
 
@@ -28,7 +29,7 @@ export interface AssumptionCreationCardProps {
 }
 
 const AssumptionCreationCard: FC<AssumptionCreationCardProps> = ({ onSave }) => {
-  const [editingEntity, setEditingEntity] = useState<Assumption>(DEFAULT_ENTITY);
+  const [editingEntity, setEditingEntity] = useState<Assumption>(getNewAssumption());
   const [linkedMitigationIds, setLinkedMitigationIds] = useState<string[]>([]);
   const [linkedThreatIds, setLinkedThreatIds] = useState<string[]>([]);
 
@@ -37,13 +38,13 @@ const AssumptionCreationCard: FC<AssumptionCreationCardProps> = ({ onSave }) =>
 
   const handleSave = useCallback(() => {
     onSave?.(editingEntity, linkedMitigationIds, linkedThreatIds);
-    setEditingEntity(DEFAULT_ENTITY);
+    setEditingEntity(getNewAssumption());
     setLinkedMitigationIds([]);
     setLinkedThreatIds([]);
   }, [editingEntity, linkedMitigationIds, linkedThreatIds]);
 
   const handleReset = useCallback(() => {
-    setEditingEntity(DEFAULT_ENTITY);
+    setEditingEntity(getNewAssumption());
     setLinkedMitigationIds([]);
     setLinkedThreatIds([]);
   }, []);
@@ -52,11 +53,7 @@ const AssumptionCreationCard: FC<AssumptionCreationCardProps> = ({ onSave }) =>
     if (mitigationList.find(m => m.id === mitigationIdOrNewMitigation)) {
       setLinkedMitigationIds(prev => [...prev, mitigationIdOrNewMitigation]);
     } else {
-      const newMitigation = saveMitigation({
-        numericId: -1,
-        content: mitigationIdOrNewMitigation,
-        id: DEFAULT_NEW_ENTITY_ID,
-      });
+      const newMitigation = saveMitigation(getNewMitigation(mitigationIdOrNewMitigation));
       setLinkedMitigationIds(prev => [...prev, newMitigation.id]);
     }
   }, [mitigationList, saveMitigation]);

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

@@ -14,10 +14,10 @@
   limitations under the License.
  ******************************************************************************************************************** */
 import { FC, useCallback, useEffect, useState } from 'react';
-import { DEFAULT_NEW_ENTITY_ID } from '../../../configs';
 import { useAssumptionLinksContext } from '../../../contexts/AssumptionLinksContext/context';
 import { useMitigationsContext } from '../../../contexts/MitigationsContext/context';
 import { AssumptionLink } from '../../../customTypes';
+import getNewMitigation from '../../../utils/getNewMitigation';
 import MitigationLinkView from '../../mitigations/MitigationLinkView';
 
 export interface AssumptionThreatLinkProps {
@@ -50,11 +50,7 @@ const AssumptionThreatLinkComponent: FC<AssumptionThreatLinkProps> = ({
         type: 'Mitigation',
       });
     } else {
-      const newMitigation = saveMitigation({
-        numericId: -1,
-        content: mitigationIdOrNewMitigation,
-        id: DEFAULT_NEW_ENTITY_ID,
-      });
+      const newMitigation = saveMitigation(getNewMitigation(mitigationIdOrNewMitigation));
       addAssumptionLink({
         type: 'Mitigation',
         linkedId: newMitigation.id,

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

@@ -30,22 +30,23 @@ const styles = {
 };
 
 export interface DashboardNumberProps {
-  displayedNumber: number;
+  featuredNumber: number;
+  totalNumber?: number;
   showWarning?: boolean;
   onLinkClicked?: LinkProps['onFollow'];
 }
 
 const DashboardNumber: FC<DashboardNumberProps> = ({
-  showWarning, displayedNumber, onLinkClicked,
+  showWarning, featuredNumber, totalNumber, onLinkClicked,
 }) => {
   return <div css={styles.link}>
-    {showWarning && displayedNumber > 0 ? (
+    {showWarning && (totalNumber ? featuredNumber < totalNumber : featuredNumber > 0) ? (
       <SpaceBetween direction="horizontal" size="xxs">
         <Link
           variant="awsui-value-large"
           href="#"
           onFollow={onLinkClicked}>
-          {displayedNumber}
+          {totalNumber ? `${featuredNumber}/${totalNumber}` : featuredNumber}
         </Link>
         <Icon name="status-warning" variant="warning" />
       </SpaceBetween>
@@ -54,7 +55,7 @@ const DashboardNumber: FC<DashboardNumberProps> = ({
         variant="awsui-value-large"
         href="#"
         onFollow={onLinkClicked}>
-        {displayedNumber}
+        {totalNumber ? `${featuredNumber}/${totalNumber}` : featuredNumber}
       </Link>
     )}
   </div>;

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

@@ -35,12 +35,6 @@ export interface GenericEntityCreationCardProps {
   validateData?: TextAreaProps['validateData'];
 }
 
-export const DEFAULT_ENTITY = {
-  id: DEFAULT_NEW_ENTITY_ID,
-  numericId: -1,
-  content: '',
-};
-
 const GenericEntityCreationCard: FC<GenericEntityCreationCardProps> = ({
   editingEntity,
   setEditingEntity,

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

@@ -0,0 +1,72 @@
+/** *******************************************************************************************************************
+  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.
+ ******************************************************************************************************************** */
+/** @jsxImportSource @emotion/react */
+import Badge, { BadgeProps } from '@cloudscape-design/components/badge';
+import { SelectProps } from '@cloudscape-design/components/select';
+import * as awsui from '@cloudscape-design/design-tokens';
+import { css } from '@emotion/react';
+import { FC, useMemo, useState, useRef } from 'react';
+import StatusSelector, { StatusSelectorProps } from '../StatusSelector';
+
+export interface StatusBadgeProps extends Omit<StatusSelectorProps, 'showLabel'> {
+  statusColorMapping: {
+    [status: string]: BadgeProps['color'];
+  };
+}
+
+const StatusBadge: FC<StatusBadgeProps> = ({
+  selectedOption,
+  setSelectedOption,
+  options,
+  statusColorMapping,
+}) => {
+  const ref = useRef<SelectProps.Ref>();
+
+  const [editMode, setEditMode] = useState(false);
+
+  const editor = useMemo(() => {
+    return <StatusSelector
+      ref={ref}
+      showLabel={false}
+      options={options}
+      selectedOption={selectedOption}
+      setSelectedOption={setSelectedOption}
+      onBlur={() => setEditMode(false)}
+    />;
+  }, [options, selectedOption, setSelectedOption]);
+
+  return <div>{editMode ? (editor) :
+    (<button
+      onClick={() => {
+        setEditMode(true);
+        setTimeout(() => ref.current?.focus(), 200);
+      }}
+      css={css`
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        paddingBottom: ${awsui.spaceScaledXxs};
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;
+        verticalAlign: middle;
+      `}>
+      <Badge color={statusColorMapping[selectedOption || 'NotSet'] || 'grey'}>{selectedOption && options.find(x => x.value === selectedOption)?.label || 'Status Not Set'}</Badge>
+    </button>)}</div>;
+};
+
+export default StatusBadge;

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

@@ -0,0 +1,55 @@
+/** *******************************************************************************************************************
+  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 FormField from '@cloudscape-design/components/form-field';
+import Select, { SelectProps } from '@cloudscape-design/components/select';
+import React, { FC } from 'react';
+
+export interface StatusSelectorProps {
+  options: SelectProps.Option[];
+  selectedOption?: string;
+  setSelectedOption?: (option: string) => void;
+  showLabel?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  ref?: React.ForwardedRef<any>;
+}
+
+const StatusSelector: FC<StatusSelectorProps> = React.forwardRef<SelectProps.Ref, StatusSelectorProps>(({
+  options,
+  selectedOption,
+  setSelectedOption,
+  showLabel = true,
+  onFocus,
+  onBlur,
+}, ref) => {
+  return (<FormField
+    label={showLabel ? 'Status' : undefined}
+  >
+    <Select
+      ref={ref}
+      selectedOption={(selectedOption && options?.find(x => x.value === selectedOption)) || null}
+      onChange={({ detail }) =>
+        detail.selectedOption.value && setSelectedOption?.(detail.selectedOption.value)
+      }
+      options={options}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      placeholder='Select status'
+    />
+  </FormField>);
+});
+
+export default StatusSelector;