refactor: move ConditionalWrapper to app

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ConditionalWrapper } from './ConditionalWrapper';
+
+const meta = {
+  title: 'AppComponents/ConditionalWrapper',
+  component: ConditionalWrapper,
+  args: {
+    condition: true,
+    wrapper: (children) => <div style={{ border: '2px solid blue', padding: 8 }}>{children}</div>,
+    children: <p>Wrapped content</p>,
+  },
+} satisfies Meta<typeof ConditionalWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Wrapped: Story = {};
+
+export const Unwrapped: Story = {
+  args: {
+    condition: false,
+  },
+};
+
+export const Otherwise: Story = {
+  args: {
+    condition: false,
+    otherwise: (children) => <div style={{ border: '2px solid orange', padding: 8 }}>{children}</div>,
+  },
+};

src/App/frontend/src/app-components/ConditionalWrapper/ConditionalWrapper.test.tsx → libs/form-component/src/app-components/ConditionalWrapper/ConditionalWrapper.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
-import { renderWithAppComponentsProvider } from 'src/app-components/test/renderWithAppComponentsProvider';
+import { ConditionalWrapper } from './ConditionalWrapper';
 
 describe('ConditionalWrapper', () => {
   it('should pass children to wrapper callback when condition is true', () => {
-    const wrapperCb = jest.fn((children: React.ReactNode) => <div data-testid='conditional-wrapper'>{children}</div>);
-    render({
+    const wrapperCb = vi.fn((children: React.ReactNode) => <div data-testid='conditional-wrapper'>{children}</div>);
+    renderComponent({
       condition: true,
       wrapper: wrapperCb,
     });
@@ -19,8 +19,8 @@ describe('ConditionalWrapper', () => {
   });
 
   it('should not pass children to wrapper callback when condition is false', () => {
-    const wrapperCb = jest.fn((children: React.ReactNode) => <div data-testid='conditional-wrapper'>{children}</div>);
-    render({
+    const wrapperCb = vi.fn((children: React.ReactNode) => <div data-testid='conditional-wrapper'>{children}</div>);
+    renderComponent({
       condition: false,
       wrapper: wrapperCb,
     });
@@ -29,19 +29,32 @@ describe('ConditionalWrapper', () => {
     expect(screen.queryByTestId('conditional-wrapper')).not.toBeInTheDocument();
     expect(screen.getByTestId('children')).toBeInTheDocument();
   });
+
+  it('should pass children to otherwise callback when condition is false', () => {
+    const otherwiseCb = vi.fn((children: React.ReactNode) => <div data-testid='otherwise-wrapper'>{children}</div>);
+    renderComponent({
+      condition: false,
+      otherwise: otherwiseCb,
+    });
+
+    expect(otherwiseCb).toHaveBeenCalledWith(<div data-testid='children'>Children</div>);
+    expect(screen.getByTestId('otherwise-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('children')).toBeInTheDocument();
+  });
 });
 
-const render = (overridingProps: {
+const renderComponent = (overridingProps: {
   condition?: boolean;
   wrapper?: (children: React.ReactNode) => React.JSX.Element;
+  otherwise?: (children: React.ReactNode) => React.JSX.Element;
 }) => {
   const allProps: Parameters<typeof ConditionalWrapper>[0] = {
     condition: false,
     wrapper: (children) => <div data-testid='conditional-wrapper'>{children}</div>,
     ...overridingProps,
   };
 
-  return renderWithAppComponentsProvider(
+  return render(
     <ConditionalWrapper {...allProps}>
       <div data-testid='children'>Children</div>
     </ConditionalWrapper>,

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

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

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

@@ -1,4 +1,5 @@
 export * from './AccordionItem';
+export * from './ConditionalWrapper';
 export * from './Button';
 export * from './Card';
 export * from './Datepicker';

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

@@ -15,10 +15,12 @@ src/__mocks__/getOrgsMock.ts
 src/app-components/Accordion/
 src/app-components/Button/Button.tsx
 src/app-components/Card/
+src/app-components/ConditionalWrapper/
 src/app-components/Date/
 src/app-components/Datepicker/
 src/app-components/Flex/
 src/app-components/Text/DisplayText.tsx
+src/app-components/TimePicker/TimeSegment/TimeSegment.tsx
 src/app-components/loading/Spinner/Spinner.tsx
 src/codegen/schemas/layout-sets.schema.v1.ts
 src/components/presentation/Header.tsx
@@ -48,6 +50,9 @@ src/features/form/rules/RulesContext.tsx
 src/features/formData/LegacyRules.ts
 src/features/instance/instanceUtils.ts
 src/features/instantiate/containers/InstantiateContainer.tsx
+src/features/instantiate/containers/UnknownError.module.css
+src/features/instantiate/containers/UnknownErrorDetails.module.css
+src/features/instantiate/containers/UnknownErrorDetails.tsx
 src/features/instantiate/useInstantiation.tsx
 src/features/language/LangDataSourcesProvider.tsx
 src/features/language/LangToolsStore.tsx
@@ -73,6 +78,7 @@ src/layout/Group/SummaryGroupComponent.test.tsx
 src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
 src/layout/RepeatingGroup/Summary/SummaryRepeatingGroup.test.tsx
 src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+src/layout/SigningDocumentList/api.test.ts
 src/queries/appPrefetcher.ts
 src/queries/formPrefetcher.ts
 src/utils/formLayout.test.ts

src/App/frontend/src/app-components/Panel/Panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
 
-import { useIsMobile } from '@app/form-component';
+import { ConditionalWrapper, useIsMobile } from '@app/form-component';
 import { Heading } from '@digdir/designsystemet-react';
 import {
   CheckmarkCircleIcon,
@@ -12,7 +12,6 @@ import {
 import cn from 'classnames';
 
 import { useTranslation } from 'src/app-components/AppComponentsProvider';
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { FullWidthWrapper } from 'src/app-components/FullWidthWrapper/FullWidthWrapper';
 import { PANEL_VARIANT } from 'src/app-components/Panel/constants';
 import classes from 'src/app-components/Panel/Panel.module.css';

src/App/frontend/src/components/atoms/AltinnAttachments.test.tsx

@@ -84,18 +84,6 @@ jest.mock('src/utils/urls/urlHelper', () => ({
   makeUrlRelativeIfSameDomain: jest.fn((url) => url),
 }));
 
-jest.mock('src/app-components/ConditionalWrapper/ConditionalWrapper', () => ({
-  ConditionalWrapper: jest.fn(({ condition, wrapper, otherwise, children }) => {
-    if (condition) {
-      return wrapper(children);
-    } else if (otherwise) {
-      return otherwise(children);
-    } else {
-      return children;
-    }
-  }),
-}));
-
 describe('AltinnAttachments', () => {
   const mockUseCurrentLanguage = jest.mocked(useCurrentLanguage);
 

src/App/frontend/src/components/form/RadioButton.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useRef } from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Radio } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import type { RadioProps } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { HelpText } from 'src/app-components/HelpText/HelpText';
 import { translationKey } from 'src/AppComponentsBridge';
 import classes from 'src/components/form/RadioButton.module.css';

src/App/frontend/src/layout/Checkboxes/CheckboxesContainerComponent.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';

src/App/frontend/src/layout/Checkboxes/WrappedCheckbox.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Checkbox } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import type { CheckboxProps } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { HelpText } from 'src/app-components/HelpText/HelpText';
 import { translationKey } from 'src/AppComponentsBridge';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';

src/App/frontend/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { Button } from '@app/form-component';
+import { Button, ConditionalWrapper } from '@app/form-component';
 import { PencilIcon, TrashIcon } from '@navikt/aksel-icons';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
 import { isAttachmentUploaded } from 'src/features/attachments';

src/App/frontend/src/layout/Grid/GridComponent.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo } from 'react';
 import type { PropsWithChildren } from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Table } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { FullWidthWrapper } from 'src/app-components/FullWidthWrapper/FullWidthWrapper';
 import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { Caption } from 'src/components/form/caption/Caption';

src/App/frontend/src/layout/Group/GroupComponent.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { JSX } from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Heading } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { Panel } from 'src/app-components/Panel/Panel';
 import { FormStore } from 'src/features/form/FormContext';

src/App/frontend/src/layout/Group/GroupSummary.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { Flex } from '@app/form-component';
+import { ConditionalWrapper, Flex } from '@app/form-component';
 import { Heading } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import type { HeadingProps } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Lang } from 'src/features/language/Lang';
 import classes from 'src/layout/Group/GroupSummary.module.css';
 import { ComponentSummary, SummaryFlexForContainer } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';

src/App/frontend/src/layout/RadioButtons/ControlledRadioGroup.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Fieldset, useRadioGroup } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { LabelContent } from 'src/components/label/LabelContent';

src/App/frontend/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { Button, Flex } from '@app/form-component';
+import { Button, ConditionalWrapper, Flex } from '@app/form-component';
 import { PlusIcon } from '@navikt/aksel-icons';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { FullWidthWrapper } from 'src/app-components/FullWidthWrapper/FullWidthWrapper';
 import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { FormStore } from 'src/features/form/FormContext';

src/App/frontend/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 
+import { ConditionalWrapper } from '@app/form-component';
 import { Pagination, Table, usePagination } from '@digdir/designsystemet-react';
 import type { UsePaginationProps } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { useResetScrollPosition } from 'src/core/ui/useResetScrollPosition';
 import { FormStore } from 'src/features/form/FormContext';
 import { useLanguage } from 'src/features/language/useLanguage';