@strapi/admin 4.0.8 → 4.1.0

package/admin/src/components/GuidedTour/Stepper/StepNumber.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { Icon } from '@strapi/design-system/Icon';
+import Check from '@strapi/icons/Check';
+import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
+
+const StepNumber = ({ type, number }) => {
+  if (type === IS_DONE) {
+    return (
+      <Flex
+        background="primary600"
+        padding={2}
+        borderRadius="50%"
+        width={pxToRem(30)}
+        height={pxToRem(30)}
+        justifyContent="center"
+      >
+        <Icon as={Check} aria-hidden width={pxToRem(16)} color="neutral0" />
+      </Flex>
+    );
+  }
+
+  if (type === IS_ACTIVE) {
+    return (
+      <Flex
+        background="primary600"
+        padding={2}
+        borderRadius="50%"
+        width={pxToRem(30)}
+        height={pxToRem(30)}
+        justifyContent="center"
+      >
+        <Typography fontWeight="semiBold" textColor="neutral0">
+          {number}
+        </Typography>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      borderColor="neutral500"
+      borderWidth="1px"
+      borderStyle="solid"
+      padding={2}
+      borderRadius="50%"
+      width={pxToRem(30)}
+      height={pxToRem(30)}
+      justifyContent="center"
+    >
+      <Typography fontWeight="semiBold" textColor="neutral600">
+        {number}
+      </Typography>
+    </Flex>
+  );
+};
+
+StepNumber.defaultProps = {
+  number: undefined,
+  type: IS_NOT_DONE,
+};
+
+StepNumber.propTypes = {
+  number: PropTypes.number,
+  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
+};
+
+export default StepNumber;

package/admin/src/components/GuidedTour/constants.js

@@ -0,0 +1,3 @@
+export const IS_ACTIVE = 'isActive';
+export const IS_DONE = 'isDone';
+export const IS_NOT_DONE = 'isNotDone';

package/admin/src/components/GuidedTour/index.js

@@ -0,0 +1,100 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { GuidedTourProvider } from '@strapi/helper-plugin';
+import persistStateToLocaleStorage from './utils/persistStateToLocaleStorage';
+import arePreviousSectionsDone from './utils/arePreviousSectionsDone';
+import arePreviousStepsDone from './utils/arePreviousStepsDone';
+import reducer, { initialState } from './reducer';
+import init from './init';
+
+const GuidedTour = ({ children }) => {
+  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = useReducer(
+    reducer,
+    initialState,
+    init
+  );
+
+  const setCurrentStep = step => {
+    // if step is null it is intentional, we need to dispatch it
+    if (step !== null) {
+      const isStepAlreadyDone = get(guidedTourState, step);
+      const isStepToShow = arePreviousStepsDone(step, guidedTourState);
+
+      if (isStepAlreadyDone || isSkipped || !isStepToShow) {
+        return null;
+      }
+    }
+
+    persistStateToLocaleStorage.addCurrentStep(step);
+
+    return dispatch({
+      type: 'SET_CURRENT_STEP',
+      step,
+    });
+  };
+
+  const setGuidedTourVisibility = value => {
+    dispatch({
+      type: 'SET_GUIDED_TOUR_VISIBILITY',
+      value,
+    });
+  };
+
+  const setStepState = (currentStep, value) => {
+    persistStateToLocaleStorage.addCompletedStep(currentStep);
+
+    dispatch({
+      type: 'SET_STEP_STATE',
+      currentStep,
+      value,
+    });
+  };
+
+  const startSection = sectionName => {
+    const sectionSteps = guidedTourState[sectionName];
+
+    if (sectionSteps) {
+      const isSectionToShow = arePreviousSectionsDone(sectionName, guidedTourState);
+      const firstStep = Object.keys(sectionSteps)[0];
+      const isFirstStepDone = sectionSteps[firstStep];
+
+      if (isSectionToShow && !currentStep && !isFirstStepDone) {
+        return setCurrentStep(`${sectionName}.${firstStep}`);
+      }
+    }
+
+    return null;
+  };
+
+  const setSkipped = value => {
+    persistStateToLocaleStorage.setSkipped(value);
+
+    dispatch({
+      type: 'SET_SKIPPED',
+      value,
+    });
+  };
+
+  return (
+    <GuidedTourProvider
+      guidedTourState={guidedTourState}
+      currentStep={currentStep}
+      setCurrentStep={setCurrentStep}
+      setGuidedTourVisibility={setGuidedTourVisibility}
+      setSkipped={setSkipped}
+      setStepState={setStepState}
+      startSection={startSection}
+      isGuidedTourVisible={isGuidedTourVisible}
+      isSkipped={isSkipped}
+    >
+      {children}
+    </GuidedTourProvider>
+  );
+};
+
+GuidedTour.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default GuidedTour;

package/admin/src/components/GuidedTour/init.js

@@ -0,0 +1,36 @@
+import set from 'lodash/set';
+import persistStateToLocaleStorage, {
+  COMPLETED_STEPS,
+  CURRENT_STEP,
+  SKIPPED,
+} from './utils/persistStateToLocaleStorage';
+
+const init = initialState => {
+  const copyInitialState = { ...initialState };
+  const guidedTourLocaleStorage = persistStateToLocaleStorage.get(COMPLETED_STEPS);
+  const currentStepLocaleStorage = persistStateToLocaleStorage.get(CURRENT_STEP);
+  const skippedLocaleStorage = persistStateToLocaleStorage.get(SKIPPED);
+
+  if (guidedTourLocaleStorage) {
+    guidedTourLocaleStorage.forEach(step => {
+      const [sectionName, stepName] = step.split('.');
+      set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
+    });
+  }
+
+  // if current step when initializing mark it as done
+  if (currentStepLocaleStorage) {
+    const [sectionName, stepName] = currentStepLocaleStorage.split('.');
+    set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
+    persistStateToLocaleStorage.addCompletedStep(currentStepLocaleStorage);
+    persistStateToLocaleStorage.addCurrentStep(null);
+  }
+
+  if (skippedLocaleStorage !== null) {
+    set(copyInitialState, 'isSkipped', skippedLocaleStorage);
+  }
+
+  return copyInitialState;
+};
+
+export default init;

package/admin/src/components/GuidedTour/layout.js

@@ -0,0 +1,153 @@
+const layout = {
+  contentTypeBuilder: {
+    home: {
+      title: {
+        id: 'app.components.GuidedTour.home.CTB.title',
+        defaultMessage: '🧠 Build the content structure',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.home.CTB.cta.title',
+          defaultMessage: 'Go to the Content type Builder',
+        },
+        type: 'REDIRECT',
+        target: '/plugins/content-type-builder',
+      },
+    },
+    create: {
+      title: {
+        id: 'app.components.GuidedTour.CTB.create.title',
+        defaultMessage: '🧠 Create a first Collection type',
+      },
+      content: {
+        id: 'app.components.GuidedTour.CTB.create.content',
+        defaultMessage:
+          '<p>Collection types help you manage several entries, Single types are suitable to manage only one entry.</p> <p>Ex: For a Blog website, Articles would be a Collection type whereas a Homepage would be a Single type.</p>',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.CTB.create.cta.title',
+          defaultMessage: 'Build a Collection type',
+        },
+        type: 'CLOSE',
+      },
+    },
+    success: {
+      title: {
+        id: 'app.components.GuidedTour.CTB.success.title',
+        defaultMessage: 'Step 1: Completed ✅',
+      },
+      content: {
+        id: 'app.components.GuidedTour.CTB.success.content',
+        defaultMessage: '<p>Good going!</p><b>⚡️ What would you like to share with the world?</b>',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.create-content',
+          defaultMessage: 'Create content',
+        },
+        type: 'REDIRECT',
+        target: '/content-manager',
+      },
+    },
+  },
+  contentManager: {
+    home: {
+      title: {
+        id: 'app.components.GuidedTour.home.CM.title',
+        defaultMessage: '⚡️ What would you like to share with the world?',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.create-content',
+          defaultMessage: 'Create content',
+        },
+        type: 'REDIRECT',
+        target: '/content-manager',
+      },
+    },
+    create: {
+      title: {
+        id: 'app.components.GuidedTour.CM.create.title',
+        defaultMessage: '⚡️ Create content',
+      },
+      content: {
+        id: 'app.components.GuidedTour.CM.create.content',
+        defaultMessage:
+          "<p>Create and manage all the content here in the Content Manager.</p><p>Ex: Taking the Blog website example further, one can write an Article, save and publish it as they like.</p><p>💡 Quick tip - Don't forget to hit publish on the content you create.</p>",
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.create-content',
+          defaultMessage: 'Create content',
+        },
+        type: 'CLOSE',
+      },
+    },
+    success: {
+      title: {
+        id: 'app.components.GuidedTour.CM.success.title',
+        defaultMessage: 'Step 2: Completed ✅',
+      },
+      content: {
+        id: 'app.components.GuidedTour.CM.success.content',
+        defaultMessage: '<p>Awesome, one last step to go!</p><b>🚀  See content in action</b>',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.CM.success.cta.title',
+          defaultMessage: 'Test the API',
+        },
+        type: 'REDIRECT',
+        target: '/settings/api-tokens',
+      },
+    },
+  },
+  apiTokens: {
+    home: {
+      title: {
+        id: 'app.components.GuidedTour.apiTokens.create.title',
+        defaultMessage: '🚀 See content in action',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.home.apiTokens.cta.title',
+          defaultMessage: 'Test the API',
+        },
+        type: 'REDIRECT',
+        target: '/settings/api-tokens',
+      },
+    },
+    create: {
+      title: {
+        id: 'app.components.GuidedTour.apiTokens.create.title',
+        defaultMessage: '🚀 See content in action',
+      },
+      content: {
+        id: 'app.components.GuidedTour.apiTokens.create.content',
+        defaultMessage:
+          '<p>Generate an authentication token here and retrieve the content you just created.</p>',
+      },
+      cta: {
+        title: {
+          id: 'app.components.GuidedTour.apiTokens.create.cta.title',
+          defaultMessage: 'Generate an API Token',
+        },
+        type: 'CLOSE',
+      },
+    },
+    success: {
+      title: {
+        id: 'app.components.GuidedTour.apiTokens.success.title',
+        defaultMessage: 'Step 3: Completed ✅',
+      },
+      content: {
+        id: 'app.components.GuidedTour.apiTokens.success.content',
+        defaultMessage:
+          "<p>See content in action by making an HTTP request:</p><ul><li><p>To this URL: <light>https://'<'YOUR_DOMAIN'>'/api/'<'YOUR_CT'>'</light></p></li><li><p>With the header: <light>Authorization: bearer '<'YOUR_API_TOKEN'>'</light></p></li></ul><p>For more ways to interact with content, see the <documentationLink>documentation</documentationLink>.</p>",
+      },
+    },
+  },
+};
+
+export default layout;

package/admin/src/components/GuidedTour/reducer.js

@@ -0,0 +1,50 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  currentStep: null,
+  guidedTourState: {
+    contentTypeBuilder: {
+      create: false,
+      success: false,
+    },
+    contentManager: {
+      create: false,
+      success: false,
+    },
+    apiTokens: {
+      create: false,
+      success: false,
+    },
+  },
+  isGuidedTourVisible: false,
+  isSkipped: true,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'SET_CURRENT_STEP': {
+        draftState.currentStep = action.step;
+        break;
+      }
+      case 'SET_STEP_STATE': {
+        const [section, step] = action.currentStep.split('.');
+        draftState.guidedTourState[section][step] = action.value;
+        break;
+      }
+      case 'SET_SKIPPED': {
+        draftState.isSkipped = action.value;
+        break;
+      }
+      case 'SET_GUIDED_TOUR_VISIBILITY': {
+        draftState.isGuidedTourVisible = action.value;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;

package/admin/src/components/GuidedTour/utils/arePreviousSectionsDone.js

@@ -0,0 +1,13 @@
+const arePreviousSectionsDone = (sectionName, guidedTourState) => {
+  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);
+  const previousSections = guidedTourArray.slice(0, currentSectionIndex);
+
+  // Check if every steps from previous section are done
+  return previousSections.every(([, sectionValue]) => Object.values(sectionValue).every(Boolean));
+};
+
+export default arePreviousSectionsDone;

package/admin/src/components/GuidedTour/utils/arePreviousStepsDone.js

@@ -0,0 +1,12 @@
+const arePreviousStepsDone = (step, guidedTourState) => {
+  const stepSplit = step.split('.');
+  const stepName = stepSplit[1];
+  const sectionArray = Object.entries(guidedTourState[stepSplit[0]]);
+
+  const currentStepIndex = sectionArray.findIndex(([key]) => key === stepName);
+  const previousSteps = sectionArray.slice(0, currentStepIndex);
+
+  return previousSteps.every(([, sectionValue]) => sectionValue);
+};
+
+export default arePreviousStepsDone;

package/admin/src/components/GuidedTour/utils/isGuidedTourCompleted.js

@@ -0,0 +1,6 @@
+const isGuidedTourCompleted = guidedTourState =>
+  Object.entries(guidedTourState).every(([, section]) =>
+    Object.entries(section).every(([, step]) => step)
+  );
+
+export default isGuidedTourCompleted;

package/admin/src/components/GuidedTour/utils/persistStateToLocaleStorage.js

@@ -0,0 +1,34 @@
+export const CURRENT_STEP = 'GUIDED_TOUR_CURRENT_STEP';
+export const COMPLETED_STEPS = 'GUIDED_TOUR_COMPLETED_STEPS';
+export const SKIPPED = 'GUIDED_TOUR_SKIPPED';
+const parse = JSON.parse;
+const stringify = JSON.stringify;
+
+const persistStateToLocaleStorage = {
+  clear() {
+    localStorage.removeItem(CURRENT_STEP);
+    localStorage.removeItem(COMPLETED_STEPS);
+  },
+  addCompletedStep: completedStep => {
+    const currentSteps = parse(localStorage.getItem(COMPLETED_STEPS))?.slice() || [];
+    const isAlreadyStored = currentSteps.includes(completedStep);
+
+    if (isAlreadyStored) {
+      return;
+    }
+
+    currentSteps.push(completedStep);
+    localStorage.setItem(COMPLETED_STEPS, stringify(currentSteps));
+  },
+  addCurrentStep: currentStep => {
+    localStorage.setItem(CURRENT_STEP, stringify(currentStep));
+  },
+  setSkipped: value => {
+    localStorage.setItem(SKIPPED, stringify(value));
+  },
+  get: item => {
+    return parse(localStorage.getItem(item));
+  },
+};
+
+export default persistStateToLocaleStorage;

package/admin/src/components/Providers/index.js

@@ -5,6 +5,7 @@ import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext, ConfigurationsContext } from '../../contexts';
 import LanguageProvider from '../LanguageProvider';
+import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
 import Notifications from '../Notifications';
 import OverlayBlocker from '../OverlayBlocker';
@@ -58,7 +59,9 @@ const Providers = ({
                 <LanguageProvider messages={messages} localeNames={localeNames}>
                   <AutoReloadOverlayBlockerProvider>
                     <OverlayBlocker>
-                      <Notifications>{children}</Notifications>
+                      <GuidedTour>
+                        <Notifications>{children}</Notifications>
+                      </GuidedTour>
                     </OverlayBlocker>
                   </AutoReloadOverlayBlockerProvider>
                 </LanguageProvider>

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -8,6 +8,7 @@ import {
   useQueryParams,
   formatComponentData,
   contentManagementUtilRemoveFieldsFromData,
+  useGuidedTour,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -34,6 +35,7 @@ import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 // This container is used to handle the CRUD
 const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }) => {
   const toggleNotification = useNotification();
+  const { setCurrentStep } = useGuidedTour();
   const { trackUsage } = useTracking();
   const { push, replace } = useHistory();
   const [{ rawQuery }] = useQueryParams();
@@ -263,6 +265,8 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           message: { id: getTrad('success.record.save') },
         });
 
+        setCurrentStep('contentManager.success');
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
         // Enable navigation and remove loaders
         dispatch(setStatus('resolved'));
@@ -274,7 +278,16 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         dispatch(setStatus('resolved'));
       }
     },
-    [cleanReceivedData, displayErrors, replace, slug, dispatch, rawQuery, toggleNotification]
+    [
+      cleanReceivedData,
+      displayErrors,
+      replace,
+      slug,
+      dispatch,
+      rawQuery,
+      toggleNotification,
+      setCurrentStep,
+    ]
   );
 
   const onPublish = useCallback(async () => {

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -6,6 +6,7 @@ import {
   formatComponentData,
   useQueryParams,
   useNotification,
+  useGuidedTour,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -29,6 +30,7 @@ import buildQueryString from '../../pages/ListView/utils/buildQueryString';
 const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const { trackUsage } = useTracking();
   const { push } = useHistory();
+  const { setCurrentStep } = useGuidedTour();
   const trackUsageRef = useRef(trackUsage);
   const [isCreatingEntry, setIsCreatingEntry] = useState(true);
   const [{ query, rawQuery }] = useQueryParams();
@@ -203,6 +205,8 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
           message: { id: getTrad('success.record.save') },
         });
 
+        setCurrentStep('contentManager.success');
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
         setIsCreatingEntry(false);
 
@@ -215,7 +219,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         dispatch(setStatus('resolved'));
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification]
+    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, setCurrentStep]
   );
   const onPublish = useCallback(async () => {
     try {

package/admin/src/content-manager/pages/App/index.js

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Route, useRouteMatch, Redirect, useLocation } from 'react-router-dom';
-import { CheckPagePermissions, LoadingIndicatorPage, NotFound } from '@strapi/helper-plugin';
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  NotFound,
+  useGuidedTour,
+} from '@strapi/helper-plugin';
 import { Layout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { useIntl } from 'react-intl';
@@ -28,6 +33,14 @@ const App = () => {
   );
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
+  const { startSection } = useGuidedTour();
+  const startSectionRef = useRef(startSection);
+
+  useEffect(() => {
+    if (startSectionRef.current) {
+      startSectionRef.current('contentManager');
+    }
+  }, []);
 
   if (status === 'loading') {
     return (

package/admin/src/pages/Admin/index.js

@@ -15,6 +15,7 @@ import AppLayout from '../../layouts/AppLayout';
 import { useMenu, useReleaseNotification } from '../../hooks';
 import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
+import GuidedTourModal from '../../components/GuidedTour/Modal';
 
 const CM = lazy(() =>
   import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
@@ -92,6 +93,7 @@ const Admin = () => {
             <Route path="" component={NotFoundPage} />
           </Switch>
         </Suspense>
+        <GuidedTourModal />
         <Onboarding />
       </AppLayout>
     </DndProvider>

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -10,7 +10,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
+// import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
@@ -30,9 +30,12 @@ import FieldActionWrapper from '../FieldActionWrapper';
 const CenteredBox = styled(Box)`
   text-align: center;
 `;
-const A = styled.a`
-  color: ${({ theme }) => theme.colors.primary600};
-`;
+
+// Experiment only until the next release
+// To uncomment then
+// const A = styled.a`
+//   color: ${({ theme }) => theme.colors.primary600};
+// `;
 
 const PasswordInput = styled(TextInput)`
   ::-ms-reveal {
@@ -271,7 +274,9 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                     })}
                     type={confirmPasswordShown ? 'text' : 'password'}
                   />
-                  <Checkbox
+                  {/* Experiment only until the next release
+                  To uncomment then */}
+                  {/* <Checkbox
                     onValueChange={checked => {
                       handleChange({ target: { value: checked, name: 'news' } });
                     }}
@@ -304,7 +309,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                         ),
                       }
                     )}
-                  </Checkbox>
+                  </Checkbox> */}
                   <Button fullWidth size="L" type="submit">
                     {formatMessage({
                       id: 'Auth.form.button.register',