diff --git a/.github/workflows/deploy-designer.yaml b/.github/workflows/deploy-designer.yaml index db5805914ad..addd5edef9c 100644 --- a/.github/workflows/deploy-designer.yaml +++ b/.github/workflows/deploy-designer.yaml @@ -47,7 +47,7 @@ jobs: if [ "${{ github.ref }}" == "refs/heads/main" ]; then echo "tag=${{ needs.get-short-sha.outputs.short-sha }}" >> $GITHUB_OUTPUT else - sanitized_branch_name=$(echo "${{ github.ref_name }}" | tr -d '()' | tr '/' '-') + sanitized_branch_name=$(echo "${{ github.ref_name }}" | tr -d '()' | tr '/' '-' | tr '_' '-') echo "tag=${sanitized_branch_name}-${{ needs.get-short-sha.outputs.short-sha }}" >> $GITHUB_OUTPUT fi diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 9e88883f453..56ff9476aed 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1322,6 +1322,8 @@ "ux_editor.component_properties.subform.create_layout_set_description": "Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", "ux_editor.component_properties.subform.go_to_layout_set": "Gå til utforming av underskjemaet", + "ux_editor.component_properties.subform.layout_set_is_missing_content_heading": "Underskjemaet ditt mangler innhold.", + "ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph": "Denne tabellen bruker underskjemaet for å hente feltene og tekstene som skal vises i tabellen. Velg Utform underskjemaet for å legge inn innhold.", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", "ux_editor.component_properties.subform.selected_layout_set_title": "Endre underskjemakobling til {{subform}}", diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.module.css b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.module.css index e869e81a93b..b498d5a8497 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.module.css @@ -4,6 +4,10 @@ padding: var(--fds-spacing-3); } +.content-wrapper { + margin-top: var(--fds-spacing-4); +} + .addColumnButton { margin-top: var(--fds-spacing-3); } diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx index 63729c5cb74..b26046cdd21 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx @@ -5,15 +5,20 @@ import { type EditSubformTableColumnsProps, } from './EditSubformTableColumns'; import { textMock } from '@studio/testing/mocks/i18nMock'; -import { renderWithProviders } from 'dashboard/testing/mocks'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; import { queriesMock } from 'app-shared/mocks/queriesMock'; import userEvent from '@testing-library/user-event'; import { ComponentType } from 'app-shared/types/ComponentType'; import { componentMocks } from '@altinn/ux-editor/testing/componentMocks'; +import { renderWithProviders } from '@altinn/ux-editor/testing/mocks'; const subformComponentMock = componentMocks[ComponentType.Subform]; +const mockSubformLayoutValidation = jest.fn(); +jest.mock('./hooks/useSubformLayoutValidation', () => ({ + useSubformLayoutValidation: () => mockSubformLayoutValidation(), +})); + const defaultProps: EditSubformTableColumnsProps = { component: subformComponentMock, handleComponentChange: jest.fn(), @@ -29,8 +34,10 @@ describe('EditSubformTableColumns', () => { const user = userEvent.setup(); renderEditSubformTableColumns({ - component: { ...subformComponentMock, tableColumns: undefined }, - handleComponentChange: handleComponentChangeMock, + props: { + component: { ...subformComponentMock, tableColumns: undefined }, + handleComponentChange: handleComponentChangeMock, + }, }); const addColumnButton = screen.getByRole('button', { @@ -49,7 +56,7 @@ describe('EditSubformTableColumns', () => { const user = userEvent.setup(); renderEditSubformTableColumns({ - handleComponentChange: handleComponentChangeMock, + props: { handleComponentChange: handleComponentChangeMock }, }); const addColumnButton = screen.getByRole('button', { @@ -68,7 +75,7 @@ describe('EditSubformTableColumns', () => { const user = userEvent.setup(); renderEditSubformTableColumns({ - handleComponentChange: handleComponentChangeMock, + props: { handleComponentChange: handleComponentChangeMock }, }); const headerInputbutton = screen.getByRole('button', { @@ -96,7 +103,7 @@ describe('EditSubformTableColumns', () => { const user = userEvent.setup(); renderEditSubformTableColumns({ - handleComponentChange: handleComponentChangeMock, + props: { handleComponentChange: handleComponentChangeMock }, }); const deleteButton = screen.getByRole('button', { @@ -111,9 +118,34 @@ describe('EditSubformTableColumns', () => { const updatedComponent = handleComponentChangeMock.mock.calls[0][0]; expect(updatedComponent.tableColumns.length).toBe(0); }); + + it('should show warning if subform validation is false', () => { + renderEditSubformTableColumns({ isSubformLayoutConfigured: false }); + 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(); + }); }); -const renderEditSubformTableColumns = (props: Partial = {}) => { +type renderEditSubformTableColumnsParameters = { + props?: Partial; + isSubformLayoutConfigured?: boolean; +}; + +const renderEditSubformTableColumns = ( + { props, isSubformLayoutConfigured }: renderEditSubformTableColumnsParameters = { + isSubformLayoutConfigured: true, + }, +) => { + mockSubformLayoutValidation.mockReturnValue(isSubformLayoutConfigured); const queryClient = createQueryClientMock(); return renderWithProviders(, { ...queriesMock, diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx index bfbcb7e4eba..e4b20dba989 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx @@ -1,4 +1,4 @@ -import React, { type ReactElement } from 'react'; +import React, { type ReactElement, type ReactNode } from 'react'; import classes from './EditSubformTableColumns.module.css'; import { StudioButton, StudioHeading } from '@studio/components'; import { useTranslation } from 'react-i18next'; @@ -8,6 +8,8 @@ import { type TableColumn } from './types/TableColumn'; import { filterOutTableColumn, updateComponentWithSubform } from './utils'; import { useUniqueKeys } from '@studio/hooks'; import { ColumnElement } from './ColumnElement'; +import { useSubformLayoutValidation } from './hooks/useSubformLayoutValidation'; +import { SubformMissingContentWarning } from './SubformMissingContentWarning/SubformMissingContentWarning'; export type EditSubformTableColumnsProps = IGenericEditComponent; @@ -16,6 +18,7 @@ export const EditSubformTableColumns = ({ handleComponentChange, }: EditSubformTableColumnsProps): ReactElement => { const { t } = useTranslation(); + var subformLayoutIsConfigured = useSubformLayoutValidation(component.layoutSet); const tableColumns: TableColumn[] = component?.tableColumns ?? []; const { getUniqueKey, addUniqueKey, removeUniqueKey } = useUniqueKeys({ @@ -42,11 +45,16 @@ export const EditSubformTableColumns = ({ handleComponentChange({ ...component, tableColumns: updatedColumns }); }; + if (subformLayoutIsConfigured === false) { + return ( + + + + ); + } + return ( -
- - {t('ux_editor.properties_panel.subform_table_columns.heading')} - + {tableColumns.length > 0 && tableColumns.map((tableColum: TableColumn, index: number) => ( {t('ux_editor.properties_panel.subform_table_columns.add_column')} + + ); +}; + +type EditSubformTableColumnsWrapperProps = { + children: ReactNode; +}; + +const EditSubformTableColumnsWrapper = ({ children }: EditSubformTableColumnsWrapperProps) => { + const { t } = useTranslation(); + return ( +
+ + {t('ux_editor.properties_panel.subform_table_columns.heading')} + +
{children}
); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css new file mode 100644 index 00000000000..36cb113d802 --- /dev/null +++ b/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); +} diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx new file mode 100644 index 00000000000..f49fb605f9d --- /dev/null +++ b/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(); + 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( + , + ); + + 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); + }); +}); diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx new file mode 100644 index 00000000000..02cdcfbb32e --- /dev/null +++ b/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: subformLayoutSetName, +}: SubformMissingContentWarningProps): ReactElement => { + const { setSelectedFormLayoutName, setSelectedFormLayoutSetName } = useAppContext(); + const { t } = useTranslation(); + + const handleOnRedirectClick = (): void => { + setSelectedFormLayoutSetName(subformLayoutSetName); + setSelectedFormLayoutName(undefined); + }; + + return ( + + + {t('ux_editor.component_properties.subform.layout_set_is_missing_content_heading')} + + + {t('ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph')} + + } + iconPlacement='left' + disabled={!subformLayoutSetName} + className={classes.redirectButton} + > + {t('top_menu.create')} + + + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.test.tsx new file mode 100644 index 00000000000..6e98f3dc87f --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.test.tsx @@ -0,0 +1,61 @@ +import { useSubformLayoutValidation } from './useSubformLayoutValidation'; +import { renderHookWithProviders } from '@altinn/ux-editor/testing/mocks'; +import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { QueryKey } from 'app-shared/types/QueryKey'; +import { app, org } from '@studio/testing/testids'; +import type { IFormLayouts } from '@altinn/ux-editor/types/global'; +import { ComponentType } from 'app-shared/types/ComponentType'; + +const emptyLayout: IFormLayouts = { + page1: { + order: { + section1: ['component2'], + }, + components: {}, + containers: {}, + customRootProperties: {}, + customDataProperties: {}, + }, +}; + +const nonEmptyLayout: IFormLayouts = { + ...emptyLayout, + page1: { + ...emptyLayout.page1, + components: { + component2: { + type: ComponentType.Input, + id: 'component2', + itemType: 'COMPONENT', + dataModelBindings: { simpleBinding: 'simpleBinding' }, + }, + }, + }, +}; + +describe('useSubformLayoutValidation', () => { + it('should return true if form layout has components', () => { + const { result } = renderHook({ + layout: nonEmptyLayout, + }); + expect(result.current).toBe(true); + }); + it('should return false if form layout has no components', () => { + const { result } = renderHook({ + layout: emptyLayout, + }); + expect(result.current).toBe(false); + }); +}); + +type renderHookArgs = { + layout: IFormLayouts; +}; + +const renderHook = ({ layout }: renderHookArgs) => { + const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.FormLayouts, org, app, ''], layout); + return renderHookWithProviders(() => useSubformLayoutValidation(''), { + queryClient: queryClient, + }); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.ts b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.ts new file mode 100644 index 00000000000..7dfd0c9ff7f --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/hooks/useSubformLayoutValidation.ts @@ -0,0 +1,13 @@ +import { useFormLayoutsQuery } from '@altinn/ux-editor/hooks/queries/useFormLayoutsQuery'; +import { getAllLayoutComponents } from '@altinn/ux-editor/utils/formLayoutUtils'; +import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; + +export const useSubformLayoutValidation = (subformLayoutSetName: string): boolean => { + const { org, app } = useStudioEnvironmentParams(); + const { data: formLayout } = useFormLayoutsQuery(org, app, subformLayoutSetName); + + if (formLayout) { + return Object.values(formLayout).some((value) => getAllLayoutComponents(value).length > 0); + } + return false; +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index 970ce181232..8a918996a9a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -14,7 +14,7 @@ import type { FormComponent } from '../../../../../../types/FormComponent'; import { AppContext } from '../../../../../../AppContext'; import { appContextMock } from '../../../../../../testing/appContextMock'; -const onSubFormCreatedMock = jest.fn(); +const onSubformCreatedMock = jest.fn(); describe('CreateNewSubformLayoutSet ', () => { afterEach(jest.clearAllMocks); @@ -40,15 +40,15 @@ describe('CreateNewSubformLayoutSet ', () => { expect(saveButton).toBeInTheDocument(); }); - it('calls onSubFormCreated when save button is clicked', async () => { + it('calls onSubformCreated when save button is clicked', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); const input = screen.getByRole('textbox'); - await user.type(input, 'NewSubForm'); + await user.type(input, 'NewSubform'); const saveButton = screen.getByRole('button', { name: textMock('general.close') }); await user.click(saveButton); - await waitFor(() => expect(onSubFormCreatedMock).toHaveBeenCalledTimes(1)); - expect(onSubFormCreatedMock).toHaveBeenCalledWith('NewSubForm'); + await waitFor(() => expect(onSubformCreatedMock).toHaveBeenCalledTimes(1)); + expect(onSubformCreatedMock).toHaveBeenCalledWith('NewSubform'); }); }); @@ -60,7 +60,7 @@ const renderCreateNewSubformLayoutSet = ( queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); return renderWithProviders( - + , { queryClient }, ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index ef9b52de926..acaf206ce24 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -7,32 +7,32 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen import classes from './CreateNewSubformLayoutSet.module.css'; type CreateNewSubformLayoutSetProps = { - onSubFormCreated: (layoutSetName: string) => void; + onSubformCreated: (layoutSetName: string) => void; }; export const CreateNewSubformLayoutSet = ({ - onSubFormCreated, + onSubformCreated, }: CreateNewSubformLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); - const [newSubForm, setNewSubForm] = useState(''); + const [newSubform, setNewSubform] = useState(''); const { org, app } = useStudioEnvironmentParams(); const { mutate: addLayoutSet } = useAddLayoutSetMutation(org, app); const createNewSubform = () => { - if (!newSubForm) return; + if (!newSubform) return; addLayoutSet({ - layoutSetIdToUpdate: newSubForm, + layoutSetIdToUpdate: newSubform, layoutSetConfig: { - id: newSubForm, + id: newSubform, type: 'subform', }, }); - onSubFormCreated(newSubForm); - setNewSubForm(''); + onSubformCreated(newSubform); + setNewSubform(''); }; function handleChange(e: React.ChangeEvent) { - setNewSubForm(e.target.value); + setNewSubform(e.target.value); } return ( @@ -43,7 +43,7 @@ export const CreateNewSubformLayoutSet = ({ diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx index 6968f45919a..8a8c957978e 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -10,13 +10,13 @@ import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; onUpdateLayoutSet: (layoutSetId: string) => void; - onSubFormCreated: (layoutSetName: string) => void; + onSubformCreated: (layoutSetName: string) => void; }; export const EditLayoutSet = ({ existingLayoutSetForSubform, onUpdateLayoutSet, - onSubFormCreated, + onSubformCreated, }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [isLayoutSetSelectorVisible, setIsLayoutSetSelectorVisible] = useState(false); @@ -62,7 +62,7 @@ export const EditLayoutSet = ({ onClick={handleClick} /> - {showCreateSubform && } + {showCreateSubform && } ); } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 9be5df6e5d6..be1e641f48a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -143,13 +143,13 @@ describe('EditLayoutSetForSubform', () => { }); await user.click(createNewLayoutSetButton); const input = screen.getByRole('textbox'); - await user.type(input, 'NewSubForm'); + await user.type(input, 'NewSubform'); const saveButton = screen.getByRole('button', { name: textMock('general.close') }); await user.click(saveButton); expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); expect(handleComponentChangeMock).toHaveBeenCalledWith( expect.objectContaining({ - layoutSet: 'NewSubForm', + layoutSet: 'NewSubform', }), ); }); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx index db9441e69b3..12954ba971e 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx @@ -27,7 +27,7 @@ export const EditLayoutSetForSubform = ({ handleComponentChange(updatedComponent); }; - function handleCreatedSubForm(layoutSetName: string) { + function handleCreatedSubform(layoutSetName: string) { setSelectedFormLayoutSetName(layoutSetName); handleUpdatedLayoutSet(layoutSetName); } @@ -36,7 +36,7 @@ export const EditLayoutSetForSubform = ({ ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx b/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx index 29607f6b37a..57eafa77c2e 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Text.test.tsx @@ -310,32 +310,7 @@ describe('TextTab', () => { name: textMock('ux_editor.properties_panel.subform_table_columns.heading'), level: 2, }); - const addColumnButton = screen.getByRole('button', { - name: textMock('ux_editor.properties_panel.subform_table_columns.add_column'), - }); expect(tabelHeading).toBeInTheDocument(); - expect(addColumnButton).toBeInTheDocument(); - }); - - it('should call handleUpdate when handleComponentChange is triggered from EditSubformTableColumns', async () => { - const user = userEvent.setup(); - - render({ - props: { - ...props, - formItem: { - ...componentMocks[ComponentType.Subform], - }, - }, - }); - const addColumnButton = screen.getByRole('button', { - name: textMock('ux_editor.properties_panel.subform_table_columns.add_column'), - }); - await user.click(addColumnButton); - - await waitFor(() => { - expect(formItemContextProviderMock.handleUpdate).toHaveBeenCalledTimes(1); - }); }); }); }); diff --git a/frontend/packages/ux-editor/src/hooks/queries/useFormLayoutsQuery.ts b/frontend/packages/ux-editor/src/hooks/queries/useFormLayoutsQuery.ts index ced75496baf..4f8a0e5f9f2 100644 --- a/frontend/packages/ux-editor/src/hooks/queries/useFormLayoutsQuery.ts +++ b/frontend/packages/ux-editor/src/hooks/queries/useFormLayoutsQuery.ts @@ -17,6 +17,7 @@ export const useFormLayoutsQuery = ( getFormLayouts(org, app, layoutSetName).then((formLayouts) => { return convertExternalLayoutsToInternalFormat(formLayouts); }), + enabled: Boolean(layoutSetName), staleTime: Infinity, }); };