refactor: move FatalError to form-component lib (#18912)

Author: Magnusrm

libs/form-component/src/app-components/FatalError/FatalError.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FatalError } from './FatalError';
+import { FatalErrorEmpty } from './FatalErrorEmpty';
+
+const meta = {
+  title: 'AppComponents/FatalError',
+  component: FatalError,
+} satisfies Meta<typeof FatalError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {
+  args: {
+    children: 'An unrecoverable error has occurred.',
+  },
+};
+
+export const Empty: StoryObj<typeof FatalErrorEmpty> = {
+  render: () => <FatalErrorEmpty />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders a hidden marker element signalling a fatal error without visible content.',
+      },
+    },
+  },
+};

libs/form-component/src/app-components/FatalError/FatalError.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+
+import { FatalError } from './FatalError';
+import { FatalErrorEmpty } from './FatalErrorEmpty';
+
+describe('FatalError', () => {
+  it('renders children inside a div with data-fatal-error', () => {
+    render(
+      <FatalError>
+        <span>Something went wrong</span>
+      </FatalError>,
+    );
+
+    const child = screen.getByText('Something went wrong');
+    expect(child).toBeInTheDocument();
+    expect(child.parentElement).toHaveAttribute('data-fatal-error');
+  });
+
+  it('forwards additional props to the underlying div', () => {
+    render(
+      <FatalError className='custom' data-testid='fatal'>
+        content
+      </FatalError>,
+    );
+
+    const wrapper = screen.getByTestId('fatal');
+    expect(wrapper).toHaveAttribute('data-fatal-error');
+    expect(wrapper).toHaveClass('custom');
+  });
+});
+
+describe('FatalErrorEmpty', () => {
+  it('renders a hidden div with data-fatal-error and no content', () => {
+    const { container } = render(<FatalErrorEmpty />);
+    const div = container.querySelector('[data-fatal-error]');
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveStyle({ display: 'none' });
+    expect(div?.children).toHaveLength(0);
+  });
+});

…mponents/error/FatalError/FatalError.tsx …app-components/FatalError/FatalError.tsxsrc/App/frontend/src/app-components/error/FatalError/FatalError.tsx renamed to libs/form-component/src/app-components/FatalError/FatalError.tsx src/App/frontend/src/app-components/error/FatalError/FatalError.tsx renamed to libs/form-component/src/app-components/FatalError/FatalError.tsx

@@ -1,15 +1,14 @@
-import React from 'react';
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 
 /**
  * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
  */
-export function FatalError({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
+export function FatalError({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
   return (
-    <div
-      data-fatal-error
-      {...props}
-    >
+    <div data-fatal-error {...props}>
       {children}
     </div>
   );

…rror/FatalErrorEmpty/FatalErrorEmpty.tsx …omponents/FatalError/FatalErrorEmpty.tsxsrc/App/frontend/src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx renamed to libs/form-component/src/app-components/FatalError/FatalErrorEmpty.tsx src/App/frontend/src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx renamed to libs/form-component/src/app-components/FatalError/FatalErrorEmpty.tsx

@@ -1,13 +1,6 @@
-import React from 'react';
-
 /**
  * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
  */
 export function FatalErrorEmpty() {
-  return (
-    <div
-      data-fatal-error
-      style={{ display: 'none' }}
-    />
-  );
+  return <div data-fatal-error style={{ display: 'none' }} />;
 }

libs/form-component/src/app-components/FatalError/index.ts

@@ -0,0 +1,2 @@
+export { FatalError } from './FatalError';
+export { FatalErrorEmpty } from './FatalErrorEmpty';

libs/form-component/src/app-components/index.ts

@@ -4,6 +4,7 @@ export * from './Card';
 export * from './Datepicker';
 export * from './DynamicForm';
 export * from './Dropzone';
+export * from './FatalError';
 export * from './Flex';
 export * from './Input';
 export * from './hooks';

src/App/frontend/monorepo-changed-paths.txt

@@ -1,4 +1,3 @@
-.claude/settings.json
 .gitattributes
 .github/
 .husky/
@@ -30,6 +29,8 @@ src/app-components/Table/
 src/app-components/Text/
 src/app-components/TextArea/TextArea.tsx
 src/app-components/TimePicker/
+src/app-components/error/FatalError/FatalError.tsx
+src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx
 src/app-components/loading/Spinner/Spinner.tsx
 src/codegen/schemas/layout-sets.schema.v1.ts
 src/components/presentation/Header.tsx

src/App/frontend/src/components/altinnError.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { FatalError } from '@app/form-component';
 import cn from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import classes from 'src/components/altinnError.module.css';
 import { Lang } from 'src/features/language/Lang';
 import { getHelpCircleIllustrationUrl } from 'src/utils/urls/appUrlHelper';

src/App/frontend/src/layout/GenericComponent.tsx

@@ -2,11 +2,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router';
 import type { SetURLSearchParams } from 'react-router';
 
-import { Flex } from '@app/form-component';
+import { FatalError, FatalErrorEmpty, Flex } from '@app/form-component';
 import classNames from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
-import { FatalErrorEmpty } from 'src/app-components/error/FatalErrorEmpty/FatalErrorEmpty';
 import { SearchParams } from 'src/core/routing/types';
 import { useIsNavigating } from 'src/core/routing/useIsNavigating';
 import { useDevToolsStore } from 'src/features/devtools/data/DevToolsStore';

src/App/frontend/src/layout/SigneeList/SigneeListError.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { FatalError } from '@app/form-component';
 import { isAxiosError } from 'axios';
 import { z, ZodError } from 'zod';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';