From 722c06b73fb06ee0b3c4721e89ea496175c52901 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Mon, 28 Feb 2022 16:27:23 +0100
Subject: [PATCH] feat: add search input in project features

---
 .../ResponsiveButton/ResponsiveButton.tsx     |  2 +
 .../component/common/SearchField/styles.js    |  1 +
 .../ProjectFeatureToggles.styles.ts           | 13 +++++
 .../ProjectFeatureToggles.tsx                 | 58 ++++++++++---------
 4 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
index 0edb2cb94f..f515cc4a1e 100644
--- a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
+++ b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
@@ -12,6 +12,7 @@ interface IResponsiveButtonProps {
     projectId?: string;
     environmentId?: string;
     maxWidth: string;
+    className?: string;
 }
 
 const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
@@ -24,6 +25,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
     permission,
     environmentId,
     projectId,
+    className,
     ...rest
 }) => {
     const smallScreen = useMediaQuery(`(max-width:${maxWidth})`);
diff --git a/frontend/src/component/common/SearchField/styles.js b/frontend/src/component/common/SearchField/styles.js
index ed7c9e480a..3d495b0803 100644
--- a/frontend/src/component/common/SearchField/styles.js
+++ b/frontend/src/component/common/SearchField/styles.js
@@ -20,6 +20,7 @@ export const useStyles = makeStyles(theme => ({
     },
     searchIcon: {
         marginRight: '8px',
+        color: theme.palette.grey[600],
     },
     inputRoot: {
         width: '100%',
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
index 1437920b3c..b8ee003208 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
@@ -37,4 +37,17 @@ export const useStyles = makeStyles(theme => ({
     link: {
         textDecoration: 'none',
     },
+    actionsContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    search: {
+        border: `1px solid ${theme.palette.grey[300]}`,
+        height: '35px',
+        marginRight: '2rem',
+    },
+    button: {
+        whiteSpace: 'nowrap',
+    },
 }));
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index e0fae770b1..e7c5950c9c 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -1,21 +1,22 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { IconButton } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import { useParams } from 'react-router';
 import { Link, useHistory } from 'react-router-dom';
-import AccessContext from '../../../../contexts/AccessContext';
-import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
-import { getCreateTogglePath } from '../../../../utils/route-path-helpers';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import { PROJECTFILTERING } from '../../../common/flags';
-import HeaderTitle from '../../../common/HeaderTitle';
-import PageContent from '../../../common/PageContent';
-import ResponsiveButton from '../../../common/ResponsiveButton/ResponsiveButton';
-import FeatureToggleListNew from '../../../feature/FeatureToggleListNew/FeatureToggleListNew';
+import AccessContext from 'contexts/AccessContext';
+import { SearchField } from 'component/common/SearchField/SearchField';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { PROJECTFILTERING } from 'component/common/flags';
+import HeaderTitle from 'component/common/HeaderTitle';
+import PageContent from 'component/common/PageContent';
+import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
+import FeatureToggleListNew from 'component/feature/FeatureToggleListNew/FeatureToggleListNew';
+import { IFeatureToggleListItem } from 'interfaces/featureToggle';
+import { getCreateTogglePath } from 'utils/route-path-helpers';
 import { useStyles } from './ProjectFeatureToggles.styles';
-import { CREATE_FEATURE } from '../../../providers/AccessProvider/permissions';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IProjectFeatureToggles {
     features: IFeatureToggleListItem[];
@@ -27,23 +28,20 @@ const ProjectFeatureToggles = ({
     loading,
 }: IProjectFeatureToggles) => {
     const styles = useStyles();
-    const { id } = useParams();
+    const { id } = useParams<{ id: string }>();
     const history = useHistory();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
-    const [filteredFeatures, setFilteredFeatures] =
-        useState<IFeatureToggleListItem[]>(features);
+    const [filter, setFilter] = useState('');
+    useState<IFeatureToggleListItem[]>(features);
+
+    const filteredFeatures = useMemo(() => {
+        const regExp = new RegExp(filter, 'i');
+        return filter
+            ? features?.filter(feature => regExp.test(feature?.name))
+            : features;
+    }, [features, filter]);
 
-    const searchFeatures = () => {
-        const filteredData = features.filter(feature => {
-            return Object.values(feature)
-                .join('')
-                .toLowerCase()
-                .includes('ENV'.toLowerCase());
-        });
-        setFilteredFeatures(filteredData);
-    };
-    
     return (
         <PageContent
             className={styles.container}
@@ -53,7 +51,12 @@ const ProjectFeatureToggles = ({
                     className={styles.title}
                     title={`Feature toggles (${filteredFeatures.length})`}
                     actions={
-                        <>
+                        <div className={styles.actionsContainer}>
+                            <SearchField
+                                initialValue={filter}
+                                updateValue={setFilter}
+                                className={styles.search}
+                            />
                             <ConditionallyRender
                                 condition={PROJECTFILTERING}
                                 show={
@@ -82,10 +85,11 @@ const ProjectFeatureToggles = ({
                                 Icon={Add}
                                 projectId={id}
                                 permission={CREATE_FEATURE}
+                                className={styles.button}
                             >
                                 New feature toggle
                             </ResponsiveButton>
-                        </>
+                        </div>
                     }
                 />
             }