@strapi/admin 4.3.0-beta.2 → 4.3.0

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

@@ -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,
-          ...getAPIInnerErrors(err),
+          ...getAPIInnerErrors(err, { getTrad }),
         };
       }
 
@@ -346,7 +347,7 @@ const EditViewDataManagerProvider = ({
     } catch (err) {
       errors = {
         ...errors,
-        ...getAPIInnerErrors(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/PreviewWysiwyg/Wrapper.js

@@ -70,29 +70,23 @@ const Wrapper = styled.div`
   }
 
   table {
-    font-size: 13px;
     thead {
-      background: rgb(243, 243, 243);
-      tr {
-        height: 43px;
+      background: ${({ theme }) => theme.colors.neutral150};
+
+      th {
+        padding: ${({ theme }) => theme.spaces[4]};
       }
     }
     tr {
-      border: 1px solid #c6cbd1;
+      border: 1px solid ${({ theme }) => theme.colors.neutral200};
     }
     th,
     td {
-      padding: 0 25px;
-      border: 1px solid #c6cbd1;
+      padding: ${({ theme }) => theme.spaces[4]};
+      border: 1px solid ${({ theme }) => theme.colors.neutral200};
       border-bottom: 0;
       border-top: 0;
     }
-
-    tbody {
-      tr {
-        height: 54px;
-      }
-    }
   }
 
   pre,

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -68,10 +68,10 @@ const useFetchContentTypeLayout = contentTypeUID => {
   }, [contentTypeUID, getData]);
 
   const updateLayout = useCallback(
-    newLayout => {
+    data => {
       dispatch({
         type: 'UPDATE_LAYOUT',
-        newLayout: formatLayouts({ contentType: newLayout, components: {} }, schemas),
+        newLayout: formatLayouts(data, schemas),
       });
     },
     [schemas]

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/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

@@ -28,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')

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

@@ -13,6 +13,7 @@ import {
   useNotification,
   TrackingContext,
   prefixFileUrlWithBackendUrl,
+  useAppInfos,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
@@ -35,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(
@@ -97,6 +99,7 @@ function App() {
                 deviceId,
                 properties: {
                   ...properties,
+                  environment: appInfo.currentEnvironment,
                 },
               }),
               headers: {
@@ -118,6 +121,7 @@ function App() {
     };
 
     getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toggleNotification, updateProjectSettings]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));

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/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/translations/en.json

@@ -3,6 +3,7 @@
   "Auth.components.Oops.text": "Your account has been suspended.",
   "Auth.components.Oops.text.admin": "If this is a mistake, please contact your administrator.",
   "Auth.components.Oops.title": "Oops...",
+  "Auth.form.active.label": "Active",
   "Auth.form.button.forgot-password": "Send Email",
   "Auth.form.button.go-home": "GO BACK HOME",
   "Auth.form.button.login": "Login",
@@ -157,6 +158,8 @@
   "Settings.profile.form.section.experience.mode.label": "Interface mode",
   "Settings.profile.form.section.experience.mode.hint": "Displays your interface in the chosen mode.",
   "Settings.profile.form.section.experience.mode.option-label": "{name} mode",
+  "light": "Light",
+  "dark": "Dark",
   "Settings.profile.form.section.experience.title": "Experience",
   "Settings.profile.form.section.helmet.title": "User profile",
   "Settings.profile.form.section.profile.page.title": "Profile page",
@@ -320,8 +323,10 @@
   "app.components.InstallPluginPage.description": "Extend your app effortlessly.",
   "app.components.LeftMenu.collapse": "Collapse the navbar",
   "app.components.LeftMenu.expand": "Expand the navbar",
+  "app.components.LeftMenu.general": "General",
   "app.components.LeftMenu.logout": "Logout",
   "app.components.LeftMenu.logo.alt": "Application logo",
+  "app.components.LeftMenu.plugins": "Plugins",
   "app.components.LeftMenu.navbrand.title": "Strapi Dashboard",
   "app.components.LeftMenu.navbrand.workplace": "Workplace",
   "app.components.LeftMenuFooter.help": "Help",
@@ -671,6 +676,7 @@
   "content-manager.popUpwarning.warning.has-draft-relations.button-confirm": "Yes, publish",
   "content-manager.popUpwarning.warning.has-draft-relations.message": "<b>{count, plural, =0 { of your content relations is} one { of your content relations is} other { of your content relations are}}</b> not published yet.<br></br>It might engender broken links and errors on your project.",
   "content-manager.popover.display-relations.label": "Display relations",
+  "content-manager.select.currently.selected": "{count} currently selected",
   "content-manager.success.record.delete": "Deleted",
   "content-manager.success.record.publish": "Published",
   "content-manager.success.record.save": "Saved",
@@ -681,7 +687,10 @@
   "form.button.done": "Done",
   "global.search": "Search",
   "global.actions": "Actions",
+  "global.active": "Active",
+  "global.inactive": "Inactive",
   "global.back": "Back",
+  "global.cancel": "Cancel",
   "global.change-password": "Change password",
   "global.content-manager": "Content Manager",
   "global.continue": "Continue",
@@ -698,6 +707,24 @@
   "global.none": "None",
   "global.password": "Password",
   "global.plugins": "Plugins",
+  "global.plugins.content-manager": "Content Manager",
+  "global.plugins.content-manager.description": "Quick way to see, edit and delete the data in your database.",
+  "global.plugins.content-type-builder": "Content Type Builder",
+  "global.plugins.content-type-builder.description": "Modelize the data structure of your API. Create new fields and relations in just a minute. The files are automatically created and updated in your project.",
+  "global.plugins.email": "Email",
+  "global.plugins.email.description": "Configure your application to send emails.",
+  "global.plugins.upload": "Media Library",
+  "global.plugins.upload.description": "Media file management.",
+  "global.plugins.graphql": "GraphQL",
+  "global.plugins.graphql.description": "Adds GraphQL endpoint with default API methods.",
+  "global.plugins.documentation": "Documentation",
+  "global.plugins.documentation.description": "Create an OpenAPI Document and visualize your API with SWAGGER UI.",
+  "global.plugins.i18n": "Internationalization",
+  "global.plugins.i18n.description": "This plugin enables to create, to read and to update content in different languages, both from the Admin Panel and from the API.",
+  "global.plugins.sentry": "Sentry",
+  "global.plugins.sentry.description": "Send Strapi error events to Sentry.",
+  "global.plugins.users-permissions": "Roles & Permissions",
+  "global.plugins.users-permissions.description": "Protect your API with a full authentication process based on JWT. This plugin comes also with an ACL strategy that allows you to manage the permissions between the groups of users.",
   "global.profile": "Profile",
   "global.prompt.unsaved": "Are you sure you want to leave this page? All your modifications will be lost",
   "global.reset-password": "Reset password",
@@ -707,6 +734,15 @@
   "global.select": "Select",
   "global.select-all-entries": "Select all entries",
   "global.settings": "Settings",
+  "global.strapi-super-admin": "Super Admin",
+  "global.strapi-editor": "Editor",
+  "global.strapi-author": "Author",
+  "global.table.header.email": "Email",
+  "global.table.header.firstname": "Firstname",
+  "global.table.header.isActive": "User status",
+  "global.table.header.lastname": "Lastname",
+  "global.table.header.roles": "Roles",
+  "global.table.header.username": "Username",
   "global.type": "Type",
   "global.users": "Users",
   "notification.contentType.relations.conflict": "Content type has conflicting relations",