From 038b9763d17c9b1bcd326f0b50fcad5f54de5142 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 17 Sep 2021 10:08:06 +0200
Subject: [PATCH 1/2] add search to featureFlag

Signed-off-by: Samira Mokaram <samiram@spotify.com>
---
 .changeset/shaggy-beds-relax.md               |  5 ++++
 .../FeatureFlags/UserSettingsFeatureFlags.tsx | 26 +++++++++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/shaggy-beds-relax.md

diff --git a/.changeset/shaggy-beds-relax.md b/.changeset/shaggy-beds-relax.md
new file mode 100644
index 0000000000..caa6b90924
--- /dev/null
+++ b/.changeset/shaggy-beds-relax.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Add search to FeatureFlags
diff --git a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
index 5a3f077920..fd1520d926 100644
--- a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { List } from '@material-ui/core';
+import { List, TextField, ListItem } from '@material-ui/core';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 
@@ -35,6 +35,7 @@ export const UserSettingsFeatureFlags = () => {
   );
 
   const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
+  const [searchInput, setSearchInput] = useState<string>('');
 
   const toggleFlag = useCallback(
     (flagName: string) => {
@@ -62,16 +63,25 @@ export const UserSettingsFeatureFlags = () => {
   return (
     <InfoCard title="Feature Flags">
       <List dense>
-        {featureFlags.map(featureFlag => {
+        <ListItem>
+          <TextField
+            label="Search"
+            onChange={e => setSearchInput(e.target.value)}
+            value={searchInput}
+          />
+        </ListItem>
+        {featureFlags.map((featureFlag, index) => {
           const enabled = Boolean(state[featureFlag.name]);
 
           return (
-            <FlagItem
-              key={featureFlag.name}
-              flag={featureFlag}
-              enabled={enabled}
-              toggleHandler={toggleFlag}
-            />
+            featureFlag.name.includes(searchInput) && (
+              <FlagItem
+                key={index + 1}
+                flag={featureFlag}
+                enabled={enabled}
+                toggleHandler={toggleFlag}
+              />
+            )
           );
         })}
       </List>

From 3acef80a1205cdb96ea1744fce928577bccfbc8d Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Wed, 22 Sep 2021 17:10:21 +0200
Subject: [PATCH 2/2]  address comments

Signed-off-by: Samira Mokaram <samiram@spotify.com>
---
 .../FeatureFlags/UserSettingsFeatureFlags.tsx | 87 +++++++++++++++----
 1 file changed, 68 insertions(+), 19 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
index fd1520d926..a92ef43d32 100644
--- a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
@@ -15,7 +15,13 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { List, TextField, ListItem } from '@material-ui/core';
+import {
+  List,
+  TextField,
+  IconButton,
+  Grid,
+  Typography,
+} from '@material-ui/core';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 
@@ -25,6 +31,7 @@ import {
   useApi,
 } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';
+import ClearIcon from '@material-ui/icons/Clear';
 
 export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
@@ -35,7 +42,8 @@ export const UserSettingsFeatureFlags = () => {
   );
 
   const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
-  const [searchInput, setSearchInput] = useState<string>('');
+  const [filterInput, setFilterInput] = useState<string>('');
+  const inputRef = React.useRef<HTMLElement>();
 
   const toggleFlag = useCallback(
     (flagName: string) => {
@@ -60,28 +68,69 @@ export const UserSettingsFeatureFlags = () => {
     return <EmptyFlags />;
   }
 
-  return (
-    <InfoCard title="Feature Flags">
-      <List dense>
-        <ListItem>
+  const clearFilterInput = () => {
+    setFilterInput('');
+    inputRef?.current?.focus();
+  };
+
+  let filteredFeatureFlags = Array.from(featureFlags);
+
+  const filterInputParts = filterInput
+    .split(/\s/)
+    .map(part => part.trim().toLowerCase());
+
+  filterInputParts.forEach(
+    part =>
+      (filteredFeatureFlags = filteredFeatureFlags.filter(featureFlag =>
+        featureFlag.name.toLowerCase().includes(part),
+      )),
+  );
+
+  const Header = () => (
+    <Grid container style={{ justifyContent: 'space-between' }}>
+      <Grid item xs={6} md={8}>
+        <Typography variant="h5">Feature Flags</Typography>
+      </Grid>
+      {featureFlags.length >= 10 && (
+        <Grid item xs={6} md={4}>
           <TextField
-            label="Search"
-            onChange={e => setSearchInput(e.target.value)}
-            value={searchInput}
+            label="Filter"
+            style={{ display: 'flex', justifyContent: 'flex-end' }}
+            inputRef={ref => ref && ref.focus()}
+            InputProps={{
+              ...(filterInput.length && {
+                endAdornment: (
+                  <IconButton
+                    aria-label="Clear filter"
+                    onClick={clearFilterInput}
+                    edge="end"
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                ),
+              }),
+            }}
+            onChange={e => setFilterInput(e.target.value)}
+            value={filterInput}
           />
-        </ListItem>
-        {featureFlags.map((featureFlag, index) => {
+        </Grid>
+      )}
+    </Grid>
+  );
+
+  return (
+    <InfoCard title={<Header />}>
+      <List dense>
+        {filteredFeatureFlags.map(featureFlag => {
           const enabled = Boolean(state[featureFlag.name]);
 
           return (
-            featureFlag.name.includes(searchInput) && (
-              <FlagItem
-                key={index + 1}
-                flag={featureFlag}
-                enabled={enabled}
-                toggleHandler={toggleFlag}
-              />
-            )
+            <FlagItem
+              key={featureFlag.name}
+              flag={featureFlag}
+              enabled={enabled}
+              toggleHandler={toggleFlag}
+            />
           );
         })}
       </List>