@strapi/admin 4.0.5 → 4.1.0

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

@@ -1,19 +1,26 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect, useRef } from 'react';
 //  TODO: DS add loader
-import { auth, LoadingIndicatorPage, AppInfosContext } from '@strapi/helper-plugin';
+import { auth, LoadingIndicatorPage, AppInfosContext, useGuidedTour } from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
 import { useConfigurations } from '../../hooks';
 import PluginsInitializer from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
-import { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease } from './utils/api';
+import {
+  fetchAppInfo,
+  fetchCurrentUserPermissions,
+  fetchStrapiLatestRelease,
+  fetchUserRoles,
+} from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
 import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
@@ -22,6 +29,7 @@ const AuthenticatedApp = () => {
     { data: appInfos, status },
     { data: tag_name, isLoading },
     { data: permissions, status: fetchPermissionsStatus, refetch, isFetched, isFetching },
+    { data: userRoles },
   ] = useQueries([
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
     {
@@ -35,12 +43,26 @@ const AuthenticatedApp = () => {
       queryFn: fetchCurrentUserPermissions,
       initialData: [],
     },
+    {
+      queryKey: 'user-roles',
+      queryFn: fetchUserRoles,
+    },
   ]);
 
   const shouldUpdateStrapi = useMemo(() => checkLatestStrapiVersion(strapiVersion, tag_name), [
     tag_name,
   ]);
 
+  useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin) {
+        setGuidedTourVisibilityRef.current(true);
+      }
+    }
+  }, [userRoles]);
+
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -45,4 +45,18 @@ const fetchCurrentUserPermissions = async () => {
   }
 };
 
-export { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease };
+const fetchUserRoles = async () => {
+  try {
+    const {
+      data: {
+        data: { roles },
+      },
+    } = await axiosInstance.get('/admin/users/me');
+
+    return roles;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+export { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease, fetchUserRoles };

package/admin/src/components/GuidedTour/Homepage/components/Step.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Typography } from '@strapi/design-system/Typography';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import StepNumber from '../../Stepper/StepNumber';
+import StepLine from '../../Stepper/StepLine';
+import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
+
+const StepHomepage = ({ type, title, number, content, hasLine }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box>
+      <Flex>
+        <Box minWidth={pxToRem(30)} marginRight={5}>
+          <StepNumber type={type} number={number} />
+        </Box>
+        <Typography variant="delta" as="h3">
+          {formatMessage(title)}
+        </Typography>
+      </Flex>
+      <Flex alignItems="flex-start">
+        <Flex
+          justifyContent="center"
+          minWidth={pxToRem(30)}
+          marginBottom={3}
+          marginTop={3}
+          marginRight={5}
+        >
+          {hasLine && (
+            <StepLine type={type} minHeight={type === IS_ACTIVE ? pxToRem(85) : pxToRem(65)} />
+          )}
+        </Flex>
+        <Box marginTop={2}>{type === IS_ACTIVE && content}</Box>
+      </Flex>
+    </Box>
+  );
+};
+
+StepHomepage.defaultProps = {
+  content: undefined,
+  number: undefined,
+  type: IS_NOT_DONE,
+  hasLine: true,
+};
+
+StepHomepage.propTypes = {
+  content: PropTypes.node,
+  number: PropTypes.number,
+  title: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }).isRequired,
+  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
+  hasLine: PropTypes.bool,
+};
+
+export default StepHomepage;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import StepHomepage from './Step';
+import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
+
+const getType = (activeSectionIndex, index) => {
+  if (activeSectionIndex === -1) {
+    return IS_DONE;
+  }
+  if (index < activeSectionIndex) {
+    return IS_DONE;
+  }
+  if (index > activeSectionIndex) {
+    return IS_NOT_DONE;
+  }
+
+  return IS_ACTIVE;
+};
+
+const StepperHomepage = ({ sections, currentSectionKey }) => {
+  const activeSectionIndex = sections.findIndex(section => section.key === currentSectionKey);
+
+  return (
+    <Box>
+      {sections.map((section, index) => (
+        <StepHomepage
+          key={section.key}
+          title={section.title}
+          content={section.content}
+          number={index + 1}
+          type={getType(activeSectionIndex, index)}
+          hasLine={index !== sections.length - 1}
+        />
+      ))}
+    </Box>
+  );
+};
+
+StepperHomepage.defaultProps = {
+  currentSectionKey: undefined,
+};
+
+StepperHomepage.propTypes = {
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      title: PropTypes.shape({
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+      }).isRequired,
+      content: PropTypes.node,
+    })
+  ).isRequired,
+  currentSectionKey: PropTypes.string,
+};
+
+export default StepperHomepage;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useGuidedTour } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { Stack } from '@strapi/design-system/Stack';
+import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { Button } from '@strapi/design-system/Button';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import StepperHomepage from './components/Stepper';
+import layout from '../layout';
+
+const GuidedTourHomepage = () => {
+  const { guidedTourState, setSkipped } = useGuidedTour();
+  const { formatMessage } = useIntl();
+
+  const sections = Object.entries(layout).map(([key, val]) => ({
+    key,
+    title: val.home.title,
+    content: (
+      <LinkButton to={val.home.cta.target} endIcon={<ArrowRight />}>
+        {formatMessage(val.home.cta.title)}
+      </LinkButton>
+    ),
+  }));
+
+  const enrichedSections = sections.map(section => ({
+    isDone: Object.entries(guidedTourState[section.key]).every(([, value]) => value),
+    ...section,
+  }));
+
+  const activeSection = enrichedSections.find(section => !section.isDone)?.key;
+
+  return (
+    <Box
+      hasRadius
+      shadow="tableShadow"
+      paddingTop={7}
+      paddingRight={4}
+      paddingLeft={7}
+      paddingBottom={4}
+      background="neutral0"
+    >
+      <Stack size={6}>
+        <Typography variant="beta" as="h2">
+          {formatMessage({
+            id: 'app.components.GuidedTour.title',
+            defaultMessage: '3 steps to get started',
+          })}
+        </Typography>
+        <StepperHomepage sections={sections} currentSectionKey={activeSection} />
+      </Stack>
+      <Flex justifyContent="flex-end">
+        <Button variant="tertiary" onClick={() => setSkipped(true)}>
+          {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+export default GuidedTourHomepage;

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { useIntl } from 'react-intl';
+
+const LiStyled = styled.li`
+  list-style: disc;
+`;
+
+const Content = ({ id, defaultMessage }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Stack size={4} paddingBottom={6}>
+      {formatMessage(
+        { id, defaultMessage },
+        {
+          documentationLink: children => (
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
+            >
+              {children}
+            </a>
+          ),
+          b: children => <Typography fontWeight="semiBold">{children}</Typography>,
+          p: children => <Typography>{children}</Typography>,
+          light: children => <Typography textColor="neutral600">{children}</Typography>,
+          ul: children => (
+            <Box paddingLeft={6}>
+              <ul>{children}</ul>
+            </Box>
+          ),
+          li: children => <LiStyled>{children}</LiStyled>,
+        }
+      )}
+    </Stack>
+  );
+};
+
+Content.propTypes = {
+  id: PropTypes.string.isRequired,
+  defaultMessage: PropTypes.string.isRequired,
+};
+
+export default Content;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Portal } from '@strapi/design-system/Portal';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Button } from '@strapi/design-system/Button';
+import Cross from '@strapi/icons/Cross';
+
+const ModalWrapper = styled(Flex)`
+  position: fixed;
+  z-index: 4;
+  inset: 0;
+  /* this is theme.colors.neutral800 with opacity */
+  background: ${({ theme }) => `${theme.colors.neutral800}33`};
+`;
+
+const Modal = ({ onClose, onSkip, children, hideSkip }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Portal>
+      <ModalWrapper onClick={onClose} padding={8} justifyContent="center">
+        <FocusTrap onEscape={onClose}>
+          <Stack
+            background="neutral0"
+            width={pxToRem(660)}
+            shadow="popupShadow"
+            hasRadius
+            padding={4}
+            size={8}
+            role="dialog"
+            aria-modal
+            onClick={e => e.stopPropagation()}
+          >
+            <Flex justifyContent="flex-end">
+              <IconButton
+                onClick={onClose}
+                aria-label={formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' })}
+                icon={<Cross />}
+              />
+            </Flex>
+            <Box paddingLeft={7} paddingRight={7} paddingBottom={hideSkip ? 8 : 0}>
+              {children}
+            </Box>
+            {!hideSkip && (
+              <Flex justifyContent="flex-end">
+                <Button variant="tertiary" onClick={onSkip}>
+                  {formatMessage({
+                    id: 'app.components.GuidedTour.skip',
+                    defaultMessage: 'Skip the tour',
+                  })}
+                </Button>
+              </Flex>
+            )}
+          </Stack>
+        </FocusTrap>
+      </ModalWrapper>
+    </Portal>
+  );
+};
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSkip: PropTypes.func.isRequired,
+  hideSkip: PropTypes.bool.isRequired,
+};
+
+export default Modal;

package/admin/src/components/GuidedTour/Modal/components/StepNumberWithPadding.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import StepNumber from '../../Stepper/StepNumber';
+
+const StepNumberWithPadding = ({ number, last, type }) => (
+  <Box paddingTop={3} paddingBottom={last ? 0 : 3}>
+    <StepNumber number={number} type={type} />
+  </Box>
+);
+
+StepNumberWithPadding.defaultProps = {
+  number: undefined,
+  last: false,
+  type: '',
+};
+
+StepNumberWithPadding.propTypes = {
+  number: PropTypes.number,
+  last: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+export default StepNumberWithPadding;

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Typography } from '@strapi/design-system/Typography';
+import { Button } from '@strapi/design-system/Button';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import Content from './Content';
+import StepLine from '../../Stepper/StepLine';
+import StepNumberWithPadding from './StepNumberWithPadding';
+import { IS_DONE, IS_ACTIVE } from '../../constants';
+
+const StepperModal = ({
+  title,
+  content,
+  cta,
+  onCtaClick,
+  sectionIndex,
+  stepIndex,
+  hasSectionAfter,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const hasSectionBefore = sectionIndex > 0;
+  const hasStepsBefore = stepIndex > 0;
+  const nextSectionIndex = sectionIndex + 1;
+
+  return (
+    <>
+      <Flex alignItems="stretch">
+        <Flex marginRight={8} justifyContent="center" minWidth={pxToRem(30)}>
+          {hasSectionBefore && <StepLine type={IS_DONE} minHeight={pxToRem(24)} />}
+        </Flex>
+        <Typography variant="sigma" textColor="primary600">
+          {formatMessage({
+            id: 'app.components.GuidedTour.title',
+            defaultMessage: '3 steps to get started',
+          })}
+        </Typography>
+      </Flex>
+      <Flex>
+        <Flex marginRight={8} minWidth={pxToRem(30)}>
+          <StepNumberWithPadding
+            number={sectionIndex + 1}
+            type={hasStepsBefore ? IS_DONE : IS_ACTIVE}
+          />
+        </Flex>
+        <Typography variant="alpha" fontWeight="bold" textColor="neutral800" as="h3" id="title">
+          {formatMessage(title)}
+        </Typography>
+      </Flex>
+      <Flex alignItems="stretch">
+        <Flex marginRight={8} direction="column" justifyContent="center" minWidth={pxToRem(30)}>
+          {hasSectionAfter && (
+            <>
+              <StepLine type={IS_DONE} />
+              {hasStepsBefore && (
+                <StepNumberWithPadding number={nextSectionIndex + 1} type={IS_ACTIVE} last />
+              )}
+            </>
+          )}
+        </Flex>
+        <Box>
+          <Content {...content} />
+          {cta &&
+            (cta.target ? (
+              <LinkButton endIcon={<ArrowRight />} onClick={onCtaClick} to={cta.target}>
+                {formatMessage(cta.title)}
+              </LinkButton>
+            ) : (
+              <Button endIcon={<ArrowRight />} onClick={onCtaClick}>
+                {formatMessage(cta.title)}
+              </Button>
+            ))}
+        </Box>
+      </Flex>
+      {hasStepsBefore && hasSectionAfter && (
+        <Box paddingTop={3}>
+          <Flex marginRight={8} justifyContent="center" width={pxToRem(30)}>
+            <StepLine type={IS_DONE} minHeight={pxToRem(24)} />
+          </Flex>
+        </Box>
+      )}
+    </>
+  );
+};
+
+StepperModal.defaultProps = {
+  currentStep: null,
+  cta: undefined,
+};
+
+StepperModal.propTypes = {
+  sectionIndex: PropTypes.number.isRequired,
+  stepIndex: PropTypes.number.isRequired,
+  hasSectionAfter: PropTypes.bool.isRequired,
+  content: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }).isRequired,
+  cta: PropTypes.shape({
+    target: PropTypes.string,
+    title: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+    }),
+  }),
+  currentStep: PropTypes.string,
+  onCtaClick: PropTypes.func.isRequired,
+  title: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default StepperModal;

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

@@ -0,0 +1,90 @@
+import React, { useEffect, useState, useReducer } from 'react';
+import at from 'lodash/at';
+import { useGuidedTour } from '@strapi/helper-plugin';
+import layout from '../layout';
+import Modal from './components/Modal';
+import reducer, { initialState } from './reducer';
+import StepperModal from './components/Stepper';
+
+const GuidedTourModal = () => {
+  const {
+    currentStep,
+    guidedTourState,
+    setCurrentStep,
+    setStepState,
+    isGuidedTourVisible,
+    setSkipped,
+  } = useGuidedTour();
+  const [isVisible, setIsVisible] = useState(currentStep);
+  const [
+    { stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter },
+    dispatch,
+  ] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    if (!currentStep) {
+      setIsVisible(false);
+
+      return;
+    }
+
+    const [isStepDone] = at(guidedTourState, currentStep);
+
+    setIsVisible(!isStepDone && isGuidedTourVisible);
+  }, [currentStep, guidedTourState, isGuidedTourVisible]);
+
+  useEffect(() => {
+    if (currentStep) {
+      const [content] = at(layout, currentStep);
+      const sectionKeys = Object.keys(guidedTourState);
+      const [sectionName, stepName] = currentStep.split('.');
+      const newSectionIndex = sectionKeys.indexOf(sectionName);
+      const newStepIndex = Object.keys(guidedTourState[sectionName]).indexOf(stepName);
+      const newHasSectionAfter = newSectionIndex < sectionKeys.length - 1;
+      const newHasStepAfter = newStepIndex < Object.keys(guidedTourState[sectionName]).length - 1;
+
+      dispatch({
+        type: 'UPDATE_MODAL',
+        content,
+        newSectionIndex,
+        newStepIndex,
+        newHasSectionAfter,
+        newHasStepAfter,
+      });
+    }
+  }, [currentStep, guidedTourState]);
+
+  const handleCtaClick = () => {
+    setStepState(currentStep, true);
+
+    setCurrentStep(null);
+  };
+
+  const handleSkip = () => {
+    setSkipped(true);
+    setCurrentStep(null);
+  };
+
+  if (isVisible && stepContent) {
+    return (
+      <Modal
+        hideSkip={!hasStepAfter && !hasSectionAfter}
+        onSkip={handleSkip}
+        onClose={handleCtaClick}
+      >
+        <StepperModal
+          {...stepContent}
+          onCtaClick={handleCtaClick}
+          currentStep={currentStep}
+          sectionIndex={sectionIndex}
+          stepIndex={stepIndex}
+          hasSectionAfter={hasSectionAfter}
+        />
+      </Modal>
+    );
+  }
+
+  return null;
+};
+
+export default GuidedTourModal;

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

@@ -0,0 +1,29 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  stepContent: null,
+  sectionIndex: null,
+  stepIndex: null,
+  hasSectionAfter: false,
+  hasStepAfter: false,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'UPDATE_MODAL': {
+        draftState.stepContent = action.content;
+        draftState.sectionIndex = action.newSectionIndex;
+        draftState.stepIndex = action.newStepIndex;
+        draftState.hasSectionAfter = action.newHasSectionAfter;
+        draftState.hasStepAfter = action.newHasStepAfter;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
+
+const StepLine = ({ type, ...props }) => {
+  return (
+    <Box
+      width={pxToRem(2)}
+      height="100%"
+      background={type === IS_NOT_DONE ? 'neutral300' : 'primary500'}
+      hasRadius
+      {...props}
+    />
+  );
+};
+
+StepLine.defaultProps = {
+  type: IS_NOT_DONE,
+};
+
+StepLine.propTypes = {
+  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
+};
+
+export default StepLine;