@strapi/admin 4.0.8 → 4.1.1

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/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 }) });

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 }
   );

package/admin/src/translations/ar.json

@@ -60,8 +60,6 @@
   "app.components.InputFileDetails.remove": "حذف هذا الملف",
   "app.components.InputFileDetails.size": "الحجم:",
   "app.components.InstallPluginPage.description": "قم بتوسيع التطبيق الخاص بك دون عناء.",
-  "app.components.InstallPluginPage.helmet": "السوق - الإضافات",
-  "app.components.InstallPluginPage.title": "السوق - الإضافات",
   "app.components.LeftMenuFooter.poweredBy": "مندعوم من ",
   "app.components.LeftMenuLinkContainer.configuration": "التهيئة",
   "app.components.LeftMenuLinkContainer.general": "عام",
@@ -84,8 +82,6 @@
   "app.components.PluginCard.more-details": "المزيد من التفاصيل",
   "app.components.listPlugins.button": "إضافة إضافة جديدة",
   "app.components.listPlugins.title.none": "لا يوجد اي إضافات مثبته",
-  "app.components.listPlugins.title.plural": "{number} إضافات مثبته",
-  "app.components.listPlugins.title.singular": "{number} إضافة مثبته",
   "app.components.listPluginsPage.deletePlugin.error": "حدث خطأ أثناء إلغاء تثبيت الإضافة",
   "app.utils.SelectOption.defaultMessage": " ",
   "app.utils.defaultMessage": " ",

package/admin/src/translations/cs.json

@@ -74,8 +74,6 @@
   "app.components.InstallPluginPage.Download.description": "Může to trvat několik sekund, než se stáhne a nainstaluje zásuvný modul.",
   "app.components.InstallPluginPage.Download.title": "Stahování...",
   "app.components.InstallPluginPage.description": "Rozšiřte snadno svou aplikaci.",
-  "app.components.InstallPluginPage.helmet": "Tržiště – Zásuvné moduly",
-  "app.components.InstallPluginPage.title": "Tržiště – Zásuvné moduly",
   "app.components.LeftMenuFooter.documentation": "Dokumentace",
   "app.components.LeftMenuFooter.help": "Nápověda",
   "app.components.LeftMenuFooter.poweredBy": "Běží na ",
@@ -106,8 +104,6 @@
   "app.components.PluginCard.more-details": "Více podrobností",
   "app.components.listPlugins.button": "Přidat nový zásuvný modul",
   "app.components.listPlugins.title.none": "Nejsou instalovány žádné zásuvné moduly",
-  "app.components.listPlugins.title.plural": "{number} zásuvných modulů je instalováno",
-  "app.components.listPlugins.title.singular": "{number} zásuvný modul je nainstalován",
   "app.components.listPluginsPage.deletePlugin.error": "Došlo k chybě při odinstalaci zásuvného modulu",
   "app.containers.App.notification.error.init": "Při provádění požadavku na API došlo k chybě",
   "app.links.configure-view": "Upravit vzhled",
@@ -198,8 +194,6 @@
   "content-manager.containers.Edit.seeDetails": "Detaily",
   "content-manager.containers.Edit.submit": "Uložit",
   "content-manager.containers.EditSettingsView.modal-form.edit-field": "Upravit pole",
-  "content-manager.containers.EditView.components.missing.plural": "Chybějící komponenty: {count}",
-  "content-manager.containers.EditView.components.missing.singular": "Chybějící komponenty: {count}",
   "content-manager.containers.EditView.notification.errors": "Formulář obsahuje chyby",
   "content-manager.containers.Home.introduction": "K úpravě vašich záznamů prosím přistupte skrz odkaz v levém menu. Tento zásuvný modul neobsahuje způsob jak upravit nastavení, stále na něm pracujeme.",
   "content-manager.containers.Home.pluginHeaderDescription": "Spravujte své záznamy mocným a intuitivním rozhraním.",

package/admin/src/translations/de.json

@@ -63,8 +63,6 @@
   "Roles & Permissions": "Rollen & Berechtigungen",
   "Roles.ListPage.notification.delete-all-not-allowed": "Manche Rollen konnten nicht gelöscht werden, da sie mit Benutzern verknüpft sind",
   "Roles.ListPage.notification.delete-not-allowed": "Eine Rolle, die mit einem Benutzer verknüpft ist, kann nicht gelöscht werden",
-  "Roles.RoleRow.user-count.plural": "{number} Benutzer",
-  "Roles.RoleRow.user-count.singular": "{number} Benutzer",
   "Roles.components.List.empty.withSearch": "Es gibt keine Rolle die der Suche ({search}) entspricht...",
   "Settings.PageTitle": "Einstellungen - {name}",
   "Settings.application.description": "Projektdetails ansehen",
@@ -87,8 +85,6 @@
   "Settings.permissions.conditions.no-actions": "Keine Aktionen",
   "Settings.permissions.conditions.none-selected": "Jederzeit",
   "Settings.permissions.conditions.or": "ODER",
-  "Settings.permissions.conditions.selected.plural": "{number} Bedingungen ausgewählt",
-  "Settings.permissions.conditions.selected.singular": "{number} Bedingung ausgewählt",
   "Settings.permissions.conditions.when": "Wenn",
   "Settings.permissions.menu.link.roles.label": "Rollen",
   "Settings.permissions.menu.link.users.label": "Benutzer",
@@ -123,8 +119,6 @@
   "Settings.roles.form.title": "Details",
   "Settings.roles.list.button.add": "Neue Rolle hinzufügen",
   "Settings.roles.list.description": "Liste der Rollen",
-  "Settings.roles.list.title.plural": "{number} Rollen",
-  "Settings.roles.list.title.singular": "{number} Rolle",
   "Settings.roles.title": "Rollen",
   "Settings.roles.title.singular": "Rolle",
   "Settings.sso.description": "Einstellungen des Single Sign-On Features konfigurieren.",
@@ -197,8 +191,6 @@
   "app.components.InstallPluginPage.Download.description": "Es kann einige Sekunden dauern, bis das Plugin heruntergeladen und installiert ist.",
   "app.components.InstallPluginPage.Download.title": "Herunterladen...",
   "app.components.InstallPluginPage.description": "Erweitere deine App problemlos.",
-  "app.components.InstallPluginPage.helmet": "Marktplatz - Plugins",
-  "app.components.InstallPluginPage.title": "Marktplatz - Plugins",
   "app.components.LeftMenuFooter.documentation": "Dokumentation",
   "app.components.LeftMenuFooter.help": "Hilfe",
   "app.components.LeftMenuFooter.poweredBy": "Stolz präsentiert von ",
@@ -255,8 +247,6 @@
   "app.components.Users.SortPicker.sortby.username_desc": "Benutzername (Z nach A)",
   "app.components.listPlugins.button": "Neues Plugin hinzufügen",
   "app.components.listPlugins.title.none": "Es ist kein Plugin installiert",
-  "app.components.listPlugins.title.plural": "{number} Plugins sind installiert",
-  "app.components.listPlugins.title.singular": "{number} Plugin ist installiert",
   "app.components.listPluginsPage.deletePlugin.error": "Beim Entfernen des Plugins ist ein Fehler aufgetreten",
   "app.containers.App.notification.error.init": "Beim Aufruf der API ist ein Fehler aufgetreten.",
   "app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin": "Bitte den Administrator kontaktieren, sollte der Link nicht ankommen.",
@@ -387,8 +377,6 @@
   "content-manager.containers.Edit.seeDetails": "Details",
   "content-manager.containers.Edit.submit": "Speichern",
   "content-manager.containers.EditSettingsView.modal-form.edit-field": "Feld bearbeiten",
-  "content-manager.containers.EditView.components.missing.plural": "Es fehlen {count} Komponenten",
-  "content-manager.containers.EditView.components.missing.singular": "Es fehlt {count} Komponente",
   "content-manager.containers.EditView.notification.errors": "Das Formular enthält Fehler",
   "content-manager.containers.Home.introduction": "Um deine Einträge zu verwalten, klicke auf den entsprechenden Link im Menü links. Dieses Plugin ist noch in aktiver Entwicklung und seine Einstellungen können nicht optimal angepasst werden.",
   "content-manager.containers.Home.pluginHeaderDescription": "Verwalte deine Einträge mithilfe eines mächtigen und wunderschönen Interfaces.",