System error modal | psp-7304 (#3628)

* Updated Generic modal to use a variant * Improved System error modal * Lit fixes * Info fixes
bcgov · Dec 1, 2023 · a83aef4 · a83aef4
1 parent b2db13e
commit a83aef4
Show file tree

Hide file tree

Showing 59 changed files with 1,011 additions and 236 deletions.
diff --git a/source/frontend/src/assets/scss/App.scss b/source/frontend/src/assets/scss/App.scss
@@ -1,114 +1,5 @@
 @import './styles.scss';
 
-.modal-dialog {
-  div.modal-header {
-    height: 4.8rem;
-    padding: 0 1.6rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: $primary-background-color;
-    background-color: $primary-color;
-
-    .modal-title {
-      font-family: BcSans-Bold;
-      font-size: 2.2rem;
-      height: 2.75rem;
-      height: auto;
-    }
-
-    .header-icon {
-      margin-right: 8px;
-      display: inline-block;
-    }
-
-    .modal-close-btn {
-      cursor: pointer;
-    }
-  }
-
-  div.modal-body {
-    padding: 2.4rem 1.8rem;
-    font-size: 1.8rem;
-  }
-
-  div.modal-footer {
-    border-top: none;
-
-    hr {
-      width: 100%;
-    }
-
-    .button-wrap {
-      display: inline-flex;
-      margin-top: 2.4rem;
-      margin-bottom: 2.4rem;
-    }
-
-    button {
-      margin-right: 2.4rem;
-      min-width: 9.5rem;
-      height: 3.9rem;
-    }
-  }
-
-  .close {
-    color: black;
-  }
-
-  &.modal-xl {
-    max-width: 100rem;
-  }
-
-  &.modal-l {
-    max-width: 75rem;
-  }
-
-  &.modal-m {
-    max-width: 50rem;
-  }
-
-  &.modal-s {
-    max-width: 40rem;
-  }
-
-  &.info {
-    .modal-header {
-      color: $dark-blue;
-      background-color: $filter-box-color;
-    }
-
-    .modal-close-btn {
-      color: $text-color;
-      cursor: pointer;
-    }
-  }
-
-  &.error {
-    .modal-header {
-      color: $font-danger-color;
-      background-color: $danger-background-color;
-    }
-
-    .modal-close-btn {
-      color: $text-color;
-      cursor: pointer;
-    }
-  }
-
-  &.warning {
-    .modal-header {
-      color: $font-warning-color;
-      background-color: $summary-color;
-    }
-
-    .modal-close-btn {
-      color: $text-color;
-      cursor: pointer;
-    }
-  }
-}
-
 .Toastify__toast .Toastify__toast-body {
   word-break: break-word;
 }

diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
@@ -6,40 +6,6 @@
   footerHeight: $footer-height;
   headerHeight: $header-height;
 
-  primaryColor: $primary-color;
-  primaryLightColor: $primary-light-color;
-  secondaryVariantColor: $secondary-variant-color;
-  selectedColor: $selected-color;
-  lightVariantColor: $light-variant-color;
-  darkVariantColor: $dark-variant-color;
-  textColor: $text-color;
-  formTextColor: $form-text-color;
-  formControlTextColor: $form-control-text-color;
-  formBackgroundColor: $form-background-color;
-  primaryBackgroundColor: $primary-background-color;
-  dropdownBackgroundColor: $dropdown-background-color;
-  accentColor: $accent-color;
-  lightAccentColor: $light-accent-color;
-  sresIconColor: $sres-icon-color;
-  dangerColor: $danger-color;
-  lightDangerColor: $light-danger-color;
-  iconLightColor: $icon-light-color;
-  activeColor: $active-color;
-  completedColor: $completed-color;
-  filterBackgroundColor: $filter-background-color;
-  slideOutBlue: $slide-out-blue;
-  disabledColor: $disabled-color;
-  disabledFieldBackgroundColor: $disabled-field-background-color;
-  filterBoxColor: $filter-box-color;
-  draftColor: $draft-color;
-  linkColor: $link-color;
-  linkHoverColor: $link-hover-color;
-  subtleColor: $subtle-color;
-  discardedColor: $discarded-color;
-  dangerBackgroundColor: $danger-background-color;
-  summaryColor: $summary-color;
-  summaryBorderColor: $summary-border-color;
-  primaryBorderColor: $primary-border-color;
   // table ui
   tableHoverColor: $table-hover-color;
   tableHeaderBgColor: $table-header-bg-color;
@@ -55,4 +21,43 @@
   // buttons
   buttonOutlineColor: $icon-light-color;
   buttonInfoColor: $button-info-color;
+
+  // Colors
+  accentColor: $accent-color;
+  activeColor: $active-color;
+  completedColor: $completed-color;
+  dangerBackgroundColor: $danger-background-color;
+  dangerColor: $danger-color;
+  darkBlue: $dark-blue;
+  darkVariantColor: $dark-variant-color;
+  disabledColor: $disabled-color;
+  disabledFieldBackgroundColor: $disabled-field-background-color;
+  discardedColor: $discarded-color;
+  draftColor: $draft-color;
+  dropdownBackgroundColor: $dropdown-background-color;
+  filterBackgroundColor: $filter-background-color;
+  filterBoxColor: $filter-box-color;
+  fontDangerColor: $font-danger-color;
+  fontWarningColor: $font-warning-color;
+  formBackgroundColor: $form-background-color;
+  formControlTextColor: $form-control-text-color;
+  formTextColor: $form-text-color;
+  iconLightColor: $icon-light-color;
+  lightAccentColor: $light-accent-color;
+  lightDangerColor: $light-danger-color;
+  lightVariantColor: $light-variant-color;
+  linkColor: $link-color;
+  linkHoverColor: $link-hover-color;
+  primaryBackgroundColor: $primary-background-color;
+  primaryBorderColor: $primary-border-color;
+  primaryColor: $primary-color;
+  primaryLightColor: $primary-light-color;
+  secondaryVariantColor: $secondary-variant-color;
+  selectedColor: $selected-color;
+  slideOutBlue: $slide-out-blue;
+  sresIconColor: $sres-icon-color;
+  subtleColor: $subtle-color;
+  summaryBorderColor: $summary-border-color;
+  summaryColor: $summary-color;
+  textColor: $text-color;
 }
diff --git a/source/frontend/src/components/common/CancelConfirmationModal.tsx b/source/frontend/src/components/common/CancelConfirmationModal.tsx
@@ -2,8 +2,11 @@ import React from 'react';
 
 import GenericModal, { ModalProps } from '@/components/common/GenericModal';
 
-export const CancelConfirmationModal: React.FC<React.PropsWithChildren<ModalProps>> = props => {
+export const CancelConfirmationModal: React.FC<
+  React.PropsWithChildren<Partial<ModalProps>>
+> = props => {
   const {
+    variant = 'info',
     title = 'Unsaved Changes',
     message = 'You have made changes on this form. Do you wish to leave without saving?',
     okButtonText = 'Confirm',
@@ -13,6 +16,7 @@ export const CancelConfirmationModal: React.FC<React.PropsWithChildren<ModalProp
 
   return (
     <GenericModal
+      variant={variant}
       title={title}
       message={message}
       okButtonText={okButtonText}

diff --git a/source/frontend/src/components/common/ErrorModal.tsx b/source/frontend/src/components/common/ErrorModal.tsx
@@ -15,6 +15,7 @@ const ErrorModal = (props: any) => {
   const history = useHistory();
   return (
     <GenericModal
+      variant="error"
       title="App Error"
       message={props.error.message}
       okButtonText="Retry"

diff --git a/source/frontend/src/components/common/ErrorTabs.tsx b/source/frontend/src/components/common/ErrorTabs.tsx
@@ -49,6 +49,7 @@ const ErrorTabs: React.FunctionComponent<React.PropsWithChildren<IErrorTabsProps
       </Tabs>
       {showTabErrorModal && (
         <GenericModal
+          variant="error"
           display={showTabErrorModal}
           setDisplay={setShowTabErrorModal}
           okButtonText="Ok"

diff --git a/source/frontend/src/components/common/GenericModal.test.tsx b/source/frontend/src/components/common/GenericModal.test.tsx
@@ -3,31 +3,33 @@ import { fireEvent, render, waitFor } from '@/utils/test-utils';
 import GenericModal from './GenericModal';
 
 it('renders correctly', () => {
-  const { asFragment } = render(<GenericModal />);
+  const { asFragment } = render(<GenericModal variant="info" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
 it('renders title based off of prop...', () => {
-  const { getByText } = render(<GenericModal title="Test Title" />);
+  const { getByText } = render(<GenericModal title="Test Title" variant="info" />);
   expect(getByText('Test Title')).toBeInTheDocument();
 });
 
 it('renders message based off of prop', () => {
-  const { getByText } = render(<GenericModal message="Test Message" />);
+  const { getByText } = render(<GenericModal message="Test Message" variant="info" />);
   expect(getByText('Test Message')).toBeInTheDocument();
 });
 
 it('renders button text based off of prop', () => {
   const { getByText } = render(
-    <GenericModal okButtonText="Ok Text" cancelButtonText="Cancel Text" />,
+    <GenericModal okButtonText="Ok Text" cancelButtonText="Cancel Text" variant="info" />,
   );
   expect(getByText('Ok Text')).toBeInTheDocument();
   expect(getByText('Cancel Text')).toBeInTheDocument();
 });
 
 it('calls custom ok on click', async () => {
   const mockOk = jest.fn();
-  const { getByText } = render(<GenericModal handleOk={mockOk} okButtonText="Ok Button" />);
+  const { getByText } = render(
+    <GenericModal handleOk={mockOk} okButtonText="Ok Button" variant="info" />,
+  );
   const okButton = getByText('Ok Button');
   await waitFor(() => {
     fireEvent.click(okButton);
@@ -38,7 +40,7 @@ it('calls custom ok on click', async () => {
 it('calls custom cancel funciton on click', async () => {
   const mockCancel = jest.fn();
   const { getByText } = render(
-    <GenericModal handleCancel={mockCancel} cancelButtonText="Cancel Button" />,
+    <GenericModal handleCancel={mockCancel} cancelButtonText="Cancel Button" variant="info" />,
   );
   const cancelButton = getByText('Cancel Button');
   await waitFor(() => {