diff --git a/.eslintrc.json b/.eslintrc.json index 3177f5517..738711a1a 100644 --- 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 index a12578325..a3b1df44e 100644 --- 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 index 0ebf4b02c..673c44c69 100644 --- 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({ 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 index 3c58d4a5e..600c177cc 100644 --- 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([]) + 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 ( + value={{ + datasetAlerts, + setDatasetAlerts: handleSetDatasetAlerts, + addDatasetAlert, + removeDatasetAlert + }}> {children} ) diff --git a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx index 35908f08e..e532591af 100644 --- 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) {
{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 ( = { title: 'Sections/Dataset Page/DatasetAlerts', @@ -33,7 +32,9 @@ export const EditMetadataSuccessful: Story = { {} + setDatasetAlerts: () => {}, + addDatasetAlert: () => {}, + removeDatasetAlert: () => {} }}>
@@ -43,28 +44,18 @@ export const EditMetadataSuccessful: Story = { } } -const publishAlert = [new DatasetAlert('warning', DatasetAlertMessageKey.PUBLISH_IN_PROGRESS)] - -export const PublishInProgress: StoryObj = { +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 ( {}, + addDatasetAlert: () => {}, + removeDatasetAlert: () => {} }}>
diff --git a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts b/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts index 699c3d8a7..b53bd0dba 100644 --- 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 index 03430b233..fdceb083a 100644 --- 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() - 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