From c3bb5aeb07141adf9dfad777d30b044abec3018f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 5 May 2022 13:27:06 +0200
Subject: [PATCH] change(ui) - sites search

---
 .../Client/Sites/SiteSearch/SiteSearch.tsx    | 34 +++++++++++++++++++
 .../Client/Sites/SiteSearch/index.ts          |  1 +
 frontend/app/components/Client/Sites/Sites.js | 20 +++++++----
 3 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 frontend/app/components/Client/Sites/SiteSearch/SiteSearch.tsx
 create mode 100644 frontend/app/components/Client/Sites/SiteSearch/index.ts

diff --git a/frontend/app/components/Client/Sites/SiteSearch/SiteSearch.tsx b/frontend/app/components/Client/Sites/SiteSearch/SiteSearch.tsx
new file mode 100644
index 000000000..1a4c2b881
--- /dev/null
+++ b/frontend/app/components/Client/Sites/SiteSearch/SiteSearch.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { Icon } from 'UI';
+import { debounce } from 'App/utils';
+
+let debounceUpdate: any = () => {}
+interface Props {
+    onChange: (value: string) => void;
+}
+function SiteSearch(props: Props) {
+    const { onChange } = props;
+    
+    useEffect(() => {
+        debounceUpdate = debounce((value) => onChange(value), 500);
+    }, [])
+
+    const write = ({ target: { name, value } }) => {
+        debounceUpdate(value);
+    }
+
+    return (
+        <div className="relative" style={{ width: '300px'}}>
+            <Icon name="search" className="absolute top-0 bottom-0 ml-3 m-auto" size="16" />
+            <input
+                // value={query}
+                name="searchQuery"
+                className="bg-white p-2 border border-gray-light rounded w-full pl-10"
+                placeholder="Filter by Name"
+                onChange={write}
+            />
+        </div>
+    );
+}
+
+export default SiteSearch;
\ No newline at end of file
diff --git a/frontend/app/components/Client/Sites/SiteSearch/index.ts b/frontend/app/components/Client/Sites/SiteSearch/index.ts
new file mode 100644
index 000000000..54376cf15
--- /dev/null
+++ b/frontend/app/components/Client/Sites/SiteSearch/index.ts
@@ -0,0 +1 @@
+export { default } from './SiteSearch';
\ No newline at end of file
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 027b09cf3..ba3c72e6e 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -10,6 +10,7 @@ import GDPRForm from './GDPRForm';
 import TrackingCodeModal from 'Shared/TrackingCodeModal';
 import BlockedIps from './BlockedIps';
 import { confirm } from 'UI/Confirmation';
+import SiteSearch from './SiteSearch';
 
 const STATUS_MESSAGE_MAP = {
   [ RED ]: ' There seems to be an issue (please verify your installation)',
@@ -43,6 +44,7 @@ class Sites extends React.PureComponent {
     showTrackingCode: false, 
     modalContent: NONE,
     detailContent: NONE,
+    searchQuery: '',
   };
 
   toggleBlockedIp = () => {
@@ -119,6 +121,7 @@ class Sites extends React.PureComponent {
     const isAdmin = user.admin || user.superAdmin;
     const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
     const canDeleteSites = sites.size > 1 && isAdmin;
+    const filteredSites = sites.filter(site => site.name.toLowerCase().includes(this.state.searchQuery.toLowerCase()));
 
     return (
       <Loader loading={ loading }>
@@ -159,12 +162,15 @@ class Sites extends React.PureComponent {
               position="top left"
             />
 
-          <TextLink
-            icon="book"
-            className="ml-auto"
-            href="https://docs.openreplay.com/installation"
-            label="Documentation"
-          />
+           <div className="flex ml-auto items-center">
+              <TextLink
+                icon="book"
+                className="mr-4"
+                href="https://docs.openreplay.com/installation"
+                label="Documentation"
+              />
+              <SiteSearch onChange={(value) => this.setState({ searchQuery: value })} />
+           </div>
           </div>
 
           <div className={ stl.list }>
@@ -175,7 +181,7 @@ class Sites extends React.PureComponent {
               
             </div>
             {
-              sites.map(_site => (
+              filteredSites.map(_site => (
                 // <div key={ _site.key } data-inactive={ _site.status === RED }>
                   <div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3">
                     <div className="col-span-4">