chore: Update to not to use localstorage for ide-extension mode

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, LOCAL_STORAGE_KEY_THEME } from '@aws/threat-composer';
+import { ThemeProvider, Mode } from '@aws/threat-composer';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './containers/App';
@@ -28,18 +28,9 @@ let initialTheme = initialThemeString ?
   (initialThemeString === 'true' ? Mode.Dark : Mode.Light) :
   undefined;
 
-if (!initialTheme) {
-  //For other use cases, the value of theme selected by users will be kept in localstorage.
-  const localStorageThemeString = localStorage.getItem(LOCAL_STORAGE_KEY_THEME);
-
-  if (localStorageThemeString) {
-    initialTheme = localStorageThemeString === 'dark' ? Mode.Dark : Mode.Light;
-  }
-}
-
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider theme={initialTheme}>
+    <ThemeProvider theme={initialTheme} appMode={process.env.REACT_APP_APP_MODE || undefined}>
       <App />
     </ThemeProvider>
   </React.StrictMode>,

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

@@ -158,7 +158,7 @@ const AssumptionList: FC = () => {
 
   }, [saveAssumption, addAssumptionLinks]);
 
-  return (<ContentLayout title='Assumption list' counter={`(${filteredList.length})`}>
+  return (<ContentLayout title='Assumptions' counter={`(${filteredList.length})`}>
     <SpaceBetween direction='vertical' size='s'>
       <Container>
         <SpaceBetween direction='vertical' size='s'>

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

@@ -15,11 +15,13 @@
  ******************************************************************************************************************** */
 import { applyDensity, applyMode, Density, Mode } from '@cloudscape-design/global-styles';
 import { FC, createContext, useState, useEffect, useContext, PropsWithChildren } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
+import { LOCAL_STORAGE_KEY_THEME_MODE, LOCAL_STORAGE_KEY_THEME_DENSITY } from '../../../configs';
 
 import '@cloudscape-design/global-styles/index.css';
-import useLocalStorageState from 'use-local-storage-state';
 
 export interface ThemeProviderProps {
+  appMode?: string;
   theme?: Mode;
   densitiy?: Density;
 }
@@ -31,23 +33,29 @@ export interface ThemeContextApi {
   setDensity: React.Dispatch<React.SetStateAction<Density>>;
 }
 
-const initialState: ThemeContextApi = {
-  theme: Mode.Light,
-  density: Density.Comfortable,
-  setTheme: () => { },
-  setDensity: () => { },
-};
+const useTheme = (props: ThemeProviderProps, { theme, setTheme, density, setDensity }: ThemeContextApi) => {
+  useEffect(() => {
+    typeof props.theme !== 'undefined' && setTheme(props.theme);
+  }, [props.theme]);
 
-const ThemeContext = createContext<ThemeContextApi>(initialState);
+  useEffect(() => {
+    typeof props.densitiy !== 'undefined' && setDensity(props.densitiy);
+  }, [props.densitiy]);
 
+  useEffect(() => {
+    applyMode(theme);
+  }, [theme]);
 
-const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+  useEffect(() => {
+    applyDensity(density);
+  }, [density]);
+};
+
+const ThemeLocalStateProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
   ...props
 }) => {
-  const [theme, setTheme] = useLocalStorageState<Mode>('theme', {
-    defaultValue: props.theme || Mode.Light,
-  });
+  const [theme, setTheme] = useState<Mode>(props.theme || Mode.Light);
 
   const [density, setDensity] = useState<Density>(() => {
     if (props.densitiy === Density.Compact) {
@@ -57,21 +65,45 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
     return Density.Comfortable;
   });
 
-  useEffect(() => {
-    typeof props.theme !== 'undefined' && setTheme(props.theme);
-  }, [props.theme]);
+  useTheme(props, {
+    theme,
+    setTheme,
+    density,
+    setDensity,
+  });
 
-  useEffect(() => {
-    typeof props.densitiy !== 'undefined' && setDensity(props.densitiy);
-  }, [props.densitiy]);
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        density,
+        setTheme,
+        setDensity,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
 
-  useEffect(() => {
-    applyMode(theme);
-  }, [theme]);
+const ThemeLocalStorageProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+  children,
+  ...props
+}) => {
+  const [theme, setTheme] = useLocalStorageState<Mode>(LOCAL_STORAGE_KEY_THEME_MODE, {
+    defaultValue: props.theme || Mode.Light,
+  });
 
-  useEffect(() => {
-    applyDensity(density);
-  }, [density]);
+  const [density, setDensity] = useLocalStorageState<Density>(LOCAL_STORAGE_KEY_THEME_DENSITY, {
+    defaultValue: props.densitiy === Density.Compact ? Density.Compact : Density.Comfortable,
+  });
+
+  useTheme(props, {
+    theme,
+    setTheme,
+    density,
+    setDensity,
+  });
 
   return (
     <ThemeContext.Provider
@@ -87,6 +119,23 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   );
 };
 
+const initialState: ThemeContextApi = {
+  theme: Mode.Light,
+  density: Density.Comfortable,
+  setTheme: () => { },
+  setDensity: () => { },
+};
+
+const ThemeContext = createContext<ThemeContextApi>(initialState);
+
+
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+  appMode,
+  ...props
+}) => {
+  return appMode === 'ide-extension' ? <ThemeLocalStateProvider {...props} /> : <ThemeLocalStorageProvider {...props} />;
+};
+
 export {
   Mode,
   Density,

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

@@ -175,7 +175,7 @@ const MitigationList: FC = () => {
 
   }, [saveMitigation, addMitigationLinks, addAssumptionLinks]);
 
-  return (<ContentLayout title='Mitigation list' counter={`(${filteredList.length})`}>
+  return (<ContentLayout title='Mitigations' counter={`(${filteredList.length})`}>
     <SpaceBetween direction='vertical' size='s'>
       <Container>
         <SpaceBetween direction='vertical' size='s'>

packages/threat-composer/src/configs/localStorageKeys.ts

@@ -35,4 +35,5 @@ export const LOCAL_STORAGE_KEY_WORKSPACE_LIST_MIGRATION = 'ThreatStatementGenera
 export const LOCAL_STORAGE_KEY_THREATS_LIST_MIGRATION = 'ThreatStatementGenerator.threatListMigration';
 
 
-export const LOCAL_STORAGE_KEY_THEME = 'ThreatComposer.theme';
+export const LOCAL_STORAGE_KEY_THEME_MODE = 'ThreatComposer.theme.mode';
+export const LOCAL_STORAGE_KEY_THEME_DENSITY = 'ThreatComposer.theme.density';

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

@@ -20,7 +20,7 @@ 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, LOCAL_STORAGE_KEY_THEME } from '../../configs/localStorageKeys';
+import { LOCAL_STORAGE_KEY_NEW_VISIT_FLAG } from '../../configs/localStorageKeys';
 import { ComposerMode, AppMode } from '../../customTypes';
 import EventController from '../../utils/EventController';
 
@@ -50,7 +50,7 @@ const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProvide
   features,
 }) => {
   const [fileImportModalVisible, setFileImportModalVisible] = useState(false);
-  const { setTheme, setDensity, theme } = useThemeContext();
+  const { setTheme, setDensity } = useThemeContext();
 
   useEffect(() => {
     window.threatcomposer.applyDensity = (density?: string) => {
@@ -62,12 +62,6 @@ const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProvide
     };
   }, [setDensity, setTheme]);
 
-  useEffect(() => {
-    if (appMode !== 'ide-extension') {
-      window.localStorage.setItem(LOCAL_STORAGE_KEY_THEME, theme);
-    }
-  }, [appMode, theme]);
-
   const [hasVisitBefore, setHasVisitBefore] = useLocalStorageState<boolean>(LOCAL_STORAGE_KEY_NEW_VISIT_FLAG, {
     defaultValue: false,
   });