fix: resource selector issues (#2298)

* fix: if user search, ignore current value for resource selector * fix: pass in the id of the resource to resource selector * fix: show animation when refetching
flanksource · Sep 20, 2024 · ff413b2 · ff413b2
1 parent 99d4f8b
commit ff413b2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx b/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
@@ -55,21 +55,29 @@ export default function FormikResourceSelectorDropdown({
   const resourceSelector: SearchResourcesRequest = useMemo(
     () => ({
       checks: checkResourceSelector
-        ? [...checkResourceSelector.map((r) => ({ ...r, search: searchText }))]
+        ? [
+            ...checkResourceSelector.map((r) => ({
+              ...r,
+              search: searchText,
+              id: searchText ? undefined : r.id
+            }))
+          ]
         : undefined,
       components: componentResourceSelector
         ? [
             ...componentResourceSelector.map((r) => ({
               ...r,
-              search: searchText
+              search: searchText,
+              id: searchText ? undefined : r.id
             }))
           ]
         : undefined,
       configs: configResourceSelector
         ? [
             ...configResourceSelector.map((r) => ({
               ...r,
-              search: searchText
+              search: searchText,
+              id: searchText ? undefined : r.id
             }))
           ]
         : undefined
@@ -82,14 +90,17 @@ export default function FormikResourceSelectorDropdown({
     ]
   );
 
-  const { data: options = [], isLoading } = useQuery({
+  const {
+    data: options = [],
+    isLoading,
+    isRefetching
+  } = useQuery({
     queryKey: ["searchResources", resourceSelector],
     queryFn: () => searchResources(resourceSelector),
     enabled:
       configResourceSelector !== undefined ||
       componentResourceSelector !== undefined ||
-      checkResourceSelector !== undefined ||
-      (field.value === undefined && field.value === "" && field.value === null),
+      checkResourceSelector !== undefined, // || (field.value === undefined && field.value === "" && field.value === null),
     select: (data) => {
       if (data?.checks) {
         return data.checks.map(
@@ -148,6 +159,7 @@ export default function FormikResourceSelectorDropdown({
         });
       }
     },
+    keepPreviousData: true,
     staleTime: 0,
     cacheTime: 0
   });
@@ -159,10 +171,10 @@ export default function FormikResourceSelectorDropdown({
   const handleInputChange = (inputText: string, meta: InputActionMeta) => {
     if (meta.action !== "input-blur" && meta.action !== "menu-close") {
       setInputText(inputText);
-      if (inputText === "" || field.value) {
-        console.log("Not searching");
-        return;
-      }
+      // if (inputText === "" || field.value) {
+      //   console.log("Not searching");
+      //   return;
+      // }
       handleSearchDebounced(inputText);
     }
   };
@@ -176,7 +188,7 @@ export default function FormikResourceSelectorDropdown({
       {label && <label className="form-label">{label}</label>}
       <Select
         name={name}
-        isLoading={isLoading}
+        isLoading={isLoading || isRefetching}
         className="h-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
         options={options}
         value={value}

diff --git a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
@@ -98,11 +98,33 @@ export default function FormikNotificationResourceField() {
         <FormikResourceSelectorDropdown
           required
           name={fieldName.name}
-          checkResourceSelector={switchOption === "Check" ? [{}] : undefined}
+          checkResourceSelector={
+            switchOption === "Check"
+              ? [
+                  {
+                    id: check_id
+                  }
+                ]
+              : undefined
+          }
           componentResourceSelector={
-            switchOption === "Component" ? [{}] : undefined
+            switchOption === "Component"
+              ? [
+                  {
+                    id: component_id
+                  }
+                ]
+              : undefined
+          }
+          configResourceSelector={
+            switchOption === "Catalog"
+              ? [
+                  {
+                    id: config_id
+                  }
+                ]
+              : undefined
           }
-          configResourceSelector={switchOption === "Catalog" ? [{}] : undefined}
         />
       </div>
     </div>