Issue/4637 optional translations act as required

src/components/ComponentConfiguration.stories.tsx

@@ -974,8 +974,10 @@ export const FileUpload: Story = {
     await step('File tab', async () => {
       await userEvent.click(canvas.getByRole('link', {name: 'File'}));
 
-      await expect(canvas.getByLabelText('Maximum file size')).toHaveDisplayValue('10MB');
-      await expect(canvas.getByText('Note that the server upload limit is 50MB.')).toBeVisible();
+      await waitFor(async () => {
+        await expect(canvas.getByLabelText('Maximum file size')).toHaveDisplayValue('10MB');
+        await expect(canvas.getByText('Note that the server upload limit is 50MB.')).toBeVisible();
+      });
 
       // check that the file types are visible
       canvas.getByLabelText('File types').focus();
@@ -1204,6 +1206,21 @@ export const SelectBoxes: Story = {
       // check that the option labels are in the translations table
       expect(await editForm.findByText('Option label 1')).toBeVisible();
       expect(await editForm.findByText('Second option')).toBeVisible();
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      expect(await editForm.queryByText('Required')).toBeNull();
     });
 
     await step('Set up itemsExpression for options', async () => {
@@ -1239,7 +1256,9 @@ export const SelectBoxes: Story = {
         openForms: {
           dataSrc: 'variable',
           itemsExpression: {var: 'someVar'},
-          translations: {},
+          translations: {
+            nl: {description: '', label: '', tooltip: ''},
+          },
         },
         defaultValue: {},
         // Advanced tab
@@ -1410,6 +1429,21 @@ export const Radio: Story = {
       // check that the option labels are in the translations table
       expect(await editForm.findByText('Option label 1')).toBeVisible();
       expect(await editForm.findByText('Second option')).toBeVisible();
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        await expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        await expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      await expect(await editForm.queryByText('Required')).toBeNull();
     });
 
     await step('Set up itemsExpression for options', async () => {
@@ -1445,7 +1479,9 @@ export const Radio: Story = {
         openForms: {
           dataSrc: 'variable',
           itemsExpression: {var: 'someVar'},
-          translations: {},
+          translations: {
+            nl: {description: '', label: '', tooltip: ''},
+          },
         },
         defaultValue: '',
         // Advanced tab
@@ -1623,6 +1659,21 @@ export const Select: Story = {
       // check that the option labels are in the translations table
       expect(await editForm.findByText('Option label 1')).toBeVisible();
       expect(await editForm.findByText('Second option')).toBeVisible();
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        await expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        await expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      await expect(await editForm.queryByText('Required')).toBeNull();
     });
 
     await step('Set up itemsExpression for options', async () => {
@@ -1665,7 +1716,9 @@ export const Select: Story = {
         openForms: {
           dataSrc: 'variable',
           itemsExpression: {var: 'someVar'},
-          translations: {},
+          translations: {
+            nl: {description: '', label: '', tooltip: ''},
+          },
         },
         defaultValue: '',
         // Advanced tab

src/registry/addressNL/edit.stories.ts

@@ -35,10 +35,12 @@ export const PostcodeValidationTabWithoutConfiguration: Story = {
     await step('Navigate to validation tab and open Postcode validation', async () => {
       await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
       await userEvent.click(canvas.getAllByText('Postcode')[0]);
+
       expect(await canvas.findByLabelText('Regular expression for postcode')).toBeVisible();
       expect(await canvas.findByText('NL')).toBeVisible();
       expect(await canvas.findByText('EN')).toBeVisible();
       expect(await canvas.findByText('Error code')).toBeVisible();
+
       const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"');
       expect(errorMessageInput).toHaveDisplayValue('');
     });
@@ -53,10 +55,12 @@ export const CityValidationTabWithoutConfiguration: Story = {
     await step('Navigate to validation tab and open City validation', async () => {
       await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
       await userEvent.click(canvas.getAllByText('City')[0]);
+
       expect(await canvas.findByLabelText('Regular expression for city')).toBeVisible();
       expect(await canvas.findByText('NL')).toBeVisible();
       expect(await canvas.findByText('EN')).toBeVisible();
       expect(await canvas.findByText('Error code')).toBeVisible();
+
       const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"');
       expect(errorMessageInput).toHaveDisplayValue('');
     });
@@ -93,6 +97,7 @@ export const PostcodeValidationTabWithConfiguration: Story = {
       await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
       await userEvent.click(canvas.getAllByText('Postcode')[0]);
       const patternInput = await canvas.findByLabelText('Regular expression for postcode');
+
       expect(patternInput).toBeVisible();
       expect(patternInput).toHaveValue('1017 [A-Za-z]{2}');
 
@@ -136,6 +141,7 @@ export const CityValidationTabWithConfiguration: Story = {
       await userEvent.click(canvas.getByRole('link', {name: 'Validation'}));
       await userEvent.click(canvas.getAllByText('City')[0]);
       const patternInput = await canvas.findByLabelText('Regular expression for city');
+
       expect(patternInput).toBeVisible();
       expect(patternInput).toHaveValue('Amsterdam');
 

src/registry/radio/radio-validation.stories.ts

@@ -52,8 +52,36 @@ export const ManualMinimumOneValue: Story = {
       await userEvent.type(labelInput, 'Foo');
       await userEvent.clear(labelInput);
       await userEvent.keyboard('[Tab]');
-      await expect(await canvas.findByText('The option label is a required field.')).toBeVisible();
-      await expect(await canvas.findByText('The option value is a required field.')).toBeVisible();
+
+      expect(await canvas.findByText('The option label is a required field.')).toBeVisible();
+      expect(await canvas.findByText('The option value is a required field.')).toBeVisible();
+    });
+  },
+};
+
+export const TranslationsArentRequired: Story = {
+  name: "Translations: translations aren't required fields",
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step("Translations aren't required fields", async () => {
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+      const editForm = within(canvas.getByTestId('componentEditForm'));
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      expect(await editForm.queryByText('Required')).toBeNull();
     });
   },
 };

src/registry/select/select-validation.spec.tsx

@@ -1,4 +1,5 @@
 import {SelectComponentSchema} from '@open-formulieren/types';
+import {expect, within} from '@storybook/test';
 import userEvent from '@testing-library/user-event';
 
 import ComponentEditForm from '@/components/ComponentEditForm';
@@ -96,3 +97,59 @@ test('There is always at least one option', async () => {
   const firstValueLabel = await screen.findByTestId('input-data.values[0].label');
   expect(firstValueLabel).toBeVisible();
 });
+
+test('All translations are optional', async () => {
+  const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
+  const onSubmit = jest.fn();
+  const component = {
+    id: 'wqimsadk',
+    type: 'select',
+    key: 'select',
+    label: 'A select field',
+    dataSrc: 'values',
+    openForms: {
+      dataSrc: 'manual',
+      translations: {},
+    },
+    data: {
+      values: [],
+    },
+    defaultValue: '',
+  } satisfies SelectComponentSchema;
+
+  const builderInfo = {
+    title: 'Select',
+    icon: 'th-list',
+    group: 'basic',
+    weight: 70,
+    schema: {},
+  };
+  contextRender(
+    <ComponentEditForm
+      isNew
+      component={component}
+      builderInfo={builderInfo}
+      onCancel={jest.fn()}
+      onRemove={jest.fn()}
+      onSubmit={onSubmit}
+    />
+  );
+
+  await user.click(screen.getByRole('tab', {name: 'Translations'}));
+  const editForm = within(screen.getByTestId('componentEditForm'));
+
+  // Check that all translations can be filled
+  const inputs = editForm.getAllByRole('textbox');
+  for (let input of inputs) {
+    await user.type(input, 'manualTranslation');
+    await expect(input).toHaveValue('manualTranslation');
+    await user.clear(input);
+    await expect(input).toHaveValue('');
+  }
+
+  // Removing focus from the last input
+  await user.click(screen.getByRole('tab', {name: 'Translations'}));
+
+  // Check that none of the inputs have a Required error message
+  await expect(await editForm.queryByText('Required')).toBeNull();
+});

src/registry/selectboxes/selectboxes-validation.stories.ts

@@ -72,6 +72,33 @@ export const ManualMinimumOneValue: Story = {
   },
 };
 
+export const TranslationsArentRequired: Story = {
+  name: "Translations: translations aren't required fields",
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step("Translations aren't required fields", async () => {
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+      const editForm = within(canvas.getByTestId('componentEditForm'));
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        await expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        await expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      await expect(await editForm.queryByText('Required')).toBeNull();
+    });
+  },
+};
+
 export const MinAndMaxSelectedInitialValues: Story = {
   name: 'Initial min and max count',
   args: {

src/registry/validation.ts

@@ -84,7 +84,7 @@ export const jsonSchema: z.ZodType<Json> = z.lazy(() =>
 
 // Maps to @open-formulieren/types common.ts Option type.
 const optionTranslationSchema = z.object({
-  label: z.string(),
+  label: z.string().optional(),
 });
 
 export const optionSchema = (intl: IntlShape) =>
@@ -109,7 +109,7 @@ export const optionSchema = (intl: IntlShape) =>
       .object({
         // zod doesn't seem to be able to use our supportedLanguageCodes for z.object keys,
         // they need to be defined statically. So, 'record' it is.
-        translations: z.record(optionTranslationSchema.optional()),
+        translations: z.record(z.string(), optionTranslationSchema.optional()),
       })
       .optional(),
   });