sts-sponsors team mailing list archive

[Jones Ogolo <mp+438514@xxxxxxxxxxxxxxxxxx>]

Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1390-create-search-filter-component into maas-site-manager:main.

Commit message:
Feat: Add search and filter to sites list 

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/438514

Work done so far includes:
Adding the search box and connecting it to local state
-- 
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1390-create-search-filter-component into maas-site-manager:main.

diff --git a/frontend/src/components/SitesList/components/SitesTableControls.tsx b/frontend/src/components/SitesList/components/SitesTableControls.tsx
index 2c5b4ee..255b698 100644
--- a/frontend/src/components/SitesList/components/SitesTableControls.tsx
+++ b/frontend/src/components/SitesList/components/SitesTableControls.tsx
@@ -1,4 +1,6 @@
-import { Row, Col } from "@canonical/react-components";
+import { useState } from "react";
+
+import { Row, Col, SearchBox } from "@canonical/react-components";
 
 import type { UseSitesQueryResult } from "../../../hooks/api";
 
@@ -11,13 +13,26 @@ const SitesTableControls = ({
   isLoading,
   allColumns,
 }: { allColumns: SitesColumn[] } & Pick<UseSitesQueryResult, "data" | "isLoading">) => {
+  const [searchText, setSearchText] = useState("");
+  const handleSearchInput = (inputValue: string) => {
+    setSearchText(inputValue);
+  };
+
   return (
     <Row>
-      <Col size={10}>
+      <Col size={2}>
         <h2 className="p-heading--4">
           <SitesCount data={data} isLoading={isLoading} />
         </h2>
       </Col>
+      <Col size={8}>
+        <SearchBox
+          externallyControlled
+          onChange={handleSearchInput}
+          placeholder="Search and filter"
+          value={searchText}
+        />
+      </Col>
       <Col className="u-flex u-flex--align-end u-flex--column" size={2}>
         <ColumnsVisibilityControl columns={allColumns} />
       </Col>