feat: introduce application auth clients tab in the admin panel (#1423)

* feat: introduce application auth clients tab in the admin panel

* feat: introduce improvements

* feat: use loading state returned from useMutation

* feat: use error returned by useMutation hook

packages/web/src/hooks/useAppAuthClient.ee.ts

@@ -1,28 +1,26 @@
 import { useLazyQuery } from '@apollo/client';
-import { AppConfig } from '@automatisch/types';
+import { AppAuthClient } from '@automatisch/types';
 import * as React from 'react';
 
 import { GET_APP_AUTH_CLIENT } from 'graphql/queries/get-app-auth-client.ee';
 
 type QueryResponse = {
-  getAppAuthClient: AppConfig;
-}
+  getAppAuthClient: AppAuthClient;
+};
 
-export default function useAppAuthClient(id: string) {
-  const [
-    getAppAuthClient,
-    {
-      data,
-      loading
-    }
-  ] = useLazyQuery<QueryResponse>(GET_APP_AUTH_CLIENT);
+export default function useAppAuthClient(id?: string) {
+  const [getAppAuthClient, { data, loading }] =
+    useLazyQuery<QueryResponse>(GET_APP_AUTH_CLIENT);
   const appAuthClient = data?.getAppAuthClient;
 
-  React.useEffect(function fetchUponId() {
-    if (!id) return;
+  React.useEffect(
+    function fetchUponId() {
+      if (!id) return;
 
-    getAppAuthClient({ variables: { id } });
-  }, [id]);
+      getAppAuthClient({ variables: { id } });
+    },
+    [id]
+  );
 
   return {
     appAuthClient,

packages/web/src/hooks/useAppAuthClients.ee.ts

@@ -6,25 +6,33 @@ import { GET_APP_AUTH_CLIENTS } from 'graphql/queries/get-app-auth-clients.ee';
 
 type QueryResponse = {
   getAppAuthClients: AppAuthClient[];
-}
+};
 
-export default function useAppAuthClient(appKey: string) {
-  const [
-    getAppAuthClients,
+export default function useAppAuthClient({
+  appKey,
+  active,
+}: {
+  appKey: string;
+  active?: boolean;
+}) {
+  const [getAppAuthClients, { data, loading }] = useLazyQuery<QueryResponse>(
+    GET_APP_AUTH_CLIENTS,
     {
-      data,
-      loading
+      context: { autoSnackbar: false },
     }
-  ] = useLazyQuery<QueryResponse>(GET_APP_AUTH_CLIENTS, {
-    context: { autoSnackbar: false },
-  });
+  );
   const appAuthClients = data?.getAppAuthClients;
 
-  React.useEffect(function fetchUponAppKey() {
-    if (!appKey) return;
+  React.useEffect(
+    function fetchUponAppKey() {
+      if (!appKey) return;
 
-    getAppAuthClients({ variables: { appKey, active: true } });
-  }, [appKey]);
+      getAppAuthClients({
+        variables: { appKey, ...(typeof active === 'boolean' && { active }) },
+      });
+    },
+    [appKey]
+  );
 
   return {
     appAuthClients,