feat: introduce connections page in the admin panel

2023-11-23 11:13:58 +00:00
parent 3801f9cfa0
commit 8f09681771
18 changed files with 851 additions and 9 deletions
--- a/packages/web/src/components/AdminApplicationConnectionShare/index.tsx
+++ b/packages/web/src/components/AdminApplicationConnectionShare/index.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import { CircularProgress } from '@mui/material';
+import { useMutation } from '@apollo/client';
+import { IApp, IRole } from '@automatisch/types';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+
+import { SHARE_CONNECTION } from 'graphql/mutations/share-connection';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useSharedConnectionRoleIds from 'hooks/useSharedConnectionRoleIds';
+import useRoles from 'hooks/useRoles.ee';
+
+import RolesFieldArray from './RolesFieldArray';
+import { Form } from './style';
+
+type AdminApplicationConnectionShareProps = {
+  onClose: (response: Record<string, unknown>) => void;
+  application: IApp;
+};
+
+type Params = {
+  connectionId: string;
+};
+
+function generateRolesData(roles: IRole[], roleIds: string[]) {
+  return roles.map(({ id, name }) => ({
+    id,
+    name,
+    checked: roleIds.includes(id),
+  }));
+}
+
+export default function AdminApplicationConnectionShare(
+  props: AdminApplicationConnectionShareProps
+): React.ReactElement {
+  const { onClose } = props;
+  const { connectionId } = useParams() as Params;
+  const formatMessage = useFormatMessage();
+  const [
+    shareConnection,
+    { loading: loadingShareConnection, error: shareConnectionError },
+  ] = useMutation(SHARE_CONNECTION, {
+    context: { autoSnackbar: false },
+  });
+  const {
+    roleIds,
+    loading: roleIdsLoading,
+    error: roleIdsError,
+  } = useSharedConnectionRoleIds(connectionId, {
+    context: { autoSnackbar: false },
+  });
+  const { roles, loading: rolesLoading, error: rolesError } = useRoles();
+
+  const error = shareConnectionError || roleIdsError || rolesError;
+  const showDialogContent =
+    !roleIdsLoading && !rolesLoading && !roleIdsError && !rolesError;
+
+  const submitHandler: SubmitHandler<FieldValues> = React.useCallback(
+    async (data) => {
+      const roles = data.roles as {
+        id: string;
+        name: string;
+        checked: boolean;
+      }[];
+
+      const response = await shareConnection({
+        variables: {
+          input: {
+            id: connectionId,
+            roleIds: roles
+              .filter((role) => role.checked)
+              .map((role) => role.id),
+          },
+        },
+      });
+      onClose(response as Record<string, unknown>);
+    },
+    []
+  );
+
+  const defaultValues = React.useMemo(
+    () => ({
+      roles: generateRolesData(roles, roleIds),
+    }),
+    [roles, roleIds]
+  );
+
+  return (
+    <Dialog open={true} onClose={onClose}>
+      <DialogTitle>
+        {formatMessage('adminAppsConnections.shareConnection')}
+      </DialogTitle>
+      {error && (
+        <Alert
+          severity="error"
+          sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
+        >
+          {error.message}
+        </Alert>
+      )}
+      {(roleIdsLoading || rolesLoading) && (
+        <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+      )}
+      {showDialogContent && (
+        <DialogContent sx={{ pt: '0px !important' }}>
+          <DialogContentText tabIndex={-1} component="div">
+            <Form
+              defaultValues={defaultValues}
+              onSubmit={submitHandler}
+              render={({ formState: { isDirty } }) => {
+                return (
+                  <Stack direction="column">
+                    <RolesFieldArray />
+                    <LoadingButton
+                      type="submit"
+                      variant="contained"
+                      color="primary"
+                      sx={{ boxShadow: 2, mt: 5 }}
+                      disabled={!isDirty}
+                      loading={loadingShareConnection}
+                    >
+                      {formatMessage('adminAppsConnections.submit')}
+                    </LoadingButton>
+                  </Stack>
+                );
+              }}
+            ></Form>
+          </DialogContentText>
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+}