feat: add addDatasetAlert, removeDatasetAlert

IQSS · Nov 6, 2023 · 417c300 · 417c300
1 parent de2fcd8
commit 417c300
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 38 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,7 +5,12 @@
     },
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
       }
     }
   },
@@ -36,15 +41,33 @@
       "./packages/design-system/tests/tsconfig.json"
     ]
   },
-  "plugins": ["react", "simple-import-sort", "import", "unused-imports"],
+  "plugins": [
+    "react",
+    "simple-import-sort",
+    "import",
+    "unused-imports"
+  ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "off",
+    "react/prop-types": "off",
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
       "warn",
-      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-empty-function": [
+      "error",
+      {
+        "allow": [
+          "arrowFunctions"
+        ]
+      }
     ],
-    "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
     "react/react-in-jsx-scope": "off",
     "prettier/prettier": [
       "error",
@@ -60,7 +83,10 @@
   },
   "overrides": [
     {
-      "files": ["**/e2e/**/*.spec.ts", "**/component/**/*.spec.tsx"],
+      "files": [
+        "**/e2e/**/*.spec.ts",
+        "**/component/**/*.spec.tsx"
+      ],
       "rules": {
         "testing-library/await-async-query": 0,
         "@typescript-eslint/no-unsafe-member-access": 0,
@@ -69,5 +95,8 @@
       }
     }
   ],
-  "ignorePatterns": ["packages/design-system/dist/**", "dev-env/vite.config.ts"]
+  "ignorePatterns": [
+    "packages/design-system/dist/**",
+    "dev-env/vite.config.ts"
+  ]
 }
diff --git a/src/dataset/domain/models/Dataset.ts b/src/dataset/domain/models/Dataset.ts
@@ -41,7 +41,7 @@ export enum DatasetAlertMessageKey {
 export class DatasetAlert {
   constructor(
     public readonly variant: AlertVariant,
-    public readonly message: DatasetAlertMessageKey,
+    public readonly messageKey: DatasetAlertMessageKey,
     public dynamicFields?: object
   ) {}
 }

diff --git a/src/sections/dataset/DatasetAlertContext.ts b/src/sections/dataset/DatasetAlertContext.ts
@@ -1,14 +1,18 @@
 import { createContext, useContext } from 'react'
 
-import { DatasetAlert } from '../../dataset/domain/models/Dataset'
+import { DatasetAlert, DatasetAlertMessageKey } from '../../dataset/domain/models/Dataset'
 
 interface DatasetAlertContextProps {
-  datasetAlerts: DatasetAlert[]
   setDatasetAlerts: (datasetAlerts: DatasetAlert[]) => void
+  datasetAlerts: DatasetAlert[]
+  addDatasetAlert: (newAlert: DatasetAlert) => void
+  removeDatasetAlert: (alertId: DatasetAlertMessageKey) => void
 }
 
 export const DatasetAlertContext = createContext<DatasetAlertContextProps>({
   datasetAlerts: [],
-  setDatasetAlerts: /* istanbul ignore next */ () => {}
+  setDatasetAlerts: /* istanbul ignore next */ () => {},
+  addDatasetAlert: () => {},
+  removeDatasetAlert: () => {}
 })
 export const useDatasetAlertContext = () => useContext(DatasetAlertContext)
diff --git a/src/sections/dataset/DatasetAlertProvider.tsx b/src/sections/dataset/DatasetAlertProvider.tsx
@@ -1,19 +1,31 @@
 import { PropsWithChildren, useState } from 'react'
 import { DatasetAlertContext } from './DatasetAlertContext'
 
-import { DatasetAlert } from '../../dataset/domain/models/Dataset'
+import { DatasetAlert, DatasetAlertMessageKey } from '../../dataset/domain/models/Dataset'
 
 export const DatasetAlertProvider = ({ children }: PropsWithChildren) => {
   const [datasetAlerts, setDatasetAlerts] = useState<DatasetAlert[]>([])
 
+  const addDatasetAlert = (newAlert: DatasetAlert) => {
+    setDatasetAlerts((prevAlerts) => [...prevAlerts, newAlert])
+  }
   // This function will be accessible by any child component to update the datasetAlerts state
   const handleSetDatasetAlerts = (alerts: DatasetAlert[]) => {
     setDatasetAlerts(alerts)
   }
+  const removeDatasetAlert = (alertId: DatasetAlertMessageKey) => {
+    console.log('deleting alert', alertId)
+    setDatasetAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.messageKey !== alertId))
+  }
 
   return (
     <DatasetAlertContext.Provider
-      value={{ datasetAlerts, setDatasetAlerts: handleSetDatasetAlerts }}>
+      value={{
+        datasetAlerts,
+        setDatasetAlerts: handleSetDatasetAlerts,
+        addDatasetAlert,
+        removeDatasetAlert
+      }}>
       {children}
     </DatasetAlertContext.Provider>
   )

diff --git a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
@@ -17,9 +17,9 @@ export function DatasetAlerts({ alerts }: DatasetAlertsProps) {
     <div className={styles.container}>
       {alerts.map((alert: DatasetAlert, index) => {
         const translatedMsg = alert.dynamicFields
-          ? t(`alerts.${alert.message}.alertText`, alert.dynamicFields)
-          : t(`alerts.${alert.message}.alertText`)
-        const translatedHeading = t(`alerts.${alert.message}.heading`)
+          ? t(`alerts.${alert.messageKey}.alertText`, alert.dynamicFields)
+          : t(`alerts.${alert.messageKey}.alertText`)
+        const translatedHeading = t(`alerts.${alert.messageKey}.heading`)
         const alertKey = `alert-${index}`
         return (
           <Alert

diff --git a/src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx b/src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx
@@ -14,7 +14,6 @@ import {
   DatasetPermissionsMother
 } from '../../../../tests/component/dataset/domain/models/DatasetMother'
 import { DatasetAlertContext } from '../../../sections/dataset/DatasetAlertContext'
-import { useEffect, useState } from 'react'
 
 const meta: Meta<typeof DatasetAlerts> = {
   title: 'Sections/Dataset Page/DatasetAlerts',
@@ -33,7 +32,9 @@ export const EditMetadataSuccessful: Story = {
       <DatasetAlertContext.Provider
         value={{
           datasetAlerts: editMetadataAlert,
-          setDatasetAlerts: () => {}
+          setDatasetAlerts: () => {},
+          addDatasetAlert: () => {},
+          removeDatasetAlert: () => {}
         }}>
         <div>
           <DatasetAlerts alerts={dataset.alerts} />
@@ -43,28 +44,18 @@ export const EditMetadataSuccessful: Story = {
   }
 }
 
-const publishAlert = [new DatasetAlert('warning', DatasetAlertMessageKey.PUBLISH_IN_PROGRESS)]
-
-export const PublishInProgress: StoryObj<typeof DatasetAlerts> = {
+const publishAlert = new DatasetAlert('warning', DatasetAlertMessageKey.PUBLISH_IN_PROGRESS)
+export const PublishInProgress: Story = {
   render: () => {
     const dataset = DatasetMother.createRealistic()
-    const [alerts, setAlerts] = useState(publishAlert)
-
-    // Set a timeout to remove the alert after 3 seconds
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        setAlerts([]) // This will clear the alert after 3 seconds
-      }, 3000) // Timeout of 3 seconds
-
-      // Clear the timer if the component unmounts
-      return () => clearTimeout(timer)
-    }, [])
 
     return (
       <DatasetAlertContext.Provider
         value={{
-          datasetAlerts: alerts,
-          setDatasetAlerts: setAlerts
+          datasetAlerts: [publishAlert],
+          setDatasetAlerts: () => {},
+          addDatasetAlert: () => {},
+          removeDatasetAlert: () => {}
         }}>
         <div>
           <DatasetAlerts alerts={dataset.alerts} />

diff --git a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts b/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts
@@ -69,7 +69,7 @@ const expectedDataset = {
     { semanticMeaning: 'dataset', value: 'Draft' },
     { semanticMeaning: 'warning', value: 'Unpublished' }
   ],
-  alerts: [{ variant: 'warning', message: 'draftVersion', dynamicFields: undefined }],
+  alerts: [{ variant: 'warning', messageKey: 'draftVersion', dynamicFields: undefined }],
   summaryFields: [
     {
       name: 'citation',
@@ -148,11 +148,11 @@ const expectedDatasetAlternateVersion = {
   alerts: [
     {
       variant: 'warning',
-      message: 'draftVersion',
+      messageKey: 'draftVersion',
       dynamicFields: undefined
     },
     {
-      message: 'requestedVersionNotFoundShowDraft',
+      messageKey: 'requestedVersionNotFoundShowDraft',
       variant: 'warning',
       dynamicFields: { requestedVersion: '4.0' }
     }

diff --git a/tests/component/sections/dataset/dataset-alerts/DatasetAlerts.spec.tsx b/tests/component/sections/dataset/dataset-alerts/DatasetAlerts.spec.tsx
@@ -69,8 +69,8 @@ it('renders alerts with correct text', () => {
   cy.fixture('../../../public/locales/en/dataset.json').then((dataset: DatasetTranslation) => {
     cy.mount(<DatasetAlerts alerts={alerts} />)
 
-    const alertHeading = dataset.alerts[draftAlert.message].heading
-    const alertText = removeMarkup(dataset.alerts[draftAlert.message].alertText)
+    const alertHeading = dataset.alerts[draftAlert.messageKey].heading
+    const alertText = removeMarkup(dataset.alerts[draftAlert.messageKey].alertText)
     cy.findByText(alertHeading).should('exist')
     cy.findByRole('alert').should(($element) => {
       // text() removes markup, so we can compare to the expected text