@strapi/admin 4.2.0-beta.0 → 4.2.0-beta.1

package/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js

@@ -113,7 +113,7 @@ const EditFieldForm = ({
           }
           endActions={
             <Button type="submit">
-              {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
+              {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
             </Button>
           }
         />

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -191,7 +191,7 @@ const ListSettingsView = ({ layout, slug }) => {
           <HeaderLayout
             navigationAction={
               <Link startIcon={<ArrowLeft />} to={goBackUrl} id="go-back">
-                {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Back' })}
+                {formatMessage({ id: 'global.back', defaultMessage: 'Back' })}
               </Link>
             }
             primaryAction={
@@ -201,7 +201,7 @@ const ListSettingsView = ({ layout, slug }) => {
                 disabled={isEqual(modifiedData, initialData)}
                 type="submit"
               >
-                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
               </Button>
             }
             subtitle={formatMessage({

package/admin/src/content-manager/pages/ListView/actions.js

@@ -21,11 +21,12 @@ export function resetProps() {
   return { type: RESET_PROPS };
 }
 
-export const setLayout = contentType => {
+export const setLayout = ({ components, contentType }) => {
   const { layouts } = contentType;
 
   return {
     contentType,
+    components,
     displayedHeaders: layouts.list,
     type: SET_LIST_LAYOUT,
   };

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

@@ -267,7 +267,7 @@ function ListView({
         navigationAction={
           <Link startIcon={<ArrowLeft />} to="/content-manager/">
             {formatMessage({
-              id: 'app.components.HeaderLayout.link.go-back',
+              id: 'global.back',
               defaultMessage: 'Back',
             })}
           </Link>
@@ -388,9 +388,6 @@ export function mapDispatchToProps(dispatch) {
     dispatch
   );
 }
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps
-);
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
 
 export default compose(withConnect)(memo(ListView, isEqual));

package/admin/src/content-manager/pages/ListView/reducer.js

@@ -4,6 +4,7 @@
  */
 
 import produce from 'immer';
+import get from 'lodash/get';
 import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
@@ -17,6 +18,7 @@ export const initialState = {
   data: [],
   isLoading: true,
   contentType: {},
+  components: [],
   initialDisplayedHeaders: [],
   displayedHeaders: [],
   pagination: {
@@ -26,21 +28,22 @@ export const initialState = {
 
 const listViewReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, drafState => {
+  produce(state, draftState => {
     switch (action.type) {
       case GET_DATA: {
         return {
           ...initialState,
           contentType: state.contentType,
+          components: state.components,
           initialDisplayedHeaders: state.initialDisplayedHeaders,
           displayedHeaders: state.displayedHeaders,
         };
       }
 
       case GET_DATA_SUCCEEDED: {
-        drafState.pagination = action.pagination;
-        drafState.data = action.data;
-        drafState.isLoading = false;
+        draftState.pagination = action.pagination;
+        draftState.data = action.data;
+        draftState.isLoading = false;
         break;
       }
 
@@ -59,19 +62,49 @@ const listViewReducer = (state = initialState, action) =>
             key: `__${name}_key__`,
           };
 
-          if (attributes[name].type === 'relation') {
-            drafState.displayedHeaders.push({
-              ...header,
-              queryInfos: {
-                defaultParams: {},
-                endPoint: `collection-types/${uid}`,
-              },
-            });
-          } else {
-            drafState.displayedHeaders.push(header);
+          switch (attributes[name].type) {
+            case 'component': {
+              const componentName = attributes[name].component;
+              const mainFieldName = get(
+                state,
+                ['components', componentName, 'settings', 'mainField'],
+                null
+              );
+              const mainFieldAttribute = get(state, [
+                'components',
+                componentName,
+                'attributes',
+                mainFieldName,
+              ]);
+
+              draftState.displayedHeaders.push({
+                ...header,
+                metadatas: {
+                  ...metas,
+                  mainField: {
+                    ...mainFieldAttribute,
+                    name: mainFieldName,
+                  },
+                },
+              });
+              break;
+            }
+
+            case 'relation':
+              draftState.displayedHeaders.push({
+                ...header,
+                queryInfos: {
+                  defaultParams: {},
+                  endPoint: `collection-types/${uid}`,
+                },
+              });
+              break;
+
+            default:
+              draftState.displayedHeaders.push(header);
           }
         } else {
-          drafState.displayedHeaders = state.displayedHeaders.filter(
+          draftState.displayedHeaders = state.displayedHeaders.filter(
             header => header.name !== name
           );
         }
@@ -79,23 +112,24 @@ const listViewReducer = (state = initialState, action) =>
         break;
       }
       case ON_RESET_LIST_HEADERS: {
-        drafState.displayedHeaders = state.initialDisplayedHeaders;
+        draftState.displayedHeaders = state.initialDisplayedHeaders;
         break;
       }
       case RESET_PROPS: {
         return initialState;
       }
       case SET_LIST_LAYOUT: {
-        const { contentType, displayedHeaders } = action;
+        const { contentType, components, displayedHeaders } = action;
 
-        drafState.contentType = contentType;
-        drafState.displayedHeaders = displayedHeaders;
-        drafState.initialDisplayedHeaders = displayedHeaders;
+        draftState.contentType = contentType;
+        draftState.components = components;
+        draftState.displayedHeaders = displayedHeaders;
+        draftState.initialDisplayedHeaders = displayedHeaders;
 
         break;
       }
       default:
-        return drafState;
+        return draftState;
     }
   });
 

package/admin/src/content-manager/pages/ListView/selectors.js

@@ -15,12 +15,9 @@ const listViewDomain = () => state => state['content-manager_listView'] || initi
  */
 
 const makeSelectListView = () =>
-  createSelector(
-    listViewDomain(),
-    substate => {
-      return substate;
-    }
-  );
+  createSelector(listViewDomain(), substate => {
+    return substate;
+  });
 
 const selectDisplayedHeaders = state => {
   const { displayedHeaders } = state['content-manager_listView'];

package/admin/src/content-manager/pages/ListViewLayoutManager/index.js

@@ -21,7 +21,7 @@ const ListViewLayout = ({ layout, ...props }) => {
   }, [rawQuery, replace, redirectionLink]);
 
   useEffect(() => {
-    dispatch(setLayout(layout.contentType));
+    dispatch(setLayout(layout));
   }, [dispatch, layout]);
 
   useEffect(() => {

package/admin/src/content-manager/testUtils/data.js

@@ -140,7 +140,11 @@ const testData = {
       id: 1,
       name: 'name',
       subcomponotrepeatable: { id: 4, name: 'name' },
-      subrepeatable: [{ id: 1, name: 'name' }, { id: 2, name: 'name' }, { id: 3, name: 'name' }],
+      subrepeatable: [
+        { id: 1, name: 'name' },
+        { id: 2, name: 'name' },
+        { id: 3, name: 'name' },
+      ],
     },
     repeatable: [
       {

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

@@ -7,7 +7,7 @@ const checkIfAttributeIsDisplayable = attribute => {
     return !toLower(attribute.relationType).includes('morph');
   }
 
-  return !['json', 'component', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
+  return !['json', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
 };
 
 export default checkIfAttributeIsDisplayable;

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

@@ -0,0 +1,3 @@
+export default function isFieldTypeNumber(type) {
+  return ['integer', 'biginteger', 'decimal', 'float', 'number'].includes(type);
+}

package/admin/src/hooks/useMenu/reducer.js

@@ -10,7 +10,7 @@ const initialState = {
     {
       icon: Puzzle,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.listPlugins',
+        id: 'global.plugins',
         defaultMessage: 'Plugins',
       },
       to: '/list-plugins',
@@ -19,7 +19,7 @@ const initialState = {
     {
       icon: ShoppingCart,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.installNewPlugin',
+        id: 'global.marketplace',
         defaultMessage: 'Marketplace',
       },
       to: '/marketplace',
@@ -28,7 +28,7 @@ const initialState = {
     {
       icon: Cog,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.settings',
+        id: 'global.settings',
         defaultMessage: 'Settings',
       },
       to: '/settings',

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

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * For more details about this hook see:
+ * https://www.30secondsofcode.org/react/s/use-navigator-on-line
+ */
+const useNavigatorOnLine = () => {
+  const onlineStatus =
+    typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+      ? navigator.onLine
+      : true;
+
+  const [isOnline, setIsOnline] = useState(onlineStatus);
+
+  const setOnline = () => setIsOnline(true);
+  const setOffline = () => setIsOnline(false);
+
+  useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return isOnline;
+};
+
+export default useNavigatorOnLine;

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

@@ -15,7 +15,7 @@ const useReleaseNotification = () => {
         link: {
           url: `https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`,
           label: {
-            id: 'notification.version.update.link',
+            id: 'global.see-more',
           },
         },
         blockTransition: true,

package/admin/src/hooks/useSettingsMenu/init.js

@@ -25,14 +25,14 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.roles.label', defaultMessage: 'Roles' },
+          intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',
           id: 'roles',
           isDisplayed: false,
           permissions: adminPermissions.settings.roles.main,
         },
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.users.label' },
+          intlLabel: { id: 'global.users' },
           // Init the search params directly
           to: '/settings/users?pageSize=10&page=1&sort=firstname',
           id: 'users',

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -40,7 +40,7 @@ const UnauthenticatedLayout = ({ children }) => {
           <LocaleToggle />
         </Box>
       </Flex>
-      <Box paddingTop={11} paddingBottom={11}>
+      <Box paddingTop={2} paddingBottom={11}>
         {children}
       </Box>
     </div>

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

@@ -75,7 +75,7 @@ const Onboarding = () => {
     {
       icon: 'book',
       label: formatMessage({
-        id: 'app.components.LeftMenuFooter.documentation',
+        id: 'global.documentation',
         defaultMessage: 'Documentation',
       }),
       destination: 'https://docs.strapi.io',

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')
@@ -40,11 +41,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,6 +13,7 @@ import {
   useNotification,
   TrackingContext,
 } 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';
@@ -38,6 +39,8 @@ function App() {
     );
   }, []);
 
+  const [telemetryProperties, setTelemetryProperties] = useState(null);
+
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -66,10 +69,18 @@ function App() {
     const getData = async () => {
       try {
         const {
-          data: { hasAdmin, uuid },
-        } = await request('/admin/init', { method: 'GET' });
+          data: {
+            data: { hasAdmin, uuid },
+          },
+        } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         if (uuid) {
+          const {
+            data: { data: properties },
+          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+
+          setTelemetryProperties(properties);
+
           try {
             const deviceId = await getUID();
 
@@ -79,6 +90,9 @@ function App() {
                 event: 'didInitializeAdministration',
                 uuid,
                 deviceId,
+                properties: {
+                  ...properties,
+                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -110,7 +124,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/AuthPage/components/Login/BaseLogin.js

@@ -107,7 +107,7 @@ const Login = ({ onSubmit, schema, children }) => {
                   onChange={handleChange}
                   value={values.password}
                   label={formatMessage({
-                    id: 'Auth.form.password.label',
+                    id: 'global.password',
                     defaultMessage: 'Password',
                   })}
                   name="password"

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -143,7 +143,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       <Typography as="h1" variant="alpha">
                         {formatMessage({
                           id: 'Auth.form.welcome.title',
-                          defaultMessage: 'Welcome!',
+                          defaultMessage: 'Welcome to Strapi!',
                         })}
                       </Typography>
                     </Box>
@@ -152,12 +152,12 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {formatMessage({
                           id: 'Auth.form.register.subtitle',
                           defaultMessage:
-                            'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.',
+                            'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
                         })}
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Stack spacing={7}>
+                  <Stack spacing={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -227,11 +227,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       hint={formatMessage({
                         id: 'Auth.form.password.hint',
                         defaultMessage:
-                          'Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number',
+                          'Must be at least 8 characters, 1 uppercase, 1 lowercase & 1 number',
                       })}
                       required
                       label={formatMessage({
-                        id: 'Auth.form.password.label',
+                        id: 'global.password',
                         defaultMessage: 'Password',
                       })}
                       type={passwordShown ? 'text' : 'password'}
@@ -284,7 +284,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {
                           id: 'Auth.form.register.news.label',
                           defaultMessage:
-                            'Keep me updated about the new features and upcoming improvements (by doing this you accept the {terms} and the {policy}).',
+                            'Keep me updated about new features & upcoming improvements (by doing this you accept the {terms} and the {policy}).',
                         },
                         {
                           terms: (

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -53,7 +53,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   <Box paddingTop={6} paddingBottom={7}>
                     <Typography as="h1" variant="alpha">
                       {formatMessage({
-                        id: 'Auth.reset-password.title',
+                        id: 'global.reset-password',
                         defaultMessage: 'Reset password',
                       })}
                     </Typography>
@@ -114,7 +114,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     })}
                     required
                     label={formatMessage({
-                      id: 'Auth.form.password.label',
+                      id: 'global.password',
                       defaultMessage: 'Password',
                     })}
                     type={passwordShown ? 'text' : 'password'}
@@ -161,7 +161,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   />
                   <Button fullwidth type="submit">
                     {formatMessage({
-                      id: 'Auth.form.button.reset-password',
+                      id: 'global.change-password',
                       defaultMessage: 'Change password',
                     })}
                   </Button>

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -24,7 +24,7 @@ const ContentBlocks = () => {
       >
         <ContentBox
           title={formatMessage({
-            id: 'app.components.BlockLink.documentation',
+            id: 'global.documentation',
             defaultMessage: 'Documentation',
           })}
           subtitle={formatMessage({

package/admin/src/pages/HomePage/SocialLinks.js

@@ -167,10 +167,7 @@ const SocialLinks = () => {
               })}
             </Typography>
           </Stack>
-          <Link
-            href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
-            endIcon={<ExternalLink />}
-          >
+          <Link href="https://feedback.strapi.io/" endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',

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

@@ -14,7 +14,7 @@ const Plugins = () => {
   useFocusWhenNavigate();
 
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 
@@ -61,7 +61,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.name',
+                      id: 'global.name',
                       defaultMessage: 'Name',
                     })}
                   </Typography>
@@ -69,7 +69,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.description',
+                      id: 'global.description',
                       defaultMessage: 'description',
                     })}
                   </Typography>

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

@@ -8,7 +8,7 @@ import Plugins from './Plugins';
 const InstalledPluginsPage = () => {
   const { formatMessage } = useIntl();
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });