@strapi/admin 4.2.0 → 4.3.0-beta.1

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/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,
@@ -316,7 +316,7 @@ const EditViewDataManagerProvider = ({
       } catch (err) {
         errors = {
           ...errors,
-          ...getAPIInnerError(err),
+          ...getAPIInnerErrors(err),
         };
       }
 
@@ -352,7 +352,7 @@ const EditViewDataManagerProvider = ({
     } catch (err) {
       errors = {
         ...errors,
-        ...getAPIInnerError(err),
+        ...getAPIInnerErrors(err),
       };
     }
 

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

@@ -14,6 +14,7 @@ import {
   TrackingContext,
   prefixFileUrlWithBackendUrl,
 } 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';
@@ -41,6 +42,8 @@ function App() {
     );
   }, []);
 
+  const [telemetryProperties, setTelemetryProperties] = useState(null);
+
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -69,12 +72,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 +95,9 @@ function App() {
                 event: 'didInitializeAdministration',
                 uuid,
                 deviceId,
+                properties: {
+                  ...properties,
+                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -115,7 +129,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/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -12,7 +12,7 @@ const NpmPackagesGrid = ({
 }) => {
   return (
     <Grid gap={4}>
-      {npmPackages.map((npmPackage) => (
+      {npmPackages.map(npmPackage => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}

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/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,
 };

package/admin/src/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/admin",
+
+  "include": [
+    "./",
+    "../../../**/admin/src/**/*",
+    "../../../../plugins/documentation/admin/src/**/*"
+  ],
+  "exclude": ["node_modules", "**/*.test.js", "*.js"]
+}