feat(web): introduce API tokens in admin dashboard

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

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+
+import { getGeneralErrorMessage } from 'helpers/errors';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
+import ConfirmationDialog from 'components/ConfirmationDialog';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminDeleteApiToken from 'hooks/useAdminDeleteApiToken.ee';
+
+function DeleteApiTokenButton(props) {
+  const { apiTokenId } = props;
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const {
+    mutateAsync: deleteApiToken,
+    error: deleteApiTokenError,
+    reset: resetDeleteApiToken,
+  } = useAdminDeleteApiToken(apiTokenId);
+
+  const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
+
+  const generalErrorMessage = getGeneralErrorMessage({
+    error: deleteApiTokenError,
+    fallbackMessage: formatMessage('deleteApiTokenButton.deleteError'),
+  });
+
+  const handleConfirm = React.useCallback(async () => {
+    try {
+      await deleteApiToken();
+      setShowConfirmation(false);
+      enqueueSnackbar(
+        formatMessage('deleteApiTokenButton.successfullyDeleted'),
+        {
+          variant: 'success',
+          SnackbarProps: {
+            'data-test': 'snackbar-delete-api-token-success',
+          },
+        },
+      );
+    } catch {}
+  }, [deleteApiToken]);
+
+  const handleClose = () => {
+    setShowConfirmation(false);
+    resetDeleteApiToken();
+  };
+
+  return (
+    <>
+      <IconButton
+        data-test="delete-button"
+        onClick={() => setShowConfirmation(true)}
+        size="small"
+      >
+        <DeleteIcon />
+      </IconButton>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        title={formatMessage('deleteApiTokenButton.title')}
+        description={formatMessage('deleteApiTokenButton.description')}
+        onClose={handleClose}
+        onConfirm={handleConfirm}
+        cancelButtonChildren={formatMessage('deleteApiTokenButton.cancel')}
+        confirmButtonChildren={formatMessage('deleteApiTokenButton.confirm')}
+        data-test="delete-api-token-modal"
+        errorMessage={generalErrorMessage}
+      />
+    </>
+  );
+}
+
+DeleteApiTokenButton.propTypes = {
+  apiTokenId: PropTypes.string.isRequired,
+};
+
+export default DeleteApiTokenButton;