@strapi/admin 4.0.5 → 4.1.0

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')
@@ -27,6 +28,7 @@ const MarketplacePage = lazy(() =>
   import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
 const NotFoundPage = lazy(() => import('../NotFoundPage'));
+const InternalErrorPage = lazy(() => import('../InternalErrorPage'));
 
 const ProfilePage = lazy(() =>
   import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
@@ -87,9 +89,11 @@ const Admin = () => {
               <InstalledPluginsPage />
             </Route>
             <Route path="/404" component={NotFoundPage} />
+            <Route path="/500" component={InternalErrorPage} />
             <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/InternalErrorPage/index.js

@@ -0,0 +1,53 @@
+/**
+ * InternalErrorPage
+ *
+ * This is the page we show when the user gets a 500 error
+ *
+ */
+import React from 'react';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import EmptyPictures from '@strapi/icons/EmptyPictures';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import { useIntl } from 'react-intl';
+
+const InternalErrorPage = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main labelledBy="title">
+      <HeaderLayout
+        id="title"
+        title={formatMessage({
+          id: 'content-manager.pageNotFound',
+          defaultMessage: 'Page not found',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton variant="secondary" endIcon={<ArrowRight />} to="/">
+              {formatMessage({
+                id: 'app.components.NotFoundPage.back',
+                defaultMessage: 'Back to homepage',
+              })}
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'notification.error',
+            defaultMessage: 'An error occured',
+          })}
+          hasRadius
+          icon={<EmptyPictures width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default InternalErrorPage;

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/NotFoundPage/index.js

@@ -4,7 +4,50 @@
  * This is the page we show when the user visits a url that doesn't have a route
  *
  */
+import React from 'react';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
+import EmptyPictures from '@strapi/icons/EmptyPictures';
+import ArrowRight from '@strapi/icons/ArrowRight';
+import { useIntl } from 'react-intl';
 
-const NotFoundPage = () => 'TODO NOT FOUND';
+const NoContentType = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
 
-export default NotFoundPage;
+  return (
+    <Main labelledBy="title">
+      <HeaderLayout
+        id="title"
+        title={formatMessage({
+          id: 'content-manager.pageNotFound',
+          defaultMessage: 'Page not found',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton variant="secondary" endIcon={<ArrowRight />} to="/">
+              {formatMessage({
+                id: 'app.components.NotFoundPage.back',
+                defaultMessage: 'Back to homepage',
+              })}
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'app.page.not.found',
+            defaultMessage: "Oops! We can't seem to find the page you're looging for...",
+          })}
+          hasRadius
+          icon={<EmptyPictures width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default NoContentType;

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

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

@@ -281,7 +281,10 @@ const ListView = () => {
                   size="L"
                   variant="danger-light"
                 >
-                  Delete
+                  {formatMessage({
+                    id: 'Settings.webhooks.events.delete',
+                    defaultMessage: 'Delete',
+                  })}
                 </Button>
               </>
             }

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.",