Feat/open Guided tour to all admins

packages/core/admin/admin/src/components/AuthenticatedApp.tsx

@@ -82,8 +82,8 @@ const AuthenticatedApp = () => {
     if (userRoles) {
       const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
 
-      if (isUserSuperAdmin && appInfo?.autoReload) {
-        setGuidedTourVisibility(true);
+      if (appInfo?.autoReload) {
+        setGuidedTourVisibility(true, isUserSuperAdmin ? 'super-admin' : 'admin');
       }
     }
   }, [userRoles, appInfo?.autoReload, setGuidedTourVisibility]);

packages/core/admin/admin/src/components/GuidedTour/Homepage.tsx

@@ -1,24 +1,51 @@
 import { Box, Button, Flex, Typography } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import {
+  GuidedTourContextValue,
+  pxToRem,
+  useGuidedTour,
+  useTracking,
+  useAppInfo,
+} from '@strapi/helper-plugin';
 import { ArrowRight } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-import { LAYOUT_DATA, States, STATES } from './constants';
+import {
+  SUPER_ADMIN_LAYOUT_DATA,
+  LAYOUT_DATA,
+  States,
+  STATES,
+  LayoutData,
+  SuperAdminLayoutData,
+} from './constants';
 import { Number, VerticalDivider } from './Ornaments';
 
-const GuidedTourHomepage = () => {
+interface GuidedTourHomepageProps {
+  userRole: string;
+}
+
+const GuidedTourHomepage = ({ userRole }: GuidedTourHomepageProps) => {
   const { guidedTourState, setSkipped } = useGuidedTour();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const appInfo = useAppInfo();
+
+  const layout: SuperAdminLayoutData | LayoutData =
+    userRole === 'super-admin' ? SUPER_ADMIN_LAYOUT_DATA : LAYOUT_DATA;
+  const triggeredBySA = userRole === 'super-admin' ? true : false;
 
-  const sections = Object.entries(LAYOUT_DATA).map(([key, val]) => ({
+  // Remove the inviteUser step  if we are in the development env
+  if (appInfo?.currentEnvironment === 'development') {
+    delete layout.inviteUser;
+  }
+
+  const sections = Object.entries(layout).map(([key, val]) => ({
     key: key,
     title: val.home.title,
     content: (
       <LinkButton
-        onClick={() => trackUsage(val.home.trackingEvent)}
+        onClick={() => trackUsage(val.home.trackingEvent, { triggeredBySA })}
         as={NavLink}
         // @ts-expect-error - types are not inferred correctly through the as prop.
         to={val.home.cta.target}
@@ -36,7 +63,7 @@ const GuidedTourHomepage = () => {
 
   const handleSkip = () => {
     setSkipped(true);
-    trackUsage('didSkipGuidedtour');
+    trackUsage('didSkipGuidedtour', { triggeredBySA });
   };
 
   return (
@@ -51,10 +78,13 @@ const GuidedTourHomepage = () => {
     >
       <Flex direction="column" alignItems="stretch" gap={6}>
         <Typography variant="beta" as="h2">
-          {formatMessage({
-            id: 'app.components.GuidedTour.title',
-            defaultMessage: '3 steps to get started',
-          })}
+          {formatMessage(
+            {
+              id: 'app.components.GuidedTour.title',
+              defaultMessage: '{count} steps to get started',
+            },
+            { count: Object.keys(layout).length }
+          )}
         </Typography>
         <Box>
           {sections.map((section, index) => {

packages/core/admin/admin/src/components/GuidedTour/Modal.tsx

@@ -10,37 +10,53 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import {
+  GuidedTourContextValue,
+  pxToRem,
+  useGuidedTour,
+  useTracking,
+  useAppInfo,
+} from '@strapi/helper-plugin';
 import { ArrowRight, Cross } from '@strapi/icons';
 import get from 'lodash/get';
 import { MessageDescriptor, useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { LAYOUT_DATA, STATES } from './constants';
+import {
+  LAYOUT_DATA,
+  SUPER_ADMIN_LAYOUT_DATA,
+  STATES,
+  LayoutData,
+  SuperAdminLayoutData,
+} from './constants';
 import { Number, VerticalDivider } from './Ornaments';
 
 /* -------------------------------------------------------------------------------------------------
  * GuidedTourModal
  * -----------------------------------------------------------------------------------------------*/
 
 const GuidedTourModal = () => {
-  const {
-    currentStep,
-    guidedTourState,
-    setCurrentStep,
-    setStepState,
-    isGuidedTourVisible,
-    setSkipped,
-  } = useGuidedTour();
+  const { currentStep, guidedTourState, setCurrentStep, setStepState, userRole, setSkipped } =
+    useGuidedTour();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const appInfo = useAppInfo();
 
-  if (!currentStep || !isGuidedTourVisible) {
+  if (!currentStep || !userRole) {
     return null;
   }
 
-  const stepData = get(LAYOUT_DATA, currentStep);
+  const layout: SuperAdminLayoutData | LayoutData =
+    userRole === 'super-admin' ? SUPER_ADMIN_LAYOUT_DATA : LAYOUT_DATA;
+  const triggeredBySA = userRole === 'super-admin' ? true : false;
+
+  // Remove the inviteUser step  if we are in the development env
+  if (appInfo?.currentEnvironment === 'development') {
+    delete layout.inviteUser;
+  }
+
+  const stepData = get(layout, currentStep);
   const sectionKeys = Object.keys(guidedTourState);
   const [sectionName, stepName] = currentStep.split('.') as [
     keyof GuidedTourContextValue['guidedTourState'],
@@ -55,7 +71,7 @@ const GuidedTourModal = () => {
     setStepState(currentStep, true);
 
     if (stepData) {
-      trackUsage(stepData.trackingEvent);
+      trackUsage(stepData.trackingEvent, { triggeredBySA });
     }
 
     setCurrentStep(null);
@@ -64,7 +80,7 @@ const GuidedTourModal = () => {
   const handleSkip = () => {
     setSkipped(true);
     setCurrentStep(null);
-    trackUsage('didSkipGuidedtour');
+    trackUsage('didSkipGuidedtour', { triggeredBySA });
   };
 
   return (
@@ -107,6 +123,7 @@ const GuidedTourModal = () => {
                 sectionIndex={sectionIndex}
                 stepIndex={stepIndex}
                 hasSectionAfter={hasSectionAfter}
+                stepCount={Object.keys(layoutCopy).length}
               >
                 {stepData && 'content' in stepData && <GuidedTourContent {...stepData.content} />}
               </GuidedTourStepper>
@@ -150,6 +167,7 @@ interface GuidedTourStepperProps {
   onCtaClick: () => void;
   sectionIndex: number;
   stepIndex: number;
+  stepCount: number;
   hasSectionAfter: boolean;
 }
 
@@ -160,6 +178,7 @@ const GuidedTourStepper = ({
   onCtaClick,
   sectionIndex,
   stepIndex,
+  stepCount,
   hasSectionAfter,
 }: GuidedTourStepperProps) => {
   const { formatMessage } = useIntl();
@@ -175,9 +194,10 @@ const GuidedTourStepper = ({
           {hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />}
         </Flex>
         <Typography variant="sigma" textColor="primary600">
+          {stepCount}
           {formatMessage({
             id: 'app.components.GuidedTour.title',
-            defaultMessage: '3 steps to get started',
+            defaultMessage: 'steps to get started',
           })}
         </Typography>
       </Flex>
@@ -246,7 +266,7 @@ const GuidedTourStepper = ({
  * -----------------------------------------------------------------------------------------------*/
 
 interface GuidedTourContentProps
-  extends Required<Pick<MessageDescriptor, 'defaultMessage' | 'id'>> {}
+  extends Required<Pick<MessageDescriptor, 'defaultMessage' | 'id'>> { }
 
 const GuidedTourContent = ({ id, defaultMessage }: GuidedTourContentProps) => {
   const { formatMessage } = useIntl();

packages/core/admin/admin/src/components/GuidedTour/Provider.tsx

@@ -7,6 +7,7 @@ import {
   GuidedTourStep,
   GuidedTourStepKey,
   auth,
+  useAppInfo,
 } from '@strapi/helper-plugin';
 import produce from 'immer';
 import get from 'lodash/get';
@@ -21,9 +22,11 @@ interface GuidedTourProviderProps {
 }
 
 const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
-  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] =
+  const [{ currentStep, guidedTourState, isGuidedTourVisible, userRole, isSkipped }, dispatch] =
     React.useReducer(reducer, initialState, initialiseState);
 
+  const appInfo = useAppInfo();
+
   const setCurrentStep = (step: SetCurrentStepAction['step']) => {
     // if step is null it is intentional, we need to dispatch it
     if (step !== null) {
@@ -49,10 +52,38 @@ const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
     });
   };
 
-  const setGuidedTourVisibility = (value: SetGuidedTourVisibilityAction['value']) => {
+  const setGuidedTourVisibility = (
+    value: SetGuidedTourVisibilityAction['value'],
+    userRole: SetGuidedTourVisibilityAction['userRole']
+  ) => {
+    // Update the initial guidedTourState depending on the visibility (executed once)
+    if (!isGuidedTourVisible) {
+      const guidedTourState = JSON.parse(JSON.stringify(initialState?.guidedTourState));
+
+      // Remove the inviteUser step if we are in the development env
+      if (appInfo?.currentEnvironment === 'development') {
+        delete guidedTourState.inviteUser;
+      }
+
+      // Remove non-related steps to specific guided tour (super-admin or admin)
+      if (userRole === 'admin') {
+        delete guidedTourState.contentTypeBuilder;
+        delete guidedTourState.apiTokens;
+      } else if (userRole === 'super-admin') {
+        delete guidedTourState.mediaLibrary;
+        delete guidedTourState.profile;
+      }
+
+      dispatch({
+        type: 'SET_GUIDED_TOUR_STATE',
+        value: guidedTourState,
+      });
+    }
+
     dispatch({
       type: 'SET_GUIDED_TOUR_VISIBILITY',
       value,
+      userRole,
     });
   };
 
@@ -71,7 +102,6 @@ const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
 
     if (sectionSteps) {
       const guidedTourArray = Object.entries(guidedTourState);
-
       // Find current section position in the guidedTourArray
       // Get only previous sections based on current section position
       const currentSectionIndex = guidedTourArray.findIndex(([key]) => key === sectionName);
@@ -81,7 +111,6 @@ const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
       const isSectionToShow = previousSections.every(([, sectionValue]) =>
         Object.values(sectionValue).every(Boolean)
       );
-
       const [firstStep] = Object.keys(sectionSteps) as [GuidedTourStepKey];
       const isFirstStepDone = sectionSteps[firstStep];
 
@@ -109,6 +138,7 @@ const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
       setSkipped={setSkipped}
       setStepState={setStepState}
       startSection={startSection}
+      userRole={userRole}
       isGuidedTourVisible={isGuidedTourVisible}
       isSkipped={isSkipped}
     >
@@ -119,7 +149,7 @@ const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
 
 type State = Pick<
   GuidedTourContextValue,
-  'guidedTourState' | 'currentStep' | 'isGuidedTourVisible' | 'isSkipped'
+  'guidedTourState' | 'currentStep' | 'isGuidedTourVisible' | 'isSkipped' | 'userRole'
 >;
 
 const initialState = {
@@ -137,12 +167,25 @@ const initialState = {
       create: false,
       success: false,
     },
+    mediaLibrary: {
+      create: false,
+      success: false,
+    },
+    profile: {
+      create: false,
+      success: false,
+    },
+    inviteUser: {
+      create: false,
+      success: false,
+    },
     transferTokens: {
       create: false,
       success: false,
     },
   },
   isGuidedTourVisible: false,
+  userRole: 'super-admin',
   isSkipped: false,
 } satisfies State;
 
@@ -157,6 +200,11 @@ interface SetStepStateAction {
   value: boolean;
 }
 
+interface SetGuidedTourStateAction {
+  type: 'SET_GUIDED_TOUR_STATE';
+  value: object;
+}
+
 interface SetSkippedAction {
   type: 'SET_SKIPPED';
   value: boolean;
@@ -165,13 +213,15 @@ interface SetSkippedAction {
 interface SetGuidedTourVisibilityAction {
   type: 'SET_GUIDED_TOUR_VISIBILITY';
   value: boolean;
+  userRole: string;
 }
 
 type Action =
   | SetCurrentStepAction
   | SetStepStateAction
   | SetSkippedAction
-  | SetGuidedTourVisibilityAction;
+  | SetGuidedTourVisibilityAction
+  | SetGuidedTourStateAction;
 
 const reducer: React.Reducer<State, Action> = (state: State = initialState, action: Action) =>
   produce(state, (draftState) => {
@@ -192,8 +242,13 @@ const reducer: React.Reducer<State, Action> = (state: State = initialState, acti
         draftState.isSkipped = action.value;
         break;
       }
+      case 'SET_GUIDED_TOUR_STATE': {
+        draftState.guidedTourState = action.value;
+        break;
+      }
       case 'SET_GUIDED_TOUR_VISIBILITY': {
         draftState.isGuidedTourVisible = action.value;
+        draftState.userRole = action.userRole;
         break;
       }
       default: {