@strapi/admin 4.12.6 → 4.12.7

package/ee/admin/pages/App/constants.js

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import { AuthResponse } from '../AuthResponse';
 
-export const AUTH_ROUTES_EE = [
+export const ROUTES_EE = [
   {
-    component: React.lazy(() =>
-      import('../AuthResponse').then((module) => ({ default: module.AuthResponse }))
-    ),
-    path: '/auth/login/:authResponse',
+    Component: () => ({ default: AuthResponse }),
+    to: '/auth/login/:authResponse',
+    exact: true,
   },
 ];

package/ee/admin/pages/AuthPage/components/Login/index.js

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 
 import UnauthenticatedLayout from '../../../../../../admin/src/layouts/UnauthenticatedLayout';
 import BaseLogin from '../../../../../../admin/src/pages/AuthPage/components/Login/BaseLogin';
-import { useAuthProviders } from '../../../../hooks/useAuthProviders';
+import { useAuthProviders } from '../../../../hooks';
 import SSOProviders from '../Providers/SSOProviders';
 
 const DividerFull = styled(Divider)`
@@ -15,15 +15,11 @@ const DividerFull = styled(Divider)`
 `;
 
 export const LoginEE = (loginProps) => {
+  const ssoEnabled = window.strapi.features.isEnabled(window.strapi.features.SSO);
+  const { isLoading, data: providers } = useAuthProviders({ ssoEnabled });
   const { formatMessage } = useIntl();
-  const { isLoading, providers } = useAuthProviders({
-    enabled: window.strapi.features.isEnabled(window.strapi.features.SSO),
-  });
 
-  if (
-    !window.strapi.features.isEnabled(window.strapi.features.SSO) ||
-    (!isLoading && providers.length === 0)
-  ) {
+  if (!ssoEnabled || (!isLoading && providers.length === 0)) {
     return (
       <UnauthenticatedLayout>
         <BaseLogin {...loginProps} />

package/ee/admin/pages/AuthPage/components/Providers/index.js

@@ -11,7 +11,7 @@ import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../../../admin/src/layouts/UnauthenticatedLayout';
-import { useAuthProviders } from '../../../../hooks/useAuthProviders';
+import { useAuthProviders } from '../../../../hooks';
 
 import SSOProviders from './SSOProviders';
 
@@ -20,20 +20,17 @@ const DividerFull = styled(Divider)`
 `;
 
 const Providers = () => {
+  const ssoEnabled = window.strapi.features.isEnabled(window.strapi.features.SSO);
+
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const { isLoading, providers } = useAuthProviders({
-    enabled: window.strapi.features.isEnabled(window.strapi.features.SSO),
-  });
+  const { isLoading, data: providers } = useAuthProviders({ ssoEnabled });
 
   const handleClick = () => {
     push('/auth/login');
   };
 
-  if (
-    !window.strapi.features.isEnabled(window.strapi.features.SSO) ||
-    (!isLoading && providers.length === 0)
-  ) {
+  if (!ssoEnabled || (!isLoading && providers.length === 0)) {
     return <Redirect to="/auth/login" />;
   }
 

package/ee/admin/pages/HomePage/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 // eslint-disable-next-line import/no-cycle
 import { HomePageCE } from '../../../../admin/src/pages/HomePage';
-import { useLicenseLimitNotification } from '../../hooks/useLicenseLimitNotification';
+import { useLicenseLimitNotification } from '../../hooks';
 
 export function HomePageEE() {
   useLicenseLimitNotification();

package/ee/admin/pages/SettingsPage/constants.js

@@ -1,15 +1,16 @@
-import * as React from 'react';
-
-export const SETTINGS_ROUTES_EE = [
+export const ROUTES_EE = [
   ...(window.strapi.features.isEnabled(window.strapi.features.AUDIT_LOGS)
     ? [
         {
-          component: React.lazy(() =>
-            import(
+          async Component() {
+            const component = await import(
               /* webpackChunkName: "audit-logs-settings-page" */ './pages/AuditLogs/ProtectedListPage'
-            )
-          ),
-          path: '/settings/audit-logs',
+            );
+
+            return component;
+          },
+          to: '/settings/audit-logs',
+          exact: true,
         },
       ]
     : []),
@@ -17,30 +18,39 @@ export const SETTINGS_ROUTES_EE = [
   ...(window.strapi.features.isEnabled(window.strapi.features.REVIEW_WORKFLOWS)
     ? [
         {
-          component: React.lazy(() =>
-            import(
+          async Component() {
+            const component = await import(
               /* webpackChunkName: "review-workflows-settings-list-view" */ './pages/ReviewWorkflows/pages/ListView'
-            )
-          ),
-          path: '/settings/review-workflows',
+            );
+
+            return component;
+          },
+          to: '/settings/review-workflows',
+          exact: true,
         },
 
         {
-          component: React.lazy(() =>
-            import(
+          async Component() {
+            const component = await import(
               /* webpackChunkName: "review-workflows-settings-create-view" */ './pages/ReviewWorkflows/pages/CreateView'
-            )
-          ),
-          path: '/settings/review-workflows/create',
+            );
+
+            return component;
+          },
+          to: '/settings/review-workflows/create',
+          exact: true,
         },
 
         {
-          component: React.lazy(() =>
-            import(
+          async Component() {
+            const component = await import(
               /* webpackChunkName: "review-workflows-settings-edit-view" */ './pages/ReviewWorkflows/pages/EditView'
-            )
-          ),
-          path: '/settings/review-workflows/:workflowId',
+            );
+
+            return component;
+          },
+          to: '/settings/review-workflows/:workflowId',
+          exact: true,
         },
       ]
     : []),
@@ -48,10 +58,15 @@ export const SETTINGS_ROUTES_EE = [
   ...(window.strapi.features.isEnabled(window.strapi.features.SSO)
     ? [
         {
-          component: React.lazy(() =>
-            import(/* webpackChunkName: "sso-settings-page" */ './pages/SingleSignOn')
-          ),
-          path: '/settings/single-sign-on',
+          async Component() {
+            const component = await import(
+              /* webpackChunkName: "sso-settings-page" */ './pages/SingleSignOn'
+            );
+
+            return component;
+          },
+          to: '/settings/single-sign-on',
+          exact: true,
         },
       ]
     : []),

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/CreateView/CreateView.js

@@ -17,7 +17,7 @@ import { useHistory } from 'react-router-dom';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
-import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
+import { useLicenseLimits } from '../../../../../../hooks';
 import { addStage, resetWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/EditView/EditView.js

@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom';
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
-import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
+import { useLicenseLimits } from '../../../../../../hooks';
 import { resetWorkflow, setWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/ListView/ListView.js

@@ -35,7 +35,7 @@ import styled from 'styled-components';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
-import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
+import { useLicenseLimits } from '../../../../../../hooks';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME } from '../../constants';

package/ee/admin/pages/SettingsPage/pages/Users/ListPage/CreateAction/index.js

@@ -6,7 +6,7 @@ import isNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
+import { useLicenseLimits } from '../../../../../../hooks';
 
 export const CreateActionEE = ({ onClick }) => {
   const { formatMessage } = useIntl();

package/ee/admin/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 // eslint-disable-next-line import/no-cycle
 import { UserListPageCE } from '../../../../../../../admin/src/pages/SettingsPage/pages/Users/ListPage';
-import { useLicenseLimitNotification } from '../../../../../hooks/useLicenseLimitNotification';
+import { useLicenseLimitNotification } from '../../../../../hooks';
 
 function UserListPageEE() {
   useLicenseLimitNotification();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.12.6",
+  "version": "4.12.7",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -42,14 +42,14 @@
   "dependencies": {
     "@casl/ability": "^5.4.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@strapi/data-transfer": "4.12.6",
+    "@strapi/data-transfer": "4.12.7",
     "@strapi/design-system": "1.9.0",
-    "@strapi/helper-plugin": "4.12.6",
+    "@strapi/helper-plugin": "4.12.7",
     "@strapi/icons": "1.9.0",
-    "@strapi/permissions": "4.12.6",
-    "@strapi/provider-audit-logs-local": "4.12.6",
-    "@strapi/typescript-utils": "4.12.6",
-    "@strapi/utils": "4.12.6",
+    "@strapi/permissions": "4.12.7",
+    "@strapi/provider-audit-logs-local": "4.12.7",
+    "@strapi/typescript-utils": "4.12.7",
+    "@strapi/utils": "4.12.7",
     "axios": "1.4.0",
     "bcryptjs": "2.4.3",
     "browserslist": "^4.17.3",
@@ -154,5 +154,5 @@
       }
     }
   },
-  "gitHead": "9bb6ba1e0d07c65423e99075438262540a042d76"
+  "gitHead": "fefc4a24acc60a59c00049e67a99ec1069be2add"
 }

package/admin/src/components/AuthenticatedApp.js

@@ -1,229 +0,0 @@
-import * as React from 'react';
-
-import {
-  AppInfoProvider,
-  auth,
-  LoadingIndicatorPage,
-  useFetchClient,
-  useGuidedTour,
-  useNotification,
-  useStrapiApp,
-} from '@strapi/helper-plugin';
-import { useQueries } from 'react-query';
-import { valid, lt } from 'semver';
-
-import packageJSON from '../../../package.json';
-import { useConfigurations } from '../hooks';
-import { Admin } from '../pages/Admin';
-import { getFullName } from '../utils/getFullName';
-import { hashAdminUserEmail } from '../utils/uniqueAdminHash';
-
-import RBACProvider from './RBACProvider';
-
-const strapiVersion = packageJSON.version;
-
-const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
-  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
-    return false;
-  }
-
-  return lt(currentPackageVersion, latestPublishedVersion);
-};
-
-export const AuthenticatedApp = () => {
-  const { setGuidedTourVisibility } = useGuidedTour();
-  const toggleNotification = useNotification();
-  const userInfo = auth.getUserInfo();
-  const { get } = useFetchClient();
-  // TODO: replace with getDisplayName()
-  const [userDisplayName, setUserDisplayName] = React.useState(
-    userInfo?.userName ?? getFullName(userInfo.firstname, userInfo.lastname)
-  );
-  const [userId, setUserId] = React.useState(null);
-  const { showReleaseNotification } = useConfigurations();
-  const { plugins: appPlugins = {} } = useStrapiApp();
-  const [plugins, setPlugins] = React.useState(appPlugins);
-  const [
-    { data: appInfos, isLoading: isLoadingAppInfos },
-    { data: tagName },
-    { data: permissions, isLoading: isLoadingPermissions, refetch },
-    { data: userRoles },
-  ] = useQueries([
-    {
-      queryKey: 'information',
-      async queryFn() {
-        const {
-          data: { data },
-        } = await get('/admin/information');
-
-        return data;
-      },
-    },
-
-    {
-      queryKey: 'strapi-release',
-      async queryFn() {
-        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();
-
-        return tag_name;
-      },
-      enabled: showReleaseNotification,
-      initialData: strapiVersion,
-      onSuccess(data) {
-        const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, data.tag_name);
-
-        if (shouldUpdateStrapi && !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'))) {
-          toggleNotification({
-            type: 'info',
-            message: { id: 'notification.version.update.message' },
-            link: {
-              url: `https://github.com/strapi/strapi/releases/tag/${data.tag_name}`,
-              label: {
-                id: 'global.see-more',
-              },
-            },
-            blockTransition: true,
-            onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
-          });
-        }
-      },
-      retry: false,
-    },
-    {
-      queryKey: ['users', 'me', 'permissions'],
-      async queryFn() {
-        const {
-          data: { data },
-        } = await get('/admin/users/me/permissions');
-
-        return data;
-      },
-      initialData: [],
-    },
-
-    {
-      queryKey: ['users', 'me'],
-      async queryFn() {
-        const {
-          data: {
-            data: { roles },
-          },
-        } = await get('/admin/users/me');
-
-        return roles;
-      },
-    },
-  ]);
-
-  // Display the guided tour conditionally for super admins in development mode
-  React.useEffect(() => {
-    if (userRoles) {
-      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
-
-      if (isUserSuperAdmin && appInfos?.currentEnvironment === 'development') {
-        setGuidedTourVisibility(true);
-      }
-    }
-  }, [userRoles, appInfos, setGuidedTourVisibility]);
-
-  // Create a hash of the users email adress and use it as ID for tracking
-  React.useEffect(() => {
-    const generateUserId = async (userInfo) => {
-      const userId = await hashAdminUserEmail(userInfo);
-      setUserId(userId);
-    };
-
-    if (userInfo) {
-      generateUserId(userInfo);
-    }
-  }, [userInfo]);
-
-  /**
-   *
-   * 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.
-   *
-   */
-
-  const hasApluginNotReady = Object.values(plugins).some((plugin) => plugin.isReady === false);
-
-  if (
-    !userDisplayName ||
-    !userId ||
-    isLoadingAppInfos ||
-    isLoadingPermissions ||
-    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={(pluginId) => {
-              setPlugins((prev) => ({
-                ...prev,
-                [pluginId]: {
-                  ...prev[pluginId],
-                  isReady: true,
-                },
-              }));
-            }}
-          />
-        );
-      }
-
-      return acc;
-    }, []);
-
-    return (
-      <>
-        {initializers}
-        <LoadingIndicatorPage />
-      </>
-    );
-  }
-
-  return (
-    <AppInfoProvider
-      {...appInfos}
-      userId={userId}
-      latestStrapiReleaseTag={tagName}
-      // TODO: setUserDisplayName should not exist and be removed, as it is only used
-      // to update the displayName immediately, in case a user updates their profile.
-      // This information should be derived from the state.
-      setUserDisplayName={setUserDisplayName}
-      shouldUpdateStrapi={checkLatestStrapiVersion(strapiVersion, tagName)}
-      userDisplayName={userDisplayName}
-    >
-      <RBACProvider permissions={permissions} refetchPermissions={refetch}>
-        <Admin />
-      </RBACProvider>
-    </AppInfoProvider>
-  );
-};

package/admin/src/pages/UseCasePage.js

@@ -1,174 +0,0 @@
-import * as React from 'react';
-
-import {
-  Button,
-  Flex,
-  Main,
-  Option,
-  Select,
-  TextButton,
-  TextInput,
-  Typography,
-} from '@strapi/design-system';
-import { auth, useNotification } from '@strapi/helper-plugin';
-import { parse } from 'qs';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-
-import Logo from '../components/UnauthenticatedLogo';
-import UnauthenticatedLayout, { LayoutContent } from '../layouts/UnauthenticatedLayout';
-
-export const options = [
-  {
-    intlLabel: {
-      id: 'Usecase.front-end',
-      defaultMessage: 'Front-end developer',
-    },
-    value: 'front_end_developer',
-  },
-  {
-    intlLabel: {
-      id: 'Usecase.back-end',
-      defaultMessage: 'Back-end developer',
-    },
-    value: 'back_end_developer',
-  },
-  {
-    intlLabel: {
-      id: 'Usecase.full-stack',
-      defaultMessage: 'Full-stack developer',
-    },
-    value: 'full_stack_developer',
-  },
-  {
-    intlLabel: {
-      id: 'global.content-manager',
-      defaultMessage: 'Content Manager',
-    },
-    value: 'content_manager',
-  },
-  {
-    intlLabel: {
-      id: 'Usecase.content-creator',
-      defaultMessage: 'Content Creator',
-    },
-    value: 'content_creator',
-  },
-  {
-    intlLabel: {
-      id: 'Usecase.other',
-      defaultMessage: 'Other',
-    },
-    value: 'other',
-  },
-];
-
-export const UseCasePage = () => {
-  const toggleNotification = useNotification();
-  const { push, location } = useHistory();
-  const { formatMessage } = useIntl();
-  const [role, setRole] = React.useState();
-  const [otherRole, setOtherRole] = React.useState('');
-
-  const { firstname, email } = auth.getUserInfo();
-  const { hasAdmin } = parse(location?.search, { ignoreQueryPrefix: true });
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-
-    const shouldSkip = event.nativeEvent?.submitter?.name === 'skip';
-
-    await fetch('https://analytics.strapi.io/register', {
-      body: JSON.stringify({
-        email,
-        username: firstname,
-        firstAdmin: Boolean(!hasAdmin),
-        persona: {
-          role: shouldSkip ? undefined : role,
-          otherRole: shouldSkip ? undefined : otherRole,
-        },
-      }),
-
-      headers: {
-        'Content-Type': 'application/json',
-      },
-
-      method: 'POST',
-    });
-
-    toggleNotification({
-      type: 'success',
-      message: {
-        id: 'Usecase.notification.success.project-created',
-        defaultMessage: 'Project has been successfully created',
-      },
-    });
-
-    push('/');
-  };
-
-  return (
-    <UnauthenticatedLayout>
-      <Main labelledBy="usecase-title">
-        <form onSubmit={handleSubmit}>
-          <LayoutContent>
-            <Flex direction="column" alignItems="stretch" gap={7}>
-              <Flex direction="column" gap={6}>
-                <Logo />
-
-                <Typography textAlign="center" variant="alpha" as="h1" id="usecase-title">
-                  {formatMessage({
-                    id: 'Usecase.title',
-                    defaultMessage: 'Tell us a bit more about yourself',
-                  })}
-                </Typography>
-              </Flex>
-
-              <Flex direction="column" alignItems="stretch" gap={6}>
-                <Select
-                  id="usecase"
-                  data-testid="usecase"
-                  label={formatMessage({
-                    id: 'Usecase.input.work-type',
-                    defaultMessage: 'What type of work do you do?',
-                  })}
-                  onChange={setRole}
-                  value={role}
-                >
-                  {options.map(({ intlLabel, value }) => (
-                    <Option key={value} value={value}>
-                      {formatMessage(intlLabel)}
-                    </Option>
-                  ))}
-                </Select>
-
-                {role === 'other' && (
-                  <TextInput
-                    name="other"
-                    label={formatMessage({ id: 'Usecase.other', defaultMessage: 'Other' })}
-                    value={otherRole}
-                    onChange={(e) => setOtherRole(e.target.value)}
-                    data-testid="other"
-                  />
-                )}
-
-                <Button type="submit" size="L" fullWidth disabled={!role}>
-                  {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
-                </Button>
-              </Flex>
-            </Flex>
-          </LayoutContent>
-
-          <Flex justifyContent="center" paddingTop={4}>
-            <TextButton type="submit" name="skip">
-              {formatMessage({
-                id: 'Usecase.button.skip',
-                defaultMessage: 'Skip this question',
-              })}
-            </TextButton>
-          </Flex>
-        </form>
-      </Main>
-    </UnauthenticatedLayout>
-  );
-};