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>(initialFlagState); + const [searchInput, setSearchInput] = useState(''); const toggleFlag = useCallback( (flagName: string) => { @@ -62,16 +63,25 @@ export const UserSettingsFeatureFlags = () => { return ( - {featureFlags.map(featureFlag => { + + setSearchInput(e.target.value)} + value={searchInput} + /> + + {featureFlags.map((featureFlag, index) => { const enabled = Boolean(state[featureFlag.name]); return ( - + featureFlag.name.includes(searchInput) && ( + + ) ); })}