diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index b4bdf28ee7..f4a24174e8 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -51,6 +51,8 @@ export const FEATURE_FLAG = { rollout_editor_pane_segments_enabled: "rollout_editor_pane_segments_enabled", release_show_create_app_from_templates_enabled: "release_show_create_app_from_templates_enabled", + rollout_remove_feature_walkthrough_enabled: + "rollout_remove_feature_walkthrough_enabled", } as const; export type FeatureFlag = keyof typeof FEATURE_FLAG; @@ -92,6 +94,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { release_actions_redesign_enabled: false, rollout_editor_pane_segments_enabled: false, release_show_create_app_from_templates_enabled: false, + rollout_remove_feature_walkthrough_enabled: false, }; export const AB_TESTING_EVENT_KEYS = { diff --git a/app/client/src/components/featureWalkthrough/index.tsx b/app/client/src/components/featureWalkthrough/index.tsx index d9353125c6..9dd792b4a6 100644 --- a/app/client/src/components/featureWalkthrough/index.tsx +++ b/app/client/src/components/featureWalkthrough/index.tsx @@ -8,6 +8,10 @@ import { useLocation } from "react-router-dom"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { isElementVisible } from "./utils"; import { hideIndicator } from "components/utils/Indicator"; +import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; +import { selectFeatureFlagCheck } from "@appsmith/selectors/featureFlagsSelectors"; +import { useSelector } from "react-redux"; +import type { AppState } from "@appsmith/reducers"; const WalkthroughRenderer = lazy(async () => { return retryPromise( @@ -26,18 +30,27 @@ export default function Walkthrough({ children }: any) { const [feature, setFeature] = useState([]); const location = useLocation(); + const isWalkthroughDisabled = useSelector((state: AppState) => + selectFeatureFlagCheck( + state, + FEATURE_FLAG.rollout_remove_feature_walkthrough_enabled, + ), + ); + const pushFeature = (value: FeatureParams, prioritize = false) => { - const alreadyExists = feature.some((f) => f.targetId === value.targetId); - if (!alreadyExists) { - const _value = Array.isArray(value) ? [...value] : [value]; - if (prioritize) { - // Get ahead of the queue - setFeature((e) => [..._value, ...e]); - } else { - setFeature((e) => [...e, ..._value]); + if (!isWalkthroughDisabled || !!value?.forceExecution) { + const alreadyExists = feature.some((f) => f.targetId === value.targetId); + if (!alreadyExists) { + const _value = Array.isArray(value) ? [...value] : [value]; + if (prioritize) { + // Get ahead of the queue + setFeature((e) => [..._value, ...e]); + } else { + setFeature((e) => [...e, ..._value]); + } } + updateActiveWalkthrough(); } - updateActiveWalkthrough(); }; const popFeature = (triggeredFrom?: string) => { diff --git a/app/client/src/components/featureWalkthrough/walkthroughContext.tsx b/app/client/src/components/featureWalkthrough/walkthroughContext.tsx index 9b7048ce5b..322b9137f0 100644 --- a/app/client/src/components/featureWalkthrough/walkthroughContext.tsx +++ b/app/client/src/components/featureWalkthrough/walkthroughContext.tsx @@ -67,6 +67,9 @@ export interface FeatureParams { dismissOnOverlayClick?: boolean; // execute function just before showing walkthrough highlight runBeforeWalkthrough?: () => void; + // If we want to force the display of walkthrough, set this prop to true + // If set to true, will override the feature flag as well + forceExecution?: boolean; } interface WalkthroughContextType {