when fetching groups, capture error 403 as rbac failure and cache result

Author: christianvogt

frontend/src/pages/projects/projectSharing/useGroups.ts

@@ -2,22 +2,26 @@ import * as React from 'react';
 import useFetchState, { FetchState } from '~/utilities/useFetchState';
 import { listGroups } from '~/api';
 import { GroupKind } from '~/k8sTypes';
-import { useUser } from '~/redux/selectors';
 
 const useGroups = (): FetchState<GroupKind[]> => {
-  const { isAdmin } = useUser();
+  const is403 = React.useRef(false);
 
-  const getGroup = React.useCallback(() => {
-    if (!isAdmin) {
-      return Promise.resolve([]);
-    }
-    return listGroups().catch((e) => {
-      if (e.statusObject?.code === 404) {
-        throw new Error('No groups found.');
-      }
-      throw e;
-    });
-  }, [isAdmin]);
+  const getGroup = React.useCallback(
+    async () =>
+      is403.current
+        ? []
+        : listGroups().catch((e) => {
+            if (e.statusObject?.code === 403) {
+              is403.current = true;
+              return [];
+            }
+            if (e.statusObject?.code === 404) {
+              throw new Error('No groups found.');
+            }
+            throw e;
+          }),
+    [],
+  );
 
   return useFetchState<GroupKind[]>(getGroup, []);
 };