Implement filtering deployments on search (#13)

packages/frontend/src/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import React, { ChangeEventHandler, forwardRef } from 'react';
 import { Input } from '@material-tailwind/react';
 
 interface SearchBarProps {
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
   value?: string;
   placeholder?: string;
 }
@@ -15,7 +15,6 @@ const SearchBar: React.ForwardRefRenderFunction<
   return (
     <div className="relative flex w-full gap-2">
       <Input
-        variant="standard"
         onChange={onChange}
         value={value}
         type="search"
@@ -23,7 +22,7 @@ const SearchBar: React.ForwardRefRenderFunction<
         containerProps={{
           className: 'min-w-[288px]',
         }}
-        className="pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
+        className="!border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
         labelProps={{
           className: 'before:content-none after:content-none',
         }}

packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import deploymentDetails from '../../../assets/deployments.json';
+import { Button } from '@material-tailwind/react';
+
+import deploymentData from '../../../assets/deployments.json';
 import DeployDetailsCard from './DeploymentDetailsCard';
 import Dropdown from '../../Dropdown';
+import SearchBar from '../../SearchBar';
 
 const STATUS_OPTIONS = [
   { value: 'building', label: 'Building' },
@@ -11,14 +14,30 @@ const STATUS_OPTIONS = [
 ];
 
 const DeploymentsTabPanel = () => {
+  const [searchedBranch, setSearchedBranch] = useState('');
+
+  const filteredDeployments = useMemo(() => {
+    if (searchedBranch) {
+      return deploymentData.filter((deployment) =>
+        deployment.branch.toLowerCase().includes(searchedBranch.toLowerCase()),
+      );
+    }
+
+    return deploymentData;
+  }, [searchedBranch]);
+
+  const handleResetFilters = useCallback(() => {
+    setSearchedBranch('');
+  }, []);
+
   return (
     <div className="p-4">
       <div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
         <div className="col-span-2">
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+          <SearchBar
             placeholder="Search branches"
+            value={searchedBranch}
+            onChange={(event) => setSearchedBranch(event.target.value)}
           />
         </div>
         <div className="col-span-1">
@@ -37,9 +56,25 @@ const DeploymentsTabPanel = () => {
         </div>
       </div>
       <div className="mt-2">
-        {deploymentDetails.map((deployment, key) => {
-          return <DeployDetailsCard deployment={deployment} key={key} />;
-        })}
+        {Boolean(filteredDeployments.length) ? (
+          filteredDeployments.map((deployment, key) => {
+            return <DeployDetailsCard deployment={deployment} key={key} />;
+          })
+        ) : (
+          <div className="h-[50vh] bg-gray-100 flex rounded items-center justify-center">
+            <div className="text-center">
+              <h5 className="text-lg font-bold">No deployments found</h5>
+              <p>Please change your search query or filters</p>
+              <Button
+                className="rounded-full mt-5"
+                color="white"
+                onClick={handleResetFilters}
+              >
+                ^ Reset filters
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );