Add SubFormMissingContentWarning Component

frontend/packages/ux-editor/src/components/Properties/EditSubFormTableColumns/SubFormMissingContentWarning/SubFormMissingContentWarning.module.css

@@ -0,0 +1,4 @@
+.redirectButton {
+  margin-top: var(--fds-spacing-3);
+  max-width: var(--fds-sizing-30);
+}

frontend/packages/ux-editor/src/components/Properties/EditSubFormTableColumns/SubFormMissingContentWarning/SubFormMissingContentWarning.test.tsx

@@ -0,0 +1,46 @@
+import { renderWithProviders } from '@altinn/ux-editor/testing/mocks';
+import { SubFormMissingContentWarning } from './SubFormMissingContentWarning';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+
+const setSelectedFormLayoutName = jest.fn();
+const setSelectedFormLayoutSetName = jest.fn();
+jest.mock('@altinn/ux-editor/hooks', () => ({
+  useAppContext: () => ({
+    setSelectedFormLayoutName,
+    setSelectedFormLayoutSetName,
+  }),
+}));
+
+describe('SubFormMissingContentWarning', () => {
+  it('renders without crashing', () => {
+    renderWithProviders(<SubFormMissingContentWarning subFormLayoutSetName='' />);
+    expect(
+      screen.getByText(
+        textMock('ux_editor.component_properties.subform.layout_set_is_missing_content_heading'),
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        textMock('ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph'),
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: textMock('top_menu.create') })).toBeInTheDocument();
+  });
+  it('calls redirect/state change functions on redirect button click', async () => {
+    const user = userEvent.setup();
+    const subFormLayoutSetName = 'test';
+    renderWithProviders(
+      <SubFormMissingContentWarning subFormLayoutSetName={subFormLayoutSetName} />,
+    );
+
+    await user.click(screen.getByRole('button', { name: textMock('top_menu.create') }));
+
+    expect(setSelectedFormLayoutName).toHaveBeenCalledTimes(1);
+    expect(setSelectedFormLayoutName).toHaveBeenCalledWith(undefined);
+    expect(setSelectedFormLayoutSetName).toHaveBeenCalledTimes(1);
+    expect(setSelectedFormLayoutSetName).toHaveBeenCalledWith(subFormLayoutSetName);
+  });
+});

frontend/packages/ux-editor/src/components/Properties/EditSubFormTableColumns/SubFormMissingContentWarning/SubFormMissingContentWarning.tsx

@@ -0,0 +1,45 @@
+import { PencilIcon } from '@studio/icons';
+import { StudioAlert, StudioButton, StudioHeading, StudioParagraph } from '@studio/components';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppContext } from '@altinn/ux-editor/hooks';
+import classes from './SubFormMissingContentWarning.module.css';
+
+type SubFormMissingContentWarningProps = {
+  subFormLayoutSetName: string;
+};
+
+export const SubFormMissingContentWarning = ({
+  subFormLayoutSetName,
+}: SubFormMissingContentWarningProps): ReactElement => {
+  const { setSelectedFormLayoutName, setSelectedFormLayoutSetName } = useAppContext();
+  const { t } = useTranslation();
+
+  const handleOnRedirectClick = (): void => {
+    setSelectedFormLayoutSetName(subFormLayoutSetName);
+    setSelectedFormLayoutName(undefined);
+  };
+
+  return (
+    <StudioAlert severity='warning'>
+      <StudioHeading size='2xs' level={2}>
+        {t('ux_editor.component_properties.subform.layout_set_is_missing_content_heading')}
+      </StudioHeading>
+      <StudioParagraph size='sm'>
+        {t('ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph')}
+      </StudioParagraph>
+      <StudioButton
+        onClick={handleOnRedirectClick}
+        variant='primary'
+        color='second'
+        icon={<PencilIcon />}
+        iconPlacement='left'
+        disabled={!subFormLayoutSetName}
+        className={classes.redirectButton}
+      >
+        {t('top_menu.create')}
+      </StudioButton>
+    </StudioAlert>
+  );
+};