feat: addded helptext for hidden property (#14292)

Altinn · Jan 7, 2025 · 9bfa321 · 9bfa321
1 parent 1bd192d
commit 9bfa321
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 9 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1329,7 +1329,7 @@
   "ux_editor.component_properties.headingLevel": "Overskriftsnivå",
   "ux_editor.component_properties.hidden": "Skjul feltet",
   "ux_editor.component_properties.hiddenRow": "Angi hvilke rader som skal skjules",
-  "ux_editor.component_properties.hideBottomBorder": "Skjul skillelinje under komponenten",
+  "ux_editor.component_properties.hideBottomBorder": "Skjul skillelinjen under komponenten",
   "ux_editor.component_properties.hideChangeButton": "Skjul Endre-knapp",
   "ux_editor.component_properties.hideEmptyFields": "Skjul tomme felter",
   "ux_editor.component_properties.hideValidationMessages": "Skjul valideringsmeldinger",
@@ -1373,9 +1373,10 @@
   "ux_editor.component_properties.overrides_type": "Vis type",
   "ux_editor.component_properties.pageBreak": "PDF-innstillinger (pageBreak)",
   "ux_editor.component_properties.pageRef": "Navnet til siden det gjelder (pageRef)",
-  "ux_editor.component_properties.pagination": "Paginering",
+  "ux_editor.component_properties.pagination": "Sidenummerering",
   "ux_editor.component_properties.position": "Plassering av valuta",
-  "ux_editor.component_properties.preselectedOptionIndex": "Indeks/plassering av forhåndsvalgt verdi (preselectedOptionIndex)",
+  "ux_editor.component_properties.preselectedOptionIndex": "Angi det valget som skal være forhåndsvalgt.",
+  "ux_editor.component_properties.preselected_help_text": "Eksempel: Hvis du har 5 valg, kan du bruke tall fra 0-4.",
   "ux_editor.component_properties.queryParameters": "Parametere i spørringen",
   "ux_editor.component_properties.readOnly": "Feltet kan kun leses",
   "ux_editor.component_properties.receiver": "Den som mottar skjemaet",
@@ -1479,6 +1480,7 @@
   "ux_editor.component_properties_description.elements": "Hvilke elementer skal vises for instansinformasjonen",
   "ux_editor.component_properties_description.pageBreak": "Valgfri sideskift før eller etter komponenten i PDF",
   "ux_editor.component_properties_description.pagination": "Pagineringsvalg for repeterende gruppe",
+  "ux_editor.component_properties_help_text.hidden": "Hvis du velger å skjule et felt, kan du sette betingelser for når det skal skjules under Valg for dynamikk.",
   "ux_editor.component_title.Accordion": "Trekkspilliste",
   "ux_editor.component_title.AccordionGroup": "Nestet trekkspilliste",
   "ux_editor.component_title.ActionButton": "Handlingsknapp",

diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx
@@ -330,6 +330,77 @@ describe('FormComponentConfig', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('should call handleComponentUpdate with validFileEndings undefined when hasCustomFileEndings is false', async () => {
+    const handleComponentUpdateMock = jest.fn();
+    render({
+      props: {
+        schema: {
+          properties: {
+            hasCustomFileEndings: { type: 'boolean', default: true },
+            validFileEndings: { type: 'string', description: 'Valid file endings' },
+          },
+        },
+        handleComponentUpdate: handleComponentUpdateMock,
+      },
+    });
+    const user = userEvent.setup();
+    const hasCustomFileEndingsSwitch = screen.getByRole('checkbox', {
+      name: textMock('ux_editor.component_properties.hasCustomFileEndings'),
+    });
+    expect(hasCustomFileEndingsSwitch).toBeChecked();
+    await user.click(hasCustomFileEndingsSwitch);
+    expect(handleComponentUpdateMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        hasCustomFileEndings: false,
+        validFileEndings: undefined,
+      }),
+    );
+  });
+
+  it('should call handleComponentUpdate with updated component when hasCustomFileEndings is true', async () => {
+    const handleComponentUpdateMock = jest.fn();
+    render({
+      props: {
+        schema: {
+          properties: {
+            hasCustomFileEndings: { type: 'boolean', default: false },
+            validFileEndings: { type: 'string', description: 'Valid file endings' },
+          },
+        },
+        handleComponentUpdate: handleComponentUpdateMock,
+      },
+    });
+    const user = userEvent.setup();
+    const hasCustomFileEndingsSwitch = screen.getByRole('checkbox', {
+      name: textMock('ux_editor.component_properties.hasCustomFileEndings'),
+    });
+    expect(hasCustomFileEndingsSwitch).not.toBeChecked();
+    await user.click(hasCustomFileEndingsSwitch);
+    expect(handleComponentUpdateMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        hasCustomFileEndings: true,
+      }),
+    );
+  });
+
+  it('should call handleComponentUpdate when a boolean value is toggled', async () => {
+    const user = userEvent.setup();
+    const handleComponentUpdateMock = jest.fn();
+    render({
+      props: {
+        schema: DatepickerSchema,
+        handleComponentUpdate: handleComponentUpdateMock,
+      },
+    });
+    const timeStampSwitch = screen.getByRole('checkbox', {
+      name: textMock('ux_editor.component_properties.readOnly'),
+    });
+    await user.click(timeStampSwitch);
+    expect(handleComponentUpdateMock).toHaveBeenCalledWith(
+      expect.objectContaining({ readOnly: true }),
+    );
+  });
+
   const render = ({
     props = {},
     queries = {},

diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx
@@ -213,7 +213,7 @@ export const FormComponentConfig = ({
             handleComponentChange={handleComponentUpdate}
             propertyKey={propertyKey}
             key={propertyKey}
-            helpText={properties[propertyKey]?.description}
+            helpText={t('ux_editor.component_properties.preselected_help_text')}
             enumValues={properties[propertyKey]?.enum}
           />
         );

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { EditBooleanValue } from './EditBooleanValue';
+import { renderWithProviders } from '../../../testing/mocks';
+
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { ComponentType } from 'app-shared/types/ComponentType';
+import userEvent from '@testing-library/user-event';
+
+const user = userEvent.setup();
+
+const renderEditBooleanValue = ({
+  handleComponentChange = jest.fn(),
+  value = false,
+  propertyKey = 'required',
+  componentOverrides = {},
+  helpText = '',
+} = {}) =>
+  renderWithProviders(
+    <EditBooleanValue
+      handleComponentChange={handleComponentChange}
+      propertyKey={propertyKey}
+      component={{
+        id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96',
+        type: ComponentType.Input,
+        textResourceBindings: {
+          title: 'ServiceName',
+        },
+        required: value,
+        itemType: 'COMPONENT',
+        dataModelBindings: { simpleBinding: 'some-path' },
+        ...componentOverrides,
+      }}
+    />,
+  );
+
+describe('EditBooleanValue', () => {
+  it('should render component as switch', () => {
+    renderEditBooleanValue();
+
+    expect(
+      screen.getByRole('checkbox', { name: textMock('ux_editor.component_properties.required') }),
+    ).toBeInTheDocument();
+  });
+
+  it('should call onChange handler with the correct arguments', async () => {
+    const handleComponentChange = jest.fn();
+    renderEditBooleanValue({ handleComponentChange });
+    const inputElement = screen.getByLabelText(textMock('ux_editor.component_properties.required'));
+
+    user.click(inputElement);
+
+    await waitFor(() => {
+      expect(handleComponentChange).toHaveBeenCalledWith({
+        id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96',
+        type: ComponentType.Input,
+        textResourceBindings: {
+          title: 'ServiceName',
+        },
+        required: true,
+        itemType: 'COMPONENT',
+        dataModelBindings: { simpleBinding: 'some-path' },
+      });
+    });
+  });
+
+  it('should display correct help text when value is an expression (array)', () => {
+    renderEditBooleanValue({
+      componentOverrides: {
+        required: [],
+      },
+    });
+    expect(
+      screen.getByText(textMock('ux_editor.component_properties.config_is_expression_message')),
+    ).toBeInTheDocument();
+  });
+
+  it('should display custom help text', () => {
+    const customHelpText = textMock('ux_editor.component_properties_help_text.required');
+    renderEditBooleanValue({
+      helpText: customHelpText,
+    });
+    expect(screen.getByRole('button')).toHaveTextContent(customHelpText);
+  });
+});
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
@@ -32,18 +32,18 @@ export const EditBooleanValue = ({
 
   const getNewBooleanValue = () => !(component[propertyKey] ?? defaultValue);
 
+  const helpText = isValueExpression(component[propertyKey])
+    ? t('ux_editor.component_properties.config_is_expression_message')
+    : componentPropertyHelpText(propertyKey);
+
   return (
     <FormField
       id={component.id}
       value={component[propertyKey]}
       onChange={handleChange}
       propertyPath={component.propertyPath}
       componentType={component.type}
-      helpText={
-        isValueExpression(component[propertyKey])
-          ? t('ux_editor.component_properties.config_is_expression_message')
-          : componentPropertyHelpText(propertyKey)
-      }
+      helpText={helpText}
       renderField={({ fieldProps }) => {
         return (
           <Switch