Merge pull request #1726 from automatisch/AUT-839

refactor: rewrite usePermissionCatalog with RQ

packages/backend/src/graphql/queries/get-permission-catalog.ee.js

@@ -1,7 +0,0 @@
-import permissionCatalog from '../../helpers/permission-catalog.ee.js';
-
-const getPermissionCatalog = async () => {
-  return permissionCatalog;
-};
-
-export default getPermissionCatalog;

packages/backend/src/graphql/query-resolvers.js

@@ -9,7 +9,6 @@ import getDynamicFields from './queries/get-dynamic-fields.js';
 import getFlow from './queries/get-flow.js';
 import getFlows from './queries/get-flows.js';
 import getNotifications from './queries/get-notifications.js';
-import getPermissionCatalog from './queries/get-permission-catalog.ee.js';
 import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-role-mappings.ee.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import getUsers from './queries/get-users.js';
@@ -27,7 +26,6 @@ const queryResolvers = {
   getFlow,
   getFlows,
   getNotifications,
-  getPermissionCatalog,
   getSamlAuthProviderRoleMappings,
   getStepWithTestExecutions,
   getUsers,

packages/backend/src/graphql/schema.graphql

@@ -25,7 +25,6 @@ type Query {
   ): [SubstepArgument]
   getBillingAndUsage: GetBillingAndUsage
   getConfig(keys: [String]): JSONObject
-  getPermissionCatalog: PermissionCatalog
   getNotifications: [Notification]
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getUsers(limit: Int!, offset: Int!): UserConnection
@@ -643,12 +642,6 @@ type Permission {
   conditions: [String]
 }
 
-type PermissionCatalog {
-  actions: [Action]
-  subjects: [Subject]
-  conditions: [Condition]
-}
-
 type Action {
   label: String
   key: String

packages/web/src/components/PermissionCatalogField/index.ee.jsx

@@ -10,18 +10,24 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import * as React from 'react';
+
 import ControlledCheckbox from 'components/ControlledCheckbox';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
 import PermissionSettings from './PermissionSettings.ee';
 import PermissionCatalogFieldLoader from './PermissionCatalogFieldLoader';
+
 const PermissionCatalogField = ({
   name = 'permissions',
   disabled = false,
   defaultChecked = false,
 }) => {
-  const { permissionCatalog, loading } = usePermissionCatalog();
+  const { data, isLoading: isPermissionCatalogLoading } =
+    usePermissionCatalog();
+  const permissionCatalog = data?.data;
   const [dialogName, setDialogName] = React.useState();
-  if (loading) return <PermissionCatalogFieldLoader />;
+
+  if (isPermissionCatalogLoading) return <PermissionCatalogFieldLoader />;
+
   return (
     <TableContainer component={Paper}>
       <Table>
@@ -29,7 +35,7 @@ const PermissionCatalogField = ({
           <TableRow>
             <TableCell component="th" />
 
-            {permissionCatalog.actions.map((action) => (
+            {permissionCatalog?.actions.map((action) => (
               <TableCell component="th" key={action.key}>
                 <Typography
                   variant="subtitle1"
@@ -48,7 +54,7 @@ const PermissionCatalogField = ({
           </TableRow>
         </TableHead>
         <TableBody>
-          {permissionCatalog.subjects.map((subject) => (
+          {permissionCatalog?.subjects.map((subject) => (
             <TableRow
               key={subject.key}
               sx={{ '&:last-child td': { border: 0 } }}
@@ -58,7 +64,7 @@ const PermissionCatalogField = ({
                 <Typography variant="subtitle2">{subject.label}</Typography>
               </TableCell>
 
-              {permissionCatalog.actions.map((action) => (
+              {permissionCatalog?.actions.map((action) => (
                 <TableCell key={`${subject.key}.${action.key}`} align="center">
                   <Typography variant="subtitle2">
                     {action.subjects.includes(subject.key) && (
@@ -91,8 +97,8 @@ const PermissionCatalogField = ({
                     onClose={() => setDialogName('')}
                     fieldPrefix={`${name}.${subject.key}`}
                     subject={subject.key}
-                    actions={permissionCatalog.actions}
+                    actions={permissionCatalog?.actions}
-                    conditions={permissionCatalog.conditions}
+                    conditions={permissionCatalog?.conditions}
                     defaultChecked={defaultChecked}
                   />
                 </Stack>

packages/web/src/graphql/queries/get-permission-catalog.ee.js

@@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_PERMISSION_CATALOG = gql`
-  query GetPermissionCatalog {
-    getPermissionCatalog {
-      subjects {
-        key
-        label
-      }
-      conditions {
-        key
-        label
-      }
-      actions {
-        label
-        key
-        subjects
-      }
-    }
-  }
-`;

packages/web/src/hooks/usePermissionCatalog.ee.js

@@ -1,6 +1,18 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@tanstack/react-query';
-import { GET_PERMISSION_CATALOG } from 'graphql/queries/get-permission-catalog.ee';
+
+import api from 'helpers/api';
+
 export default function usePermissionCatalog() {
-  const { data, loading } = useQuery(GET_PERMISSION_CATALOG);
+  const query = useQuery({
-  return { permissionCatalog: data?.getPermissionCatalog, loading };
+    queryKey: ['permissionCatalog'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/admin/permissions/catalog', {
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
 }