feat: show delete user functionality

packages/web/src/components/DeleteAccountDialog/index.ee.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import * as URLS from 'config/urls';
+import apolloClient from 'graphql/client';
+import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import useAuthentication from 'hooks/useAuthentication';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useCurrentUser from 'hooks/useCurrentUser';
+
+type TDeleteAccountDialogProps = {
+  onClose: () => void;
+}
+
+export default function DeleteAccountDialog(props: TDeleteAccountDialogProps) {
+  const [deleteUser] = useMutation(DELETE_USER);
+  const formatMessage = useFormatMessage();
+  const currentUser = useCurrentUser();
+  const authentication = useAuthentication();
+  const navigate = useNavigate();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteUser({
+      variables: {
+        input: {
+          id: currentUser.id,
+        }
+      }
+    });
+
+    authentication.updateToken('');
+    await apolloClient.clearStore();
+
+    navigate(URLS.LOGIN);
+  }, [deleteUser, currentUser]);
+
+  return (
+    <Dialog open onClose={props.onClose}>
+      <DialogTitle >
+        {formatMessage('deleteAccountDialog.title')}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {formatMessage('deleteAccountDialog.description')}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose}>{formatMessage('deleteAccountDialog.cancel')}</Button>
+        <Button onClick={handleConfirm} color="error">
+          {formatMessage('deleteAccountDialog.confirm')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

packages/web/src/graphql/mutations/delete-user.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_USER = gql`
+  mutation DeleteUser($input: DeleteUserInput) {
+    deleteUser(input: $input)
+  }
+`;

packages/web/src/locales/en.json

@@ -89,6 +89,17 @@
   "profileSettings.updatedEmail": "Your email has been updated.",
   "profileSettings.updatedPassword": "Your password has been updated.",
   "profileSettings.updatePassword": "Update password",
+  "profileSettings.deleteMyAccount": "Delete my account",
+  "profileSettings.deleteAccount": "Delete account",
+  "profileSettings.deleteAccountSubtitle": "This will permanently delete...",
+  "profileSettings.deleteAccountResult1": "Your account",
+  "profileSettings.deleteAccountResult2": "All your flows",
+  "profileSettings.deleteAccountResult3": "All your connections",
+  "profileSettings.deleteAccountResult4": "All execution history",
+  "deleteAccountDialog.title": "Delete account?",
+  "deleteAccountDialog.description": "This will permanently delete your account and all the associated data with it.",
+  "deleteAccountDialog.cancel": "Cancel?",
+  "deleteAccountDialog.confirm": "Yes, delete it",
   "notifications.title": "Notifications",
   "notification.releasedAt": "Released {relativeDate}",
   "webhookUrlInfo.title": "Your webhook URL",

packages/web/src/pages/ProfileSettings/index.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { useMutation } from '@apollo/client';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -11,6 +14,7 @@ import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
+import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
 import { UPDATE_USER } from 'graphql/mutations/update-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
@@ -38,6 +42,7 @@ const StyledForm = styled(Form)`
 `;
 
 function ProfileSettings() {
+  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false);
   const [passwordDefaultValues, setPasswordDefaultValues] = React.useState({});
   const { enqueueSnackbar } = useSnackbar();
   const currentUser = useCurrentUser();
@@ -179,6 +184,40 @@ function ProfileSettings() {
             )}
           />
         </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+          <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
+            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('profileSettings.deleteMyAccount')}</AlertTitle>
+
+            <Typography variant="body1" gutterBottom>
+              {formatMessage('profileSettings.deleteAccountSubtitle')}
+            </Typography>
+
+            <ol>
+              <li>{formatMessage('profileSettings.deleteAccountResult1')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult2')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult3')}</li>
+              <li>{formatMessage('profileSettings.deleteAccountResult4')}</li>
+            </ol>
+
+            <Button
+              variant="contained"
+              type="submit"
+              color="error"
+              size="small"
+              sx={{ justifyContent: 'end' }}
+              onClick={() => setShowDeleteAccountConfirmation(true)}
+            >
+              {formatMessage('profileSettings.deleteAccount')}
+            </Button>
+
+            {showDeleteAccountConfirmation && (
+              <DeleteAccountDialog
+                onClose={() => setShowDeleteAccountConfirmation(false)}
+              />
+            )}
+          </Alert>
+        </Grid>
       </Grid>
     </Container>
   );