From 8035707de0036129fe30b4cec3d02b17ff51b4e3 Mon Sep 17 00:00:00 2001
From: Jessie Wei <jessieweiyi@gmail.com>
Date: Mon, 19 Feb 2024 09:56:49 +1100
Subject: [PATCH 1/4] chore: Set initial theme as per prefers-color-scheme
 system settings

---
 .../threat-composer-app/public/index.html     |   9 ++
 .../src/components/NavHeader/index.tsx        |   4 +-
 .../src/config/searchParams.ts                |   1 -
 .../src/containers/App/index.tsx              |   1 +
 packages/threat-composer-app/src/index.tsx    |  10 +-
 .../threat-composer/.storybook/preview.tsx    |  13 ++-
 .../generic/ThemeProvider/index.tsx           | 108 ++++++++++++++++++
 .../threat-composer/src/components/index.ts   |   2 +
 .../src/contexts/GlobalSetupContext/index.tsx |   4 +-
 9 files changed, 137 insertions(+), 15 deletions(-)
 create mode 100644 packages/threat-composer/src/components/generic/ThemeProvider/index.tsx

diff --git a/packages/threat-composer-app/public/index.html b/packages/threat-composer-app/public/index.html
index 0922e6dd..558acda5 100644
--- a/packages/threat-composer-app/public/index.html
+++ b/packages/threat-composer-app/public/index.html
@@ -9,6 +9,15 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="threat-composer" />
 
+  <style>
+    @media (prefers-color-scheme: dark) { 
+        html { background-color: #16191f; } 
+    }
+    @media (prefers-color-scheme: light) { 
+        html { background-color: #f2f3f3; } 
+    }
+ </style>
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/packages/threat-composer-app/src/components/NavHeader/index.tsx b/packages/threat-composer-app/src/components/NavHeader/index.tsx
index 870c0417..18703e43 100644
--- a/packages/threat-composer-app/src/components/NavHeader/index.tsx
+++ b/packages/threat-composer-app/src/components/NavHeader/index.tsx
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { useNorthStarThemeContext } from '@aws-northstar/ui/components/NorthStarThemeProvider';
+import { useThemeContext } from '@aws/threat-composer';
 import TopNavigation, { TopNavigationProps } from '@cloudscape-design/components/top-navigation';
 import { Mode, Density } from '@cloudscape-design/global-styles';
 import { FC, useMemo } from 'react';
@@ -40,7 +40,7 @@ export interface NavHeaderProps extends Partial<TopNavigationProps> {
  * Top Navigation Header displayed on AppLayout.
  */
 const NavHeader: FC<NavHeaderProps> = ({ title, href, logo, ...props }) => {
-  const { theme, setTheme, density, setDensity } = useNorthStarThemeContext();
+  const { theme, setTheme, density, setDensity } = useThemeContext();
   const utilities: TopNavigationProps.Utility[] = useMemo(() => {
     const menu: TopNavigationProps.Utility[] = [
       {
diff --git a/packages/threat-composer-app/src/config/searchParams.ts b/packages/threat-composer-app/src/config/searchParams.ts
index 85b40a05..2d3b7504 100644
--- a/packages/threat-composer-app/src/config/searchParams.ts
+++ b/packages/threat-composer-app/src/config/searchParams.ts
@@ -13,6 +13,5 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-export const SEARCH_PARAM_THEME = 'theme';
 export const SEARCH_PARAM_MODE = 'mode';
 export const SEARCH_PARAM_FEATURES = 'features';
diff --git a/packages/threat-composer-app/src/containers/App/index.tsx b/packages/threat-composer-app/src/containers/App/index.tsx
index 519643ac..8bdcf29f 100644
--- a/packages/threat-composer-app/src/containers/App/index.tsx
+++ b/packages/threat-composer-app/src/containers/App/index.tsx
@@ -30,6 +30,7 @@ const App: FC = () => {
   const [searchParams] = useSearchParams();
   const mode = searchParams.get(SEARCH_PARAM_MODE);
   const composerMode = mode || DEFAULT_MODE || 'Full';
+
   return composerMode === 'ThreatsOnly' || composerMode === 'EditorOnly' ? (
     <Standalone composeMode={composerMode} />
   ) : (
diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx
index 94676b60..6cf4023e 100644
--- a/packages/threat-composer-app/src/index.tsx
+++ b/packages/threat-composer-app/src/index.tsx
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import NorthStarThemeProvider from '@aws-northstar/ui/components/NorthStarThemeProvider';
+import { ThemeProvider } from '@aws/threat-composer';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
@@ -26,11 +26,11 @@ const Router = isMemoryRouterUsed() ? MemoryRouter : BrowserRouter;
 
 ReactDOM.render(
   <React.StrictMode>
-    <Router>
-      <NorthStarThemeProvider>
+    <ThemeProvider themeDetectionEnabled>
+      <Router>
         <App />
-      </NorthStarThemeProvider>
-    </Router>
+      </Router>
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );
diff --git a/packages/threat-composer/.storybook/preview.tsx b/packages/threat-composer/.storybook/preview.tsx
index 4c9daef6..686b039a 100644
--- a/packages/threat-composer/.storybook/preview.tsx
+++ b/packages/threat-composer/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import type { Preview } from "@storybook/react";
 import { Mode } from '@cloudscape-design/global-styles';
-import NorthStarThemeProvider from '@aws-northstar/ui/components/NorthStarThemeProvider';
+import ThemeProvider from '../src/components/generic/ThemeProvider';
 
 const preview: Preview = {
   parameters: {
@@ -17,11 +17,11 @@ const preview: Preview = {
       values: [
         {
           name: 'light',
-          value: '#ffffff',
+          value: '#f2f3f3',
         },
         {
           name: 'dark',
-          value: '#0f1b2a',
+          value: '#16191f',
         },
       ],
     },
@@ -36,8 +36,11 @@ const preview: Preview = {
         matchColorMode && setColorMode(matchColorMode);
       }, [args.globals.backgrounds?.value]);
 
-      return (<NorthStarThemeProvider theme={colorMode === 'light' ? Mode.Light : Mode.Dark}>
-        <Story /></NorthStarThemeProvider>);
+      return (
+        <ThemeProvider theme={colorMode === 'light' ? Mode.Light : Mode.Dark}>
+          <Story />
+        </ThemeProvider>
+      );
     }
   ]
 };
diff --git a/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx b/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx
new file mode 100644
index 00000000..c72c743a
--- /dev/null
+++ b/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx
@@ -0,0 +1,108 @@
+/** *******************************************************************************************************************
+  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 { applyDensity, applyMode, Density, Mode } from '@cloudscape-design/global-styles';
+import { FC, createContext, useState, useEffect, useContext, PropsWithChildren } from 'react';
+import useMediaQuery from '../../../hooks/useMediaQuery';
+
+import '@cloudscape-design/global-styles/index.css';
+
+export interface ThemeProviderProps {
+  themeDetectionEnabled?: boolean;
+  theme?: Mode;
+  densitiy?: Density;
+}
+
+export interface ThemeContextApi {
+  theme: Mode;
+  density: Density;
+  setTheme: React.Dispatch<React.SetStateAction<Mode>>;
+  setDensity: React.Dispatch<React.SetStateAction<Density>>;
+}
+
+const initialState: ThemeContextApi = {
+  theme: Mode.Light,
+  density: Density.Comfortable,
+  setTheme: () => { },
+  setDensity: () => { },
+};
+
+const ThemeContext = createContext<ThemeContextApi>(initialState);
+
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+  themeDetectionEnabled = false,
+  children,
+  ...props
+}) => {
+  const isUseDarkTheme = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const [theme, setTheme] = useState<Mode>(() => {
+    if (props.theme === Mode.Dark || ( isUseDarkTheme && themeDetectionEnabled)) {
+      return Mode.Dark;
+    }
+
+    return Mode.Light;
+  });
+
+  const [density, setDensity] = useState<Density>(() => {
+    if (props.densitiy === Density.Compact) {
+      return Density.Compact;
+    }
+
+    return Density.Comfortable;
+  });
+
+  useEffect(() => {
+    themeDetectionEnabled && setTheme(isUseDarkTheme ? Mode.Dark : Mode.Light);
+  }, [themeDetectionEnabled && isUseDarkTheme]);
+
+  useEffect(() => {
+    typeof props.theme !== 'undefined' && setTheme(props.theme);
+  }, [props.theme]);
+
+  useEffect(() => {
+    typeof props.densitiy !== 'undefined' && setDensity(props.densitiy);
+  }, [props.densitiy]);
+
+  useEffect(() => {
+    applyMode(theme);
+  }, [theme]);
+
+  useEffect(() => {
+    applyDensity(density);
+  }, [density]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        density,
+        setTheme,
+        setDensity,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export {
+  Mode,
+  Density,
+};
+
+export const useThemeContext = () => useContext(ThemeContext);
+
+export default ThemeProvider;
\ No newline at end of file
diff --git a/packages/threat-composer/src/components/index.ts b/packages/threat-composer/src/components/index.ts
index 61eafc7b..81ec1f02 100644
--- a/packages/threat-composer/src/components/index.ts
+++ b/packages/threat-composer/src/components/index.ts
@@ -28,3 +28,5 @@ export { default as ThreatPacksComponent } from './workspaces/ThreatPacks';
 export { default as ThreatPackComponent } from './workspaces/ThreatPack';
 export { default as MitigationPacksComponent } from './workspaces/MitigationPacks';
 export { default as MitigationPackComponent } from './workspaces/MitigationPack';
+export { default as ThemeProvider } from './generic/ThemeProvider';
+export * from './generic/ThemeProvider';
\ No newline at end of file
diff --git a/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx b/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx
index 855b46b6..047e9162 100644
--- a/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx
+++ b/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx
@@ -14,11 +14,11 @@
   limitations under the License.
  ******************************************************************************************************************** */
 /** @jsxImportSource @emotion/react */
-import { useNorthStarThemeContext } from '@aws-northstar/ui';
 import { Mode, 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 { useThemeContext } from '../../components/generic/ThemeProvider';
 import InfoModal from '../../components/global/InfoModal';
 import { LOCAL_STORAGE_KEY_NEW_VISIT_FLAG } from '../../configs/localStorageKeys';
 import { ComposerMode, DataExchangeFormat } from '../../customTypes';
@@ -56,7 +56,7 @@ const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProvide
   onDefineWorkload,
 }) => {
   const [fileImportModalVisible, setFileImportModalVisible] = useState(false);
-  const { setTheme, setDensity } = useNorthStarThemeContext();
+  const { setTheme, setDensity } = useThemeContext();
 
   useEffect(() => {
     window.threatcomposer.applyDensity = (density?: string) => {

From d2ccf6ad5053b9469b7e2e3af03342ab84f1866b Mon Sep 17 00:00:00 2001
From: Jessie Wei <jessieweiyi@gmail.com>
Date: Wed, 21 Feb 2024 07:08:58 +1100
Subject: [PATCH 2/4] chore: Support usage of html meta tag to set up initial
 theme mode

---
 packages/threat-composer-app/src/index.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx
index 6cf4023e..b8951522 100644
--- a/packages/threat-composer-app/src/index.tsx
+++ b/packages/threat-composer-app/src/index.tsx
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { ThemeProvider } from '@aws/threat-composer';
+import { ThemeProvider, Mode, APP_MODE_IDE_EXTENSION } from '@aws/threat-composer';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
@@ -24,9 +24,21 @@ import isMemoryRouterUsed from './utils/isMemoryRouterUsed';
 
 const Router = isMemoryRouterUsed() ? MemoryRouter : BrowserRouter;
 
+const initialThemeString = (document.querySelector('meta[name="dark-mode"]') as HTMLMetaElement)?.content;
+
+console.log(document.querySelector('meta[name="dark-mode"]'), initialThemeString);
+
+const initialTheme = initialThemeString ?
+  (initialThemeString === 'true' ? Mode.Dark : Mode.Light) :
+  undefined;
+
+// Notes: For the IDE Extension app, the theme is set using html meta tag.
+// Disable the theme detection.
+const themeDetectionEnabled = (process.env.REACT_APP_APP_MODE !== APP_MODE_IDE_EXTENSION);
+
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider themeDetectionEnabled>
+    <ThemeProvider themeDetectionEnabled={themeDetectionEnabled} theme={initialTheme}>
       <Router>
         <App />
       </Router>

From 20660ca2adc3ee869ee022706888dea194cb59cb Mon Sep 17 00:00:00 2001
From: Jessie Wei <jessieweiyi@gmail.com>
Date: Fri, 23 Feb 2024 14:01:24 +1100
Subject: [PATCH 3/4] chore: Remove console.log

---
 packages/threat-composer-app/src/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx
index b8951522..4ee16d5c 100644
--- a/packages/threat-composer-app/src/index.tsx
+++ b/packages/threat-composer-app/src/index.tsx
@@ -26,8 +26,6 @@ const Router = isMemoryRouterUsed() ? MemoryRouter : BrowserRouter;
 
 const initialThemeString = (document.querySelector('meta[name="dark-mode"]') as HTMLMetaElement)?.content;
 
-console.log(document.querySelector('meta[name="dark-mode"]'), initialThemeString);
-
 const initialTheme = initialThemeString ?
   (initialThemeString === 'true' ? Mode.Dark : Mode.Light) :
   undefined;

From 01c31882b48bfd6ece41e878dceae877f24402ac Mon Sep 17 00:00:00 2001
From: Jessie Wei <jessieweiyi@gmail.com>
Date: Mon, 26 Feb 2024 15:26:30 +1100
Subject: [PATCH 4/4] chore: Remove the auto theme detection

---
 packages/threat-composer-app/public/index.html    |  9 ---------
 packages/threat-composer-app/src/index.tsx        |  8 ++------
 .../components/generic/ThemeProvider/index.tsx    | 15 +--------------
 .../components/generic/WindowExporter/index.tsx   |  4 ++--
 .../src/hooks/useExportImport/index.ts            |  3 +--
 5 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/threat-composer-app/public/index.html b/packages/threat-composer-app/public/index.html
index 558acda5..0922e6dd 100644
--- a/packages/threat-composer-app/public/index.html
+++ b/packages/threat-composer-app/public/index.html
@@ -9,15 +9,6 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="threat-composer" />
 
-  <style>
-    @media (prefers-color-scheme: dark) { 
-        html { background-color: #16191f; } 
-    }
-    @media (prefers-color-scheme: light) { 
-        html { background-color: #f2f3f3; } 
-    }
- </style>
-
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx
index 4ee16d5c..75f2c5b7 100644
--- a/packages/threat-composer-app/src/index.tsx
+++ b/packages/threat-composer-app/src/index.tsx
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { ThemeProvider, Mode, APP_MODE_IDE_EXTENSION } from '@aws/threat-composer';
+import { ThemeProvider, Mode } from '@aws/threat-composer';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
@@ -30,13 +30,9 @@ const initialTheme = initialThemeString ?
   (initialThemeString === 'true' ? Mode.Dark : Mode.Light) :
   undefined;
 
-// Notes: For the IDE Extension app, the theme is set using html meta tag.
-// Disable the theme detection.
-const themeDetectionEnabled = (process.env.REACT_APP_APP_MODE !== APP_MODE_IDE_EXTENSION);
-
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider themeDetectionEnabled={themeDetectionEnabled} theme={initialTheme}>
+    <ThemeProvider theme={initialTheme}>
       <Router>
         <App />
       </Router>
diff --git a/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx b/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx
index c72c743a..6673588c 100644
--- a/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx
+++ b/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx
@@ -15,12 +15,10 @@
  ******************************************************************************************************************** */
 import { applyDensity, applyMode, Density, Mode } from '@cloudscape-design/global-styles';
 import { FC, createContext, useState, useEffect, useContext, PropsWithChildren } from 'react';
-import useMediaQuery from '../../../hooks/useMediaQuery';
 
 import '@cloudscape-design/global-styles/index.css';
 
 export interface ThemeProviderProps {
-  themeDetectionEnabled?: boolean;
   theme?: Mode;
   densitiy?: Density;
 }
@@ -42,18 +40,11 @@ const initialState: ThemeContextApi = {
 const ThemeContext = createContext<ThemeContextApi>(initialState);
 
 const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
-  themeDetectionEnabled = false,
   children,
   ...props
 }) => {
-  const isUseDarkTheme = useMediaQuery('(prefers-color-scheme: dark)');
-
   const [theme, setTheme] = useState<Mode>(() => {
-    if (props.theme === Mode.Dark || ( isUseDarkTheme && themeDetectionEnabled)) {
-      return Mode.Dark;
-    }
-
-    return Mode.Light;
+    return props.theme || Mode.Light;
   });
 
   const [density, setDensity] = useState<Density>(() => {
@@ -64,10 +55,6 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
     return Density.Comfortable;
   });
 
-  useEffect(() => {
-    themeDetectionEnabled && setTheme(isUseDarkTheme ? Mode.Dark : Mode.Light);
-  }, [themeDetectionEnabled && isUseDarkTheme]);
-
   useEffect(() => {
     typeof props.theme !== 'undefined' && setTheme(props.theme);
   }, [props.theme]);
diff --git a/packages/threat-composer/src/components/generic/WindowExporter/index.tsx b/packages/threat-composer/src/components/generic/WindowExporter/index.tsx
index 6cc2d848..4677ea09 100644
--- a/packages/threat-composer/src/components/generic/WindowExporter/index.tsx
+++ b/packages/threat-composer/src/components/generic/WindowExporter/index.tsx
@@ -15,7 +15,7 @@
  ******************************************************************************************************************** */
 import { useCallback, FC, PropsWithChildren, useEffect } from 'react';
 import { useWorkspacesContext } from '../../../contexts';
-import useExportImport from '../../../hooks/useExportImport';
+import useExportImport, { PLACEHOLDER_EXCHANGE_DATA } from '../../../hooks/useExportImport';
 import useRemoveData from '../../../hooks/useRemoveData';
 
 /**
@@ -34,7 +34,7 @@ const WindowExporter: FC<PropsWithChildren<{}>> = ({ children }) => {
 
   const setWorkspaceData = useCallback(
     async (data: any) => {
-      const parsedData = parseImportedData(data);
+      const parsedData = parseImportedData(data || PLACEHOLDER_EXCHANGE_DATA);
       await importData(parsedData);
     },
     [importData],
diff --git a/packages/threat-composer/src/hooks/useExportImport/index.ts b/packages/threat-composer/src/hooks/useExportImport/index.ts
index fea164a1..24f6f321 100644
--- a/packages/threat-composer/src/hooks/useExportImport/index.ts
+++ b/packages/threat-composer/src/hooks/useExportImport/index.ts
@@ -32,11 +32,10 @@ import recalculateThreatData from '../../utils/recalculateThreatData';
 import sanitizeHtml from '../../utils/sanitizeHtml';
 import validateData from '../../utils/validateData';
 
-const PLACEHOLDER_SCHEMA_VERSION = 0;
 const SCHEMA_VERSION = 1.0;
 
 export const PLACEHOLDER_EXCHANGE_DATA = {
-  schema: PLACEHOLDER_SCHEMA_VERSION,
+  schema: SCHEMA_VERSION,
 };
 
 export const PLACEHOLDER_EXCHANGE_DATA_FOR_WORKSPACE = {