sort feature flag

Signed-off-by: David An <a-daan@expediagroup.com>

packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.test.tsx

@@ -218,4 +218,51 @@ describe('FeatureFlags', () => {
       ).toThrow(/only contain lowercase letters, numbers and hyphens/i);
     });
   });
+
+  describe('getSortedRegisteredFlags', () => {
+    let featureFlags: FeatureFlagsApi;
+
+    beforeEach(() => {
+      featureFlags = new LocalStorageFeatureFlags();
+    });
+
+    it('should return empty list', () => {
+      expect(featureFlags.getSortedFlags()).toEqual([]);
+    });
+
+    it('loads active flags first in registered order', () => {
+      featureFlags.registerFlag({
+        name: 'registered-flag-1',
+        pluginId: 'plugin-one',
+      });
+      featureFlags.registerFlag({
+        name: 'registered-flag-2',
+        pluginId: 'plugin-two',
+      });
+      featureFlags.registerFlag({
+        name: 'registered-flag-3',
+        pluginId: 'plugin-three',
+      });
+      featureFlags.registerFlag({
+        name: 'registered-flag-4',
+        pluginId: 'plugin-four',
+      });
+
+      featureFlags.save({
+        states: {
+          'registered-flag-1': FeatureFlagState.None,
+          'registered-flag-2': FeatureFlagState.Active,
+          'registered-flag-3': FeatureFlagState.None,
+          'registered-flag-4': FeatureFlagState.Active,
+        },
+      });
+
+      expect(featureFlags.getSortedFlags()).toEqual([
+        { name: 'registered-flag-2', pluginId: 'plugin-two' },
+        { name: 'registered-flag-4', pluginId: 'plugin-four' },
+        { name: 'registered-flag-1', pluginId: 'plugin-one' },
+        { name: 'registered-flag-3', pluginId: 'plugin-three' },
+      ]);
+    });
+  });
 });

packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.tsx

@@ -57,6 +57,13 @@ export class LocalStorageFeatureFlags implements FeatureFlagsApi {
     this.registeredFeatureFlags.push(flag);
   }
 
+  getSortedFlags(): FeatureFlag[] {
+    const flags = this.registeredFeatureFlags;
+    const activeFlags = flags.filter(flag => this.isActive(flag.name));
+    const idleFlags = flags.filter(flag => !this.isActive(flag.name));
+    return [...activeFlags, ...idleFlags];
+  }
+
   getRegisteredFlags(): FeatureFlag[] {
     return this.registeredFeatureFlags.slice();
   }

packages/core-plugin-api/src/apis/definitions/FeatureFlagsApi.ts

@@ -84,6 +84,11 @@ export interface FeatureFlagsApi {
    */
   registerFlag(flag: FeatureFlag): void;
 
+  /**
+   * Get a list of all registered flags sorted.
+   */
+  getSortedFlags(): FeatureFlag[];
+
   /**
    * Get a list of all registered flags.
    */

plugins/explore/src/components/ExploreLayout/ExploreLayout.test.tsx

@@ -29,6 +29,7 @@ const featureFlagsApi: jest.Mocked<FeatureFlagsApi> = {
   save: jest.fn(),
   getRegisteredFlags: jest.fn(),
   registerFlag: jest.fn(),
+  getSortedFlags: jest.fn(),
 };
 
 describe('<ExploreLayout />', () => {

plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx

@@ -62,6 +62,7 @@ const featureFlagsApiMock: jest.Mocked<FeatureFlagsApi> = {
   registerFlag: jest.fn(),
   getRegisteredFlags: jest.fn(),
   save: jest.fn(),
+  getSortedFlags: jest.fn(),
 };
 
 const errorApiMock = { post: jest.fn(), error$: jest.fn() };

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

@@ -25,6 +25,7 @@ import {
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 import {
+  FeatureFlag,
   featureFlagsApiRef,
   FeatureFlagState,
   useApi,
@@ -32,11 +33,27 @@ import {
 import { InfoCard } from '@backstage/core-components';
 import ClearIcon from '@material-ui/icons/Clear';
 
+let registered = false;
+const f1: FeatureFlag = { name: 'f111', pluginId: 'f111' };
+const f2: FeatureFlag = { name: 'f222', pluginId: 'f222' };
+const f3: FeatureFlag = { name: 'f333', pluginId: 'f333' };
+const f4: FeatureFlag = { name: 'f444', pluginId: 'f444' };
+const f5: FeatureFlag = { name: 'f555', pluginId: 'f555' };
 /** @public */
 export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
-  const featureFlags = featureFlagsApi.getRegisteredFlags();
 
+  if (!registered) {
+    featureFlagsApi.registerFlag(f1);
+    featureFlagsApi.registerFlag(f2);
+    featureFlagsApi.registerFlag(f3);
+    featureFlagsApi.registerFlag(f4);
+    featureFlagsApi.registerFlag(f5);
+    registered = true;
+  }
+
+  // featureFlagsApi.sortFlags();
+  const featureFlags = featureFlagsApi.getSortedFlags();
   const initialFlagState = Object.fromEntries(
     featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),
   );
@@ -132,3 +149,5 @@ export const UserSettingsFeatureFlags = () => {
     </InfoCard>
   );
 };
+
+export default React.memo(UserSettingsFeatureFlags);