PromucFlow_constructor/app/client/src/utils/hooks/useFeatureFlagOverride.ts

78 lines
2.5 KiB
TypeScript
Raw Normal View History

import type { FeatureFlag } from "@appsmith/entities/FeatureFlag";
feat: Move conversion flow under feature flag. (#32490) [![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX105sGkyMb3eywi17Q8zKGh7H7PVjvpTo%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=8cXsNLR) ## Description Auto Layout System is being deprecated in favor of Anvil. So we will no longer update Auto Layout and hence we are removing conversion flow to make sure no new Auto Layout Apps are created. However we still want to be able to help users who really have mission critical use cases to convert. two ways to do this - ask Support and they will enable the feature flag to enable conversion.(for cloud users) - ask Support and they will reveal the global function(`overrideFeatureFlag({release_layout_conversion_enabled: true})`) to enable conversion.(for users not connected to internet) Implementation: - current feature flags are supplied from the consolidated api and widgets consume them via `selectFeatureFlags` selector. - to override these flags locally, we provide a global function(accessible from console) `overrideFeatureFlag` which can take an object of featureflags and save them to indexed db. - then we use these saved values to override feature flag values supplied by the consolidated api. - `selectFeatureFlags` is where the values are combined and consumed by all components. Fixes #32140 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8641988198> > Commit: de8e06778bd9fe1feab2f5d20adbaed90e542019 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8641988198&attempt=2" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results -->
2024-04-11 11:51:14 +00:00
import {
setFeatureFlagOverridesAction,
updateFeatureFlagOverrideAction,
} from "actions/featureFlagActions";
import { isBoolean } from "lodash";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getFeatureFlagsFetched } from "selectors/usersSelectors";
import {
getFeatureFlagOverrideValues,
setFeatureFlagOverrideValues,
} from "utils/storage";
export const AvailableFeaturesToOverride: FeatureFlag[] = [
"release_anvil_enabled",
"release_layout_conversion_enabled",
];
export type OverriddenFeatureFlags = Partial<Record<FeatureFlag, boolean>>;
feat: Move conversion flow under feature flag. (#32490) [![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX105sGkyMb3eywi17Q8zKGh7H7PVjvpTo%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=8cXsNLR) ## Description Auto Layout System is being deprecated in favor of Anvil. So we will no longer update Auto Layout and hence we are removing conversion flow to make sure no new Auto Layout Apps are created. However we still want to be able to help users who really have mission critical use cases to convert. two ways to do this - ask Support and they will enable the feature flag to enable conversion.(for cloud users) - ask Support and they will reveal the global function(`overrideFeatureFlag({release_layout_conversion_enabled: true})`) to enable conversion.(for users not connected to internet) Implementation: - current feature flags are supplied from the consolidated api and widgets consume them via `selectFeatureFlags` selector. - to override these flags locally, we provide a global function(accessible from console) `overrideFeatureFlag` which can take an object of featureflags and save them to indexed db. - then we use these saved values to override feature flag values supplied by the consolidated api. - `selectFeatureFlags` is where the values are combined and consumed by all components. Fixes #32140 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8641988198> > Commit: de8e06778bd9fe1feab2f5d20adbaed90e542019 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8641988198&attempt=2" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results -->
2024-04-11 11:51:14 +00:00
export const useFeatureFlagOverride = () => {
const dispatch = useDispatch();
const areFeatureFlagsFetched = useSelector(getFeatureFlagsFetched);
/**
* Fetches the feature flag override values and updates the state.
*/
useEffect(() => {
if (areFeatureFlagsFetched) {
getFeatureFlagOverrideValues().then((flagValues) => {
const filteredFlagValues = (
Object.entries(flagValues) as [FeatureFlag, boolean][]
).reduce((acc, [flagName, flagValue]) => {
if (
AvailableFeaturesToOverride.includes(flagName) &&
isBoolean(flagValue)
) {
acc[flagName] = flagValues[flagName];
}
return acc;
}, {} as OverriddenFeatureFlags);
if (filteredFlagValues) {
dispatch(setFeatureFlagOverridesAction(filteredFlagValues));
}
});
}
}, [areFeatureFlagsFetched]);
/**
* Sets up a global function to toggle the feature flag override.
*/
useEffect(() => {
(window as any).overrideFeatureFlag = (
featureFlagValues: OverriddenFeatureFlags,
) => {
const areAllFlagsValid = (
Object.entries(featureFlagValues) as [FeatureFlag, boolean][]
).every(
([flagName, flagValue]) =>
AvailableFeaturesToOverride.includes(flagName) &&
isBoolean(flagValue),
);
if (areAllFlagsValid) {
dispatch(updateFeatureFlagOverrideAction(featureFlagValues));
setFeatureFlagOverrideValues(featureFlagValues);
window.console.log(
"Feature flag override values set to: ",
featureFlagValues,
);
} else {
window.console.error(
"Invalid feature flag override values. Please check the feature flags being overridden.",
);
}
};
}, [dispatch]);
};