@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

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

@@ -1,7 +1,6 @@
 export { default as useConfigurations } from './useConfigurations';
 export { default as useModels } from './useModels';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
-export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFromMarketPlace';
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';
 export { default as useRolesList } from './useRolesList';

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

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchInstalledPlugins } from './utils/api';
+
+const useFetchInstalledPlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchInstalledPlugins;

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

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

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

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchMarketplacePlugins } from './utils/api';
+
+const useFetchMarketplacePlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchMarketplacePlugins;

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+
+const fetchMarketplacePlugins = async () => {
+  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
+
+  // Only keep v4 plugins
+  const filteredResponse = {
+    ...response,
+    data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'),
+  };
+
+  return filteredResponse;
+};
+
+export { fetchMarketplacePlugins };

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, useReleaseNotification } from '../../hooks';
-import Onboarding from './Onboarding';
+import { useMenu } from '../../hooks';
 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,16 +41,23 @@ 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 = () => {
-  // Show a notification when the current version of Strapi is not the latest one
-  useReleaseNotification();
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();

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

@@ -14,7 +14,10 @@ import init from './init';
 import { initialState, reducer } from './reducer';
 
 const AuthPage = ({ hasAdmin, setHasAdmin }) => {
-  const { push } = useHistory();
+  const {
+    push,
+    location: { search },
+  } = useHistory();
   const { changeLocale } = useLocalesProvider();
   const { setSkipped } = useGuidedTour();
   const { trackUsage } = useTracking();
@@ -119,7 +122,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       auth.setToken(token, body.rememberMe);
       auth.setUserInfo(user, body.rememberMe);
 
-      push('/');
+      redirectToPreviousLocation();
     } catch (err) {
       if (err.response) {
         const errorMessage = get(
@@ -174,6 +177,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         if (isUserSuperAdmin) {
           persistStateToLocaleStorage.setSkipped(false);
           setSkipped(false);
+          trackUsage('didLaunchGuidedtour');
         }
       }
 
@@ -189,8 +193,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         return;
       }
 
-      // Redirect to the homePage
-      push('/');
+      redirectToPreviousLocation();
     } catch (err) {
       trackUsage('didNotCreateFirstAdmin');
 
@@ -238,6 +241,17 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     }
   };
 
+  const redirectToPreviousLocation = () => {
+    if (authType === 'login') {
+      const redirectTo = query.get('redirectTo');
+      const redirectUrl = redirectTo ? decodeURIComponent(redirectTo) : '/';
+
+      push(redirectUrl);
+    } else {
+      push('/');
+    }
+  };
+
   // Redirect the user to the login page if
   // the endpoint does not exist or
   // there is already an admin user oo
@@ -248,7 +262,16 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
 
   // Redirect the user to the register-admin if it is the first user
   if (!hasAdmin && authType !== 'register-admin') {
-    return <Redirect to="/auth/register-admin" />;
+    return (
+      <Redirect
+        to={{
+          pathname: '/auth/register-admin',
+          // Forward the `?redirectTo` from /auth/login
+          // /abc => /auth/login?redirectTo=%2Fabc => /auth/register-admin?redirectTo=%2Fabc
+          search,
+        }}
+      />
+    );
   }
 
   return (

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

@@ -1,26 +1,24 @@
 import React from 'react';
-import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
-import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import { fetchPlugins } from './utils/api';
+import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
-  useFocusWhenNavigate();
   const { notifyStatus } = useNotifyAT();
-  const toggleNotification = useNotification();
+  useFocusWhenNavigate();
 
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 
-  const notifyLoad = () => {
+  const notifyPluginPageLoad = () => {
     notifyStatus(
       formatMessage(
         {
@@ -32,14 +30,7 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
-    onError: () => {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-  });
+  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
 
   const isLoading = status !== 'success' && status !== 'error';
 
@@ -70,7 +61,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.name',
+                      id: 'global.name',
                       defaultMessage: 'Name',
                     })}
                   </Typography>
@@ -78,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',
   });