re-implemented logic without core api change

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

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

@@ -218,51 +218,4 @@ 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,14 +57,6 @@ 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));
-    this.registeredFeatureFlags = [...activeFlags, ...idleFlags];
-    return this.registeredFeatureFlags.slice();
-  }
-
   getRegisteredFlags(): FeatureFlag[] {
     return this.registeredFeatureFlags.slice();
   }

packages/core-plugin-api/api-report.md

@@ -436,7 +436,6 @@ export type FeatureFlag = {
 // @public
 export interface FeatureFlagsApi {
   getRegisteredFlags(): FeatureFlag[];
-  getSortedFlags(): FeatureFlag[];
   isActive(name: string): boolean;
   registerFlag(flag: FeatureFlag): void;
   save(options: FeatureFlagsSaveOptions): void;

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

@@ -84,11 +84,6 @@ 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,7 +29,6 @@ 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,7 +62,6 @@ 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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   List,
   TextField,
@@ -25,6 +25,8 @@ import {
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 import {
+  FeatureFlag,
+  FeatureFlagsApi,
   featureFlagsApiRef,
   FeatureFlagState,
   useApi,
@@ -32,19 +34,27 @@ 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 inputRef = React.useRef<HTMLElement>();
-  const [isFirstLoad, setIsFirstLoad] = React.useState<boolean>(true);
-  useEffect(() => {
-    if (isFirstLoad) setIsFirstLoad(false);
-  }, [isFirstLoad]);
 
-  const featureFlags = isFirstLoad
-    ? featureFlagsApi.getSortedFlags()
-    : featureFlagsApi.getRegisteredFlags();
+  const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();
+  const initialFeatureFlagsSorted = sortFlags(
+    initialFeatureFlags,
+    featureFlagsApi,
+  );
+  const [featureFlags] = useState(initialFeatureFlagsSorted);
+
   const initialFlagState = Object.fromEntries(
     featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),
   );