fix: Fix an issue where the import modal popup when switching workspa…

…ce (#40)
awslabs · Aug 30, 2023 · b6b631c · b6b631c
1 parent aa19dea
commit b6b631c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/packages/threat-composer/src/components/workspaces/LandingPage/index.tsx b/packages/threat-composer/src/components/workspaces/LandingPage/index.tsx
@@ -28,7 +28,7 @@ import SwitchToExample from '../../../assets/switch-to-example-workspace.gif';
 import { useGlobalSetupContext } from '../../../contexts';
 
 const LandingPage: FC = () => {
-  const { onShowImport, onDefineWorkload } = useGlobalSetupContext();
+  const { setFileImportModalVisible, onDefineWorkload } = useGlobalSetupContext();
   return (
     <ContentLayout
       header={
@@ -37,7 +37,7 @@ const LandingPage: FC = () => {
           description="A threat modeling tool to help humans to reduce time-to-value when threat modeling"
           actions={
             <SpaceBetween direction="horizontal" size="s">
-              <Button onClick={onShowImport}>Import existing</Button>
+              <Button onClick={() => setFileImportModalVisible(true)}>Import existing</Button>
               <Button variant="primary" onClick={onDefineWorkload}>
                 Define workload or feature
               </Button>

diff --git a/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx b/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx
@@ -20,7 +20,7 @@ import ButtonDropdown, { ButtonDropdownProps } from '@cloudscape-design/componen
 import { CancelableEventHandler, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import Select, { SelectProps } from '@cloudscape-design/components/select';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { FC, useMemo, useState, useCallback, PropsWithChildren, useEffect } from 'react';
+import { FC, useMemo, useState, useCallback, PropsWithChildren } from 'react';
 import {
   DEFAULT_WORKSPACE_ID,
   DEFAULT_WORKSPACE_LABEL,
@@ -51,7 +51,6 @@ const WorkspaceSelector: FC<PropsWithChildren<WorkspaceSelectorProps>> = ({
   enabledRemoveAll,
   filteredThreats,
 }) => {
-  const [fileImportModalVisible, setFileImportModalVisible] = useState(false);
   const [addWorkspaceModalVisible, setAddWorkspaceModalVisible] = useState(false);
   const [editWorkspaceModalVisible, setEditWorkspaceModalVisible] = useState(false);
   const [removeDataModalVisible, setRemoveDataModalVisible] = useState(false);
@@ -60,11 +59,14 @@ const WorkspaceSelector: FC<PropsWithChildren<WorkspaceSelectorProps>> = ({
 
   const { importData, exportAll, exportSelectedThreats } = useImportExport();
   const { removeData, deleteCurrentWorkspace } = useRemoveData();
-  const { composerMode, onPreview, onPreviewClose, onImported, showImportUpdate } = useGlobalSetupContext();
-
-  useEffect(() => {
-    showImportUpdate && setFileImportModalVisible(true);
-  }, [showImportUpdate]);
+  const {
+    composerMode,
+    onPreview,
+    onPreviewClose,
+    onImported,
+    fileImportModalVisible,
+    setFileImportModalVisible,
+  } = useGlobalSetupContext();
 
   const {
     currentWorkspace,

diff --git a/packages/threat-composer/src/contexts/GlobalSetupContext/context.ts b/packages/threat-composer/src/contexts/GlobalSetupContext/context.ts
@@ -13,26 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
-import { useContext, createContext } from 'react';
+import React, { useContext, createContext } from 'react';
 import { ComposerMode, DataExchangeFormat } from '../../customTypes';
 
 export interface GlobalSetupContextApi {
   hasVisitBefore: boolean;
   showInfoModal: () => void;
   composerMode: ComposerMode;
-  showImportUpdate: number;
   onPreview?: (content: DataExchangeFormat) => void;
   onPreviewClose?: () => void;
   onImported?: () => void;
-  onShowImport?: () => void;
   onDefineWorkload?: () => void;
+  fileImportModalVisible: boolean;
+  setFileImportModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const initialState: GlobalSetupContextApi = {
   hasVisitBefore: false,
   composerMode: 'Full',
   showInfoModal: () => { },
-  showImportUpdate: 0,
+  fileImportModalVisible: false,
+  setFileImportModalVisible: () => {},
 };
 
 export const GlobalSetupContext = createContext<GlobalSetupContextApi>(initialState);

diff --git a/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx b/packages/threat-composer/src/contexts/GlobalSetupContext/index.tsx
@@ -39,12 +39,13 @@ const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProvide
   onImported,
   onDefineWorkload,
 }) => {
+  const [fileImportModalVisible, setFileImportModalVisible] = useState(false);
+
   const [hasVisitBefore, setHasVisitBefore] = useLocalStorageState<boolean>(LOCAL_STORAGE_KEY_NEW_VISIT_FLAG, {
     defaultValue: false,
   });
 
   const [infoModalVisible, setInfoModalVisible] = useState(false);
-  const [showImportUpdate, setShowImportUpdate] = useState(0);
 
   useEffect(() => {
     if (!hasVisitBefore) {
@@ -61,8 +62,8 @@ const GlobalSetupContextProvider: FC<PropsWithChildren<GlobalSetupContextProvide
       onPreview,
       onPreviewClose,
       onImported,
-      showImportUpdate,
-      onShowImport: () => setShowImportUpdate(prev => prev+1),
+      fileImportModalVisible,
+      setFileImportModalVisible,
       onDefineWorkload,
     }}>
       {children}