@strapi/admin 4.12.6 → 4.12.7

package/admin/src/StrapiApp.js

@@ -22,7 +22,7 @@ import {
 } from './exposedHooks';
 import favicon from './favicon.png';
 import injectionZones from './injectionZones';
-import { App } from './pages/App';
+import App from './pages/App';
 import languageNativeNames from './translations/languageNativeNames';
 
 class StrapiApp {

package/admin/src/components/AuthenticatedApp/index.js

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  AppInfoProvider,
+  auth,
+  LoadingIndicatorPage,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
+import get from 'lodash/get';
+import { useQueries } from 'react-query';
+//  TODO: DS add loader
+
+import packageJSON from '../../../../package.json';
+import { useConfigurations } from '../../hooks';
+import { getFullName, hashAdminUserEmail } from '../../utils';
+import PluginsInitializer from '../PluginsInitializer';
+import RBACProvider from '../RBACProvider';
+
+import {
+  fetchAppInfo,
+  fetchCurrentUserPermissions,
+  fetchStrapiLatestRelease,
+  fetchUserRoles,
+} from './utils/api';
+import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+
+const strapiVersion = packageJSON.version;
+
+const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
+  const userInfo = auth.getUserInfo();
+  const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
+  const [userDisplayName, setUserDisplayName] = useState(userName);
+  const [userId, setUserId] = useState(null);
+  const { showReleaseNotification } = useConfigurations();
+  const [
+    { data: appInfos, status },
+    { data: tagName, isLoading },
+    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
+    { data: userRoles },
+  ] = useQueries([
+    { queryKey: 'app-infos', queryFn: fetchAppInfo },
+    {
+      queryKey: 'strapi-release',
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
+      enabled: showReleaseNotification,
+      initialData: strapiVersion,
+    },
+    {
+      queryKey: 'admin-users-permission',
+      queryFn: fetchCurrentUserPermissions,
+      initialData: [],
+    },
+    {
+      queryKey: 'user-roles',
+      queryFn: fetchUserRoles,
+    },
+  ]);
+
+  const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tagName);
+
+  /**
+   * TODO: does this actually need to be an effect?
+   */
+  useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin && appInfos?.autoReload) {
+        setGuidedTourVisibility(true);
+      }
+    }
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
+
+  useEffect(() => {
+    const getUserId = async () => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    getUserId();
+  }, [userInfo]);
+
+  // We don't need to wait for the release query to be fetched before rendering the plugins
+  // however, we need the appInfos and the permissions
+  const shouldShowNotDependentQueriesLoader =
+    isFetching || status === 'loading' || fetchPermissionsStatus === 'loading';
+
+  const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
+
+  if (shouldShowLoader) {
+    return <LoadingIndicatorPage />;
+  }
+
+  // TODO: add error state
+  if (status === 'error') {
+    return <div>error...</div>;
+  }
+
+  return (
+    <AppInfoProvider
+      {...appInfos}
+      userId={userId}
+      latestStrapiReleaseTag={tagName}
+      setUserDisplayName={setUserDisplayName}
+      shouldUpdateStrapi={shouldUpdateStrapi}
+      userDisplayName={userDisplayName}
+    >
+      <RBACProvider permissions={permissions} refetchPermissions={refetch}>
+        <PluginsInitializer />
+      </RBACProvider>
+    </AppInfoProvider>
+  );
+};
+
+export default AuthenticatedApp;

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -0,0 +1,85 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import packageJSON from '../../../../../package.json';
+
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
+
+const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
+const { get } = getFetchClient();
+
+const fetchStrapiLatestRelease = async (toggleNotification) => {
+  try {
+    const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+    if (!res.ok) {
+      throw new Error('Failed to fetch latest Strapi version.');
+    }
+    const { tag_name } = await res.json();
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'global.see-more',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
+    return tag_name;
+  } catch (err) {
+    // Don't throw an error
+    return strapiVersion;
+  }
+};
+
+const fetchAppInfo = async () => {
+  try {
+    const { data, headers } = await get('/admin/information');
+
+    if (!headers['content-type'].includes('application/json')) {
+      throw new Error('Not found');
+    }
+
+    return data.data;
+  } catch (error) {
+    throw new Error(error);
+  }
+};
+
+const fetchCurrentUserPermissions = async () => {
+  try {
+    const { data, headers } = await get('/admin/users/me/permissions');
+
+    if (!headers['content-type'].includes('application/json')) {
+      throw new Error('Not found');
+    }
+
+    return data.data;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+const fetchUserRoles = async () => {
+  try {
+    const {
+      data: {
+        data: { roles },
+      },
+    } = await get('/admin/users/me');
+
+    return roles;
+  } catch (err) {
+    throw new Error(err);
+  }
+};
+
+export { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease, fetchUserRoles };

package/admin/src/components/AuthenticatedApp/utils/checkLatestStrapiVersion.js

@@ -0,0 +1,11 @@
+import semver from 'semver';
+
+const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
+  if (!semver.valid(currentPackageVersion) || !semver.valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return semver.lt(currentPackageVersion, latestPublishedVersion);
+};
+
+export default checkLatestStrapiVersion;

package/admin/src/components/GuidedTour/Modal/index.js

@@ -9,7 +9,7 @@ import Modal from './components/Modal';
 import StepperModal from './components/Stepper';
 import reducer, { initialState } from './reducer';
 
-export const GuidedTourModal = () => {
+const GuidedTourModal = () => {
   const {
     currentStep,
     guidedTourState,
@@ -90,3 +90,5 @@ export const GuidedTourModal = () => {
 
   return null;
 };
+
+export default GuidedTourModal;

package/admin/src/components/PluginsInitializer/index.js

@@ -0,0 +1,68 @@
+import React, { useReducer, useRef } from 'react';
+
+import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+
+import Admin from '../../pages/Admin';
+
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const PluginsInitializer = () => {
+  const { plugins: appPlugins } = useStrapiApp();
+  const [{ plugins }, dispatch] = useReducer(reducer, initialState, () => init(appPlugins));
+  const setPlugin = useRef((pluginId) => {
+    dispatch({ type: 'SET_PLUGIN_READY', pluginId });
+  });
+
+  const hasApluginNotReady = Object.keys(plugins).some(
+    (plugin) => plugins[plugin].isReady === false
+  );
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  if (hasApluginNotReady) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(<InitializerComponent key={key} setPlugin={setPlugin.current} />);
+      }
+
+      return acc;
+    }, []);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return <Admin />;
+};
+
+export default PluginsInitializer;

package/admin/src/components/PluginsInitializer/init.js

@@ -0,0 +1,11 @@
+const init = (plugins) => {
+  return {
+    plugins: Object.keys(plugins).reduce((acc, current) => {
+      acc[current] = { ...plugins[current] };
+
+      return acc;
+    }, {}),
+  };
+};
+
+export default init;

package/admin/src/components/PluginsInitializer/reducer.js

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import set from 'lodash/set';
+
+const initialState = {
+  plugins: null,
+};
+
+const reducer = (state = initialState, action) =>
+  /* eslint-disable-next-line consistent-return */
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'SET_PLUGIN_READY': {
+        set(draftState, ['plugins', action.pluginId, 'isReady'], true);
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState };
+export default reducer;

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

@@ -61,7 +61,7 @@ function renderDraglayerItem({ type, item }) {
   }
 }
 
-export const ContentManger = () => {
+const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
     useContentManagerInitData();
@@ -123,10 +123,6 @@ export const ContentManger = () => {
 
   return (
     <Layout sideNav={<LeftMenu />}>
-      <Helmet
-        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
-      />
-
       <DragLayer renderItem={renderDraglayerItem} />
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
@@ -153,3 +149,18 @@ export const ContentManger = () => {
     </Layout>
   );
 };
+
+export { App };
+
+export default function () {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Helmet
+        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
+      />
+      <App />
+    </>
+  );
+}

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -5,7 +5,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFullName } from '../../../../utils/getFullName';
+import { getFullName } from '../../../../utils';
 import { getTrad } from '../../../utils';
 
 import getUnits from './utils/getUnits';

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

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
+import formatAPIError from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -301,7 +301,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIErrors(error),
+          message: formatAPIError(error),
         });
       },
     }

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

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { getFullName } from '../../../../../utils/getFullName';
+import { getFullName } from '../../../../../utils';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';

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

@@ -1,14 +1,9 @@
 import { useEffect, useReducer } from 'react';
 
-import {
-  getYupInnerErrors,
-  useFetchClient,
-  useNotification,
-  useOverlayBlocker,
-} from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import { formatAPIErrors } from '../../utils/formatAPIErrors';
+import { checkFormValidity, formatAPIErrors } from '../../utils';
 
 import init from './init';
 import { initialState, reducer } from './reducer';
@@ -81,13 +76,7 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    let errors = null;
-
-    try {
-      await schema.validate(modifiedData, { abortEarly: false });
-    } catch (err) {
-      errors = getYupInnerErrors(err);
-    }
+    const errors = await checkFormValidity(modifiedData, schema);
 
     dispatch({
       type: 'SET_ERRORS',

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

@@ -7,8 +7,8 @@ import { selectAdminPermissions } from '../../pages/App/selectors';
 import { useEnterprise } from '../useEnterprise';
 
 import { LINKS_CE } from './constants';
-import { formatLinks } from './utils/formatLinks';
-import { sortLinks } from './utils/sortLinks';
+import formatLinks from './utils/formatLinks';
+import sortLinks from './utils/sortLinks';
 
 const useSettingsMenu = () => {
   const [{ isLoading, menu }, setData] = useState({

package/admin/src/hooks/useSettingsMenu/utils/formatLinks.js

@@ -1,4 +1,4 @@
-export const formatLinks = (menu) => {
+const formatLinks = (menu) => {
   return menu.map((menuSection) => {
     const formattedLinks = menuSection.links.map((link) => ({
       ...link,
@@ -8,3 +8,5 @@ export const formatLinks = (menu) => {
     return { ...menuSection, links: formattedLinks };
   });
 };
+
+export default formatLinks;

package/admin/src/hooks/useSettingsMenu/utils/sortLinks.js

@@ -1,3 +1,5 @@
 import sortBy from 'lodash/sortBy';
 
-export const sortLinks = (links) => sortBy(links, (link) => link.id);
+const sortLinks = (links) => sortBy(links, (link) => link.id);
+
+export default sortLinks;

package/admin/src/index.js

@@ -52,7 +52,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(/* webpackChunkName: "StrapiApp" */ './StrapiApp');
+  const StrapiApp = await import(/* webpackChunkName: "admin-app" */ './StrapiApp');
 
   const app = StrapiApp.default({
     appPlugins: plugins,

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+const FlexBox = styled(Box)`
+  flex: 1;
+`;
+
+const AppLayout = ({ children, sideNav }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box background="neutral100">
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
+      <Flex alignItems="flex-start">
+        {sideNav}
+        <FlexBox>{children}</FlexBox>
+      </Flex>
+    </Box>
+  );
+};
+
+AppLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+  sideNav: PropTypes.node.isRequired,
+};
+
+export default AppLayout;

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

@@ -75,7 +75,7 @@ const TextLink = styled(TypographyLineHeight)`
   }
 `;
 
-export const Onboarding = () => {
+const Onboarding = () => {
   const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
@@ -222,3 +222,5 @@ export const Onboarding = () => {
     </Box>
   );
 };
+
+export default Onboarding;