style: Rename subForm to subform (#13903)

Co-authored-by: JamalAlabdullah <[email protected]>

frontend/language/src/nb.json

@@ -1403,7 +1403,7 @@
   "ux_editor.component_title.PrintButton": "Utskrift",
   "ux_editor.component_title.RadioButtons": "Radioknapper",
   "ux_editor.component_title.RepeatingGroup": "Repeterende gruppe",
-  "ux_editor.component_title.SubForm": "Underskjema",
+  "ux_editor.component_title.Subform": "Underskjema",
   "ux_editor.component_title.Summary": "Oppsummering",
   "ux_editor.component_title.Summary2": "Oppsummering2",
   "ux_editor.component_title.TextArea": "Stort tekstfelt",

frontend/packages/shared/src/types/ComponentSpecificConfig.ts

@@ -376,7 +376,7 @@ export type ComponentSpecificConfig<T extends ComponentType = ComponentType> = {
     rowsAfter?: GridRow[];
     labelSettings?: LabelSettings;
   };
-  [ComponentType.SubForm]: FormComponentProps;
+  [ComponentType.Subform]: FormComponentProps;
   [ComponentType.Summary]: SummarizableComponentProps & {
     componentRef: string;
     largeGroup?: boolean;

frontend/packages/shared/src/types/ComponentType.ts

@@ -37,7 +37,7 @@ export enum ComponentType {
   PrintButton = 'PrintButton',
   RadioButtons = 'RadioButtons',
   RepeatingGroup = 'RepeatingGroup',
-  SubForm = 'SubForm',
+  Subform = 'Subform',
   Summary = 'Summary',
   Summary2 = 'Summary2',
   TextArea = 'TextArea',

frontend/packages/shared/src/types/api/LayoutSetPayload.ts

@@ -5,7 +5,7 @@ export interface LayoutSetPayload {
   layoutSetConfig: LayoutSetConfig;
 }
 
-type SubFormConfig = {
+type SubformConfig = {
   type: 'subform';
 };
 
@@ -16,4 +16,4 @@ type RegularLayoutSetConfig = {
 export type LayoutSetConfig = {
   id: string;
   dataType?: string;
-} & (SubFormConfig | RegularLayoutSetConfig);
+} & (SubformConfig | RegularLayoutSetConfig);

frontend/packages/ux-editor/src/classes/Subformutils.test.ts → frontend/packages/ux-editor/src/classes/SubformUtils.test.ts

@@ -1,26 +1,26 @@
-import { SubFormUtilsImpl } from './SubFormUtils';
+import { SubformUtilsImpl } from './SubformUtils';
 import type { LayoutSetConfig } from 'app-shared/types/api/LayoutSetsResponse';
 
-describe('SubFormUtilsImpl', () => {
+describe('SubformUtilsImpl', () => {
   describe('hasSubform', () => {
     it('should return false for hasSubforms when there are no subform layout sets', () => {
       const layoutSets: Array<LayoutSetConfig> = [{ id: '1' }];
-      const subFormUtils = new SubFormUtilsImpl(layoutSets);
-      expect(subFormUtils.hasSubforms).toBe(false);
+      const subformUtils = new SubformUtilsImpl(layoutSets);
+      expect(subformUtils.hasSubforms).toBe(false);
     });
 
     it('should return true for hasSubforms when there are subform layout sets', () => {
       const layoutSets: Array<LayoutSetConfig> = [{ id: '1', type: 'subform' }];
-      const subFormUtils = new SubFormUtilsImpl(layoutSets);
-      expect(subFormUtils.hasSubforms).toBe(true);
+      const subformUtils = new SubformUtilsImpl(layoutSets);
+      expect(subformUtils.hasSubforms).toBe(true);
     });
   });
 
   describe('subformLayoutSetsIds', () => {
     it('should return an empty array for subformLayoutSetsIds when there are no subform layout sets', () => {
       const layoutSets: Array<LayoutSetConfig> = [{ id: '1' }];
-      const subFormUtils = new SubFormUtilsImpl(layoutSets);
-      expect(subFormUtils.subformLayoutSetsIds).toEqual([]);
+      const subformUtils = new SubformUtilsImpl(layoutSets);
+      expect(subformUtils.subformLayoutSetsIds).toEqual([]);
     });
 
     it('should return the correct subform layout set IDs', () => {
@@ -29,8 +29,8 @@ describe('SubFormUtilsImpl', () => {
         { id: '2' },
         { id: '3', type: 'subform' },
       ];
-      const subFormUtils = new SubFormUtilsImpl(layoutSets);
-      expect(subFormUtils.subformLayoutSetsIds).toEqual(['1', '3']);
+      const subformUtils = new SubformUtilsImpl(layoutSets);
+      expect(subformUtils.subformLayoutSetsIds).toEqual(['1', '3']);
     });
   });
 });

frontend/packages/ux-editor/src/classes/SubFormUtils.ts → frontend/packages/ux-editor/src/classes/SubformUtils.ts

@@ -1,28 +1,28 @@
 import type { LayoutSetConfig } from 'app-shared/types/api/LayoutSetsResponse';
 
-type SubFormLayoutSet = LayoutSetConfig & {
+type SubformLayoutSet = LayoutSetConfig & {
   type: 'subform';
 };
 
-interface SubFormUtils {
+interface SubformUtils {
   hasSubforms: boolean;
   subformLayoutSetsIds: Array<string>;
 }
 
-export class SubFormUtilsImpl implements SubFormUtils {
+export class SubformUtilsImpl implements SubformUtils {
   constructor(private readonly layoutSets: Array<LayoutSetConfig>) {}
 
   public get hasSubforms(): boolean {
     return this.getSubformLayoutSets.length > 0;
   }
 
   public get subformLayoutSetsIds(): Array<string> {
-    return this.getSubformLayoutSets.map((set: SubFormLayoutSet) => set.id);
+    return this.getSubformLayoutSets.map((set: SubformLayoutSet) => set.id);
   }
 
-  private get getSubformLayoutSets(): Array<SubFormLayoutSet> {
+  private get getSubformLayoutSets(): Array<SubformLayoutSet> {
     return (this.layoutSets || []).filter(
       (set) => set.type === 'subform',
-    ) as Array<SubFormLayoutSet>;
+    ) as Array<SubformLayoutSet>;
   }
 }

frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx

@@ -5,7 +5,7 @@ import { useText, useAppContext } from '../../hooks';
 import classes from './LayoutSetsContainer.module.css';
 import { ExportForm } from './ExportForm';
 import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
-import { SubFormWrapper } from './SubForm/SubFormWrapper';
+import { SubformWrapper } from './Subform/SubformWrapper';
 import { StudioCombobox } from '@studio/components';
 
 export function LayoutSetsContainer() {
@@ -59,9 +59,9 @@ export function LayoutSetsContainer() {
       </StudioCombobox>
       {shouldDisplayFeature('exportForm') && <ExportForm />}
       {shouldDisplayFeature('subform') && (
-        <SubFormWrapper
+        <SubformWrapper
           layoutSets={layoutSetsResponse}
-          onSubFormCreated={handleLayoutSetChange}
+          onSubformCreated={handleLayoutSetChange}
           selectedLayoutSet={selectedFormLayoutSetName}
         />
       )}

frontend/packages/ux-editor/src/components/Elements/SubForm/CreateSubFormWrapper.test.tsx → frontend/packages/ux-editor/src/components/Elements/Subform/CreateSubformWrapper.test.tsx

@@ -2,55 +2,55 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWithProviders } from '../../../testing/mocks';
-import { CreateSubFormWrapper } from './CreateSubFormWrapper';
+import { CreateSubformWrapper } from './CreateSubformWrapper';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { app, org } from '@studio/testing/testids';
 import { layoutSetsMock, layoutSet1NameMock } from '@altinn/ux-editor/testing/layoutSetsMock';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 
-const subFormName = 'underskjema';
+const subformName = 'underskjema';
 
-describe('CreateSubFormWrapper', () => {
+describe('CreateSubformWrapper', () => {
   it('should open dialog when clicking "create subform" button', async () => {
     const user = userEvent.setup();
-    renderCreateSubFormWrapper();
+    renderCreateSubformWrapper();
 
-    const createSubFormButton = screen.getByRole('button', {
+    const createSubformButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform'),
     });
-    await user.click(createSubFormButton);
+    await user.click(createSubformButton);
 
     expect(await screen.findByRole('dialog')).toBeInTheDocument();
   });
 
-  it('should call onSubFormCreated when subform is created', async () => {
+  it('should call onSubformCreated when subform is created', async () => {
     const user = userEvent.setup();
-    const onSubFormCreated = jest.fn();
-    renderCreateSubFormWrapper(onSubFormCreated);
+    const onSubformCreated = jest.fn();
+    renderCreateSubformWrapper(onSubformCreated);
 
-    const createSubFormButton = screen.getByRole('button', {
+    const createSubformButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform'),
     });
-    await user.click(createSubFormButton);
+    await user.click(createSubformButton);
 
     const input = screen.getByRole('textbox');
-    await user.type(input, subFormName);
+    await user.type(input, subformName);
 
     const confirmButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform.confirm_button'),
     });
     await user.click(confirmButton);
-    expect(onSubFormCreated).toHaveBeenCalledWith(subFormName);
+    expect(onSubformCreated).toHaveBeenCalledWith(subformName);
   });
 
   it('should disable confirm button when name already exist', async () => {
     const user = userEvent.setup();
-    renderCreateSubFormWrapper();
+    renderCreateSubformWrapper();
 
-    const createSubFormButton = screen.getByRole('button', {
+    const createSubformButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform'),
     });
-    await user.click(createSubFormButton);
+    await user.click(createSubformButton);
 
     const input = screen.getByRole('textbox');
     await user.type(input, layoutSet1NameMock);
@@ -62,36 +62,36 @@ describe('CreateSubFormWrapper', () => {
   });
 
   it('should add subform when name is valid', async () => {
-    const onSubFormCreatedMock = jest.fn();
+    const onSubformCreatedMock = jest.fn();
     const user = userEvent.setup();
     const addLayoutSet = jest.fn();
 
-    renderCreateSubFormWrapper(onSubFormCreatedMock, { addLayoutSet });
+    renderCreateSubformWrapper(onSubformCreatedMock, { addLayoutSet });
 
-    const createSubFormButton = screen.getByRole('button', {
+    const createSubformButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform'),
     });
-    await user.click(createSubFormButton);
+    await user.click(createSubformButton);
 
     const input = screen.getByRole('textbox');
-    await user.type(input, subFormName);
+    await user.type(input, subformName);
 
     const confirmButton = screen.getByRole('button', {
       name: textMock('ux_editor.create.subform.confirm_button'),
     });
     await user.click(confirmButton);
-    expect(addLayoutSet).toHaveBeenCalledWith(org, app, subFormName, {
-      layoutSetConfig: { id: subFormName, type: 'subform' },
+    expect(addLayoutSet).toHaveBeenCalledWith(org, app, subformName, {
+      layoutSetConfig: { id: subformName, type: 'subform' },
     });
   });
 });
 
-const renderCreateSubFormWrapper = (
-  onSubFormCreated?: jest.Mock,
+const renderCreateSubformWrapper = (
+  onSubformCreated?: jest.Mock,
   queries: Partial<ServicesContextProps> = {},
 ) => {
   return renderWithProviders(
-    <CreateSubFormWrapper layoutSets={layoutSetsMock} onSubFormCreated={onSubFormCreated} />,
+    <CreateSubformWrapper layoutSets={layoutSetsMock} onSubformCreated={onSubformCreated} />,
     { queries },
   );
 };

frontend/packages/ux-editor/src/components/Elements/SubForm/CreateSubFormWrapper.tsx → frontend/packages/ux-editor/src/components/Elements/Subform/CreateSubformWrapper.tsx

@@ -6,19 +6,19 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
 import { useTranslation } from 'react-i18next';
 import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName';
 import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
-import classes from './CreateSubFormWrapper.module.css';
+import classes from './CreateSubformWrapper.module.css';
 
-type CreateSubFormWrapperProps = {
+type CreateSubformWrapperProps = {
   layoutSets: LayoutSets;
-  onSubFormCreated: (layoutSetName: string) => void;
+  onSubformCreated: (layoutSetName: string) => void;
 };
 
-export const CreateSubFormWrapper = ({
+export const CreateSubformWrapper = ({
   layoutSets,
-  onSubFormCreated,
-}: CreateSubFormWrapperProps) => {
+  onSubformCreated,
+}: CreateSubformWrapperProps) => {
   const [createNewOpen, setCreateNewOpen] = useState(false);
-  const [newSubFormName, setNewSubFormName] = useState('');
+  const [newSubformName, setNewSubformName] = useState('');
   const [nameError, setNameError] = useState('');
   const { t } = useTranslation();
   const { validateLayoutSetName } = useValidateLayoutSetName();
@@ -29,19 +29,19 @@ export const CreateSubFormWrapper = ({
     setCreateNewOpen(false);
 
     addLayoutSet({
-      layoutSetIdToUpdate: newSubFormName,
+      layoutSetIdToUpdate: newSubformName,
       layoutSetConfig: {
-        id: newSubFormName,
+        id: newSubformName,
         type: 'subform',
       },
     });
-    onSubFormCreated(newSubFormName);
+    onSubformCreated(newSubformName);
   };
 
-  const onNameChange = (subFormName: string) => {
-    const subFormNameValidation = validateLayoutSetName(subFormName, layoutSets);
-    setNameError(subFormNameValidation);
-    setNewSubFormName(subFormName);
+  const onNameChange = (subformName: string) => {
+    const subformNameValidation = validateLayoutSetName(subformName, layoutSets);
+    setNameError(subformNameValidation);
+    setNewSubformName(subformName);
   };
 
   return (
@@ -59,15 +59,15 @@ export const CreateSubFormWrapper = ({
         <StudioTextfield
           label={t('ux_editor.create.subform.label')}
           size='small'
-          value={newSubFormName}
+          value={newSubformName}
           onChange={(e) => onNameChange(e.target.value)}
           error={nameError}
         />
         <StudioButton
           className={classes.confirmCreateButton}
           variant='secondary'
           onClick={onCreateConfirmClick}
-          disabled={!newSubFormName || !!nameError}
+          disabled={!newSubformName || !!nameError}
         >
           {t('ux_editor.create.subform.confirm_button')}
         </StudioButton>