feat: add search in add connection modal

Author: andre-code

client/src/features/connectedServices/ConnectedServicesPage.tsx

@@ -23,6 +23,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from "react";
@@ -33,6 +34,7 @@ import {
   Plugin,
   PlusLg,
   Send,
+  XCircleFill,
   XLg,
 } from "react-bootstrap-icons";
 import { Link, useSearchParams } from "react-router";
@@ -44,6 +46,9 @@ import {
   CardHeader,
   CardText,
   Col,
+  Input,
+  InputGroup,
+  Label,
   ListGroup,
   ListGroupItem,
   Modal,
@@ -465,16 +470,38 @@ function AddIntegrationModal({
 }: AddIntegrationModalProps) {
   const [showAllIntegrations, setShowAllIntegrations] = useState(false);
   const isListExpanded = isOpen && showAllIntegrations;
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const [userSearchInput, setUserSearchInput] = useState("");
+
+  const normalizedSearchInput = useMemo(
+    () => userSearchInput.trim().toLowerCase(),
+    [userSearchInput]
+  );
+
+  const filteredProviders = useMemo(() => {
+    if (!normalizedSearchInput) return providers;
+
+    return providers.filter(({ provider }) =>
+      [provider.display_name, provider.url].some((value) =>
+        value.toLowerCase().includes(normalizedSearchInput)
+      )
+    );
+  }, [normalizedSearchInput, providers]);
 
   const visibleProviders = useMemo(() => {
-    if (isListExpanded) return providers;
-    return providers.slice(0, DEFAULT_MODAL_PROVIDERS_COUNT);
-  }, [isListExpanded, providers]);
+    if (isListExpanded) return filteredProviders;
+    return filteredProviders.slice(0, DEFAULT_MODAL_PROVIDERS_COUNT);
+  }, [filteredProviders, isListExpanded]);
 
   const handleClosed = useCallback(() => {
     setShowAllIntegrations(false);
   }, []);
 
+  const onResetSearch = useCallback(() => {
+    setUserSearchInput("");
+    searchInputRef.current?.focus();
+  }, []);
+
   return (
     <Modal
       centered
@@ -495,6 +522,36 @@ function AddIntegrationModal({
         ) : (
           <>
             <p>Add a new code, data, or compute integration.</p>
+            <div className="mb-4">
+              <Label for="search">Search</Label>
+              <InputGroup>
+                <Input
+                  className="lg"
+                  data-cy="add-integration-search-input"
+                  id="search"
+                  innerRef={searchInputRef}
+                  placeholder="Search by name or url"
+                  type="text"
+                  value={userSearchInput}
+                  onChange={(e) => setUserSearchInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                    }
+                  }}
+                />
+                <Button
+                  color="outline-secondary"
+                  className="border-secondary-subtle"
+                  data-cy="search-clear-button"
+                  onClick={onResetSearch}
+                  id="search-button"
+                  type="button"
+                >
+                  <XCircleFill className={cx("bi")} />
+                </Button>
+              </InputGroup>
+            </div>
             <ListGroup
               className={cx(
                 "bg-white",
@@ -521,7 +578,7 @@ function AddIntegrationModal({
                   </div>
                 </ListGroupItem>
               ))}
-              {providers.length > DEFAULT_MODAL_PROVIDERS_COUNT && (
+              {filteredProviders.length > DEFAULT_MODAL_PROVIDERS_COUNT && (
                 <button
                   onClick={() => setShowAllIntegrations(!showAllIntegrations)}
                   className={cx(