diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 73a04014688..736cd69da66 100644
--- 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
index 14d5f81523c..82f84a7f5b3 100644
--- 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
index 3d7f2c9a3d7..39f6c9a0155 100644
--- 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
new file mode 100644
index 00000000000..c6e98968754
--- /dev/null
+++ 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(
+ ,
+ );
+
+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
index 1a259f1edff..6ce1a0238bf 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx
@@ -32,6 +32,10 @@ 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 (
{
return (