From dc1ca0839ffc5fcdb98caa3b5bf11c67647691cc Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Fri, 20 Sep 2024 13:52:12 +0300
Subject: [PATCH 1/3] fix: if user search, ignore current value for resource
 selector

---
 .../Formik/FormikResourceSelectorDropdown.tsx | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx b/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
index 710dd572a..1471329cc 100644
--- a/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
+++ b/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
@@ -55,13 +55,20 @@ 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,
@@ -69,7 +76,8 @@ export default function FormikResourceSelectorDropdown({
         ? [
             ...configResourceSelector.map((r) => ({
               ...r,
-              search: searchText
+              search: searchText,
+              id: searchText ? undefined : r.id
             }))
           ]
         : undefined
@@ -88,8 +96,7 @@ export default function FormikResourceSelectorDropdown({
     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 +155,7 @@ export default function FormikResourceSelectorDropdown({
         });
       }
     },
+    keepPreviousData: true,
     staleTime: 0,
     cacheTime: 0
   });
@@ -159,10 +167,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);
     }
   };

From ad959a1e43260b5060de10c42a754ce8cad9bab2 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Fri, 20 Sep 2024 13:52:34 +0300
Subject: [PATCH 2/3] fix: pass  in the id of the resource to resource selector

---
 .../FormikNotificationField.tsx               | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
index fad009f3f..1f29e4fb6 100644
--- 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>

From 5b97ec2c03492309d1aceabad313174424623667 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Fri, 20 Sep 2024 13:55:18 +0300
Subject: [PATCH 3/3] fix: show animation when refetching

---
 .../Forms/Formik/FormikResourceSelectorDropdown.tsx       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx b/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
index 1471329cc..8950211e2 100644
--- a/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
+++ b/src/components/Forms/Formik/FormikResourceSelectorDropdown.tsx
@@ -90,7 +90,11 @@ export default function FormikResourceSelectorDropdown({
     ]
   );
 
-  const { data: options = [], isLoading } = useQuery({
+  const {
+    data: options = [],
+    isLoading,
+    isRefetching
+  } = useQuery({
     queryKey: ["searchResources", resourceSelector],
     queryFn: () => searchResources(resourceSelector),
     enabled:
@@ -184,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}