✨ [open-formulieren/open-forms#5016] Referentielijsten service automa…

…tically select first service

src/components/builder/values/referentielijsten/service.tsx

@@ -1,11 +1,11 @@
+import {useField} from 'formik';
 import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import useAsync from 'react-use/esm/useAsync';
 
-import Select from '@/components/formio/select';
+import Select, {Option} from '@/components/formio/select';
 import {BuilderContext} from '@/context';
 
-// TODO transform this to id and label?
 export interface ReferentielijstenServiceOption {
   url: string;
   slug: string;
@@ -43,6 +43,18 @@ const ReferentielijstenServiceSelect: React.FC = () => {
     throw error;
   }
   const _options = isServiceOptions(options) ? options : [];
+  const transformedOptions: Option[] = _options.map(({slug, label}) => ({
+    value: slug,
+    label: label,
+  }));
+
+  // react-select doesn't update the defaultValue if it is initially `null`,
+  // so instead we update the value of the Formik field to ensure the correct default
+  // is selected
+  const [field, , {setValue}] = useField('openForms.service');
+  if (transformedOptions && transformedOptions.length == 1 && !field.value) {
+    setValue(transformedOptions[0].value);
+  }
 
   return (
     <Select
@@ -58,8 +70,7 @@ const ReferentielijstenServiceSelect: React.FC = () => {
         defaultMessage: `The identifier of the Referentielijsten service from which the options will be retrieved.`,
       })}
       isLoading={loading}
-      options={_options}
-      valueProperty="slug"
+      options={transformedOptions}
       required
     />
   );

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

@@ -1,5 +1,5 @@
 import {Meta, StoryObj} from '@storybook/react';
-import {expect, fn, userEvent, within} from '@storybook/test';
+import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 
 import ComponentEditForm from '@/components/ComponentEditForm';
 import {BuilderContextDecorator} from '@/sb-decorators';
@@ -156,3 +156,35 @@ export const SwitchToManualResetOptions: Story = {
     });
   },
 };
+
+export const AutoSelectIfOnlyOneReferentielijstenService: Story = {
+  name: 'If there is only one Referentielijsten service: automatically select it',
+  parameters: {
+    builder: {
+      enableContext: true,
+      defaultServices: [
+        {
+          url: 'http://localhost:8000/api/v2/services/70',
+          slug: 'referentielijsten',
+          label: 'Referentielijsten',
+          apiRoot: 'http://localhost:8004/api/v1/',
+          apiType: 'orc',
+        },
+      ],
+    },
+  },
+  play: async ({canvasElement, step, args}) => {
+    const canvas = within(canvasElement);
+
+    await step('Fill in options', async () => {
+      const dataSourceInput = canvas.getByLabelText('Data source');
+      await rsSelect(dataSourceInput, 'Referentielijsten API');
+
+      const serviceInput = canvas.getByLabelText('Referentielijsten service');
+
+      await waitFor(async () => {
+        expect(serviceInput.parentElement?.parentElement).toHaveTextContent('Referentielijsten');
+      });
+    });
+  },
+};

src/tests/sharedUtils.tsx

@@ -45,8 +45,8 @@ export const DEFAULT_SERVICES: ReferentielijstenServiceOption[] = [
   },
   {
     url: 'http://localhost:8000/api/v2/services/6',
-    slug: 'documenten',
-    label: 'Documenten',
+    slug: 'referentielijsten2',
+    label: 'Referentielijsten 2',
     apiRoot: 'http://localhost:8003/documenten/api/v1/',
     apiType: 'drc',
   },