From e3da81a8e83cf6a347691e20e78a4dcf122cb962 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 19 Aug 2024 14:39:07 +0200 Subject: [PATCH 1/7] added anew compoenet StudioError --- .../components/StudioError/StudioError.module.css | 0 .../components/StudioError/StudioError.test.tsx | 0 .../src/components/StudioError/StudioError.tsx | 15 +++++++++++++++ .../src/components/StudioError/index.ts | 1 + .../studio-components/src/components/index.ts | 1 + 5 files changed, 17 insertions(+) create mode 100644 frontend/libs/studio-components/src/components/StudioError/StudioError.module.css create mode 100644 frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx create mode 100644 frontend/libs/studio-components/src/components/StudioError/StudioError.tsx create mode 100644 frontend/libs/studio-components/src/components/StudioError/index.ts diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.module.css b/frontend/libs/studio-components/src/components/StudioError/StudioError.module.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx new file mode 100644 index 00000000000..f22d710f164 --- /dev/null +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Alert, Paragraph } from '@digdir/designsystemet-react'; + +export type StudioErrorProps = { + children?: React.ReactNode; +}; + +export const StudioError = ({ children }: StudioErrorProps) => { + const isReactNode = React.isValidElement(children); + return ( + + {isReactNode ? <>{children} : {children}} + + ); +}; diff --git a/frontend/libs/studio-components/src/components/StudioError/index.ts b/frontend/libs/studio-components/src/components/StudioError/index.ts new file mode 100644 index 00000000000..5394ded3f6f --- /dev/null +++ b/frontend/libs/studio-components/src/components/StudioError/index.ts @@ -0,0 +1 @@ +export { StudioError } from './StudioError'; diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts index 941d009e824..2bb873d2aaa 100644 --- a/frontend/libs/studio-components/src/components/index.ts +++ b/frontend/libs/studio-components/src/components/index.ts @@ -33,3 +33,4 @@ export * from './StudioTreeView'; export * from './StudioTabs'; export * from './StudioDivider'; export * from './StudioPageError'; +export * from './StudioError'; From 6a497b45d092d76b70076f4bd92f82ff12c54c47 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Tue, 20 Aug 2024 14:38:42 +0200 Subject: [PATCH 2/7] added test for StudioError and update StudioErrorPage --- .../StudioError/StudioError.test.tsx | 25 +++++++++++++++++++ .../components/StudioError/StudioError.tsx | 4 +-- .../StudioPageError.module.css | 4 --- .../StudioPageError/StudioPageError.tsx | 15 ++++++----- 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx index e69de29bb2d..9f89b0cd54f 100644 --- a/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { StudioError } from './StudioError'; + +const message: string = 'message'; + +describe('StudioError', () => { + it('Should render component correctly', () => { + render({message}); + + const paragraph = screen.getByText(message); + expect(paragraph).toBeInTheDocument(); + }); + + it('should support children as ReactNode', () => { + render( + + ReactNode Message + , + ); + + const messageAsLink = screen.getByRole('link', { name: 'ReactNode Message' }); + expect(messageAsLink).toBeInTheDocument(); + }); +}); diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx index f22d710f164..235f9640eed 100644 --- a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx @@ -8,8 +8,6 @@ export type StudioErrorProps = { export const StudioError = ({ children }: StudioErrorProps) => { const isReactNode = React.isValidElement(children); return ( - - {isReactNode ? <>{children} : {children}} - + {isReactNode ? {children} : children} ); }; diff --git a/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.module.css b/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.module.css index 14d3b321b37..61e57502dcb 100644 --- a/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.module.css +++ b/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.module.css @@ -3,7 +3,3 @@ margin: var(--fds-spacing-12) auto 0; margin-top: 50px; } - -.alertContent { - font-family: var(--studio-font-family); -} diff --git a/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.tsx b/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.tsx index 6313be8ab0b..ad1a6e60cf3 100644 --- a/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.tsx +++ b/frontend/libs/studio-components/src/components/StudioPageError/StudioPageError.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react'; +import { Heading, Paragraph } from '@digdir/designsystemet-react'; import classes from './StudioPageError.module.css'; +import { StudioError } from '../StudioError'; export type StudioPageErrorProps = { title?: string; @@ -12,12 +13,14 @@ export const StudioPageError = ({ message, title }: StudioPageErrorProps) => { return (
- - - {title} - + + {title && ( + + {title} + + )} {isReactNode ? <>{message} : {message}} - +
); }; From eb921d6b1edbbbd8c0e4c7e20d65a5f4fba95ff3 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Tue, 20 Aug 2024 15:55:30 +0200 Subject: [PATCH 3/7] replaced part of alerts with StudioError compoent --- .../features/appPublish/components/Deploy.tsx | 5 ++--- .../features/appPublish/components/DeployDropdown.tsx | 6 +++--- .../appPublish/containers/DeploymentContainer.tsx | 8 ++++---- .../features/appPublish/containers/ReleaseContainer.tsx | 8 ++++---- .../features/appPublish/pages/DeployPage.tsx | 9 +++++---- .../overview/components/Deployments/Deployments.tsx | 5 ++--- .../src/components/StudioError/StudioError.module.css | 0 7 files changed, 20 insertions(+), 21 deletions(-) delete mode 100644 frontend/libs/studio-components/src/components/StudioError/StudioError.module.css diff --git a/frontend/app-development/features/appPublish/components/Deploy.tsx b/frontend/app-development/features/appPublish/components/Deploy.tsx index 5af78dc2c18..abbac066020 100644 --- a/frontend/app-development/features/appPublish/components/Deploy.tsx +++ b/frontend/app-development/features/appPublish/components/Deploy.tsx @@ -6,7 +6,7 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen import { toast } from 'react-toastify'; import { Alert, Link } from '@digdir/designsystemet-react'; import { useDeployPermissionsQuery } from 'app-development/hooks/queries'; -import { StudioSpinner } from '@studio/components'; +import { StudioError, StudioSpinner } from '@studio/components'; export interface DeployProps { appDeployedVersion: string; @@ -47,8 +47,7 @@ export const Deploy = ({ ); } - if (permissionsIsError) - return {t('app_deployment.permission_error')}; + if (permissionsIsError) return {t('app_deployment.permission_error')}; const deployPermission = permissions.findIndex((e) => e.toLowerCase() === envName.toLowerCase()) > -1; diff --git a/frontend/app-development/features/appPublish/components/DeployDropdown.tsx b/frontend/app-development/features/appPublish/components/DeployDropdown.tsx index 7bdf8193af8..2d835dfd0c0 100644 --- a/frontend/app-development/features/appPublish/components/DeployDropdown.tsx +++ b/frontend/app-development/features/appPublish/components/DeployDropdown.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import classes from './DeployDropdown.module.css'; import { AltinnConfirmDialog } from 'app-shared/components'; -import { StudioButton, StudioSpinner } from '@studio/components'; -import { Alert, Combobox, Spinner } from '@digdir/designsystemet-react'; +import { StudioButton, StudioError, StudioSpinner } from '@studio/components'; +import { Combobox, Spinner } from '@digdir/designsystemet-react'; import type { ImageOption } from './ImageOption'; import { useTranslation } from 'react-i18next'; import { useAppReleasesQuery } from 'app-development/hooks/queries'; @@ -42,7 +42,7 @@ export const DeployDropdown = ({ ); - if (releasesIsError) return {t('app_deployment.releases_error')}; + if (releasesIsError) return {t('app_deployment.releases_error')}; const imageOptions: ImageOption[] = releases .filter((image) => image.build.result === BuildResult.succeeded) diff --git a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx index 9e6a1015571..d328290b78d 100644 --- a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx +++ b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx @@ -11,8 +11,8 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen import { DeploymentEnvironment } from '../components/DeploymentEnvironment'; import { getAppLink } from 'app-shared/ext-urls'; import { useTranslation } from 'react-i18next'; -import { Alert } from '@digdir/designsystemet-react'; import { PROD_ENV_TYPE } from 'app-shared/constants'; +import { StudioError } from '@studio/components'; export const DeploymentContainer = () => { const { org, app } = useStudioEnvironmentParams(); @@ -58,9 +58,9 @@ export const DeploymentContainer = () => { if (environmentListIsError || orgsIsError || appDeploymentIsError) return (
- - {t('app_deployment.error')} - +
+ {t('app_deployment.error')} +
); diff --git a/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx b/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx index 82377142f8c..494fccba27a 100644 --- a/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx +++ b/frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx @@ -7,7 +7,7 @@ import { CreateRelease } from '../components/CreateRelease'; import { Release } from '../components/Release'; import { UploadIcon, CheckmarkIcon } from '@studio/icons'; import { gitCommitPath } from 'app-shared/api/paths'; -import { StudioSpinner, StudioPopover, StudioParagraph } from '@studio/components'; +import { StudioSpinner, StudioPopover, StudioParagraph, StudioError } from '@studio/components'; import { useBranchStatusQuery, useAppReleasesQuery } from '../../../hooks/queries'; import { Trans, useTranslation } from 'react-i18next'; import { useQueryClient } from '@tanstack/react-query'; @@ -15,7 +15,7 @@ import { QueryKey } from 'app-shared/types/QueryKey'; import { useRepoStatusQuery } from 'app-shared/hooks/queries'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import { Alert, Link } from '@digdir/designsystemet-react'; +import { Link } from '@digdir/designsystemet-react'; export function ReleaseContainer() { const { org, app } = useStudioEnvironmentParams(); @@ -76,7 +76,7 @@ export function ReleaseContainer() { } if (!masterBranchStatus) { return ( - + - + ); } // Check if latest diff --git a/frontend/app-development/features/appPublish/pages/DeployPage.tsx b/frontend/app-development/features/appPublish/pages/DeployPage.tsx index d10db1941d8..65e92110dec 100644 --- a/frontend/app-development/features/appPublish/pages/DeployPage.tsx +++ b/frontend/app-development/features/appPublish/pages/DeployPage.tsx @@ -8,9 +8,10 @@ import { Trans, useTranslation } from 'react-i18next'; import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader'; import { useInvalidator } from '../../../hooks/useInvalidator'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import { Alert, Link } from '@digdir/designsystemet-react'; +import { Link } from '@digdir/designsystemet-react'; import { EmailContactProvider } from 'app-shared/getInTouch/providers'; import { GetInTouchWith } from 'app-shared/getInTouch'; +import { StudioError } from '@studio/components'; export function DeployPage() { const { org, app } = useStudioEnvironmentParams(); @@ -35,9 +36,9 @@ export function DeployPage() { if (orgsIsError || permissionsIsError) return ( - - {t('app_deployment.error')} - +
+ {t('app_deployment.error')} +
); // If org isn't listed, or doesn't have any environments diff --git a/frontend/app-development/features/overview/components/Deployments/Deployments.tsx b/frontend/app-development/features/overview/components/Deployments/Deployments.tsx index 65941b5b79e..72c32450aa9 100644 --- a/frontend/app-development/features/overview/components/Deployments/Deployments.tsx +++ b/frontend/app-development/features/overview/components/Deployments/Deployments.tsx @@ -2,9 +2,8 @@ import type { HTMLAttributes } from 'react'; import React from 'react'; import { useOrgListQuery } from 'app-development/hooks/queries'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import { Alert } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; -import { StudioSpinner } from '@studio/components'; +import { StudioError, StudioSpinner } from '@studio/components'; import { useRepoMetadataQuery } from 'app-shared/hooks/queries'; import { RepoOwnedByPersonInfo } from './RepoOwnedByPersonInfo'; import { NoEnvironmentsAlert } from './NoEnvironmentsAlert'; @@ -38,7 +37,7 @@ export const Deployments = ({ className }: DeploymentsProps) => { } if (isOrgsError || repositoryIsError) - return {t('overview.deployments_error')}; + return {t('overview.deployments_error')}; // If repo-owner is an organisation const repoOwnerIsOrg = orgs && Object.keys(orgs).includes(repository?.owner.login); diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.module.css b/frontend/libs/studio-components/src/components/StudioError/StudioError.module.css deleted file mode 100644 index e69de29bb2d..00000000000 From 5168fb8edffb18a2dedfc7b05ce8bdd64c91c897 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Tue, 20 Aug 2024 16:51:11 +0200 Subject: [PATCH 4/7] replaced part of alerts --WIP --- .../features/appPublish/pages/DeployPage.tsx | 2 +- .../features/dataModelling/DataModelling.tsx | 8 ++++---- .../SchemaGenerationErrorsPanel.tsx | 8 ++++---- .../src/components/StudioError/StudioError.tsx | 7 ++----- 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/frontend/app-development/features/appPublish/pages/DeployPage.tsx b/frontend/app-development/features/appPublish/pages/DeployPage.tsx index 65e92110dec..afe0d1fee02 100644 --- a/frontend/app-development/features/appPublish/pages/DeployPage.tsx +++ b/frontend/app-development/features/appPublish/pages/DeployPage.tsx @@ -37,7 +37,7 @@ export function DeployPage() { if (orgsIsError || permissionsIsError) return (
- {t('app_deployment.error')} + {t('app_deployment.error')};
); diff --git a/frontend/app-development/features/dataModelling/DataModelling.tsx b/frontend/app-development/features/dataModelling/DataModelling.tsx index 30ef6a7d123..e9fc31090b4 100644 --- a/frontend/app-development/features/dataModelling/DataModelling.tsx +++ b/frontend/app-development/features/dataModelling/DataModelling.tsx @@ -1,8 +1,8 @@ import type { ReactNode } from 'react'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { StudioPageSpinner, StudioCenter } from '@studio/components'; -import { Alert, ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; +import { StudioPageSpinner, StudioCenter, StudioError } from '@studio/components'; +import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; import { SchemaEditorWithToolbar } from './SchemaEditorWithToolbar'; import { useDataModelsJsonQuery, useDataModelsXsdQuery } from 'app-shared/hooks/queries'; import { useParams } from 'react-router-dom'; @@ -27,12 +27,12 @@ export function DataModelling({ createPathOption = false }: DataModellingProps): case 'error': return ( - + {t('general.fetch_error_message')} {t('general.error_message_with_colon')} {jsonError && {jsonError.message}} {xsdError && {xsdError.message}} - + ); case 'success': { diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SchemaGenerationErrorsPanel.tsx b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SchemaGenerationErrorsPanel.tsx index 5805658617a..a7066d849ef 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SchemaGenerationErrorsPanel.tsx +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SchemaGenerationErrorsPanel.tsx @@ -1,9 +1,9 @@ import classes from './SchemaGenerationErrorsPanel.module.css'; import React from 'react'; -import { Alert, ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; +import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; import { Trans, useTranslation } from 'react-i18next'; import { XMarkIcon } from '@studio/icons'; -import { StudioButton } from '@studio/components'; +import { StudioButton, StudioError } from '@studio/components'; export interface SchemaGenerationErrorsPanelProps { onCloseErrorsPanel: () => void; @@ -26,7 +26,7 @@ export const SchemaGenerationErrorsPanel = ({ errorMessage.match(/'([^']+)':/)?.[1]; return ( - +
{t('api_errors.DM_01')} @@ -60,6 +60,6 @@ export const SchemaGenerationErrorsPanel = ({ {t('general.close')}
- + ); }; diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx index 235f9640eed..97a93d89f00 100644 --- a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx @@ -1,13 +1,10 @@ import React from 'react'; -import { Alert, Paragraph } from '@digdir/designsystemet-react'; +import { Alert } from '@digdir/designsystemet-react'; export type StudioErrorProps = { children?: React.ReactNode; }; export const StudioError = ({ children }: StudioErrorProps) => { - const isReactNode = React.isValidElement(children); - return ( - {isReactNode ? {children} : children} - ); + return {children}; }; From 3dbc02bdd013192982b3035aa6c451575bb2c3cc Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Wed, 21 Aug 2024 15:17:51 +0200 Subject: [PATCH 5/7] replaced alerts with StudioError --- .../SchemaEditorWithToolbar/SelectedSchemaEditor.tsx | 8 ++++---- .../DeploymentContainer/DeploymentContainer.tsx | 5 ++--- .../components/TabDataError/TabDataError.tsx | 8 ++++---- .../dashboard/components/SafeErrorView/SafeErrorView.tsx | 8 ++++---- .../src/components/StudioExpression/StudioExpression.tsx | 5 +++-- .../FileChangesInfoModal/FileChangesInfoModal.tsx | 8 +++----- .../ux-editor/src/components/Elements/Elements.tsx | 8 ++++---- 7 files changed, 24 insertions(+), 26 deletions(-) diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx index 7f9d8953509..a8a506685ec 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx @@ -1,8 +1,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useSchemaQuery } from '../../../hooks/queries'; import { useSchemaMutation } from '../../../hooks/mutations'; -import { StudioCenter, StudioPageSpinner } from '@studio/components'; -import { Alert, ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; +import { StudioCenter, StudioError, StudioPageSpinner } from '@studio/components'; +import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react'; import { SchemaEditorApp } from '@altinn/schema-editor/SchemaEditorApp'; import { useTranslation } from 'react-i18next'; import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants'; @@ -37,13 +37,13 @@ export const SelectedSchemaEditor = ({ modelPath }: SelectedSchemaEditorProps) = case 'error': return ( - + {t('general.fetch_error_message')} {t('general.error_message_with_colon')} {error.response?.data?.customErrorMessages[0] ?? error.message} - + ); diff --git a/frontend/app-development/features/overview/components/Deployments/DeploymentContainer/DeploymentContainer.tsx b/frontend/app-development/features/overview/components/Deployments/DeploymentContainer/DeploymentContainer.tsx index c74612eda5e..04c480765a8 100644 --- a/frontend/app-development/features/overview/components/Deployments/DeploymentContainer/DeploymentContainer.tsx +++ b/frontend/app-development/features/overview/components/Deployments/DeploymentContainer/DeploymentContainer.tsx @@ -6,11 +6,10 @@ import { useOrgListQuery, } from 'app-development/hooks/queries'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import { Alert } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; import { DeploymentStatusList } from './DeploymentStatusList'; import { DeploymentLogList } from './DeploymentLogList'; -import { StudioSpinner } from '@studio/components'; +import { StudioError, StudioSpinner } from '@studio/components'; import type { Environment } from 'app-shared/types/Environment'; type DeploymentContainerProps = Pick, 'className'>; @@ -41,7 +40,7 @@ export const DeploymentContainer = ({ className }: DeploymentContainerProps) => ); if (environmentListIsError || orgsIsError || appDeploymentIsError) - return {t('overview.deployments_error')}; + return {t('overview.deployments_error')}; const selectedOrg = orgs?.[org]; const orgEnvironmentList: Environment[] = environmentList.filter((env: Environment) => diff --git a/frontend/app-development/layout/SettingsModalButton/SettingsModal/components/TabDataError/TabDataError.tsx b/frontend/app-development/layout/SettingsModalButton/SettingsModal/components/TabDataError/TabDataError.tsx index 14378a031eb..960a5400f8b 100644 --- a/frontend/app-development/layout/SettingsModalButton/SettingsModal/components/TabDataError/TabDataError.tsx +++ b/frontend/app-development/layout/SettingsModalButton/SettingsModal/components/TabDataError/TabDataError.tsx @@ -1,8 +1,8 @@ import type { ReactNode } from 'react'; import React from 'react'; -import { Alert, Paragraph } from '@digdir/designsystemet-react'; +import { Paragraph } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; -import { StudioCenter } from '@studio/components'; +import { StudioCenter, StudioError } from '@studio/components'; export type TabDataErrorProps = { children: ReactNode; @@ -12,11 +12,11 @@ export const TabDataError = ({ children }: TabDataErrorProps): ReactNode => { const { t } = useTranslation(); return ( - + {t('general.fetch_error_message')} {t('general.error_message_with_colon')} {children} - + ); }; diff --git a/frontend/dashboard/components/SafeErrorView/SafeErrorView.tsx b/frontend/dashboard/components/SafeErrorView/SafeErrorView.tsx index 86f865c8c33..62a9c247cce 100644 --- a/frontend/dashboard/components/SafeErrorView/SafeErrorView.tsx +++ b/frontend/dashboard/components/SafeErrorView/SafeErrorView.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react'; -import { StudioButton } from '@studio/components'; +import { Heading, Paragraph } from '@digdir/designsystemet-react'; +import { StudioButton, StudioError } from '@studio/components'; import { useTranslation } from 'react-i18next'; export type SafeErrorViewProps = { @@ -24,7 +24,7 @@ export const SafeErrorView = ({ {heading} )} - + {title} @@ -32,7 +32,7 @@ export const SafeErrorView = ({
{t('general.reload')}
- + ); }; diff --git a/frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.tsx b/frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.tsx index 4d270848725..eab2d60fdf0 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.tsx +++ b/frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.tsx @@ -1,7 +1,7 @@ import React, { useContext, useMemo, useRef, useState } from 'react'; import type { BooleanExpression } from './types/Expression'; import { isExpressionValid } from './validators/isExpressionValid'; -import { Alert, Tabs } from '@digdir/designsystemet-react'; +import { Tabs } from '@digdir/designsystemet-react'; import { SimplifiedEditor } from './SimplifiedEditor'; import { ManualEditor } from './ManualEditor'; import { isExpressionSimple } from './validators/isExpressionSimple'; @@ -9,6 +9,7 @@ import { StudioExpressionContext } from './StudioExpressionContext'; import type { DataLookupOptions } from './types/DataLookupOptions'; import classes from './StudioExpression.module.css'; import type { ExpressionTexts } from './types/ExpressionTexts'; +import { StudioError } from '../StudioError'; export type StudioExpressionProps = { expression: BooleanExpression; @@ -33,7 +34,7 @@ export const StudioExpression = ({ showAddSubexpression, }: StudioExpressionProps) => { if (!isExpressionValid(expression)) { - return {texts.invalidExpression}; + return {texts.invalidExpression}; } return ( diff --git a/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx b/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx index bf5faeb81f9..110f7ce1498 100644 --- a/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx +++ b/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { FileStatus, RepoContentStatus } from 'app-shared/types/RepoStatus'; -import { StudioModal, StudioSpinner } from '@studio/components'; -import { Alert, Heading, Table, Tag } from '@digdir/designsystemet-react'; +import { StudioError, StudioModal, StudioSpinner } from '@studio/components'; +import { Heading, Table, Tag } from '@digdir/designsystemet-react'; import { useTranslation } from 'react-i18next'; import classes from './FileChangesInfoModal.module.css'; import { ClockDashedIcon } from '@studio/icons'; @@ -58,9 +58,7 @@ export const FileChangesInfoModal = ({ ); case 'error': return ( - - {t('sync_header.show_changes_modal.repo_diff_error_title')} - + {t('sync_header.show_changes_modal.repo_diff_error_title')} ); } }; diff --git a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx index 28c6a911c42..468a033f58d 100644 --- a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx +++ b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx @@ -6,12 +6,12 @@ import { DefaultToolbar } from './DefaultToolbar'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import classes from './Elements.module.css'; -import { StudioButton, StudioSpinner } from '@studio/components'; +import { StudioButton, StudioError, StudioSpinner } from '@studio/components'; import { ShrinkIcon } from '@studio/icons'; import { useCustomReceiptLayoutSetName } from 'app-shared/hooks/useCustomReceiptLayoutSetName'; import { useTranslation } from 'react-i18next'; import { useProcessTaskTypeQuery } from '../../hooks/queries/useProcessTaskTypeQuery'; -import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react'; +import { Heading, Paragraph } from '@digdir/designsystemet-react'; export interface ElementsProps { collapsed: boolean; @@ -48,14 +48,14 @@ export const Elements = ({ collapsed, onCollapseToggle }: ElementsProps): React. return (
- + {t('schema_editor.error_could_not_detect_taskType', { layout: selectedFormLayoutSetName, })} {t('schema_editor.error_could_not_detect_taskType_description')} - +
); From e6339f86834c5349728ee4e2d1fd3ead40a289e8 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Thu, 22 Aug 2024 09:33:52 +0200 Subject: [PATCH 6/7] updated test --- .../src/components/StudioError/StudioError.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx index 9f89b0cd54f..f26cdde0417 100644 --- a/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx @@ -11,15 +11,4 @@ describe('StudioError', () => { const paragraph = screen.getByText(message); expect(paragraph).toBeInTheDocument(); }); - - it('should support children as ReactNode', () => { - render( - - ReactNode Message - , - ); - - const messageAsLink = screen.getByRole('link', { name: 'ReactNode Message' }); - expect(messageAsLink).toBeInTheDocument(); - }); }); From 99d6316f6ec05ef96b584a84a4af2925fc304b5f Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 23 Aug 2024 13:58:51 +0200 Subject: [PATCH 7/7] fixed comments --- .../appPublish/containers/DeploymentContainer.tsx | 4 +--- .../features/appPublish/pages/DeployPage.tsx | 6 +----- .../src/components/StudioError/StudioError.tsx | 14 ++++++++------ .../FileChangesInfoModal/FileChangesInfoModal.tsx | 4 +++- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx index d328290b78d..47fe12253fb 100644 --- a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx +++ b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx @@ -58,9 +58,7 @@ export const DeploymentContainer = () => { if (environmentListIsError || orgsIsError || appDeploymentIsError) return (
-
- {t('app_deployment.error')} -
+ {t('app_deployment.error')}
); diff --git a/frontend/app-development/features/appPublish/pages/DeployPage.tsx b/frontend/app-development/features/appPublish/pages/DeployPage.tsx index afe0d1fee02..aa202fb85c2 100644 --- a/frontend/app-development/features/appPublish/pages/DeployPage.tsx +++ b/frontend/app-development/features/appPublish/pages/DeployPage.tsx @@ -35,11 +35,7 @@ export function DeployPage() { } if (orgsIsError || permissionsIsError) - return ( -
- {t('app_deployment.error')}; -
- ); + return {t('app_deployment.error')}; // If org isn't listed, or doesn't have any environments if (!orgs[org] || !orgs[org].environments || !orgs[org].environments.length) { diff --git a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx index 97a93d89f00..35fb17aea13 100644 --- a/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx +++ b/frontend/libs/studio-components/src/components/StudioError/StudioError.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { Alert } from '@digdir/designsystemet-react'; +import { Alert, type AlertProps } from '@digdir/designsystemet-react'; -export type StudioErrorProps = { - children?: React.ReactNode; -}; +export type StudioErrorProps = Omit; -export const StudioError = ({ children }: StudioErrorProps) => { - return {children}; +export const StudioError = ({ children, ...rest }: StudioErrorProps) => { + return ( + + {children} + + ); }; diff --git a/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx b/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx index 110f7ce1498..a90f9138f8b 100644 --- a/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx +++ b/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/CommitAndPushContent/FileChangesInfoModal/FileChangesInfoModal.tsx @@ -58,7 +58,9 @@ export const FileChangesInfoModal = ({ ); case 'error': return ( - {t('sync_header.show_changes_modal.repo_diff_error_title')} + + {t('sync_header.show_changes_modal.repo_diff_error_title')} + ); } };