Skip to content

Commit

Permalink
Add SubFormMissingContentWarning Component
Browse files Browse the repository at this point in the history
  • Loading branch information
Jondyr committed Oct 17, 2024
1 parent 0ed30d8 commit fe941cb
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.redirectButton {
margin-top: var(--fds-spacing-3);
max-width: var(--fds-sizing-30);
}
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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>
);
};

0 comments on commit fe941cb

Please sign in to comment.