fix(select): fetching options when some dependency is null

ui/src/components/SingleInputComponent/SingleInputComponent.test.tsx

@@ -167,3 +167,57 @@
     const { label } = autoCompleteFields[0];
     expect(within(inputComponent).getByText(label)).toBeInTheDocument();
 });
+
+it('should fetch options from API when endpointUrl is provided', async () => {
+    // server responses with a filtered mockedEntries based on the name parameter
+    server.use(
+        http.get(MOCK_API_URL, ({ request }) => {
+            const url = new URL(request.url);
+
+            const nameParameter = url.searchParams.get('name');
+            return HttpResponse.json(
+                getMockServerResponseForInput(
+                    mockedEntries.filter((entry) => entry.name === nameParameter)
+                )
+            );
+        })
+    );
+    const baseProps = {
+        ...defaultInputProps,
+        value: '',
+        controlOptions: {
+            createSearchChoice: true,
+            dependencies: ['name', 'region'],
+            endpointUrl: MOCK_API_URL,
+            labelField: 'testLabel',
+            valueField: 'testValue',
+        },
+    };
+    const { rerender } = render(<SingleInputComponent {...baseProps} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await screen.findByRole('menuitem', { name: 'No matches' });
+
+    // undefined value must be omitted
+    rerender(
+        <SingleInputComponent
+            {...baseProps}
+            dependencyValues={{ name: 'dataApiTest1', region: undefined }}
+        />
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    await screen.findByRole('option', { name: 'firstLabel' });
+
+    rerender(<SingleInputComponent {...baseProps} dependencyValues={{ name: 'dataApiTest2' }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    await screen.findByRole('option', { name: 'secondLabel' });
+
+    rerender(
+        <SingleInputComponent
+            {...baseProps}
+            dependencyValues={{ name: undefined, region: undefined }}
+        />
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    await screen.findByRole('menuitem', { name: 'No matches' });
+});

ui/src/util/api.ts

@@ -5,9 +5,11 @@ import { generateToast, getUnifiedConfigs } from './util';
 import { parseErrorMsg } from './messageUtil';
 import { ResponseError } from './ResponseError';
 
+type ParamsRecord = Record<string, string | number | undefined>;
+
 export interface RequestParams {
     endpointUrl: string;
-    params?: Record<string, string | number>;
+    params?: ParamsRecord;
     signal?: AbortSignal;
     body?: BodyInit;
     handleError: boolean;
@@ -21,14 +23,14 @@ export function generateEndPointUrl(name: string) {
 
 const DEFAULT_PARAMS = { output_mode: 'json' };
 
-function createUrl(endpointUrl: string, params: Record<string, string | number>): URL {
+function createUrl(endpointUrl: string, params: ParamsRecord): URL {
     const url = new URL(
         createRESTURL(endpointUrl, { app, owner: 'nobody' }),
         window.location.origin
     );
-    Object.entries({ ...DEFAULT_PARAMS, ...params }).forEach(([key, value]) =>
-        url.searchParams.append(key, value.toString())
-    );
+    Object.entries({ ...DEFAULT_PARAMS, ...params })
+        .filter(([, value]) => value !== undefined && value !== null)
+        .forEach(([key, value]) => url.searchParams.append(key, value.toString()));
     return url;
 }