Wizard: Disable "No results found" options

The "No results found for <searchTerm>" options were previously enabled, but ignored upon click. This disables them properly and adds tests to check if they're disabled.

src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx

@@ -44,9 +44,6 @@ const KeyboardDropDown = () => {
       filteredKeyboards = keyboardsList.filter((keyboard: string) =>
         String(keyboard).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredKeyboards.length) {
-        filteredKeyboards = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -73,7 +70,7 @@ const KeyboardDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue(value);
       setFilterValue('');
       setErrorText('');
@@ -147,11 +144,17 @@ const KeyboardDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
+          {selectOptions.length > 0 ? (
-            <SelectOption key={option} value={option}>
+            selectOptions.map((option) => (
-              {option}
+              <SelectOption key={option} value={option}>
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {errorText && (

src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx

@@ -49,9 +49,6 @@ const LanguagesDropDown = () => {
       filteredLanguages = languagesList.filter((language: string) =>
         String(language).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredLanguages.length) {
-        filteredLanguages = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -78,7 +75,7 @@ const LanguagesDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue('');
       setFilterValue('');
       dispatch(addLanguage(value));
@@ -151,18 +148,24 @@ const LanguagesDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
+          {selectOptions.length > 0 ? (
-            <SelectOption
+            selectOptions.map((option) => (
-              key={option}
+              <SelectOption
-              value={option}
+                key={option}
-              isDisabled={languages?.includes(option) || false}
+                value={option}
-              description={
+                isDisabled={languages?.includes(option) || false}
-                languages?.includes(option) && 'Language already added'
+                description={
-              }
+                  languages?.includes(option) && 'Language already added'
-            >
+                }
-              {option}
+              >
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {unknownLanguages.length > 0 && (

src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx

@@ -43,9 +43,6 @@ const TimezoneDropDown = () => {
       filteredTimezones = timezones.filter((timezone: string) =>
         String(timezone).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredTimezones.length) {
-        filteredTimezones = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -70,7 +67,7 @@ const TimezoneDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue(value);
       setFilterValue('');
       setErrorText('');
@@ -144,11 +141,17 @@ const TimezoneDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
+          {selectOptions.length > 0 ? (
-            <SelectOption key={option} value={option}>
+            selectOptions.map((option) => (
-              {option}
+              <SelectOption key={option} value={option}>
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {errorText && (

src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx

@@ -76,12 +76,12 @@ const selectLanguages = async () => {
   await waitFor(() => user.click(enOption));
 };
 
-const searchForKeyboard = async () => {
+const searchForKeyboard = async (keyboard: string) => {
   const user = userEvent.setup();
   const keyboardDropdown = await screen.findByPlaceholderText(
     /select a keyboard/i
   );
-  await waitFor(() => user.type(keyboardDropdown, 'us'));
+  await waitFor(() => user.type(keyboardDropdown, keyboard));
 };
 
 const selectKeyboard = async () => {
@@ -145,17 +145,35 @@ describe('Step Locale', () => {
   test('keyboard search results get sorted correctly', async () => {
     await renderCreateMode();
     await goToLocaleStep();
-    await searchForKeyboard();
+    await searchForKeyboard('us');
     const options = await screen.findAllByRole('option');
     expect(options[0]).toHaveTextContent('us');
     expect(options[1]).toHaveTextContent('us-acentos');
     expect(options[2]).toHaveTextContent('us-alt-intl');
   });
 
+  test('unknown option is disabled', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+
+    await searchForLanguage('foo');
+    await screen.findByText(/no results found/i);
+    expect(
+      await screen.findByRole('option', { name: /no results found/i })
+    ).toBeDisabled();
+    await clearLanguageSearch();
+
+    await searchForKeyboard('foo');
+    await screen.findByText(/no results found/i);
+    expect(
+      await screen.findByRole('option', { name: /no results found/i })
+    ).toBeDisabled();
+  });
+
   test('revisit step button on Review works', async () => {
     await renderCreateMode();
     await goToLocaleStep();
-    await searchForKeyboard();
+    await searchForKeyboard('us');
     await selectKeyboard();
     await goToReviewStep();
     await clickRevisitButton();
@@ -191,7 +209,7 @@ describe('Locale request generated correctly', () => {
   test('with keyboard selected', async () => {
     await renderCreateMode();
     await goToLocaleStep();
-    await searchForKeyboard();
+    await searchForKeyboard('us');
     await selectKeyboard();
     await goToReviewStep();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
@@ -214,7 +232,7 @@ describe('Locale request generated correctly', () => {
     await renderCreateMode();
     await goToLocaleStep();
     await selectLanguages();
-    await searchForKeyboard();
+    await searchForKeyboard('us');
     await selectKeyboard();
     await goToReviewStep();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);

src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx

@@ -59,6 +59,14 @@ const selectTimezone = async () => {
   await waitFor(() => user.click(amsterdamTimezone));
 };
 
+const searchForUnknownTimezone = async () => {
+  const user = userEvent.setup();
+  const timezoneDropdown = await screen.findByPlaceholderText(
+    /select a timezone/i
+  );
+  await waitFor(() => user.type(timezoneDropdown, 'foo'));
+};
+
 const addNtpServerViaKeyDown = async (ntpServer: string) => {
   const user = userEvent.setup();
   const ntpServersInput = await screen.findByPlaceholderText(
@@ -124,6 +132,16 @@ describe('Step Timezone', () => {
     await verifyCancelButton(router);
   });
 
+  test('unknown option is disabled', async () => {
+    await renderCreateMode();
+    await goToTimezoneStep();
+    await searchForUnknownTimezone();
+    await screen.findByText(/no results found/i);
+    expect(
+      await screen.findByRole('option', { name: /no results found/i })
+    ).toBeDisabled();
+  });
+
   test('duplicate NTP server cannnot be added', async () => {
     await renderCreateMode();
     await goToTimezoneStep();