@strapi/admin 4.0.7 → 4.1.1-alpha.0

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/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -61,7 +61,7 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
         </ModalHeader>
         <ModalBody>
           <Grid gap={4}>
-            <ModalForm onChange={onChange} />
+            <ModalForm onMetaChange={onMetaChange} onSizeChange={onSizeChange} />
           </Grid>
         </ModalBody>
         <ModalFooter
@@ -84,7 +84,8 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
 FormModal.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
   type: PropTypes.string.isRequired,
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -1,6 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { GridItem } from '@strapi/design-system/Grid';
+import { Select, Option } from '@strapi/design-system/Select';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';
@@ -9,7 +11,11 @@ import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
-const ModalForm = ({ onChange }) => {
+const FIELD_SIZES = [[4, '33%'], [6, '50%'], [8, '66%'], [12, '100%']];
+
+const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
+
+const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
@@ -44,7 +50,7 @@ const ModalForm = ({ onChange }) => {
     [selectedField, componentsAndModelsPossibleMainFields, modifiedData]
   );
 
-  return formToDisplay.map(meta => {
+  const metaFields = formToDisplay.map(meta => {
     const formType = get(attributes, [selectedField, 'type']);
 
     if (
@@ -77,13 +83,49 @@ const ModalForm = ({ onChange }) => {
             id: get(getInputProps(meta), 'label.id', 'app.utils.defaultMessage'),
           })}
           name={meta}
-          onChange={onChange}
-          value={get(fieldForm, meta, '')}
+          onChange={onMetaChange}
+          value={get(fieldForm, ['metadata', meta], '')}
           options={getSelectedItemSelectOptions(formType)}
         />
       </GridItem>
     );
   });
+
+  const canResize = !NON_RESIZABLE_FIELD_TYPES.includes(attributes[selectedField].type);
+
+  const sizeField = (
+    <GridItem col={6} key="size">
+      <Select
+        value={fieldForm?.size}
+        name="size"
+        onChange={value => {
+          onSizeChange({ name: selectedField, value });
+        }}
+        label={formatMessage({
+          id: getTrad('containers.SettingPage.editSettings.size.label'),
+          defaultMessage: 'Size',
+        })}
+      >
+        {FIELD_SIZES.map(([value, label]) => (
+          <Option key={value} value={value}>
+            {label}
+          </Option>
+        ))}
+      </Select>
+    </GridItem>
+  );
+
+  return (
+    <>
+      {metaFields}
+      {canResize && sizeField}
+    </>
+  );
+};
+
+ModalForm.propTypes = {
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
 };
 
 export default ModalForm;

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

@@ -110,6 +110,14 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
     });
   };
 
+  const handleSizeChange = ({ name, value }) => {
+    dispatch({
+      type: 'ON_CHANGE_SIZE',
+      name,
+      value,
+    });
+  };
+
   const handleMetaSubmit = e => {
     e.preventDefault();
     dispatch({
@@ -365,7 +373,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
             type={get(attributes, [metaToEdit, 'type'], '')}
-            onChange={handleMetaChange}
+            onMetaChange={handleMetaChange}
+            onSizeChange={handleSizeChange}
           />
         )}
       </Main>

package/admin/src/content-manager/pages/EditSettingsView/reducer.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { arrayMoveItem } from '../../utils';
-import { formatLayout, getInputSize } from './utils/layout';
+import { formatLayout, getDefaultInputSize, getFieldSize, setFieldSize } from './utils/layout';
 
 const initialState = {
   fieldForm: {},
@@ -45,7 +45,7 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const size = getInputSize(
+        const size = getDefaultInputSize(
           get(newState, ['modifiedData', 'attributes', action.name, 'type'], '')
         );
         const listSize = get(newState, layoutPathEdit, []).length;
@@ -76,7 +76,11 @@ const reducer = (state = initialState, action) =>
         break;
       }
       case 'ON_CHANGE_META': {
-        set(draftState, ['metaForm', ...action.keys], action.value);
+        set(draftState, ['metaForm', 'metadata', ...action.keys], action.value);
+        break;
+      }
+      case 'ON_CHANGE_SIZE': {
+        set(draftState, ['metaForm', 'size'], action.value);
         break;
       }
       case 'ON_RESET': {
@@ -168,11 +172,28 @@ const reducer = (state = initialState, action) =>
       }
       case 'SET_FIELD_TO_EDIT': {
         draftState.metaToEdit = action.name;
-        draftState.metaForm = get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {});
+        draftState.metaForm = {
+          metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
+          size:
+            getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? getDefaultInputSize(),
+        };
+
         break;
       }
       case 'SUBMIT_META_FORM': {
-        set(draftState, ['modifiedData', 'metadatas', state.metaToEdit, 'edit'], state.metaForm);
+        set(
+          draftState,
+          ['modifiedData', 'metadatas', state.metaToEdit, 'edit'],
+          state.metaForm.metadata
+        );
+
+        const layoutsCopy = cloneDeep(get(state, layoutPathEdit, []));
+        const nextLayoutValue = setFieldSize(state.metaToEdit, state.metaForm.size, layoutsCopy);
+
+        if (nextLayoutValue.length > 0) {
+          set(draftState, layoutPathEdit, formatLayout(nextLayoutValue));
+        }
+
         break;
       }
       case 'SUBMIT_SUCCEEDED': {

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -28,13 +28,7 @@ const formatLayout = arr => {
 
         return acc2;
       }, []);
-      const rowId =
-        acc.length === 0
-          ? 0
-          : Math.max.apply(
-              Math,
-              acc.map(o => o.rowId)
-            ) + 1;
+      const rowId = acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1;
 
       const currentRowSize = getRowSize(currentRow);
 
@@ -75,7 +69,7 @@ const unformatLayout = arr => {
   }, []);
 };
 
-const getInputSize = type => {
+const getDefaultInputSize = type => {
   switch (type) {
     case 'boolean':
     case 'date':
@@ -95,4 +89,41 @@ const getInputSize = type => {
   }
 };
 
-export { createLayout, formatLayout, getInputSize, getRowSize, unformatLayout };
+const getFieldSize = (name, layouts = []) => {
+  return layouts.reduce((acc, { rowContent }) => {
+    const size = rowContent.find(row => row.name === name)?.size ?? null;
+
+    if (size) {
+      acc = size;
+    }
+
+    return acc;
+  }, null);
+};
+
+const setFieldSize = (name, size, layouts = []) => {
+  return layouts.map(row => {
+    row.rowContent = row.rowContent.map(column => {
+      if (column.name === name) {
+        return {
+          ...column,
+          size,
+        };
+      }
+
+      return column;
+    });
+
+    return row;
+  });
+};
+
+export {
+  createLayout,
+  formatLayout,
+  getDefaultInputSize,
+  getFieldSize,
+  setFieldSize,
+  getRowSize,
+  unformatLayout,
+};

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

@@ -309,6 +309,7 @@ const EditView = ({
                       )}
                       <Box as="aside" aria-labelledby="links">
                         <Stack size={2}>
+                          <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>
                               <LinkButton
@@ -343,7 +344,7 @@ const EditView = ({
                               })}
                             </LinkButton>
                           </CheckPermissions>
-                          <InjectionZone area="contentManager.editView.right-links" slug={slug} />
+
                           {allowedActions.canDelete && (
                             <DeleteLink
                               isCreatingEntry={isCreatingEntry}

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -195,7 +195,7 @@ const DraggableCard = ({
         >
           <Stack horizontal size={3}>
             <DragButton
-              as='span'
+              as="span"
               aria-label={formatMessage(
                 {
                   id: getTrad('components.DraggableCard.move.field'),

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -36,6 +36,24 @@ const SortDisplayedFields = ({
 }) => {
   const { formatMessage } = useIntl();
   const [isDraggingSibling, setIsDraggingSibling] = useState(false);
+  const [lastAction, setLastAction] = useState(null);
+  const scrollableContainerRef = useRef();
+
+  function handleAddField(...args) {
+    setLastAction('add');
+    onAddField(...args);
+  }
+
+  function handleRemoveField(...args) {
+    setLastAction('remove');
+    onRemoveField(...args);
+  }
+
+  useEffect(() => {
+    if (lastAction === 'add' && scrollableContainerRef?.current) {
+      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
+    }
+  }, [displayedFields, lastAction]);
 
   return (
     <>
@@ -56,7 +74,7 @@ const SortDisplayedFields = ({
         borderWidth="1px"
         hasRadius
       >
-        <ScrollableContainer size="1" paddingBottom={4}>
+        <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
           <Stack horizontal size={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
@@ -65,7 +83,7 @@ const SortDisplayedFields = ({
                 isDraggingSibling={isDraggingSibling}
                 onMoveField={onMoveField}
                 onClickEditField={onClickEditField}
-                onRemoveField={e => onRemoveField(e, index)}
+                onRemoveField={e => handleRemoveField(e, index)}
                 name={field}
                 labelField={metadatas[field].list.label || field}
                 setIsDraggingSibling={setIsDraggingSibling}
@@ -85,7 +103,7 @@ const SortDisplayedFields = ({
             data-testid="add-field"
           >
             {listRemainingFields.map(field => (
-              <MenuItem key={field} onClick={() => onAddField(field)}>
+              <MenuItem key={field} onClick={() => handleAddField(field)}>
                 {field}
               </MenuItem>
             ))}

package/admin/src/content-manager/pages/ListSettingsView/reducer.js

@@ -17,7 +17,7 @@ const reducer = (state = initialState, action) =>
     switch (action.type) {
       case 'ADD_FIELD': {
         const layoutFieldList = get(state, layoutFieldListPath, []);
-        set(draftState, layoutFieldListPath, [action.item, ...layoutFieldList]);
+        set(draftState, layoutFieldListPath, [...layoutFieldList, action.item]);
         break;
       }
       case 'MOVE_FIELD': {

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',

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

@@ -4,9 +4,10 @@ import camelCase from 'lodash/camelCase';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
-import { auth, useQuery } from '@strapi/helper-plugin';
+import { auth, useQuery, useGuidedTour } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import forms from 'ee_else_ce/pages/AuthPage/utils/forms';
+import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 import init from './init';
@@ -15,6 +16,7 @@ import { initialState, reducer } from './reducer';
 const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   const { push } = useHistory();
   const { changeLocale } = useLocalesProvider();
+  const { setSkipped } = useGuidedTour();
   const {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
@@ -176,6 +178,18 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       // Redirect to the homePage
       setSubmitting(false);
       setHasAdmin(true);
+
+      const { roles } = user;
+
+      if (roles) {
+        const isUserSuperAdmin = roles.find(({ code }) => code === 'strapi-super-admin');
+
+        if (isUserSuperAdmin) {
+          persistStateToLocaleStorage.setSkipped(false);
+          setSkipped(false);
+        }
+      }
+
       push('/');
     } catch (err) {
       if (err.response) {

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

@@ -8,13 +8,15 @@ import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
-import { LoadingIndicatorPage } from '@strapi/helper-plugin';
+import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
 import { Layout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import Logo from '../../assets/images/homepage-logo.png';
 import { useModels } from '../../hooks';
+import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
+import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
 import SocialLinks from './SocialLinks';
 import HomeHeader from './HomeHeader';
 import ContentBlocks from './ContentBlocks';
@@ -31,6 +33,10 @@ const LogoContainer = styled(Box)`
 const HomePage = () => {
   // // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
+  const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
+
+  const showGuidedTour =
+    !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;
 
   const { push } = useHistory();
   const handleClick = e => {
@@ -71,7 +77,7 @@ const HomePage = () => {
           </Grid>
           <Grid gap={6}>
             <GridItem col={8} s={12}>
-              <ContentBlocks />
+              {showGuidedTour ? <GuidedTourHomepage /> : <ContentBlocks />}
             </GridItem>
             <GridItem col={4} s={12}>
               <SocialLinks />

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

@@ -10,6 +10,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
+import ExternalLink from '@strapi/icons/ExternalLink';
 import adminPermissions from '../../permissions';
 import MarketplacePicture from './assets/marketplace-coming-soon.png';
 
@@ -79,31 +80,30 @@ const MarketPlacePage = () => {
               </Typography>
               <Typography variant="alpha" textColor="primary700">
                 {formatMessage({
-                  id: 'admin.pages.MarketPlacePage.coming-soon.2',
-                  defaultMessage: 'A new way to make Strapi awesome.',
+                  id: 'admin.pages.MarketPlacePage.published',
+                  defaultMessage: 'Finally here.',
                 })}
               </Typography>
-              <Flex maxWidth={pxToRem(580)} paddingTop={3}>
+              <Flex maxWidth={pxToRem(620)} paddingTop={3}>
                 <CenterTypography variant="epsilon" textColor="neutral600">
                   {formatMessage({
-                    id: 'admin.pages.MarketPlacePage.content.subtitle',
+                    id: 'admin.pages.MarketPlacePage.content.subtitle.published',
                     defaultMessage:
-                      'The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.',
+                      'The web marketplace helps you get the most of Strapi. In addition, we are working hard to offer the best experience to discover and install plugins, directly from the app.',
                   })}
                 </CenterTypography>
               </Flex>
               <Stack paddingTop={6} horizontal size={2}>
-                {/* Temporarily hidden until we have the right URL for the link */}
-                {/* <LinkButton href="https://strapi.io/" size="L" variant="secondary">
+                <LinkButton href="https://market.strapi.io" size="L" variant="primary" endIcon={<ExternalLink />}>
                   {formatMessage({
-                    id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-                    defaultMessage: 'Submit your plugin',
+                    id: 'admin.pages.MarketPlacePage.submit.market.link',
+                    defaultMessage: 'Visit the web marketplace',
                   })}
-                </LinkButton> */}
-                <LinkButton href="https://strapi.io/blog/strapi-market-is-coming-soon" size="L">
+                </LinkButton>
+                <LinkButton href="https://market.strapi.io/submit-plugin" size="L" variant="secondary">
                   {formatMessage({
-                    id: 'admin.pages.MarketPlacePage.blog.link',
-                    defaultMessage: 'Read our blog post',
+                    id: 'admin.pages.MarketPlacePage.submit.plugin.link',
+                    defaultMessage: 'Submit your plugin',
                   })}
                 </LinkButton>
               </Stack>

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ContentBox/index.js

@@ -20,7 +20,7 @@ const HeaderContentBox = ({ apiToken }) => {
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
-                trackUsageRef('didCopyTokenKey');
+                trackUsageRef.current('didCopyTokenKey');
                 toggleNotification({
                   type: 'success',
                   message: { id: 'Settings.apiTokens.notification.copied' },

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -7,6 +7,7 @@ import {
   useOverlayBlocker,
   useNotification,
   useTracking,
+  useGuidedTour,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -40,6 +41,7 @@ const ApiTokenCreateView = () => {
   const history = useHistory();
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
+  const { setCurrentStep } = useGuidedTour();
 
   const {
     params: { id },
@@ -103,6 +105,7 @@ const ApiTokenCreateView = () => {
 
       if (isCreating) {
         history.replace(`/settings/api-tokens/${response.id}`, { apiToken: response });
+        setCurrentStep('apiTokens.success');
       }
     } catch (err) {
       const errors = formatAPIErrors(err.response.data);

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -9,6 +9,7 @@ import {
   NoContent,
   DynamicTable,
   useTracking,
+  useGuidedTour,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -33,6 +34,14 @@ const ApiTokenListView = () => {
   } = useRBAC(adminPermissions.settings['api-tokens']);
   const { push } = useHistory();
   const { trackUsage } = useTracking();
+  const { startSection } = useGuidedTour();
+  const startSectionRef = useRef(startSection);
+
+  useEffect(() => {
+    if (startSectionRef.current) {
+      startSectionRef.current('apiTokens');
+    }
+  }, []);
 
   useEffect(() => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
@@ -111,7 +120,7 @@ const ApiTokenListView = () => {
             >
               {formatMessage({
                 id: 'Settings.apiTokens.create',
-                defaultMessage: 'Add Entry',
+                defaultMessage: 'Create new API Token',
               })}
             </LinkButton>
           ) : (

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js

@@ -13,8 +13,8 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
 
   const usersCountText = formatMessage(
     {
-      id: `Roles.RoleRow.user-count.${usersCount > 1 ? 'plural' : 'singular'}`,
-      defaultMessage: '{number} user',
+      id: `Roles.RoleRow.user-count`,
+      defaultMessage: '{number, plural, =0 {#  user} one {#  user} other {# users}}',
     },
     { number: usersCount }
   );