feat: 13391 create a studioerror component and use it instead of alerts with severity

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 <Alert severity='danger'>{t('app_deployment.permission_error')}</Alert>;
+  if (permissionsIsError) return <StudioError>{t('app_deployment.permission_error')}</StudioError>;
 
   const deployPermission =
     permissions.findIndex((e) => e.toLowerCase() === envName.toLowerCase()) > -1;

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 = ({
       <StudioSpinner showSpinnerTitle={false} spinnerTitle={t('app_deployment.releases_loading')} />
     );
 
-  if (releasesIsError) return <Alert severity='danger'>{t('app_deployment.releases_error')}</Alert>;
+  if (releasesIsError) return <StudioError>{t('app_deployment.releases_error')}</StudioError>;
 
   const imageOptions: ImageOption[] = releases
     .filter((image) => image.build.result === BuildResult.succeeded)

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 (
       <div className={classes.deployContainer}>
-        <Alert severity='danger' className={classes.alert}>
-          {t('app_deployment.error')}
-        </Alert>
+        <div className={classes.alert}>
+          <StudioError>{t('app_deployment.error')}</StudioError>
+        </div>
       </div>
     );
 

frontend/app-development/features/appPublish/containers/ReleaseContainer.tsx

@@ -7,15 +7,15 @@ 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';
 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 (
-        <Alert severity='danger'>
+        <StudioError>
           <StudioParagraph>
             <Trans
               i18nKey={'app_create_release_errors.fetch_release_failed'}
@@ -85,7 +85,7 @@ export function ReleaseContainer() {
               }}
             ></Trans>
           </StudioParagraph>
-        </Alert>
+        </StudioError>
       );
     }
     // Check if latest

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 (
-      <Alert severity='danger' className={classes.alert}>
-        {t('app_deployment.error')}
-      </Alert>
+      <div className={classes.alert}>
+        <StudioError>{t('app_deployment.error')}</StudioError>;
+      </div>
     );
 
   // If org isn't listed, or doesn't have any environments

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 (
         <StudioCenter>
-          <Alert severity='danger'>
+          <StudioError>
             <Paragraph>{t('general.fetch_error_message')}</Paragraph>
             <Paragraph>{t('general.error_message_with_colon')}</Paragraph>
             {jsonError && <ErrorMessage>{jsonError.message}</ErrorMessage>}
             {xsdError && <ErrorMessage>{xsdError.message}</ErrorMessage>}
-          </Alert>
+          </StudioError>
         </StudioCenter>
       );
     case 'success': {

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 (
-    <Alert severity='danger'>
+    <StudioError>
       <div className={classes.errorPanel}>
         <div>
           <Paragraph>{t('api_errors.DM_01')}</Paragraph>
@@ -60,6 +60,6 @@ export const SchemaGenerationErrorsPanel = ({
           {t('general.close')}
         </StudioButton>
       </div>
-    </Alert>
+    </StudioError>
   );
 };

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 (
         <StudioCenter>
-          <Alert severity='danger'>
+          <StudioError>
             <Paragraph>{t('general.fetch_error_message')}</Paragraph>
             <Paragraph>{t('general.error_message_with_colon')}</Paragraph>
             <ErrorMessage>
               {error.response?.data?.customErrorMessages[0] ?? error.message}
             </ErrorMessage>
-          </Alert>
+          </StudioError>
         </StudioCenter>
       );
 

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<HTMLAttributes<HTMLDivElement>, 'className'>;
@@ -41,7 +40,7 @@ export const DeploymentContainer = ({ className }: DeploymentContainerProps) =>
     );
 
   if (environmentListIsError || orgsIsError || appDeploymentIsError)
-    return <Alert severity='danger'>{t('overview.deployments_error')}</Alert>;
+    return <StudioError>{t('overview.deployments_error')}</StudioError>;
 
   const selectedOrg = orgs?.[org];
   const orgEnvironmentList: Environment[] = environmentList.filter((env: Environment) =>

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 <Alert severity='danger'>{t('overview.deployments_error')}</Alert>;
+    return <StudioError>{t('overview.deployments_error')}</StudioError>;
 
   // If repo-owner is an organisation
   const repoOwnerIsOrg = orgs && Object.keys(orgs).includes(repository?.owner.login);

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 (
     <StudioCenter>
-      <Alert severity='danger'>
+      <StudioError>
         <Paragraph>{t('general.fetch_error_message')}</Paragraph>
         <Paragraph>{t('general.error_message_with_colon')}</Paragraph>
         {children}
-      </Alert>
+      </StudioError>
     </StudioCenter>
   );
 };

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,15 +24,15 @@ export const SafeErrorView = ({
           {heading}
         </Heading>
       )}
-      <Alert severity='danger'>
+      <StudioError>
         <Heading level={3} size='small' spacing>
           {title}
         </Heading>
         <Paragraph spacing>{message}</Paragraph>
         <div>
           <StudioButton onClick={handleReloadPage}>{t('general.reload')}</StudioButton>
         </div>
-      </Alert>
+      </StudioError>
     </>
   );
 };

frontend/libs/studio-components/src/components/StudioError/StudioError.test.tsx

@@ -0,0 +1,14 @@
+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(<StudioError>{message}</StudioError>);
+
+    const paragraph = screen.getByText(message);
+    expect(paragraph).toBeInTheDocument();
+  });
+});

frontend/libs/studio-components/src/components/StudioError/StudioError.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Alert } from '@digdir/designsystemet-react';
+
+export type StudioErrorProps = {
+  children?: React.ReactNode;
+};
+
+export const StudioError = ({ children }: StudioErrorProps) => {
+  return <Alert severity='danger'>{children}</Alert>;
+};

frontend/libs/studio-components/src/components/StudioError/index.ts

@@ -0,0 +1 @@
+export { StudioError } from './StudioError';

frontend/libs/studio-components/src/components/StudioExpression/StudioExpression.tsx

@@ -1,14 +1,15 @@
 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';
 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 <Alert severity='danger'>{texts.invalidExpression}</Alert>;
+    return <StudioError>{texts.invalidExpression}</StudioError>;
   }
 
   return (

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);
-}

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 (
     <div className={classes.container}>
-      <Alert className={classes.alertContent} severity='danger'>
-        <Heading level={1} size='xs' spacing>
-          {title}
-        </Heading>
+      <StudioError>
+        {title && (
+          <Heading level={1} size='xs' spacing>
+            {title}
+          </Heading>
+        )}
         {isReactNode ? <>{message}</> : <Paragraph>{message}</Paragraph>}
-      </Alert>
+      </StudioError>
     </div>
   );
 };

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';