@strapi/admin 4.3.0-beta.1 → 4.3.1

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

@@ -37,6 +37,10 @@ const Portal = ({ isOpen }) => {
   return null;
 };
 
+Portal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+};
+
 const OverlayBlockerProvider = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
 

package/admin/src/content-manager/components/DynamicTable/CellContent/utils/hasContent.js

@@ -45,7 +45,7 @@ export default function hasContent(type, content, metadatas, fieldSchema) {
       return !isEmpty(content);
     }
 
-    return content.count > 0;
+    return content?.count > 0;
   }
 
   /* 

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

@@ -233,9 +233,14 @@ const EditViewDataManagerProvider = ({
     ({ target: { name, value, type } }, shouldSetInitialValue = false) => {
       let inputValue = value;
 
-      // Empty string is not a valid date,
-      // Set the date to null when it's empty
-      if (type === 'date' && value === '') {
+      // Allow to reset text, textarea, email, uid, select/enum, and number
+      if (
+        ['text', 'textarea', 'string', 'email', 'uid', 'select', 'select-one', 'number'].includes(
+          type
+        ) &&
+        !value &&
+        value !== 0
+      ) {
         inputValue = null;
       }
 
@@ -248,16 +253,6 @@ const EditViewDataManagerProvider = ({
         return;
       }
 
-      // Allow to reset enum
-      if (type === 'select-one' && value === '') {
-        inputValue = null;
-      }
-
-      // Allow to reset number input
-      if (type === 'number' && value === '') {
-        inputValue = null;
-      }
-
       dispatch({
         type: 'ON_CHANGE',
         keys: name.split('.'),
@@ -316,7 +311,7 @@ const EditViewDataManagerProvider = ({
       } catch (err) {
         errors = {
           ...errors,
-          ...getAPIInnerErrors(err),
+          ...getAPIInnerErrors(err, { getTrad }),
         };
       }
 
@@ -352,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;
 
@@ -57,6 +49,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           } else {
             cleanedData = value ? recursiveCleanData(value, componentsSchema[component]) : value;
           }
+
           break;
         case 'dynamiczone':
           cleanedData = value.map(componentData => {

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/components/SelectOne/SingleValue.js

@@ -12,10 +12,12 @@ import isEmpty from 'lodash/isEmpty';
 import { getTrad } from '../../utils';
 
 const StyledBullet = styled.div`
+  flex-shrink: 0;
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   margin-right: ${({ theme }) => theme.spaces[2]};
-  background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary700' : 'success200']};
+  background-color: ${({ theme, isDraft }) =>
+    theme.colors[isDraft ? 'secondary600' : 'success600']};
   border-radius: 50%;
   cursor: pointer;
 `;

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

@@ -5,7 +5,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import get from 'lodash/get';
 import isNull from 'lodash/isNull';
-import Select from 'react-select';
+import { ReactSelect as Select } from '@strapi/helper-plugin';
 import SingleValue from './SingleValue';
 
 function SelectOne({
@@ -21,7 +21,6 @@ function SelectOne({
   onMenuScrollToBottom,
   options,
   placeholder,
-  styles,
   value,
   description,
 }) {
@@ -48,7 +47,6 @@ function SelectOne({
         placeholder={formatMessage(
           placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
-        styles={styles}
         value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
       />
 
@@ -89,7 +87,6 @@ SelectOne.propTypes = {
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,
   }),
-  styles: PropTypes.object.isRequired,
   value: PropTypes.object,
   description: PropTypes.string,
 };

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

@@ -10,10 +10,12 @@ import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
 const StyledBullet = styled.div`
+  flex-shrink: 0;
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   margin-right: ${({ theme }) => theme.spaces[2]};
-  background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary600' : 'success600']};
+  background-color: ${({ theme, isDraft }) =>
+    theme.colors[isDraft ? 'secondary600' : 'success600']};
   border-radius: 50%;
   cursor: pointer;
 `;
@@ -22,29 +24,27 @@ const Option = props => {
   const { formatMessage } = useIntl();
   const Component = components.Option;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
-  const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
 
   if (hasDraftAndPublish) {
-    if (hasDraftAndPublish) {
-      const draftMessage = {
-        id: getTrad('components.Select.draft-info-title'),
-        defaultMessage: 'State: Draft',
-      };
-      const publishedMessage = {
-        id: getTrad('components.Select.publish-info-title'),
-        defaultMessage: 'State: Published',
-      };
-      const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
+    const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
+    const draftMessage = {
+      id: getTrad('components.Select.draft-info-title'),
+      defaultMessage: 'State: Draft',
+    };
+    const publishedMessage = {
+      id: getTrad('components.Select.publish-info-title'),
+      defaultMessage: 'State: Published',
+    };
+    const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
-      return (
-        <Component {...props}>
-          <Flex>
-            <StyledBullet title={title} isDraft={isDraft} />
-            <Typography ellipsis>{props.label || '-'}</Typography>
-          </Flex>
-        </Component>
-      );
-    }
+    return (
+      <Component {...props}>
+        <Flex>
+          <StyledBullet title={title} isDraft={isDraft} />
+          <Typography ellipsis>{props.label || '-'}</Typography>
+        </Flex>
+      </Component>
+    );
   }
 
   return <Component {...props}>{props.label || '-'}</Component>;

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -16,7 +16,7 @@ export const EditorStylesContainer = styled.div`
     height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
-    font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
       'Open Sans', 'Helvetica Neue', sans-serif;
   }
 

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

@@ -309,8 +309,8 @@ function ListView({
                     { target: headerLayoutTitle }
                   )}
                   placeholder={formatMessage({
-                    id: 'app.component.search.placeholder',
-                    defaultMessage: 'Search...',
+                    id: 'global.search',
+                    defaultMessage: 'Search',
                   })}
                   trackedEvent="didSearch"
                 />

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/{useFetchInstalledPlugins → useFetchEnabledPlugins}/index.js

@@ -1,11 +1,11 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchInstalledPlugins } from './utils/api';
+import { fetchEnabledPlugins } from './utils/api';
 
-const useFetchInstalledPlugins = notifyLoad => {
+const useFetchEnabledPlugins = notifyLoad => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
+  return useQuery('list-enabled-plugins', () => fetchEnabledPlugins(), {
     onSuccess: () => {
       if (notifyLoad) {
         notifyLoad();
@@ -20,4 +20,4 @@ const useFetchInstalledPlugins = notifyLoad => {
   });
 };
 
-export default useFetchInstalledPlugins;
+export default useFetchEnabledPlugins;

package/admin/src/hooks/{useFetchInstalledPlugins → useFetchEnabledPlugins}/utils/api.js

@@ -1,9 +1,9 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchInstalledPlugins = async () => {
+const fetchEnabledPlugins = async () => {
   const { data } = await axiosInstance.get('/admin/plugins');
 
   return data;
 };
 
-export { fetchInstalledPlugins };
+export { fetchEnabledPlugins };

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

@@ -6,7 +6,7 @@ import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layou
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import useFetchEnabledPlugins from '../../hooks/useFetchEnabledPlugins';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
@@ -30,7 +30,7 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
+  const { status, data } = useFetchEnabledPlugins(notifyPluginPageLoad);
 
   const isLoading = status !== 'success' && status !== 'error';
 
@@ -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/MarketplacePage/components/NpmPackageCard/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
+import pluralize from 'pluralize';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
@@ -27,7 +28,7 @@ const EllipsisText = styled(Typography)`
 
 const NpmPackageCard = ({
   npmPackage,
-  installedPackageNames,
+  isInstalled,
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
@@ -36,8 +37,6 @@ const NpmPackageCard = ({
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const isInstalled = installedPackageNames.includes(attributes.npmPackageName);
-
   const commandToCopy = useYarn
     ? `yarn add ${attributes.npmPackageName}`
     : `npm install ${attributes.npmPackageName}`;
@@ -47,10 +46,9 @@ const NpmPackageCard = ({
     defaultMessage: 'Made by Strapi',
   });
 
-  const npmPackageHref =
-    npmPackageType === 'provider'
-      ? attributes.npmPackageUrl
-      : `https://market.strapi.io/plugins/${attributes.slug}`;
+  const npmPackageHref = `https://market.strapi.io/${pluralize.plural(npmPackageType)}/${
+    attributes.slug
+  }`;
 
   return (
     <Flex
@@ -65,6 +63,7 @@ const NpmPackageCard = ({
       shadow="tableShadow"
       height="100%"
       alignItems="normal"
+      data-testid="npm-package-card"
     >
       <Box>
         <Box
@@ -167,7 +166,7 @@ NpmPackageCard.propTypes = {
       strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
     }).isRequired,
   }).isRequired,
-  installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isInstalled: PropTypes.bool.isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
   npmPackageType: PropTypes.string.isRequired,

package/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import NpmPackageCard from '../NpmPackageCard';
@@ -10,13 +10,19 @@ const NpmPackagesGrid = ({
   isInDevelopmentMode,
   npmPackageType,
 }) => {
+  // Check if an individual package is in the dependencies
+  const isAlreadyInstalled = useCallback(
+    npmPackageName => installedPackageNames.includes(npmPackageName),
+    [installedPackageNames]
+  );
+
   return (
     <Grid gap={4}>
       {npmPackages.map(npmPackage => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}
-            installedPackageNames={installedPackageNames}
+            isInstalled={isAlreadyInstalled(npmPackage.attributes.npmPackageName)}
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}