TimeZonePicker: Replace underscores with space (#104891)

* TimeZonePicker: Replace underscores with space

* add name to search

* update e2e test

e2e/old-arch/dashboards-suite/dashboard-time-zone.spec.ts

@@ -198,7 +198,7 @@ describe('Dashboard time zone support', () => {
     e2e.flows.setTimeRange({
       from: 'now-6h',
       to: 'now',
-      zone: 'America/Los_Angeles',
+      zone: 'America/Los Angeles',
     });
     // Need to wait for 2 calls as there's 2 panels
     cy.wait(['@dataQuery', '@dataQuery']);

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx

@@ -86,28 +86,33 @@ interface SelectableZoneGroup extends SelectableValue<string> {
 const useTimeZones = (includeInternal: boolean | InternalTimeZones[]): SelectableZoneGroup[] => {
   const now = Date.now();
 
-  const timeZoneGroups = getTimeZoneGroups(includeInternal).map((group: GroupedTimeZones) => {
-    const options = group.zones.reduce((options: SelectableZone[], zone) => {
-      const info = getTimeZoneInfo(zone, now);
+  const timeZoneGroups = useMemo(() => {
+    return getTimeZoneGroups(includeInternal).map((group: GroupedTimeZones) => {
+      const options = group.zones.reduce((options: SelectableZone[], zone) => {
+        const info = getTimeZoneInfo(zone, now);
+
+        if (!info) {
+          return options;
+        }
+
+        const name = info.name.replace(/_/g, ' ');
+
+        options.push({
+          label: name,
+          value: info.zone,
+          searchIndex: getSearchIndex(name, info, now),
+        });
 
-      if (!info) {
         return options;
-      }
+      }, []);
 
-      options.push({
-        label: info.name,
-        value: info.zone,
-        searchIndex: getSearchIndex(info, now),
-      });
+      return {
+        label: group.name,
+        options,
+      };
+    });
+  }, [includeInternal, now]);
 
-      return options;
-    }, []);
-
-    return {
-      label: group.name,
-      options,
-    };
-  });
   return timeZoneGroups;
 };
 
@@ -159,13 +164,17 @@ const useFilterBySearchIndex = () => {
   }, []);
 };
 
-const getSearchIndex = (info: TimeZoneInfo, timestamp: number): string => {
+const getSearchIndex = (label: string, info: TimeZoneInfo, timestamp: number): string => {
   const parts: string[] = [
-    toLower(info.name),
+    toLower(info.zone),
     toLower(info.abbreviation),
     toLower(formatUtcOffset(timestamp, info.zone)),
   ];
 
+  if (label !== info.zone) {
+    parts.push(toLower(label));
+  }
+
   for (const country of info.countries) {
     parts.push(toLower(country.name));
     parts.push(toLower(country.code));