@strapi/admin 4.0.5 → 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/EditViewDataManagerProvider/utils/isValidJSONString.js

@@ -0,0 +1,15 @@
+const isValidJSONString = value => {
+  if (typeof value === 'string' && value.startsWith('"') && value.endsWith('"')) {
+    try {
+      JSON.parse(value);
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  return false;
+};
+
+export default isValidJSONString;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -1,18 +1,17 @@
-import {
-  get,
-  isBoolean,
-  isNumber,
-  isNull,
-  isObject,
-  isArray,
-  isEmpty,
-  isNaN,
-  toNumber,
-} from 'lodash';
+import get from 'lodash/get';
+import isBoolean from 'lodash/isBoolean';
+import isNumber from 'lodash/isNumber';
+import isNull from 'lodash/isNull';
+import isObject from 'lodash/isObject';
+import isEmpty from 'lodash/isEmpty';
+import isNaN from 'lodash/isNaN';
+import toNumber from 'lodash/toNumber';
 
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
+import isValidJSONString from './isValidJSONString';
+
 yup.addMethod(yup.mixed, 'defined', function() {
   return this.test('defined', errorsTrads.required, value => value !== undefined);
 });
@@ -224,7 +223,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return true;
         }
 
-        if (isNumber(value) || isNull(value) || isObject(value) || isArray(value)) {
+        if (isValidJSONString(value) || isNumber(value) || isNull(value) || isObject(value)) {
           return true;
         }
 

package/admin/src/content-manager/components/InputJSON/FieldWrapper.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Field } from '@strapi/design-system/Field';
+
+const FieldWrapper = ({ name, hint, error, children }) => {
+  const { formatMessage } = useIntl();
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  return (
+    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+      {children}
+    </Field>
+  );
+};
+
+FieldWrapper.defaultProps = {
+  hint: undefined,
+  error: '',
+};
+
+FieldWrapper.propTypes = {
+  name: PropTypes.string.isRequired,
+  hint: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  error: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
+import { FieldLabel } from '@strapi/design-system/Field';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 
@@ -12,7 +12,7 @@ const LabelAction = styled(Box)`
   }
 `;
 
-const Label = ({ id, intlLabel, labelAction, name }) => {
+const Label = ({ intlLabel, labelAction, name, required }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -23,15 +23,7 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
 
   return (
     <Flex>
-      <Typography
-        textColor="neutral800"
-        htmlFor={id || name}
-        variant="pi"
-        fontWeight="bold"
-        as="label"
-      >
-        {label}
-      </Typography>
+      <FieldLabel required={required}>{label}</FieldLabel>
       {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
     </Flex>
   );
@@ -41,6 +33,7 @@ Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
+  required: false,
 };
 
 Label.propTypes = {
@@ -52,6 +45,7 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
 };
 
 export default Label;