@strapi/admin 4.2.3 → 4.3.0

package/admin/src/app.js

@@ -1,6 +1,9 @@
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
 export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
+  config,
+  bootstrap,
 };

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

@@ -115,7 +115,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         </NavLink>
 
         {pluginsSectionLinks.length > 0 ? (
-          <NavSection label="Plugins">
+          <NavSection
+            label={formatMessage({
+              id: 'app.components.LeftMenu.plugins',
+              defaultMessage: 'Plugins',
+            })}
+          >
             {pluginsSectionLinks.map(link => {
               const Icon = link.icon;
 
@@ -129,7 +134,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         ) : null}
 
         {generalSectionLinks.length > 0 ? (
-          <NavSection label="General">
+          <NavSection
+            label={formatMessage({
+              id: 'app.components.LeftMenu.general',
+              defaultMessage: 'General',
+            })}
+          >
             {generalSectionLinks.map(link => {
               const LinkIcon = link.icon;
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -15,12 +15,12 @@ import {
   useOverlayBlocker,
   useTracking,
   getYupInnerErrors,
+  getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
 import { getTrad, removeKeyInObject } from '../../utils';
 import reducer, { initialState } from './reducer';
 import { cleanData, createYupSchema } from './utils';
-import { getAPIInnerError } from './utils/getAPIInnerError';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -238,7 +238,8 @@ const EditViewDataManagerProvider = ({
         ['text', 'textarea', 'string', 'email', 'uid', 'select', 'select-one', 'number'].includes(
           type
         ) &&
-        !value
+        !value &&
+        value !== 0
       ) {
         inputValue = null;
       }
@@ -310,7 +311,7 @@ const EditViewDataManagerProvider = ({
       } catch (err) {
         errors = {
           ...errors,
-          ...getAPIInnerError(err),
+          ...getAPIInnerErrors(err, { getTrad }),
         };
       }
 
@@ -346,7 +347,7 @@ const EditViewDataManagerProvider = ({
     } catch (err) {
       errors = {
         ...errors,
-        ...getAPIInnerError(err),
+        ...getAPIInnerErrors(err, { getTrad }),
       };
     }
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -20,14 +20,6 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
         case 'json':
           cleanedData = JSON.parse(value);
           break;
-        // TODO
-        // case 'date':
-        //   cleanedData =
-        //     value && value._isAMomentObject === true ? value.format('YYYY-MM-DD') : value;
-        //   break;
-        // case 'datetime':
-        //   cleanedData = value && value._isAMomentObject === true ? value.toISOString() : value;
-        //   break;
         case 'time': {
           cleanedData = value;
 

package/admin/src/content-manager/components/SelectMany/index.js

@@ -2,7 +2,8 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
-import Select, { createFilter } from 'react-select';
+import { createFilter } from 'react-select';
+import { ReactSelect as Select } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
@@ -24,7 +25,6 @@ function SelectMany({
   options,
   placeholder,
   searchToPersist,
-  styles,
   targetModel,
   value,
   description,
@@ -72,7 +72,6 @@ function SelectMany({
         placeholder={formatMessage(
           placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
-        styles={styles}
         value={[]}
       />
       <Box paddingTop={3} style={{ overflow: 'auto' }}>
@@ -138,7 +137,6 @@ SelectMany.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
   }),
   searchToPersist: PropTypes.string,
-  styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,
   value: PropTypes.array,
   description: PropTypes.string,

package/admin/src/content-manager/components/SelectWrapper/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import { useTheme } from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
 import findIndex from 'lodash/findIndex';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
@@ -16,18 +16,13 @@ import {
 } from '@strapi/helper-plugin';
 import { stringify } from 'qs';
 import axios from 'axios';
-import { Stack } from '@strapi/design-system/Stack';
 import { axiosInstance } from '../../../core/utils';
 import { getTrad } from '../../utils';
 import Label from './Label';
 import SelectOne from '../SelectOne';
 import SelectMany from '../SelectMany';
-import ClearIndicator from './ClearIndicator';
-import DropdownIndicator from './DropdownIndicator';
-import IndicatorSeparator from './IndicatorSeparator';
 import Option from './Option';
 import { connect, select } from './utils';
-import getSelectStyles from './utils/getSelectStyles';
 
 const initialPaginationState = {
   contains: '',
@@ -77,7 +72,6 @@ function SelectWrapper({
     onRemoveRelation,
   } = useCMEditViewDataManager();
   const { pathname } = useLocation();
-  const theme = useTheme();
 
   const value = get(modifiedData, name, null);
   const [state, setState] = useState(initialPaginationState);
@@ -278,8 +272,6 @@ function SelectWrapper({
     return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
   }
 
-  const styles = getSelectStyles(theme);
-
   return (
     <Stack spacing={1}>
       <Label
@@ -293,9 +285,6 @@ function SelectWrapper({
       <Component
         addRelation={handleAddRelation}
         components={{
-          ClearIndicator,
-          DropdownIndicator,
-          IndicatorSeparator,
           Option,
         }}
         displayNavigationLink={shouldDisplayRelationLink}
@@ -315,7 +304,6 @@ function SelectWrapper({
         onRemove={onRemoveRelation}
         placeholder={placeholder}
         searchToPersist={searchToPersist}
-        styles={styles}
         targetModel={targetModel}
         value={value}
         description={description}

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

@@ -59,8 +59,8 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     const formType = get(attributes, [selectedField, 'type']);
 
     if (
-      formType === 'dynamiczone' ||
-      (formType === 'component' && !['label', 'description'].includes(meta))
+      ['component', 'dynamiczone'].includes(formType) &&
+      !['label', 'description'].includes(meta)
     ) {
       return null;
     }

package/admin/src/content-manager/pages/ListView/FieldPicker/index.js

@@ -8,6 +8,7 @@ import { useTracking } from '@strapi/helper-plugin';
 import { onChangeListHeaders } from '../actions';
 import { selectDisplayedHeaders } from '../selectors';
 import getAllAllowedHeaders from './utils/getAllAllowedHeader';
+import getTrad from '../../../utils/getTrad';
 
 const FieldPicker = ({ layout }) => {
   const dispatch = useDispatch();
@@ -50,7 +51,14 @@ const FieldPicker = ({ layout }) => {
         aria-label="change displayed fields"
         value={values}
         onChange={handleChange}
-        customizeContent={values => `${values.length} currently selected`}
+        customizeContent={values =>
+          formatMessage(
+            {
+              id: getTrad('select.currently.selected'),
+              defaultMessage: '{count} currently selected',
+            },
+            { count: values.length }
+          )}
         multi
         size="S"
       >

package/admin/src/content-manager/utils/removeKeyInObject.js

@@ -21,10 +21,6 @@ const removeKeyInObject = (obj, keyToRemove) => {
     }
 
     if (typeof value === 'object') {
-      if (value._isAMomentObject === true) {
-        return { ...acc, [current]: value };
-      }
-
       if (Array.isArray(acc)) {
         acc[current] = removeKeyInObject(value, keyToRemove);
 

package/admin/src/hooks/useFetchMarketplaceProviders/index.js

@@ -2,7 +2,7 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchMarketplacePlugins } from './utils/api';
 
-const useFetchMarketplaceProviders = (notifyLoad) => {
+const useFetchMarketplaceProviders = notifyLoad => {
   const toggleNotification = useNotification();
 
   return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {

package/admin/src/index.js

@@ -48,7 +48,7 @@ const run = async () => {
 
   // We need to make sure to fetch the project type before importing the StrapiApp
   // otherwise the strapi-babel-plugin does not work correctly
-  const StrapiApp = await import('./StrapiApp');
+  const StrapiApp = await import(/* webpackChunkName: "admin-app" */ './StrapiApp');
 
   const app = StrapiApp.default({
     appPlugins: plugins,

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

@@ -6,16 +6,17 @@
 
 import React, { Suspense, useEffect, useMemo, lazy } from 'react';
 import { Switch, Route } from 'react-router-dom';
-// Components from @strapi/helper-plugin
 import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+import { useDispatch, useSelector } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import GuidedTourModal from '../../components/GuidedTour/Modal';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
 import { useMenu } from '../../hooks';
-import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
-import GuidedTourModal from '../../components/GuidedTour/Modal';
+import { SET_APP_RUNTIME_STATUS } from '../App/constants';
+import Onboarding from './Onboarding';
 
 const CM = lazy(() =>
   import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
@@ -27,8 +28,12 @@ const InstalledPluginsPage = lazy(() =>
 const MarketplacePage = lazy(() =>
   import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
 );
-const NotFoundPage = lazy(() => import('../NotFoundPage'));
-const InternalErrorPage = lazy(() => import('../InternalErrorPage'));
+const NotFoundPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage')
+);
+const InternalErrorPage = lazy(() =>
+  import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage')
+);
 
 const ProfilePage = lazy(() =>
   import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
@@ -40,11 +45,20 @@ const SettingsPage = lazy(() =>
 // Simple hook easier for testing
 const useTrackUsage = () => {
   const { trackUsage } = useTracking();
+  const dispatch = useDispatch();
+  const appStatus = useSelector(state => state.admin_app.status);
 
   useEffect(() => {
-    trackUsage('didAccessAuthenticatedAdministration');
+    // Make sure the event is only send once after accessing the admin panel
+    // and not at runtime for example when regenerating the permissions with the ctb
+    // or with i18n
+    if (appStatus === 'init') {
+      trackUsage('didAccessAuthenticatedAdministration');
+
+      dispatch({ type: SET_APP_RUNTIME_STATUS });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [appStatus]);
 };
 
 const Admin = () => {

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

@@ -0,0 +1 @@
+export const SET_APP_RUNTIME_STATUS = 'StrapiAdmin/APP/SET_APP_RUNTIME_STATUS';

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

@@ -13,7 +13,9 @@ import {
   useNotification,
   TrackingContext,
   prefixFileUrlWithBackendUrl,
+  useAppInfos,
 } from '@strapi/helper-plugin';
+import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
@@ -34,6 +36,7 @@ function App() {
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
+  const appInfo = useAppInfos();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -41,6 +44,8 @@ function App() {
     );
   }, []);
 
+  const [telemetryProperties, setTelemetryProperties] = useState(null);
+
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -69,12 +74,20 @@ function App() {
     const getData = async () => {
       try {
         const {
-          data: { hasAdmin, uuid, menuLogo },
-        } = await request('/admin/init', { method: 'GET' });
+          data: {
+            data: { hasAdmin, uuid, menuLogo },
+          },
+        } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
 
         if (uuid) {
+          const {
+            data: { data: properties },
+          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+
+          setTelemetryProperties(properties);
+
           try {
             const deviceId = await getUID();
 
@@ -84,6 +97,10 @@ function App() {
                 event: 'didInitializeAdministration',
                 uuid,
                 deviceId,
+                properties: {
+                  ...properties,
+                  environment: appInfo.currentEnvironment,
+                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -104,6 +121,7 @@ function App() {
     };
 
     getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toggleNotification, updateProjectSettings]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));
@@ -115,7 +133,7 @@ function App() {
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingContext.Provider value={uuid}>
+      <TrackingContext.Provider value={{ uuid, telemetryProperties }}>
         <Switch>
           {authRoutes}
           <Route

package/admin/src/pages/App/reducer.js

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import { SET_APP_RUNTIME_STATUS } from './constants';
+
+const initialState = {
+  status: 'init',
+};
+
+const reducer = (state = initialState, action) =>
+  /* eslint-disable-next-line consistent-return */
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_APP_RUNTIME_STATUS: {
+        draftState.status = 'runtime';
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState };
+export default reducer;

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -82,11 +82,19 @@ const Plugins = () => {
                   <Tr key={name}>
                     <Td>
                       <Typography textColor="neutral800" variant="omega" fontWeight="bold">
-                        {displayName}
+                        {formatMessage({
+                          id: `global.plugins.${name}`,
+                          defaultMessage: displayName,
+                        })}
                       </Typography>
                     </Td>
                     <Td>
-                      <Typography textColor="neutral800">{description}</Typography>
+                      <Typography textColor="neutral800">
+                        {formatMessage({
+                          id: `global.plugins.${name}.description`,
+                          defaultMessage: description,
+                        })}
+                      </Typography>
                     </Td>
                   </Tr>
                 );

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

@@ -357,6 +357,7 @@ const ProfilePage = () => {
                               })}
                               name="password"
                               type={passwordShown ? 'text' : 'password'}
+                              autoComplete="new-password"
                               endAction={
                                 <FieldActionWrapper
                                   onClick={e => {
@@ -398,6 +399,7 @@ const ProfilePage = () => {
                               })}
                               name="confirmPassword"
                               type={passwordConfirmShown ? 'text' : 'password'}
+                              autoComplete="new-password"
                               endAction={
                                 <FieldActionWrapper
                                   onClick={e => {
@@ -531,24 +533,23 @@ const ProfilePage = () => {
                                 });
                               }}
                             >
-                              {themesToDisplay.map(theme => {
-                                const label = formatMessage(
-                                  {
-                                    id:
-                                      'Settings.profile.form.section.experience.mode.option-label',
-                                    defaultMessage: '{name} mode',
-                                  },
-                                  {
-                                    name: upperFirst(theme),
-                                  }
-                                );
-
-                                return (
-                                  <Option value={theme} key={theme}>
-                                    {label}
-                                  </Option>
-                                );
-                              })}
+                              {themesToDisplay.map(theme => (
+                                <Option value={theme} key={theme}>
+                                  {formatMessage(
+                                    {
+                                      id:
+                                        'Settings.profile.form.section.experience.mode.option-label',
+                                      defaultMessage: '{name} mode',
+                                    },
+                                    {
+                                      name: formatMessage({
+                                        id: theme,
+                                        defaultMessage: upperFirst(theme),
+                                      }),
+                                    }
+                                  )}
+                                </Option>
+                              ))}
                             </Select>
                           </GridItem>
                         </Grid>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -18,8 +18,7 @@ const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
     setLogoUrl(e.target.value);
   };
 
-  const handleSubmit = async e => {
-    e.preventDefault();
+  const handleSubmit = async () => {
     try {
       const file = await urlToFile(logoUrl);
       const asset = await parseFileMetadatas(file);
@@ -36,7 +35,12 @@ const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form
+      onSubmit={e => {
+        e.preventDefault();
+        handleSubmit();
+      }}
+    >
       <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
         <TextInput
           label={formatMessage({

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/layout.js

@@ -62,7 +62,7 @@ const layout = [
         id: 'Auth.form.username.placeholder',
         defaultMessage: 'e.g. Kai_Doe',
       },
-      type: 'email',
+      type: 'text',
       size: {
         col: 6,
         xs: 12,
@@ -81,6 +81,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      autoComplete: 'new-password',
     },
     {
       intlLabel: {
@@ -93,6 +94,7 @@ const layout = [
         col: 6,
         xs: 12,
       },
+      autoComplete: 'new-password',
     },
   ],
   [

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

@@ -63,7 +63,7 @@ const TableRows = ({
               return (
                 <Td key={key}>
                   {typeof cellFormatter === 'function' ? (
-                    cellFormatter(data, { key, name, ...rest })
+                    cellFormatter(data, { key, name, formatMessage, ...rest })
                   ) : (
                     <Typography textColor="neutral800">{data[name] || '-'}</Typography>
                   )}

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -24,9 +24,18 @@ const tableHeaders = [
     name: 'roles',
     metadatas: { label: 'Roles', sortable: false },
     /* eslint-disable react/prop-types */
-    cellFormatter: ({ roles }) => {
+    cellFormatter: ({ roles }, { formatMessage }) => {
       return (
-        <Typography textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Typography>
+        <Typography textColor="neutral800">
+          {roles
+            .map(role =>
+              formatMessage({
+                id: `global.${role.code}`,
+                defaultMessage: role.name,
+              })
+            )
+            .join(',\n')}
+        </Typography>
       );
     },
     /* eslint-enable react/prop-types */
@@ -41,11 +50,16 @@ const tableHeaders = [
     name: 'isActive',
     metadatas: { label: 'User status', sortable: false },
     // eslint-disable-next-line react/prop-types
-    cellFormatter: ({ isActive }) => {
+    cellFormatter: ({ isActive }, { formatMessage }) => {
       return (
         <Flex>
           <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
-          <Typography textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Typography>
+          <Typography textColor="neutral800">
+            {formatMessage({
+              id: isActive ? 'global.active' : 'global.inactive',
+              defaultMessage: isActive ? 'Active' : 'Inactive',
+            })}
+          </Typography>
         </Flex>
       );
     },

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -73,7 +73,10 @@ const SelectRoles = ({ disabled, error, onChange, value }) => {
       {(data || []).map(role => {
         return (
           <Option key={role.id} value={role.id}>
-            {role.name}
+            {formatMessage({
+              id: `global.${role.code}`,
+              defaultMessage: role.name,
+            })}
           </Option>
         );
       })}

package/admin/src/reducers.js

@@ -1,12 +1,13 @@
+import appReducer from './pages/App/reducer';
 import rbacProviderReducer from './components/RBACProvider/reducer';
-import appReducer from './content-manager/pages/App/reducer';
+import cmAppReducer from './content-manager/pages/App/reducer';
 import editViewLayoutManagerReducer from './content-manager/pages/EditViewLayoutManager/reducer';
 import listViewReducer from './content-manager/pages/ListView/reducer';
 import rbacManagerReducer from './content-manager/hooks/useSyncRbac/reducer';
 import editViewCrudReducer from './content-manager/sharedReducers/crudReducer/reducer';
 
 const contentManagerReducers = {
-  'content-manager_app': appReducer,
+  'content-manager_app': cmAppReducer,
   'content-manager_listView': listViewReducer,
   'content-manager_rbacManager': rbacManagerReducer,
   'content-manager_editViewLayoutManager': editViewLayoutManagerReducer,
@@ -14,6 +15,7 @@ const contentManagerReducers = {
 };
 
 const reducers = {
+  admin_app: appReducer,
   rbacProvider: rbacProviderReducer,
   ...contentManagerReducers,
 };