chore: Support applyTheme from window API (#73)

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

@@ -15,29 +15,8 @@
  ******************************************************************************************************************** */
 import { useCallback, FC, PropsWithChildren, useEffect } from 'react';
 import { useWorkspacesContext } from '../../../contexts';
-import { ThreatComposerNamespace } from '../../../customTypes/dataExchange';
 import useExportImport from '../../../hooks/useExportImport';
 import useRemoveData from '../../../hooks/useRemoveData';
-import EventController from '../../../utils/EventController';
-
-declare global {
-  interface Window {
-    threatcomposer: ThreatComposerNamespace;
-  }
-}
-
-const stringifyWorkspaceData = (data: any) => {
-  return JSON.stringify(data, null, 2);
-};
-
-const eventController = new EventController();
-
-window.threatcomposer = {
-  stringifyWorkspaceData,
-  addEventListener: (eventName, eventHandler) =>
-    eventController.addEventListener(eventName, eventHandler),
-  dispatchEvent: (event) => eventController.dispatchEvent(event),
-};
 
 /**
  * Export threat-composer functionalities via window object.

packages/threat-composer/src/components/report/ThreatModel/components/ThreatModelView/index.tsx

@@ -108,22 +108,22 @@ const ThreatModelView: FC<ThreatModelViewProps> = ({
   const getNextStepButtons = useCallback(() => {
     const buttons: ReactNode[] = [];
     if (!hasContentDetails?.applicationInfo) {
-      buttons.push(<Button onClick={props.onApplicationInfoView}>Add Application Info</Button>);
+      buttons.push(<Button key='addApplicationInfo' onClick={props.onApplicationInfoView}>Add Application Info</Button>);
     }
     if (!hasContentDetails?.architecture) {
-      buttons.push(<Button onClick={props.onArchitectureView}>Add Architecture</Button>);
+      buttons.push(<Button key='addArchitecture' onClick={props.onArchitectureView}>Add Architecture</Button>);
     }
     if (!hasContentDetails?.dataflow) {
-      buttons.push(<Button onClick={props.onDataflowView}>Add Dataflow</Button>);
+      buttons.push(<Button key='addDataflow' onClick={props.onDataflowView}>Add Dataflow</Button>);
     }
     if (!hasContentDetails?.assumptions) {
-      buttons.push(<Button onClick={props.onAssumptionListView}>Add Assumptions</Button>);
+      buttons.push(<Button key='addAssumptions' onClick={props.onAssumptionListView}>Add Assumptions</Button>);
     }
     if (!hasContentDetails?.threats) {
-      buttons.push(<Button onClick={() => props.onThreatListView?.()}>Add Threats</Button>);
+      buttons.push(<Button key='addThreats' onClick={() => props.onThreatListView?.()}>Add Threats</Button>);
     }
-    if (!hasContentDetails?.threats) {
-      buttons.push(<Button onClick={props.onMitigationListView}>Add Mitigations</Button>);
+    if (!hasContentDetails?.mitigations) {
+      buttons.push(<Button key='addMitigations' onClick={props.onMitigationListView}>Add Mitigations</Button>);
     }
     const len = buttons.length;
     return buttons.flatMap((b, index) => index === len - 1 ? <Box>{b}</Box> : [b, <Box fontWeight="bold" css={styles.text}>or</Box>]);

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

@@ -14,12 +14,14 @@
   limitations under the License.
  ******************************************************************************************************************** */
 /** @jsxImportSource @emotion/react */
+import { applyMode as applyCloudscapeMode, Mode, applyDensity as applyCloudscapeDensity, Density } from '@cloudscape-design/global-styles';
 import { FC, PropsWithChildren, useState, useEffect } from 'react';
 import useLocalStorageState from 'use-local-storage-state';
 import { GlobalSetupContext, useGlobalSetupContext } from './context';
 import InfoModal from '../../components/global/InfoModal';
 import { LOCAL_STORAGE_KEY_NEW_VISIT_FLAG } from '../../configs/localStorageKeys';
 import { ComposerMode, DataExchangeFormat } from '../../customTypes';
+import EventController from '../../utils/EventController';
 
 import '@cloudscape-design/global-styles/index.css';
 
@@ -32,6 +34,30 @@ export interface GlobalSetupContextProviderProps {
   onDefineWorkload?: () => void;
 }
 
+const stringifyWorkspaceData = (data: any) => {
+  return JSON.stringify(data, null, 2);
+};
+
+const applyDensity = (density?: string) => {
+  applyCloudscapeDensity(density === 'compact' ? Density.Compact : Density.Comfortable);
+};
+
+const applyTheme = (theme?: string) => {
+  applyCloudscapeMode(theme === 'dark' ? Mode.Dark : Mode.Light);
+};
+
+const eventController = new EventController();
+
+window.threatcomposer = {
+  stringifyWorkspaceData,
+  addEventListener: (eventName, eventHandler) =>
+    eventController.addEventListener(eventName, eventHandler),
+  dispatchEvent: (event) => eventController.dispatchEvent(event),
+  applyDensity,
+  applyTheme,
+};
+
+
 const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProviderProps>> = ({
   children,
   composerMode = 'Full',

packages/threat-composer/src/customTypes/dataExchange.ts

@@ -75,4 +75,6 @@ export interface ThreatComposerNamespace {
   renameWorkspace?: (id: string, newWorkspaceName: string) => Promise<void>;
   dispatchEvent: (event: CustomEvent) => void;
   addEventListener: (eventName: string, eventHandler: EventHandler) => void;
+  applyDensity: (density?: string) => void;
+  applyTheme: (theme?: string) => void;
 }

packages/threat-composer/src/customTypes/index.ts

@@ -26,4 +26,5 @@ export * from './dataflow';
 export * from './dataExchange';
 export * from './events';
 export * from './components';
-export * from './referencePacks';
+export * from './referencePacks';
+export * from './windowAPI';

packages/threat-composer/src/customTypes/windowAPI.ts

@@ -0,0 +1,22 @@
+/** *******************************************************************************************************************
+  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 { ThreatComposerNamespace } from './dataExchange';
+
+declare global {
+  interface Window {
+    threatcomposer: ThreatComposerNamespace;
+  }
+}