Chore: Refactor MagicLink to new useEnterprise hook

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -24,7 +24,6 @@ import {
   useOverlayBlocker,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
-import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { Formik } from 'formik';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
@@ -34,7 +33,9 @@ import { useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
+import { useEnterprise } from '../../../../../hooks/useEnterprise';
 import { formatAPIErrors, getFullName } from '../../../../../utils';
+import { MagicLinkCE } from '../components/MagicLink';
 import SelectRoles from '../components/SelectRoles';
 import { editValidation } from '../utils/validations/users';
 
@@ -52,11 +53,21 @@ const EditPage = ({ canUpdate }) => {
   const { setUserDisplayName } = useAppInfo();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
+  const MagicLink = useEnterprise(
+    MagicLinkCE,
+    async () =>
+      (
+        await import(
+          '../../../../../../../ee/admin/pages/SettingsPage/pages/Users/components/MagicLink'
+        )
+      ).MagicLinkEE
+  );
+
   useFocusWhenNavigate();
 
   const {
     users: [user],
-    isLoading,
+    isLoading: isLoadingAdminUsers,
   } = useAdminUsers(
     { id },
     {
@@ -125,6 +136,8 @@ const EditPage = ({ canUpdate }) => {
     unlockApp();
   };
 
+  const isLoading = isLoadingAdminUsers || !MagicLink;
+
   const headerLabel = isLoading
     ? { id: 'app.containers.Users.EditPage.header.label-loading', defaultMessage: 'Edit user' }
     : { id: 'app.containers.Users.EditPage.header.label', defaultMessage: 'Edit {name}' };
@@ -189,7 +202,7 @@ const EditPage = ({ canUpdate }) => {
               <HeaderLayout
                 primaryAction={
                   <Button
-                    disabled={(isSubmitting || !canUpdate) ? true : !dirty}
+                    disabled={isSubmitting || !canUpdate ? true : !dirty}
                     startIcon={<Check />}
                     loading={isSubmitting}
                     type="submit"

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -20,13 +20,13 @@ import {
   useNotification,
   useOverlayBlocker,
 } from '@strapi/helper-plugin';
-import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 
 import { useEnterprise } from '../../../../../../hooks/useEnterprise';
+import { MagicLinkCE } from '../../components/MagicLink';
 import SelectRoles from '../../components/SelectRoles';
 
 import { FORM_LAYOUT, FORM_SCHEMA, FORM_INITIAL_VALUES, ROLE_LAYOUT, STEPPER } from './constants';
@@ -74,6 +74,15 @@ const ModalForm = ({ onSuccess, onToggle }) => {
       defaultValue: FORM_INITIAL_VALUES,
     }
   );
+  const MagicLink = useEnterprise(
+    MagicLinkCE,
+    async () =>
+      (
+        await import(
+          '../../../../../../../../ee/admin/pages/SettingsPage/pages/Users/components/MagicLink'
+        )
+      ).MagicLinkEE
+  );
   const postMutation = useMutation(
     (body) => {
       return post('/admin/users', body);
@@ -142,6 +151,11 @@ const ModalForm = ({ onSuccess, onToggle }) => {
       </Button>
     );
 
+  // block rendering until the EE component is fully loaded
+  if (!MagicLink) {
+    return null;
+  }
+
   return (
     <ModalLayout onClose={onToggle} labelledBy="title">
       <ModalHeader>

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/index.js

@@ -7,7 +7,7 @@ import basename from '../../../../../../core/utils/basename';
 
 import MagicLinkWrapper from './MagicLinkWrapper';
 
-const MagicLink = ({ registrationToken }) => {
+export const MagicLinkCE = ({ registrationToken }) => {
   const { formatMessage } = useIntl();
   const target = `${window.location.origin}${basename}auth/register?registrationToken=${registrationToken}`;
 
@@ -21,12 +21,10 @@ const MagicLink = ({ registrationToken }) => {
   );
 };
 
-MagicLink.defaultProps = {
+MagicLinkCE.defaultProps = {
   registrationToken: '',
 };
 
-MagicLink.propTypes = {
+MagicLinkCE.propTypes = {
   registrationToken: PropTypes.string,
 };
-
-export default MagicLink;

packages/core/admin/ee/admin/pages/SettingsPage/pages/Users/components/MagicLink/index.js

@@ -7,7 +7,7 @@ import basename from '../../../../../../../../admin/src/core/utils/basename';
 import MagicLinkWrapper from '../../../../../../../../admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper';
 
 // FIXME replace with parts compo when ready
-const MagicLink = ({ registrationToken }) => {
+export const MagicLinkEE = ({ registrationToken }) => {
   const { formatMessage } = useIntl();
 
   if (registrationToken) {
@@ -34,12 +34,10 @@ const MagicLink = ({ registrationToken }) => {
   );
 };
 
-MagicLink.defaultProps = {
+MagicLinkEE.defaultProps = {
   registrationToken: '',
 };
 
-MagicLink.propTypes = {
+MagicLinkEE.propTypes = {
   registrationToken: PropTypes.string,
 };
-
-export default MagicLink;