From acd4e0b31c64755c435410cbf6e0f9b28b7886ab Mon Sep 17 00:00:00 2001 From: Jessie Wei Date: Wed, 3 Jul 2024 11:41:55 +1000 Subject: [PATCH] chore: Update to not to use localstorage for ide-extension mode --- packages/threat-composer-app/src/index.tsx | 13 +-- .../assumptions/AssumptionList/index.tsx | 2 +- .../generic/ThemeProvider/index.tsx | 97 ++++++++++++++----- .../mitigations/MitigationList/index.tsx | 2 +- .../src/configs/localStorageKeys.ts | 3 +- .../src/contexts/GlobalSetupContext/index.tsx | 10 +- 6 files changed, 81 insertions(+), 46 deletions(-) diff --git a/packages/threat-composer-app/src/index.tsx b/packages/threat-composer-app/src/index.tsx index cc2f978..0d55768 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, 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( - + , diff --git a/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx b/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx index fca0e50..8ee1238 100644 --- a/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx +++ b/packages/threat-composer/src/components/assumptions/AssumptionList/index.tsx @@ -158,7 +158,7 @@ const AssumptionList: FC = () => { }, [saveAssumption, addAssumptionLinks]); - return ( + return ( diff --git a/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx b/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx index 093756a..2a91301 100644 --- a/packages/threat-composer/src/components/generic/ThemeProvider/index.tsx +++ b/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>; } -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(initialState); + useEffect(() => { + typeof props.densitiy !== 'undefined' && setDensity(props.densitiy); + }, [props.densitiy]); + useEffect(() => { + applyMode(theme); + }, [theme]); -const ThemeProvider: FC> = ({ + useEffect(() => { + applyDensity(density); + }, [density]); +}; + +const ThemeLocalStateProvider: FC> = ({ children, ...props }) => { - const [theme, setTheme] = useLocalStorageState('theme', { - defaultValue: props.theme || Mode.Light, - }); + const [theme, setTheme] = useState(props.theme || Mode.Light); const [density, setDensity] = useState(() => { if (props.densitiy === Density.Compact) { @@ -57,21 +65,45 @@ const ThemeProvider: FC> = ({ 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 ( + + {children} + + ); +}; - useEffect(() => { - applyMode(theme); - }, [theme]); +const ThemeLocalStorageProvider: FC> = ({ + children, + ...props +}) => { + const [theme, setTheme] = useLocalStorageState(LOCAL_STORAGE_KEY_THEME_MODE, { + defaultValue: props.theme || Mode.Light, + }); - useEffect(() => { - applyDensity(density); - }, [density]); + const [density, setDensity] = useLocalStorageState(LOCAL_STORAGE_KEY_THEME_DENSITY, { + defaultValue: props.densitiy === Density.Compact ? Density.Compact : Density.Comfortable, + }); + + useTheme(props, { + theme, + setTheme, + density, + setDensity, + }); return ( > = ({ ); }; +const initialState: ThemeContextApi = { + theme: Mode.Light, + density: Density.Comfortable, + setTheme: () => { }, + setDensity: () => { }, +}; + +const ThemeContext = createContext(initialState); + + +const ThemeProvider: FC> = ({ + appMode, + ...props +}) => { + return appMode === 'ide-extension' ? : ; +}; + export { Mode, Density, diff --git a/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx b/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx index e051cef..0fc3b37 100644 --- a/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx +++ b/packages/threat-composer/src/components/mitigations/MitigationList/index.tsx @@ -175,7 +175,7 @@ const MitigationList: FC = () => { }, [saveMitigation, addMitigationLinks, addAssumptionLinks]); - return ( + return ( diff --git a/packages/threat-composer/src/configs/localStorageKeys.ts b/packages/threat-composer/src/configs/localStorageKeys.ts index 6e892e6..7e9a476 100644 --- a/packages/threat-composer/src/configs/localStorageKeys.ts +++ b/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'; diff --git a/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx b/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx index 4c6fdcc..4db1b35 100644 --- a/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx +++ b/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 { 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 { - if (appMode !== 'ide-extension') { - window.localStorage.setItem(LOCAL_STORAGE_KEY_THEME, theme); - } - }, [appMode, theme]); - const [hasVisitBefore, setHasVisitBefore] = useLocalStorageState(LOCAL_STORAGE_KEY_NEW_VISIT_FLAG, { defaultValue: false, });