fix: fixed the workspace required errorin search #2384

awslabs · Feb 28, 2024 · 0ff9bc3 · 0ff9bc3
1 parent e94fee7
commit 0ff9bc3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/...d/src/components/queryEditor/iotSiteWiseQueryEditor/dataStreamSearch/dataStreamSearch.tsx b/...d/src/components/queryEditor/iotSiteWiseQueryEditor/dataStreamSearch/dataStreamSearch.tsx
@@ -24,7 +24,7 @@ export const DataStreamSearch = ({
   client,
 }: DataStreamSearchProps) => {
   const metricsRecorder = getPlugin('metricsRecorder');
-  const { control, handleSubmit } = useForm<SearchFields>({
+  const { control, handleSubmit, setValue } = useForm<SearchFields>({
     defaultValues: { workspace: null, searchQuery: '' },
   });
 
@@ -68,6 +68,7 @@ export const DataStreamSearch = ({
               control={control}
               client={client}
               OnGettingError={setIsError}
+              setValue={setValue}
             />
           </SpaceBetween>
         </Form>

diff --git a/...eryEditor/iotSiteWiseQueryEditor/dataStreamSearch/workspaceSelector/workspaceSelector.tsx b/...eryEditor/iotSiteWiseQueryEditor/dataStreamSearch/workspaceSelector/workspaceSelector.tsx
@@ -1,9 +1,11 @@
 import { type IoTTwinMakerClient } from '@aws-sdk/client-iottwinmaker';
 import FormField from '@cloudscape-design/components/form-field';
 import Select, { type SelectProps } from '@cloudscape-design/components/select';
+import { OptionDefinition } from '@cloudscape-design/components/internal/components/option/interfaces';
 import { type useQuery } from '@tanstack/react-query';
 import React, { useEffect } from 'react';
-import { Controller, type Control } from 'react-hook-form';
+import { Controller, type Control, UseFormSetValue } from 'react-hook-form';
+import { useLocalStorage } from 'react-use';
 
 import { useWorkspaces } from './useWorkspaces';
 import { WorkspaceOptionFactory } from './workspaceOptionFactory';
@@ -15,21 +17,48 @@ type TanstackStatusType = ReturnType<typeof useQuery>['status'];
 export interface WorkspaceSelectorProps {
   control: Control<SearchFields>;
   client: IoTTwinMakerClient;
+  setValue: UseFormSetValue<SearchFields>;
   OnGettingError: (isError: boolean) => void;
 }
 
 export const WorkspaceSelector = ({
   control,
   client,
+  setValue,
   OnGettingError,
 }: WorkspaceSelectorProps) => {
   const { workspaces, status } = useWorkspaces({ client });
   const workspaceOptions = createWorkspaceOptions(workspaces);
+  const [storedWorkspace, setStoredWorkspace] =
+    useLocalStorage<OptionDefinition | null>('storedWorkspace', null);
 
   useEffect(() => {
     OnGettingError(status === 'error');
   }, [status, OnGettingError]);
 
+  useEffect(() => {
+    setValue('workspace', storedWorkspace || workspaceOptions[0]);
+    if (workspaceOptions.length) {
+      const isStoredValueInOptions =
+        storedWorkspace &&
+        workspaceOptions.some(
+          (option: OptionDefinition) => option.value === storedWorkspace.value
+        );
+      if (!isStoredValueInOptions) {
+        setStoredWorkspace(workspaceOptions[0]);
+        setValue('workspace', workspaceOptions[0]);
+      }
+    }
+  }, [workspaceOptions, storedWorkspace, setValue, setStoredWorkspace]);
+
+  const onChangeHandler = (
+    detail: SelectProps.ChangeDetail,
+    onChange: (...event: unknown[]) => void
+  ) => {
+    setStoredWorkspace(detail.selectedOption);
+    onChange(detail.selectedOption);
+  };
+
   return (
     <Controller
       control={control}
@@ -45,7 +74,7 @@ export const WorkspaceSelector = ({
             disabled={status == 'error'}
             options={workspaceOptions}
             selectedOption={field.value}
-            onChange={({ detail }) => field.onChange(detail.selectedOption)}
+            onChange={({ detail }) => onChangeHandler(detail, field.onChange)}
             placeholder='Select a workspace'
             loadingText='Loading workspaces...'
             errorText='Failed to load workspaces.'