feat: introduce role mappings form on authentication page (#1256)

packages/web/src/pages/Authentication/RoleMappings.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import Stack from '@mui/material/Stack';
+import { TSamlAuthProvider, TSamlAuthProviderRole } from '@automatisch/types';
+import Typography from '@mui/material/Typography';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Divider from '@mui/material/Divider';
+import { useMutation } from '@apollo/client';
+import { useSnackbar } from 'notistack';
+
+import { UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS } from 'graphql/mutations/upsert-saml-auth-providers-role-mappings';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useSamlAuthProviderRoleMappings from 'hooks/useSamlAuthProviderRoleMappings';
+import Form from 'components/Form';
+
+import RoleMappingsFieldArray from './RoleMappingsFieldsArray';
+
+type RoleMappingsProps = {
+  provider?: TSamlAuthProvider;
+  providerLoading: boolean;
+};
+
+function generateFormRoleMappings(roleMappings: TSamlAuthProviderRole[]) {
+  if (roleMappings.length === 0) {
+    return [{ roleId: '', remoteRoleName: '' }];
+  }
+
+  return roleMappings.map(({ roleId, remoteRoleName }) => ({
+    roleId,
+    remoteRoleName,
+  }));
+}
+
+function RoleMappings({ provider, providerLoading }: RoleMappingsProps) {
+  const formatMessage = useFormatMessage();
+  const { enqueueSnackbar } = useSnackbar();
+  const { roleMappings, loading: roleMappingsLoading } =
+    useSamlAuthProviderRoleMappings(provider?.id);
+  const [
+    upsertSamlAuthProvidersRoleMappings,
+    { loading: upsertRoleMappingsLoading },
+  ] = useMutation(UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS);
+
+  const handleRoleMappingsUpdate = async (values: any) => {
+    try {
+      if (provider?.id) {
+        await upsertSamlAuthProvidersRoleMappings({
+          variables: {
+            input: {
+              samlAuthProviderId: provider.id,
+              samlAuthProvidersRoleMappings: values.roleMappings.map(
+                ({
+                  roleId,
+                  remoteRoleName,
+                }: {
+                  roleId: string;
+                  remoteRoleName: string;
+                }) => ({
+                  roleId,
+                  remoteRoleName,
+                })
+              ),
+            },
+          },
+        });
+        enqueueSnackbar(formatMessage('roleMappingsForm.successfullySaved'), {
+          variant: 'success',
+        });
+      }
+    } catch (error) {
+      throw new Error('Failed while saving!');
+    }
+  };
+
+  const defaultValues = useMemo(
+    () => ({
+      roleMappings: generateFormRoleMappings(roleMappings),
+    }),
+    [roleMappings]
+  );
+
+  if (providerLoading || !provider?.id || roleMappingsLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <Divider sx={{ pt: 2 }} />
+      <Typography variant="h3">
+        {formatMessage('roleMappingsForm.title')}
+      </Typography>
+      <Form defaultValues={defaultValues} onSubmit={handleRoleMappingsUpdate}>
+        <Stack direction="column" spacing={2}>
+          <RoleMappingsFieldArray />
+          <LoadingButton
+            type="submit"
+            variant="contained"
+            color="primary"
+            sx={{ boxShadow: 2 }}
+            loading={upsertRoleMappingsLoading}
+          >
+            {formatMessage('roleMappingsForm.save')}
+          </LoadingButton>
+        </Stack>
+      </Form>
+    </>
+  );
+}
+
+export default RoleMappings;