feat: delete profile service connection, modals use danger variant HP…

…-2268
City-of-Helsinki · Apr 25, 2024 · e53c8d5 · e53c8d5
1 parent 4ed35ff
commit e53c8d5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/src/profile/components/deleteProfile/DeleteProfile.tsx b/src/profile/components/deleteProfile/DeleteProfile.tsx
@@ -216,6 +216,7 @@ function DeleteProfile(): React.ReactElement {
             </Button>
           )}
           <ConfirmationModal
+            variant="danger"
             isOpen={showConfirmationModal}
             onClose={handleConfirmationModal}
             onConfirm={handleProfileDelete}

diff --git a/src/profile/components/modals/confirmationModal/ConfirmationModal.tsx b/src/profile/components/modals/confirmationModal/ConfirmationModal.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, IconAlertCircle, Dialog, DialogProps } from 'hds-react';
+import {
+  Button,
+  IconAlertCircle,
+  Dialog,
+  DialogProps,
+  DialogVariant,
+  IconTrash,
+  IconError,
+} from 'hds-react';
 
 import { getModalProps } from '../getModalProps';
 
@@ -9,6 +17,8 @@ export type Props = {
   onClose: () => void;
   onConfirm: () => void;
   title?: string;
+  variant?: DialogVariant;
+  hasError?: boolean;
   content?: React.FC<unknown> | string;
   actionButtonText?: string;
   closeButtonText?: string;
@@ -20,6 +30,8 @@ function ConfirmationModal({
   onClose,
   onConfirm,
   title,
+  variant = 'primary',
+  hasError,
   content,
   actionButtonText,
   closeButtonText,
@@ -51,6 +63,7 @@ function ConfirmationModal({
   return (
     <Dialog
       id={id}
+      variant={variant}
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
       isOpen={isOpen}
@@ -62,7 +75,13 @@ function ConfirmationModal({
         <Dialog.Header
           id={titleId}
           title={title}
-          iconLeft={<IconAlertCircle aria-hidden="true" />}
+          iconLeft={
+            hasError ? (
+              <IconError color="var(--color-error)" aria-hidden="true" />
+            ) : (
+              <IconAlertCircle aria-hidden="true" />
+            )
+          }
         />
       )}
       {content && (
@@ -74,23 +93,28 @@ function ConfirmationModal({
       )}
       {!preventClosing && (actionButtonText || closeButtonText) && (
         <Dialog.ActionButtons>
-          {actionButtonText && (
-            <Button
-              onClick={onConfirm}
-              data-testid="confirmation-modal-confirm-button"
-            >
-              {actionButtonText}
-            </Button>
-          )}
           {closeButtonText !== '' && closeButtonLabelText && (
             <Button
+              theme="black"
               variant="secondary"
               onClick={onClose}
               data-testid="confirmation-modal-cancel-button"
             >
               {closeButtonLabelText}
             </Button>
           )}
+          {actionButtonText && (
+            <Button
+              variant={variant}
+              iconLeft={
+                variant === 'danger' && <IconTrash aria-hidden="true" />
+              }
+              onClick={onConfirm}
+              data-testid="confirmation-modal-confirm-button"
+            >
+              {actionButtonText}
+            </Button>
+          )}
         </Dialog.ActionButtons>
       )}
     </Dialog>

diff --git a/src/profile/components/modals/deleteProfileError/DeleteProfileError.tsx b/src/profile/components/modals/deleteProfileError/DeleteProfileError.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Dialog, DialogProps, IconAlertCircle } from 'hds-react';
+import { Button, Dialog, DialogProps, IconError } from 'hds-react';
 import { useTranslation } from 'react-i18next';
 import { ApolloError } from '@apollo/client';
 
@@ -50,6 +50,7 @@ function DeleteProfileError({
   return (
     <Dialog
       id={id}
+      variant="danger"
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
       isOpen={!!error}
@@ -59,7 +60,7 @@ function DeleteProfileError({
       <Dialog.Header
         id={titleId}
         title={t('deleteProfileModal.deletionErrorTitle')}
-        iconLeft={<IconAlertCircle aria-hidden="true" />}
+        iconLeft={<IconError color="var(--color-error)" aria-hidden="true" />}
       />
       <Dialog.Content>
         {errorIsListOfServices ? (
@@ -76,6 +77,7 @@ function DeleteProfileError({
       </Dialog.Content>
       <Dialog.ActionButtons>
         <Button
+          theme="black"
           variant="secondary"
           onClick={onClose}
           data-testid={`${id}-close-button`}

diff --git a/src/profile/components/serviceConnections/DeleteServiceConnectionModal.tsx b/src/profile/components/serviceConnections/DeleteServiceConnectionModal.tsx
@@ -148,6 +148,8 @@ function DeleteServiceConnectionModal(props: {
   }
   return (
     <ConfirmationModal
+      variant="danger"
+      hasError={hasError}
       isOpen={shouldShowModal}
       onClose={onCloseConfirmationModal}
       onConfirm={onConfirmConfirmationModal}