@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/admin/src/pages/SettingsPage/constants.js

@@ -1,102 +1,167 @@
-import * as React from 'react';
-
-export const SETTINGS_ROUTES_CE = [
+export const ROUTES_CE = [
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-roles-list" */ './pages/Roles/ProtectedListPage')
-    ),
-    path: '/settings/roles',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-roles-list" */ './pages/Roles/ProtectedListPage'
+      );
+
+      return component;
+    },
+    to: '/settings/roles',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage')
-    ),
-    path: '/settings/roles/duplicate/:id',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage'
+      );
+
+      return component;
+    },
+    to: '/settings/roles/duplicate/:id',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage')
-    ),
-    path: '/settings/roles/new',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/CreatePage'
+      );
+
+      return component;
+    },
+    to: '/settings/roles/new',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/ProtectedEditPage')
-    ),
-    path: '/settings/roles/:id',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-roles-page" */ './pages/Roles/ProtectedEditPage'
+      );
+
+      return component;
+    },
+    to: '/settings/roles/:id',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-users" */ './pages/Users/ProtectedListPage')
-    ),
-    path: '/settings/users',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-users" */ './pages/Users/ProtectedListPage'
+      );
+
+      return component;
+    },
+    to: '/settings/users',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "admin-edit-users" */ './pages/Users/ProtectedEditPage')
-    ),
-    path: '/settings/users/:id',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-users" */ './pages/Users/ProtectedEditPage'
+      );
+
+      return component;
+    },
+    to: '/settings/users/:id',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedCreateView')
-    ),
-    path: '/settings/webhooks/create',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedCreateView'
+      );
+
+      return component;
+    },
+    to: '/settings/webhooks/create',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedEditView')
-    ),
-    path: '/settings/webhooks/:id',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "webhook-edit-page" */ './pages/Webhooks/ProtectedEditView'
+      );
+
+      return component;
+    },
+    to: '/settings/webhooks/:id',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "webhook-list-page" */ './pages/Webhooks/ProtectedListView')
-    ),
-    path: '/settings/webhooks',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "webhook-list-page" */ './pages/Webhooks/ProtectedListView'
+      );
+
+      return component;
+    },
+    to: '/settings/webhooks',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "api-tokens-list-page" */ './pages/ApiTokens/ProtectedListView')
-    ),
-    path: '/settings/api-tokens',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "api-tokens-list-page" */ './pages/ApiTokens/ProtectedListView'
+      );
+
+      return component;
+    },
+    to: '/settings/api-tokens',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(
+    async Component() {
+      const component = await import(
         /* webpackChunkName: "api-tokens-create-page" */ './pages/ApiTokens/ProtectedCreateView'
-      )
-    ),
-    path: '/settings/api-tokens/create',
+      );
+
+      return component;
+    },
+    to: '/settings/api-tokens/create',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(/* webpackChunkName: "api-tokens-edit-page" */ './pages/ApiTokens/ProtectedEditView')
-    ),
-    path: '/settings/api-tokens/:id',
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "api-tokens-edit-page" */ './pages/ApiTokens/ProtectedEditView'
+      );
+
+      return component;
+    },
+    to: '/settings/api-tokens/:id',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(
+    async Component() {
+      const component = await import(
         /* webpackChunkName: "transfer-tokens-create-page" */ './pages/TransferTokens/ProtectedCreateView'
-      )
-    ),
-    path: '/settings/transfer-tokens/create',
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens/create',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(
+    async Component() {
+      const component = await import(
         /* webpackChunkName: "transfer-tokens-list-page" */ './pages/TransferTokens/ProtectedListView'
-      )
-    ),
-    path: '/settings/transfer-tokens',
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens',
+    exact: true,
   },
   {
-    component: React.lazy(() =>
-      import(
+    async Component() {
+      const component = await import(
         /* webpackChunkName: "transfer-tokens-edit-page" */ './pages/TransferTokens/ProtectedEditView'
-      )
-    ),
-    path: '/settings/transfer-tokens/:id',
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens/:id',
+    exact: true,
   },
 ];

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

@@ -8,10 +8,11 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 
 import { useSettingsMenu } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute } from '../../utils/createRoute';
+import createRoute from '../../utils/createRoute';
+import makeUniqueRoutes from '../../utils/makeUniqueRoutes';
 
 import SettingsNav from './components/SettingsNav';
-import { SETTINGS_ROUTES_CE } from './constants';
+import { ROUTES_CE } from './constants';
 import ApplicationInfosPage from './pages/ApplicationInfosPage';
 
 export function SettingsPage() {
@@ -20,9 +21,8 @@ export function SettingsPage() {
   const { formatMessage } = useIntl();
   const { isLoading, menu } = useSettingsMenu();
   const routes = useEnterprise(
-    SETTINGS_ROUTES_CE,
-    async () =>
-      (await import('../../../../ee/admin/pages/SettingsPage/constants')).SETTINGS_ROUTES_EE,
+    ROUTES_CE,
+    async () => (await import('../../../../ee/admin/pages/SettingsPage/constants')).ROUTES_EE,
     {
       combine(ceRoutes, eeRoutes) {
         return [...ceRoutes, ...eeRoutes];
@@ -31,19 +31,18 @@ export function SettingsPage() {
     }
   );
 
-  /**
-   * `Component` is an async function, which is passed as property of the
-   * addSettingsLink() API during the plugin bootstrap step.
-   *
-   * Because of that we can't just render <Route component={Component} />,
-   * but have to await the function.
-   *
-   * This isn't a good React pattern and should be reconsidered.
-   */
+  // Creates the admin routes
+  const adminRoutes = React.useMemo(() => {
+    return makeUniqueRoutes(
+      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
+    );
+  }, [routes]);
 
-  const pluginSettingsRoutes = Object.values(settings).flatMap((section) =>
-    section.links.map((link) => createRoute(link.Component, link.to, link.exact || false))
-  );
+  const pluginsRoutes = Object.values(settings).flatMap((section) => {
+    const { links } = section;
+
+    return links.map((link) => createRoute(link.Component, link.to, link.exact || false));
+  });
 
   // Since the useSettingsMenu hook can make API calls in order to check the links permissions
   // We need to add a loading state to prevent redirecting the user while permissions are being checked
@@ -66,12 +65,8 @@ export function SettingsPage() {
 
       <Switch>
         <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
-
-        {routes.map(({ path, component }) => (
-          <Route key={path} path={path} component={component} exact />
-        ))}
-
-        {pluginSettingsRoutes}
+        {adminRoutes}
+        {pluginsRoutes}
       </Switch>
     </Layout>
   );

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

@@ -19,7 +19,7 @@ import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
-import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../utils';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';

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

@@ -19,7 +19,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../utils';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -34,8 +34,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
-import { getFullName } from '../../../../../utils/getFullName';
+import { formatAPIErrors, getFullName } from '../../../../../utils';
 import { MagicLinkCE } from '../components/MagicLink';
 import SelectRoles from '../components/SelectRoles';
 import { editValidation } from '../utils/validations/users';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { getFullName } from '../../../../../../../utils/getFullName';
+import { getFullName } from '../../../../../../../utils';
 
 const TableRows = ({
   canDelete,

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

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+
+import {
+  Box,
+  Button,
+  Flex,
+  Main,
+  Option,
+  Select,
+  TextButton,
+  TextInput,
+  Typography,
+} from '@strapi/design-system';
+import { auth, pxToRem, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { parse } from 'qs';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+import Logo from '../../components/UnauthenticatedLogo';
+import UnauthenticatedLayout, { LayoutContent } from '../../layouts/UnauthenticatedLayout';
+
+export const options = [
+  {
+    intlLabel: {
+      id: 'Usecase.front-end',
+      defaultMessage: 'Front-end developer',
+    },
+    value: 'front_end_developer',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.back-end',
+      defaultMessage: 'Back-end developer',
+    },
+    value: 'back_end_developer',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.full-stack',
+      defaultMessage: 'Full-stack developer',
+    },
+    value: 'full_stack_developer',
+  },
+  {
+    intlLabel: {
+      id: 'global.content-manager',
+      defaultMessage: 'Content Manager',
+    },
+    value: 'content_manager',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.content-creator',
+      defaultMessage: 'Content Creator',
+    },
+    value: 'content_creator',
+  },
+  {
+    intlLabel: {
+      id: 'Usecase.other',
+      defaultMessage: 'Other',
+    },
+    value: 'other',
+  },
+];
+
+const TypographyCenter = styled(Typography)`
+  text-align: center;
+`;
+
+const UseCasePage = () => {
+  const toggleNotification = useNotification();
+  const { push, location } = useHistory();
+  const { formatMessage } = useIntl();
+  const [role, setRole] = useState();
+  const [otherRole, setOtherRole] = useState('');
+  const { post } = useFetchClient();
+
+  const { firstname, email } = auth.getUserInfo();
+  const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true });
+  const isOther = role === 'other';
+
+  const handleSubmit = async (event, skipPersona) => {
+    event.preventDefault();
+    try {
+      await post('https://analytics.strapi.io/register', {
+        email,
+        username: firstname,
+        firstAdmin: Boolean(!hasAdmin),
+        persona: {
+          role: skipPersona ? undefined : role,
+          otherRole: skipPersona ? undefined : otherRole,
+        },
+      });
+
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: 'Usecase.notification.success.project-created',
+          defaultMessage: 'Project has been successfully created',
+        },
+      });
+      push('/');
+    } catch (err) {
+      // Silent
+    }
+  };
+
+  return (
+    <UnauthenticatedLayout>
+      <Main labelledBy="usecase-title">
+        <LayoutContent>
+          <form onSubmit={(e) => handleSubmit(e, false)}>
+            <Flex direction="column" paddingBottom={7}>
+              <Logo />
+              <Box paddingTop={6} paddingBottom={1} width={pxToRem(250)}>
+                <TypographyCenter variant="alpha" as="h1" id="usecase-title">
+                  {formatMessage({
+                    id: 'Usecase.title',
+                    defaultMessage: 'Tell us a bit more about yourself',
+                  })}
+                </TypographyCenter>
+              </Box>
+            </Flex>
+            <Flex direction="column" alignItems="stretch" gap={6}>
+              <Select
+                id="usecase"
+                data-testid="usecase"
+                label={formatMessage({
+                  id: 'Usecase.input.work-type',
+                  defaultMessage: 'What type of work do you do?',
+                })}
+                // onClear={() => setRole(null)}
+                // clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
+                onChange={setRole}
+                value={role}
+              >
+                {options.map(({ intlLabel, value }) => (
+                  <Option key={value} value={value}>
+                    {formatMessage(intlLabel)}
+                  </Option>
+                ))}
+              </Select>
+              {isOther && (
+                <TextInput
+                  name="other"
+                  label={formatMessage({ id: 'Usecase.other', defaultMessage: 'Other' })}
+                  value={otherRole}
+                  onChange={(e) => setOtherRole(e.target.value)}
+                  data-testid="other"
+                />
+              )}
+              <Button type="submit" size="L" fullWidth disabled={!role}>
+                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
+              </Button>
+            </Flex>
+          </form>
+        </LayoutContent>
+        <Flex justifyContent="center">
+          <Box paddingTop={4}>
+            <TextButton onClick={() => handleSubmit(true)}>
+              {formatMessage({
+                id: 'Usecase.button.skip',
+                defaultMessage: 'Skip this question',
+              })}
+            </TextButton>
+          </Box>
+        </Flex>
+      </Main>
+    </UnauthenticatedLayout>
+  );
+};
+
+export default UseCasePage;

package/admin/src/plugins.js

@@ -1,11 +1,10 @@
 
-// To override this file create a plugins-dev.js one and copy the content of the plugin.js one.
-// When starting the app the script will copy the plugins-dev.js into this one instead.
-import contentTypeBuilder from '../../../content-type-builder/admin/src';
-import email from '../../../email/admin/src';
-import upload from '../../../upload/admin/src';
-import i18N from '../../../../plugins/i18n/admin/src';
-import usersPermissions from '../../../../plugins/users-permissions/admin/src';
+import contentTypeBuilder from '@strapi/plugin-content-type-builder/strapi-admin';
+import email from '@strapi/plugin-email/strapi-admin';
+import upload from '@strapi/plugin-upload/strapi-admin';
+import i18N from '@strapi/plugin-i18n/strapi-admin';
+import usersPermissions from '@strapi/plugin-users-permissions/strapi-admin';
+
 
 const plugins = {
   'content-type-builder': contentTypeBuilder,
@@ -14,5 +13,5 @@ const plugins = {
   'i18n': i18N,
   'users-permissions': usersPermissions,
 };
-  
+
 export default plugins;

package/admin/src/translations/en.json

@@ -479,6 +479,13 @@
   "app.components.MarketplaceBanner.link": "Check it out now",
   "app.components.NotFoundPage.back": "Back to homepage",
   "app.components.NotFoundPage.description": "Not Found",
+  "app.components.NpsSurvey.banner-title": "How likely are you to recommend Strapi to a friend or colleague?",
+  "app.components.NpsSurvey.feedback-response": "Thank you very much for your feedback!",
+  "app.components.NpsSurvey.feedback-question": "Do you have any suggestion for improvements?",
+  "app.components.NpsSurvey.submit-feedback": "Submit Feedback",
+  "app.components.NpsSurvey.dismiss-survey-label": "Dismiss survey",
+  "app.components.NpsSurvey.no-recommendation": "Not at all likely",
+  "app.components.NpsSurvey.happy-to-recommend": "Extremely likely",
   "app.components.Official": "Official",
   "app.components.Onboarding.help.button": "Help button",
   "app.components.Onboarding.label.completed": "% completed",
@@ -612,7 +619,7 @@
   "components.PageFooter.select": "Entries per page",
   "components.ProductionBlocker.description": "For safety purposes we have to disable this plugin in other environments.",
   "components.ProductionBlocker.header": "This plugin is only available in development.",
-  "components.Search.placeholder": "Search...",
+  "components.ViewSettings.tooltip": "View settings",
   "components.TableHeader.sort": "Sort on {label}",
   "components.Wysiwyg.ToggleMode.markdown-mode": "Markdown mode",
   "components.Wysiwyg.ToggleMode.preview-mode": "Preview mode",
@@ -671,6 +678,7 @@
   "content-manager.components.FiltersPickWrapper.PluginHeader.description": "Set the conditions to apply to filter the entries",
   "content-manager.components.FiltersPickWrapper.PluginHeader.title.filter": "Filters",
   "content-manager.components.FiltersPickWrapper.hide": "Hide",
+  "content-manager.components.Filters.usersSelect.label": "Search and select a user to filter by",
   "content-manager.components.LeftMenu.Search.label": "Search for a content type",
   "content-manager.components.LeftMenu.collection-types": "Collection Types",
   "content-manager.components.LeftMenu.single-types": "Single Types",
@@ -914,6 +922,7 @@
   "global.settings": "Settings",
   "global.type": "Type",
   "global.users": "Users",
+  "global.fullname": "{firstname} {lastname}",
   "light": "Light",
   "notification.contentType.relations.conflict": "Content type has conflicting relations",
   "notification.default.title": "Information:",

package/admin/src/utils/checkFormValidity.js

@@ -0,0 +1,15 @@
+import { getYupInnerErrors } from '@strapi/helper-plugin';
+
+const checkFormValidity = async (data, schema) => {
+  let errors = null;
+
+  try {
+    await schema.validate(data, { abortEarly: false });
+  } catch (err) {
+    errors = getYupInnerErrors(err);
+  }
+
+  return errors;
+};
+
+export default checkFormValidity;

package/admin/src/utils/createRoute.js

@@ -29,11 +29,7 @@ const LazyCompo = ({ loadComponent }) => {
   return <LoadingIndicatorPage />;
 };
 
-LazyCompo.propTypes = {
-  loadComponent: PropTypes.func.isRequired,
-};
-
-export const createRoute = (Component, to, exact) => {
+const createRoute = (Component, to, exact) => {
   return (
     <Route
       render={() => <LazyCompo loadComponent={Component} />}
@@ -43,3 +39,9 @@ export const createRoute = (Component, to, exact) => {
     />
   );
 };
+
+LazyCompo.propTypes = {
+  loadComponent: PropTypes.func.isRequired,
+};
+
+export default createRoute;

package/admin/src/utils/formatAPIErrors.js

@@ -1,4 +1,4 @@
-export const formatAPIErrors = ({ data }) => {
+const formatAPIError = ({ data }) => {
   try {
     return Object.keys(data).reduce((acc, current) => {
       const errorMessage = data[current][0];
@@ -13,3 +13,5 @@ export const formatAPIErrors = ({ data }) => {
     return {};
   }
 };
+
+export default formatAPIError;

package/admin/src/utils/getAttributesToDisplay.js

@@ -0,0 +1,19 @@
+const getAttributesToDisplay = (contentType) => {
+  const timestamps = contentType?.options?.timestamps;
+
+  // Sometimes timestamps is false
+  let timestampsArray = Array.isArray(timestamps) ? timestamps : [];
+  const idsAttributes = ['id', '_id']; // For both SQL and mongo
+  const unwritableAttributes = [...idsAttributes, ...timestampsArray, 'publishedAt'];
+  const schemaAttributes = contentType?.attributes ?? {};
+
+  return Object.keys(schemaAttributes).reduce((acc, current) => {
+    if (!unwritableAttributes.includes(current)) {
+      acc.push({ ...schemaAttributes[current], attributeName: current });
+    }
+
+    return acc;
+  }, []);
+};
+
+export default getAttributesToDisplay;