From ddd7a2caafd00bb6129cb0a8e9c12de567d83f07 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Fri, 25 Feb 2022 09:14:07 +0100
Subject: [PATCH] feat: add search functionality

---
 .../ProjectFeatureToggles.tsx                 | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 33e2bea70a..e0fae770b1 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { IconButton } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 import FilterListIcon from '@material-ui/icons/FilterList';
@@ -31,7 +31,19 @@ const ProjectFeatureToggles = ({
     const history = useHistory();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
+    const [filteredFeatures, setFilteredFeatures] =
+        useState<IFeatureToggleListItem[]>(features);
 
+    const searchFeatures = () => {
+        const filteredData = features.filter(feature => {
+            return Object.values(feature)
+                .join('')
+                .toLowerCase()
+                .includes('ENV'.toLowerCase());
+        });
+        setFilteredFeatures(filteredData);
+    };
+    
     return (
         <PageContent
             className={styles.container}
@@ -39,7 +51,7 @@ const ProjectFeatureToggles = ({
             headerContent={
                 <HeaderTitle
                     className={styles.title}
-                    title={`Feature toggles (${features.length})`}
+                    title={`Feature toggles (${filteredFeatures.length})`}
                     actions={
                         <>
                             <ConditionallyRender
@@ -79,10 +91,10 @@ const ProjectFeatureToggles = ({
             }
         >
             <ConditionallyRender
-                condition={features?.length > 0}
+                condition={filteredFeatures?.length > 0}
                 show={
                     <FeatureToggleListNew
-                        features={features}
+                        features={filteredFeatures}
                         loading={loading}
                         projectId={id}
                     />