Issue #14456 - Enable search in timezone select component (#14519)

* Enable search in timezone select component

* Add simple cypress test for timezone select interaction

* apply cy test suggestions from @nemanjaglumac

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/admin/settings/components/widgets/SettingSelect.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import Select, { Option } from "metabase/components/Select";
 
 const SettingSelect = ({
-  setting: { placeholder, value, options, defaultValue },
+  setting: { placeholder, value, options, defaultValue, searchProp },
   onChange,
   disabled,
 }) => (
@@ -12,6 +12,7 @@ const SettingSelect = ({
     placeholder={placeholder}
     value={value}
     defaultValue={defaultValue}
+    searchProp={searchProp}
     onChange={e => onChange(e.target.value)}
   >
     {options.map(option => {

frontend/src/metabase/admin/settings/selectors.js

@@ -233,6 +233,7 @@ const SECTIONS = updateSectionsWithPlugins({
         ],
         note: t`Not all databases support timezones, in which case this setting won't take effect.`,
         allowValueCollection: true,
+        searchProp: "name",
       },
       {
         key: "start-of-week",

frontend/test/metabase/scenarios/admin/settings/settings.cy.spec.js

@@ -187,6 +187,23 @@ describe("scenarios > admin > settings", () => {
     cy.contains(/^February 11, 2019, 9:40 PM$/);
   });
 
+  it("should search for and select a new timezone", () => {
+    cy.server();
+    cy.route("PUT", "**/report-timezone").as("reportTimezone");
+
+    cy.visit("/admin/settings/localization");
+    cy.contains("Report Timezone")
+      .closest("li")
+      .find(".AdminSelect")
+      .click();
+
+    cy.findByPlaceholderText("Find...").type("Centr");
+    cy.findByText("US/Central").click({ force: true });
+
+    cy.wait("@reportTimezone");
+    cy.contains("US/Central");
+  });
+
   if (version.edition !== "enterprise") {
     describe(" > embedding settings", () => {
       it("should validate a premium embedding token has a valid format", () => {