future: add future flag

examples/getstarted/config/features.js

@@ -1,3 +1,5 @@
 module.exports = ({ env }) => ({
-  future: {},
+  future: {
+    unstableGuidedTour: true,
+  },
 });

packages/core/admin/admin/src/components/UnstableGuidedTour/Context.tsx

@@ -55,6 +55,9 @@ const UnstableGuidedTourContext = ({
   // NOTE: Maybe we just import this directly instead of a prop?
   tours: Tours;
 }) => {
+  if (!window.strapi.future.isEnabled('unstableGuidedTour')) {
+    return children;
+  }
   // Derive the tour state from the tours object
   const tours = Object.keys(registeredTours).reduce(
     (acc, tourName) => {

packages/core/admin/admin/src/components/UnstableGuidedTour/Step.tsx

@@ -87,7 +87,8 @@ const createStepComponents = (tourName: ValidTourName): Step => ({
     const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);
     const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);
     const currentStep = state.tours[tourName].currentStep + 1;
-    const tourLength = state.tours[tourName].length;
+    // TODO: at the moment we are removing from count the final step taking into consideration every guided tour has a final step. We can consider to change this count to be "smarter" filtering the steps that don't need to be counted
+    const tourLength = state.tours[tourName].length - 1;
 
     return (
       <ActionsContainer width="100%" padding={3} paddingLeft={5}>

packages/core/admin/admin/src/components/UnstableGuidedTour/Tours.tsx

@@ -144,16 +144,21 @@ const UnstableGuidedTourTooltip = ({
   tourName: ValidTourName;
   step: number;
 }) => {
+  const disabledUnstableGuidedTour = !window.strapi.future.isEnabled('unstableGuidedTour');
   const state = unstableUseGuidedTour('UnstableGuidedTourTooltip', (s) => s.state);
   const dispatch = unstableUseGuidedTour('UnstableGuidedTourTooltip', (s) => s.dispatch);
   const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);
 
-  const isCurrentStep = state.tours[tourName].currentStep === step;
-  const isPopoverOpen = isCurrentStep && !state.tours[tourName].isCompleted;
+  const isCurrentStep = disabledUnstableGuidedTour
+    ? undefined
+    : state.tours[tourName].currentStep === step;
+  const isPopoverOpen = disabledUnstableGuidedTour
+    ? undefined
+    : isCurrentStep && !state.tours[tourName].isCompleted;
 
   // Lock the scroll
   React.useEffect(() => {
-    if (!isPopoverOpen) return;
+    if (!isPopoverOpen || disabledUnstableGuidedTour) return;
 
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = 'hidden';
@@ -161,7 +166,11 @@ const UnstableGuidedTourTooltip = ({
     return () => {
       document.body.style.overflow = originalStyle;
     };
-  }, [isPopoverOpen]);
+  }, [disabledUnstableGuidedTour, isPopoverOpen]);
+
+  if (disabledUnstableGuidedTour) {
+    return children;
+  }
 
   return (
     <>

packages/core/types/src/modules/features.ts

@@ -1,5 +1,7 @@
 export interface FeaturesConfig {
-  future?: object;
+  future?: {
+    unstableGuidedTour?: boolean;
+  };
 }
 
 export interface FeaturesService {
@@ -9,5 +11,6 @@ export interface FeaturesService {
   config: FeaturesConfig | undefined;
   future: {
     isEnabled: (futureFlagName: string) => boolean;
+    unstableGuidedTour?: boolean;
   };
 }

tests/e2e/app-template/config/features.js

@@ -1,3 +1,5 @@
 module.exports = ({ env }) => ({
-  future: {},
+  future: {
+    unstableGuidedTour: env.bool('STRAPI_FEATURES_UNSTABLE_GUIDED_TOUR', false),
+  },
 });