From 51dc09a9ee3ec1be5d466c4d56042e7ae0e9dee5 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 25 Nov 2023 16:21:19 -0500
Subject: [PATCH] fix: incorrect selector usage in redux

---
 ui/src/app/flags/Flag.tsx                |  4 ++--
 ui/src/app/flags/flagsSlice.ts           | 17 ++++++++--------
 ui/src/app/namespaces/namespacesSlice.ts | 26 +++++++++---------------
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index 2e2d561968..05db05a459 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -49,7 +49,7 @@ export default function Flag() {
   const readOnly = useSelector(selectReadonly);
 
   const flag = useSelector((state: RootState) =>
-    selectFlag(state, namespace.key, flagKey || '')
+    selectFlag(state, flagKey || '')
   );
 
   const [showDeleteFlagModal, setShowDeleteFlagModal] = useState(false);
@@ -71,7 +71,7 @@ export default function Flag() {
       .catch((err) => {
         setError(err);
       });
-  }, [flagKey, namespace.key, clearError, setError]);
+  }, [flagKey, namespace.key, clearError, setError, dispatch]);
 
   if (!flag || flag.key != flagKey) return <Loading />;
 
diff --git a/ui/src/app/flags/flagsSlice.ts b/ui/src/app/flags/flagsSlice.ts
index 94a582fe8d..b7737ffce2 100644
--- a/ui/src/app/flags/flagsSlice.ts
+++ b/ui/src/app/flags/flagsSlice.ts
@@ -139,18 +139,17 @@ const setFlag = (
   state.flags[namespaceKey][flag.key] = flag;
 };
 
-export const selectFlag = createSelector(
-  [
-    (state: RootState, namespaceKey: string, key: string) => {
-      const flags = state.flags.flags[namespaceKey];
-      if (flags) {
-        return flags[key] || ({} as IFlag);
-      }
+const selectNamespaceFlags = (state: RootState) =>
+  state.flags.flags[state.namespaces.currentNamespace];
 
+export const selectFlag = createSelector(
+  [selectNamespaceFlags, (state: RootState, key: string) => key],
+  (flags, key) => {
+    if (flags === undefined) {
       return {} as IFlag;
     }
-  ],
-  (flag) => flag
+    return flags[key];
+  }
 );
 
 interface FlagIdentifier {
diff --git a/ui/src/app/namespaces/namespacesSlice.ts b/ui/src/app/namespaces/namespacesSlice.ts
index a53faed950..03ab4e7bf4 100644
--- a/ui/src/app/namespaces/namespacesSlice.ts
+++ b/ui/src/app/namespaces/namespacesSlice.ts
@@ -75,25 +75,19 @@ export const namespacesSlice = createSlice({
 export const { currentNamespaceChanged } = namespacesSlice.actions;
 
 export const selectNamespaces = createSelector(
-  [
-    (state: RootState) =>
-      Object.entries(state.namespaces.namespaces).map(
-        ([_, value]) => value
-      ) as INamespace[]
-  ],
-  (namespaces) => namespaces
+  [(state: RootState) => state.namespaces.namespaces],
+  (namespaces) => {
+    return Object.entries(namespaces).map(
+      ([_, value]) => value
+    ) as INamespace[];
+  }
 );
 
 export const selectCurrentNamespace = createSelector(
-  [
-    (state: RootState) => {
-      if (state.namespaces.namespaces[state.namespaces.currentNamespace]) {
-        return state.namespaces.namespaces[state.namespaces.currentNamespace];
-      }
-      return { key: 'default', name: 'Default', description: '' } as INamespace;
-    }
-  ],
-  (currentNamespace) => currentNamespace
+  [(state: RootState) => state.namespaces],
+  (namespaces) =>
+    namespaces.namespaces[namespaces.currentNamespace] ||
+    ({ key: 'default', name: 'Default', description: '' } as INamespace)
 );
 
 export const fetchNamespacesAsync = createAsyncThunk(