Merge pull request #17536 from DavidAn830/daan/sort-flags

Issue #17483: sort feature flag

.changeset/fast-ears-know.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Improved the user experience of the feature flags list. It now sorts the enabled flags to the top of the list to increase the visibilities of the toggled flags.

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -25,6 +25,8 @@ import {
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 import {
+  FeatureFlag,
+  FeatureFlagsApi,
   featureFlagsApiRef,
   FeatureFlagState,
   useApi,
@@ -32,10 +34,26 @@ import {
 import { InfoCard } from '@backstage/core-components';
 import ClearIcon from '@material-ui/icons/Clear';
 
+export const sortFlags = (
+  flags: FeatureFlag[],
+  featureFlagsApi: FeatureFlagsApi,
+): FeatureFlag[] => {
+  const activeFlags = flags.filter(flag => featureFlagsApi.isActive(flag.name));
+  const idleFlags = flags.filter(flag => !featureFlagsApi.isActive(flag.name));
+  return [...activeFlags, ...idleFlags];
+};
+
 /** @public */
 export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
-  const featureFlags = featureFlagsApi.getRegisteredFlags();
+  const inputRef = React.useRef<HTMLElement>();
+
+  const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();
+  const initialFeatureFlagsSorted = sortFlags(
+    initialFeatureFlags,
+    featureFlagsApi,
+  );
+  const [featureFlags] = useState(initialFeatureFlagsSorted);
 
   const initialFlagState = Object.fromEntries(
     featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),
@@ -43,7 +61,6 @@ export const UserSettingsFeatureFlags = () => {
 
   const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
   const [filterInput, setFilterInput] = useState<string>('');
-  const inputRef = React.useRef<HTMLElement>();
 
   const toggleFlag = useCallback(
     (flagName: string) => {