feat: read feature toggles in control property editor

.changeset/clean-jars-remember.md

@@ -0,0 +1,5 @@
+---
+'@sap-ux/feature-toggle': patch
+---
+
+Include feature toggles form environment variable in `getAllFeatureToggles`

.changeset/fluffy-oranges-divide.md

@@ -0,0 +1,7 @@
+---
+'@sap-ux-private/preview-middleware-client': patch
+'@sap-ux/control-property-editor': patch
+'@sap-ux/preview-middleware': patch
+---
+
+Use feature toggles in the control property editor

packages/control-property-editor/src/index.tsx

@@ -11,7 +11,7 @@ import './index.css';
 import App from './App';
 import { store } from './store';
 import { registerAppIcons } from './icons';
-import { initializeLivereload, setProjectScenario } from './slice';
+import { initializeLivereload, setProjectScenario, setFeatureToggles } from './slice';
 
 export interface StartOptions {
     previewUrl: string;
@@ -23,6 +23,7 @@ export interface StartOptions {
     livereloadUrl?: string;
     telemetry?: boolean;
     scenario: Scenario;
+    features?: { feature: string; isEnabled: boolean }[];
 }
 
 /**
@@ -31,14 +32,15 @@ export interface StartOptions {
  * @param options StartOptions
  */
 export function start(options: StartOptions): void {
-    const { previewUrl, rootElementId, telemetry = false, scenario } = options;
+    const { previewUrl, rootElementId, telemetry = false, scenario, features = [] } = options;
     if (telemetry) {
         enableTelemetry();
     }
     initI18n();
     registerAppIcons();
     initIcons();
 
+    store.dispatch(setFeatureToggles(features));
     store.dispatch(setProjectScenario(scenario));
     store.dispatch(initializeLivereload({ port: options.livereloadPort, url: options.livereloadUrl }));
 

packages/control-property-editor/src/middleware.ts

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'redux';
-import type { Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
+import type { AnyAction, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 
 import type { ExternalAction } from '@sap-ux-private/control-property-editor-common';
 import {
@@ -16,6 +16,7 @@ import {
     executeQuickAction
 } from '@sap-ux-private/control-property-editor-common';
 
+import type reducer from './slice';
 import { changeProperty } from './slice';
 
 type Action = ReturnType<typeof changeProperty>;
@@ -26,7 +27,9 @@ type Action = ReturnType<typeof changeProperty>;
  * @param store - redux store
  * @returns Function
  */
-export const communicationMiddleware: Middleware<Dispatch<ExternalAction>> = (store: MiddlewareAPI) => {
+export const communicationMiddleware: Middleware<Dispatch<ExternalAction>, ReturnType<typeof reducer>> = (
+    store: MiddlewareAPI<Dispatch<AnyAction>, ReturnType<typeof reducer>>
+) => {
     const { sendAction } = startPostMessageCommunication<ExternalAction>(
         function getTarget(): Window | undefined {
             let result;

packages/control-property-editor/src/slice.ts

@@ -53,6 +53,7 @@ export interface SliceState {
     scenario: Scenario;
     isAdpProject: boolean;
     icons: IconDetails[];
+    features: Record<string, boolean>;
     changes: ChangesSlice;
     dialogMessage: ShowMessage | undefined;
     fileChanges?: string[];
@@ -119,6 +120,7 @@ export const changePreviewScaleMode = createAction<'fit' | 'fixed'>('app/change-
 export const changeDeviceType = createAction<DeviceType>('app/change-device-type');
 export const filterNodes = createAction<FilterOptions[]>('app/filter-nodes');
 export const fileChanged = createAction<string[]>('app/file-changed');
+export const setFeatureToggles = createAction<{ feature: string; isEnabled: boolean }[]>('app/set-feature-toggles');
 interface LivereloadOptions {
     port: number;
 
@@ -137,6 +139,7 @@ export const initialState: SliceState = {
     scenario: SCENARIO.UiAdaptation,
     isAdpProject: false,
     icons: [],
+    features: {},
     changes: {
         controls: {},
         pending: [],
@@ -331,6 +334,11 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
             .addMatcher(setSaveEnablement.match, (state, action: ReturnType<typeof setSaveEnablement>): void => {
                 state.canSave = action.payload;
             })
+            .addMatcher(setFeatureToggles.match, (state, action: ReturnType<typeof setFeatureToggles>): void => {
+                for (const { feature, isEnabled } of action.payload) {
+                    state.features[feature] = isEnabled;
+                }
+            })
             .addMatcher(appLoaded.match, (state): void => {
                 state.isAppLoading = false;
             })

packages/control-property-editor/test/unit/appIndex.test.ts

@@ -4,7 +4,7 @@ import * as icons from '../../src/icons';
 import * as initIcon from '@sap-ux/ui-components/dist/components/Icons'; // bug in TS 4.6 https://github.com/microsoft/TypeScript/issues/43081
 import ReactDOM from 'react-dom';
 import { store } from '../../src/store';
-import { initializeLivereload, setProjectScenario } from '../../src/slice';
+import { initializeLivereload, setFeatureToggles, setProjectScenario } from '../../src/slice';
 
 describe('index', () => {
     const i18nSpy = jest.spyOn(i18n, 'initI18n');
@@ -17,13 +17,20 @@ describe('index', () => {
     test('start', () => {
         const previewUrl = 'URL';
         const rootElementId = 'root';
-        start({ previewUrl, rootElementId, livereloadPort: 8080, scenario: 'APP_VARIANT' });
+        const features = [
+            {
+                feature: 'test.feature',
+                isEnabled: true
+            }
+        ];
+        start({ previewUrl, rootElementId, livereloadPort: 8080, scenario: 'APP_VARIANT', features });
         expect(i18nSpy).toHaveBeenCalledTimes(1);
         expect(iconsSpy).toHaveBeenCalledTimes(1);
         expect(initIconSpy).toHaveBeenCalledTimes(1);
         expect(reactSpy).toHaveBeenCalledTimes(1);
-        expect(dispatchSpy).toHaveBeenCalledTimes(2);
-        expect(dispatchSpy).nthCalledWith(1, setProjectScenario('APP_VARIANT'));
-        expect(dispatchSpy).nthCalledWith(2, initializeLivereload({ port: 8080, url: undefined }));
+        expect(dispatchSpy).toHaveBeenCalledTimes(3);
+        expect(dispatchSpy).nthCalledWith(1, setFeatureToggles(features));
+        expect(dispatchSpy).nthCalledWith(2, setProjectScenario('APP_VARIANT'));
+        expect(dispatchSpy).nthCalledWith(3, initializeLivereload({ port: 8080, url: undefined }));
     });
 });

packages/control-property-editor/test/unit/slice.test.ts

@@ -20,9 +20,11 @@ import reducer, {
     changeDeviceType,
     setProjectScenario,
     fileChanged,
-    initialState
+    initialState,
+    setFeatureToggles
 } from '../../src/slice';
 import { DeviceType } from '../../src/devices';
+import { features } from 'process';
 
 describe('main redux slice', () => {
     describe('property changed', () => {
@@ -624,4 +626,24 @@ describe('main redux slice', () => {
             ]
         });
     });
+
+    describe('setFeatureToggles', () => {
+        test('add feature toggles', () => {
+            expect(
+                reducer(
+                    { features: {} } as any,
+                    setFeatureToggles([
+                        {
+                            feature: 'test.feature',
+                            isEnabled: true
+                        }
+                    ])
+                )
+            ).toStrictEqual({
+                features: {
+                    'test.feature': true
+                }
+            });
+        });
+    });
 });

packages/feature-toggle/src/featureToggle.ts

@@ -80,6 +80,17 @@ export class FeatureToggleAccess {
                 });
             });
         }
+        // if TOOLSUITE_FEATURES env is set check if the feature is enabled there.
+        else if (process.env.TOOLSUITE_FEATURES) {
+            const envFeatures = process.env.TOOLSUITE_FEATURES.split(',');
+            for (const feature of envFeatures) {
+                const toggle: FeatureToggle = {
+                    feature,
+                    isEnabled: true
+                };
+                definedToggles.push(toggle);
+            }
+        }
         return definedToggles;
     }
 }

packages/feature-toggle/test/index_no_vscode.test.ts

@@ -1,10 +1,17 @@
 import { isFeatureEnabled, isInternalFeaturesSettingEnabled } from '../src';
 
 describe('Feature Toggle Tests - ENV', () => {
+    const originalEnv = { ...process.env };
+
     beforeEach(() => {
         jest.resetModules();
         jest.doMock('vscode', () => undefined);
     });
+
+    afterEach(() => {
+        process.env = originalEnv;
+    });
+
     test('Feature Toggle Tests - getFeatureToggle - enabled', () => {
         process.env.TOOLSUITE_FEATURES = 'dummy.testToggle,otherToggle';
         const featureToggle = isFeatureEnabled(`otherToggle`);
@@ -21,6 +28,21 @@ describe('Feature Toggle Tests - ENV', () => {
         const isInternal = isInternalFeaturesSettingEnabled();
         expect(isInternal).toBeTruthy();
     });
+    test('Feature Toggle Tests - getAllFeatureToggles', async () => {
+        process.env.TOOLSUITE_FEATURES = 'dummy.testToggle,otherToggle';
+        const { FeatureToggleAccess } = await import('../src');
+        const featureToggles = FeatureToggleAccess.getAllFeatureToggles();
+        expect(featureToggles).toStrictEqual([
+            {
+                feature: 'dummy.testToggle',
+                isEnabled: true
+            },
+            {
+                feature: 'otherToggle',
+                isEnabled: true
+            }
+        ]);
+    });
 });
 
 describe('Feature Toggle Tests - ENV - Negative', () => {

packages/preview-middleware-client/src/adp/quick-actions/load.ts

@@ -1,15 +1,15 @@
+import { FeatureService } from '../../cpe/feature-service';
 import type { QuickActionDefinitionRegistry } from '../../cpe/quick-actions/registry';
 import type { ApplicationType } from '../../utils/application';
 
 /**
  * Loads the appropriate Quick Action registries for the given application type.
- * 
- * @param appType - Application type. 
+ *
+ * @param appType - Application type.
  * @returns Quick Action registries.
  */
 export async function loadDefinitions(appType: ApplicationType): Promise<QuickActionDefinitionRegistry<string>[]> {
-    // eslint-disable-next-line fiori-custom/sap-no-localstorage
-    if (localStorage.getItem('com.sap.ux.control-property-editor.features.quick-actions') !== 'true') {
+    if (FeatureService.isFeatureEnabled('cpe.beta.quick-actions') === false) {
         return [];
     }
     if (appType === 'fe-v2') {

packages/preview-middleware-client/src/cpe/feature-service.ts

@@ -0,0 +1,25 @@
+export class FeatureService {
+    private static features: Record<string, boolean> = {};
+
+    static {
+        // eslint-disable-next-line fiori-custom/sap-no-dom-access, fiori-custom/sap-browser-api-warning
+        const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+        const features = bootstrapConfig?.getAttribute('data-open-ux-preview-features');
+        if (features) {
+            const featureToggles = JSON.parse(features) as { feature: string; isEnabled: boolean }[];
+            for (const { feature, isEnabled } of featureToggles) {
+                this.features[feature] = isEnabled;
+            }
+        }
+    }
+
+    /**
+     * Checks if given feature is enabled.
+     *
+     * @param featureId - Id of the feature.
+     * @returns true if feature is enabled.
+     */
+    public static isFeatureEnabled(featureId: string): boolean {
+        return this.features[featureId] ?? false;
+    }
+}

packages/preview-middleware-client/test/unit/adp/quick-actions/load.test.ts

@@ -1,14 +1,15 @@
+import { FeatureService } from '../../../../src/cpe/feature-service';
 import { loadDefinitions } from '../../../../src/adp/quick-actions/load';
 import FEV4QuickActionRegistry from 'open/ux/preview/client/adp/quick-actions/fe-v4/registry';
 import FEV2QuickActionRegistry from 'open/ux/preview/client/adp/quick-actions/fe-v2/registry';
 
-describe('quick action dyncmic loading', () => {
+describe('quick action dynamic loading', () => {
     beforeEach(() => {
-        jest.spyOn(window.localStorage.__proto__, 'getItem').mockImplementation((key) => {
-            if (key === 'com.sap.ux.control-property-editor.features.quick-actions') {
-                return 'true';
+        jest.spyOn(FeatureService, 'isFeatureEnabled').mockImplementation((key: string) => {
+            if (key === 'cpe.beta.quick-actions') {
+                return true;
             }
-            return null;
+            return false;
         });
     });
     test('fe-v2', async () => {

packages/preview-middleware-client/test/unit/cpe/feature-service.test.ts

@@ -0,0 +1,27 @@
+describe('FeatureService', () => {
+    afterEach(() => {
+        jest.resetModules();
+    });
+
+    function setFeatureToggles(featureNames: string[]) {
+        const features = featureNames.map((feature) => ({
+            feature,
+            isEnabled: true
+        }));
+        const bootstrap = document.createElement('div');
+        bootstrap.setAttribute('id', 'sap-ui-bootstrap');
+        bootstrap.setAttribute('data-open-ux-preview-features', JSON.stringify(features));
+        document.body.appendChild(bootstrap);
+    }
+
+    test('not enabled feature', async () => {
+        const { FeatureService } = await import('../../../src/cpe/feature-service');
+        expect(FeatureService.isFeatureEnabled('test.feature')).toStrictEqual(false);
+    });
+
+    test('enabled feature', async () => {
+        setFeatureToggles(['test.feature']);
+        const { FeatureService } = await import('../../../src/cpe/feature-service');
+        expect(FeatureService.isFeatureEnabled('test.feature')).toStrictEqual(true);
+    });
+});

packages/preview-middleware/package.json

@@ -41,6 +41,7 @@
     ],
     "dependencies": {
         "@sap-ux/logger": "workspace:*",
+        "@sap-ux/feature-toggle": "workspace:*",
         "@sap-ux/btp-utils": "workspace:*",
         "@sap-ux/adp-tooling": "workspace:*",
         "@sap-ux/control-property-editor-sources": "workspace:@sap-ux/control-property-editor@*",

packages/preview-middleware/src/base/config.ts

@@ -50,6 +50,7 @@ export interface TemplateConfig {
         developerMode: boolean;
         pluginScript?: string;
     };
+    features?: { feature: string; isEnabled: boolean }[];
     locateReuseLibsScript?: boolean;
 }
 

packages/preview-middleware/src/base/flp.ts

@@ -18,6 +18,7 @@ import {
     type OperationType
 } from '@sap-ux/adp-tooling';
 import { isAppStudio, exposePort } from '@sap-ux/btp-utils';
+import { FeatureToggleAccess } from '@sap-ux/feature-toggle';
 
 import { deleteChange, readChanges, writeChange } from './flex';
 import { generateImportList, mergeTestConfigDefaults } from './test';
@@ -167,6 +168,8 @@ export class FlpSandbox {
             developerMode: editor.developerMode === true,
             pluginScript: editor.pluginScript
         };
+        config.features = FeatureToggleAccess.getAllFeatureToggles();
+
         if (editor.developerMode === true) {
             config.ui5.bootstrapOptions = serializeUi5Configuration(DEVELOPER_MODE_CONFIG);
         }
@@ -193,6 +196,7 @@ export class FlpSandbox {
                         templatePreviewUrl = templatePreviewUrl.replace('?', `?sap-ui-layer=${rta.layer}&`);
                     }
                     const template = readFileSync(join(__dirname, '../../templates/flp/editor.html'), 'utf-8');
+                    const features = FeatureToggleAccess.getAllFeatureToggles();
                     const envPort = process.env.FIORI_TOOLS_LIVERELOAD_PORT;
                     let livereloadPort: number = envPort ? parseInt(envPort, 10) : DEFAULT_LIVERELOAD_PORT;
                     livereloadPort = isNaN(livereloadPort) ? DEFAULT_LIVERELOAD_PORT : livereloadPort;
@@ -203,7 +207,8 @@ export class FlpSandbox {
                         appName: rta.options?.appName,
                         scenario,
                         livereloadPort,
-                        livereloadUrl: envLivereloadUrl
+                        livereloadUrl: envLivereloadUrl,
+                        features: JSON.stringify(features)
                     });
                     this.sendResponse(res, 'text/html', 200, html);
                 });

packages/preview-middleware/templates/flp/editor.html

@@ -20,6 +20,7 @@
                 scenario: '<%- scenario %>',
                 livereloadPort: <%- livereloadPort %>,
                 livereloadUrl: '<%- livereloadUrl %>',
+                features: <%- features %>
             });
         </script>
     </body>