feat: make entity select searchable in events browser (Merge pull request #1148)

Author: epuluikis

webapps/console/components/DataView/EventsBrowser.tsx

@@ -29,6 +29,7 @@ import { ConnectionTitle, ProfileBuilderTitle } from "../../pages/[workspaceId]/
 import { StreamTitle } from "../../pages/[workspaceId]/streams";
 import { trimMiddle } from "../../lib/shared/strings";
 import { countries } from "../../lib/shared/countries";
+import type { RefSelectProps } from "antd/es/select";
 
 import zlib from "zlib";
 import {
@@ -247,6 +248,14 @@ const EventsBrowser0 = ({
               destination={entity[1].destination}
             />
           ),
+        search: (entity[1].type === "stream"
+          ? [entity[1].name]
+          : entity[1].type === "profile-builder"
+          ? [entity[1].name, entity[1].destination?.name]
+          : [entity[1].stream?.name, entity[1].service?.name, entity[1].destination?.name]
+        )
+          .filter(s => s !== undefined)
+          .map(s => s.toLowerCase()),
       }));
     } else {
       return [];
@@ -285,6 +294,8 @@ const EventsBrowser0 = ({
 
   const eventsLogApi = useEventsLogApi();
 
+  const entitySelectRef = React.createRef<RefSelectProps>();
+
   useEffect(() => {
     if (!actorId || !entitiesMap[actorId]) {
       if (entities.length > 0) {
@@ -465,6 +476,7 @@ const EventsBrowser0 = ({
             <div>
               <span>{entityType == "stream" ? "Site: " : "Connection: "}</span>
               <Select
+                ref={entitySelectRef}
                 popupMatchSelectWidth={false}
                 notFoundContent={
                   entityType === "stream" ? (
@@ -493,6 +505,9 @@ const EventsBrowser0 = ({
                 }}
                 value={actorId}
                 options={entitiesSelectOptions}
+                showSearch={true}
+                filterOption={(input, option) => option?.search.some(s => s.includes(input.toLowerCase())) || false}
+                onDropdownVisibleChange={o => !o && entitySelectRef.current?.blur()}
               />
             </div>
             <div>

webapps/console/styles/globals.css

@@ -41,6 +41,11 @@ body {
   width: 100vw;
   overflow-x: auto;
   overflow-y: auto;
+
+  .ant-select-single.ant-select-open .ant-select-selection-item {
+    opacity: 0.25;
+    color: inherit;
+  }
 }
 
 .debug-border {