@strapi/admin 4.11.2 → 4.11.4

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -9,6 +9,7 @@ import {
   HeaderLayout,
   Layout,
   Link,
+  Loader,
   Main,
   Typography,
 } from '@strapi/design-system';
@@ -24,9 +25,10 @@ import { Check, ExternalLink } from '@strapi/icons';
 import AdminSeatInfo from 'ee_else_ce/pages/SettingsPage/pages/ApplicationInfosPage/components/AdminSeatInfo';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
 
 import { useConfigurations } from '../../../../hooks';
-import adminPermissions from '../../../../permissions';
+import { selectAdminPermissions } from '../../../App/selectors';
 
 import CustomizationInfos from './components/CustomizationInfos';
 import { fetchProjectSettings, postProjectSettings } from './utils/api';
@@ -39,16 +41,24 @@ const ApplicationInfosPage = () => {
   const { formatMessage } = useIntl();
   const queryClient = useQueryClient();
   useFocusWhenNavigate();
-  const appInfos = useAppInfo();
-  const { latestStrapiReleaseTag, shouldUpdateStrapi, strapiVersion } = appInfos;
+  const {
+    communityEdition,
+    latestStrapiReleaseTag,
+    nodeVersion,
+    shouldUpdateStrapi,
+    strapiVersion,
+  } = useAppInfo();
   const { updateProjectSettings } = useConfigurations();
+  const permissions = useSelector(selectAdminPermissions);
 
   const {
     allowedActions: { canRead, canUpdate },
-  } = useRBAC(adminPermissions.settings['project-settings']);
+  } = useRBAC(permissions.settings['project-settings']);
   const canSubmit = canRead && canUpdate;
 
-  const { data } = useQuery('project-settings', fetchProjectSettings, { enabled: canRead });
+  const { data, isLoading } = useQuery('project-settings', fetchProjectSettings, {
+    enabled: canRead,
+  });
 
   const submitMutation = useMutation((body) => postProjectSettings(body), {
     async onSuccess({ menuLogo, authLogo }) {
@@ -97,121 +107,134 @@ const ApplicationInfosPage = () => {
 
   return (
     <Layout>
+      {/* TODO: Add missing translation */}
       <SettingsPageTitle name="Application" />
       <Main>
-        <form onSubmit={handleSubmit}>
-          <HeaderLayout
-            title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Overview' })}
-            subtitle={formatMessage({
-              id: 'Settings.application.description',
-              defaultMessage: 'Administration panel’s global information',
+        {isLoading ? (
+          <Loader>
+            {formatMessage({
+              id: 'Settings.application.isLoading',
+              defaultMessage: 'Loading',
             })}
-            primaryAction={
-              canSubmit && (
-                <Button type="submit" startIcon={<Check />}>
-                  {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
-                </Button>
-              )
-            }
-          />
-          <ContentLayout>
-            <Flex direction="column" alignItems="stretch" gap={6}>
-              <Flex
-                direction="column"
-                alignItems="stretch"
-                gap={4}
-                hasRadius
-                background="neutral0"
-                shadow="tableShadow"
-                paddingTop={6}
-                paddingBottom={6}
-                paddingRight={7}
-                paddingLeft={7}
-              >
-                <Typography variant="delta" as="h3">
-                  {formatMessage({
-                    id: 'global.details',
-                    defaultMessage: 'Details',
-                  })}
-                </Typography>
-
-                <Grid gap={5} as="dl">
-                  <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600" as="dt">
-                      {formatMessage({
-                        id: 'Settings.application.strapiVersion',
-                        defaultMessage: 'strapi version',
-                      })}
-                    </Typography>
-                    <Flex gap={3} direction="column" alignItems="start" as="dd">
-                      <Typography>v{strapiVersion}</Typography>
-                      {shouldUpdateStrapi && (
+          </Loader>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <HeaderLayout
+              title={formatMessage({
+                id: 'Settings.application.title',
+                defaultMessage: 'Overview',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.application.description',
+                defaultMessage: 'Administration panel’s global information',
+              })}
+              primaryAction={
+                canSubmit && (
+                  <Button type="submit" startIcon={<Check />}>
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+                  </Button>
+                )
+              }
+            />
+            <ContentLayout>
+              <Flex direction="column" alignItems="stretch" gap={6}>
+                <Flex
+                  direction="column"
+                  alignItems="stretch"
+                  gap={4}
+                  hasRadius
+                  background="neutral0"
+                  shadow="tableShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingRight={7}
+                  paddingLeft={7}
+                >
+                  <Typography variant="delta" as="h3">
+                    {formatMessage({
+                      id: 'global.details',
+                      defaultMessage: 'Details',
+                    })}
+                  </Typography>
+
+                  <Grid gap={5} as="dl">
+                    <GridItem col={6} s={12}>
+                      <Typography variant="sigma" textColor="neutral600" as="dt">
+                        {formatMessage({
+                          id: 'Settings.application.strapiVersion',
+                          defaultMessage: 'strapi version',
+                        })}
+                      </Typography>
+                      <Flex gap={3} direction="column" alignItems="start" as="dd">
+                        <Typography>v{strapiVersion}</Typography>
+                        {shouldUpdateStrapi && (
+                          <Link
+                            href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                            isExternal
+                            endIcon={<ExternalLink />}
+                          >
+                            {formatMessage({
+                              id: 'Settings.application.link-upgrade',
+                              defaultMessage: 'Upgrade your admin panel',
+                            })}
+                          </Link>
+                        )}
+                      </Flex>
+                    </GridItem>
+                    <GridItem col={6} s={12}>
+                      <Typography variant="sigma" textColor="neutral600" as="dt">
+                        {formatMessage({
+                          id: 'Settings.application.edition-title',
+                          defaultMessage: 'current plan',
+                        })}
+                      </Typography>
+                      <Flex gap={3} direction="column" alignItems="start" as="dd">
+                        <Typography>
+                          {formatMessage(
+                            {
+                              id: 'Settings.application.ee-or-ce',
+                              defaultMessage:
+                                '{communityEdition, select, true {Community Edition} other {Enterprise Edition}}',
+                            },
+                            { communityEdition }
+                          )}
+                        </Typography>
                         <Link
-                          href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                          href="https://strapi.io/pricing-self-hosted"
                           isExternal
                           endIcon={<ExternalLink />}
                         >
                           {formatMessage({
-                            id: 'Settings.application.link-upgrade',
-                            defaultMessage: 'Upgrade your admin panel',
+                            id: 'Settings.application.link-pricing',
+                            defaultMessage: 'See all pricing plans',
                           })}
                         </Link>
-                      )}
-                    </Flex>
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600" as="dt">
-                      {formatMessage({
-                        id: 'Settings.application.edition-title',
-                        defaultMessage: 'current plan',
-                      })}
-                    </Typography>
-                    <Flex gap={3} direction="column" alignItems="start" as="dd">
-                      <Typography>
-                        {formatMessage(
-                          {
-                            id: 'Settings.application.ee-or-ce',
-                            defaultMessage:
-                              '{communityEdition, select, true {Community Edition} other {Enterprise Edition}}',
-                          },
-                          { communityEdition: appInfos.communityEdition }
-                        )}
-                      </Typography>
-                      <Link
-                        href="https://strapi.io/pricing-self-hosted"
-                        isExternal
-                        endIcon={<ExternalLink />}
-                      >
+                      </Flex>
+                    </GridItem>
+
+                    <GridItem col={6} s={12}>
+                      <Typography variant="sigma" textColor="neutral600" as="dt">
                         {formatMessage({
-                          id: 'Settings.application.link-pricing',
-                          defaultMessage: 'See all pricing plans',
+                          id: 'Settings.application.node-version',
+                          defaultMessage: 'node version',
                         })}
-                      </Link>
-                    </Flex>
-                  </GridItem>
-
-                  <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600" as="dt">
-                      {formatMessage({
-                        id: 'Settings.application.node-version',
-                        defaultMessage: 'node version',
-                      })}
-                    </Typography>
-                    <Typography as="dd">{appInfos.nodeVersion}</Typography>
-                  </GridItem>
-                  <AdminSeatInfo />
-                </Grid>
+                      </Typography>
+                      <Typography as="dd">{nodeVersion}</Typography>
+                    </GridItem>
+                    <AdminSeatInfo />
+                  </Grid>
+                </Flex>
+                {canRead && data && (
+                  <CustomizationInfos
+                    canUpdate={canUpdate}
+                    ref={inputsRef}
+                    projectSettingsStored={data}
+                  />
+                )}
               </Flex>
-              {canRead && data && (
-                <CustomizationInfos
-                  canUpdate={canUpdate}
-                  ref={inputsRef}
-                  projectSettingsStored={data}
-                />
-              )}
-            </Flex>
-          </ContentLayout>
-        </form>
+            </ContentLayout>
+          </form>
+        )}
       </Main>
     </Layout>
   );

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -30,11 +30,12 @@ import { Formik } from 'formik';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useFetchPermissionsLayout, useFetchRole } from '../../../../../hooks';
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import Permissions from '../EditPage/components/Permissions';
 
 import schema from './utils/schema';
@@ -61,7 +62,6 @@ const CreatePage = () => {
   const id = get(params, 'params.id', null);
   const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
   const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
-
   const { post, put } = useFetchClient();
 
   const handleCreateRoleSubmit = (data) => {
@@ -257,8 +257,10 @@ const CreatePage = () => {
 };
 
 export default function () {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings.roles.create}>
+    <CheckPagePermissions permissions={permissions.settings.roles.create}>
       <CreatePage />
     </CheckPagePermissions>
   );

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -31,10 +31,11 @@ import {
 import { Duplicate, Pencil, Plus, Trash } from '@strapi/icons';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { useRolesList } from '../../../../../hooks';
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 
 import EmptyRole from './components/EmptyRole';
 import BaseRoleRow from './components/RoleRow';
@@ -43,10 +44,11 @@ import reducer, { initialState } from './reducer';
 const useSortedRoles = () => {
   useFocusWhenNavigate();
   const { locale } = useIntl();
+  const permissions = useSelector(selectAdminPermissions);
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canCreate, canDelete, canRead, canUpdate },
-  } = useRBAC(adminPermissions.settings.roles);
+  } = useRBAC(permissions.settings.roles);
 
   const { getData, roles, isLoading } = useRolesList(false);
   const [{ query }] = useQueryParams();

package/admin/src/pages/SettingsPage/pages/Roles/ProtectedEditPage/index.js

@@ -1,23 +1,22 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { LoadingIndicatorPage, useRBAC } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import EditPage from '../EditPage';
 
 const ProtectedEditPage = () => {
-  const permissions = useMemo(() => {
-    return {
-      read: adminPermissions.settings.roles.read,
-      update: adminPermissions.settings.roles.update,
-    };
-  }, []);
+  const permissions = useSelector(selectAdminPermissions);
 
   const {
     isLoading,
     allowedActions: { canRead, canUpdate },
-  } = useRBAC(permissions);
+  } = useRBAC({
+    read: permissions.settings.roles.read,
+    update: permissions.settings.roles.update,
+  });
 
   if (isLoading) {
     return <LoadingIndicatorPage />;

package/admin/src/pages/SettingsPage/pages/Roles/ProtectedListPage/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import ListPage from '../ListPage';
 
-const ProtectedListPage = () => (
-  <CheckPagePermissions permissions={adminPermissions.settings.roles.main}>
-    <ListPage />
-  </CheckPagePermissions>
-);
+const ProtectedListPage = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
+  return (
+    <CheckPagePermissions permissions={permissions.settings.roles.main}>
+      <ListPage />
+    </CheckPagePermissions>
+  );
+};
 
 export default ProtectedListPage;

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js

@@ -16,10 +16,11 @@ import {
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import adminPermissions from '../../../../../permissions';
 import { formatAPIErrors } from '../../../../../utils';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';
 import TokenBox from '../../../components/Tokens/TokenBox';
@@ -46,9 +47,10 @@ const TransferTokenCreateView = () => {
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const { setCurrentStep } = useGuidedTour();
+  const permissions = useSelector(selectAdminPermissions);
   const {
     allowedActions: { canCreate, canUpdate, canRegenerate },
-  } = useRBAC(adminPermissions.settings['transfer-tokens']);
+  } = useRBAC(permissions.settings['transfer-tokens']);
   const {
     params: { id },
   } = useRouteMatch('/settings/transfer-tokens/:id');

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/index.js

@@ -17,9 +17,10 @@ import { Plus } from '@strapi/icons';
 import qs from 'qs';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import Table from '../../../components/Tokens/Table';
 
@@ -30,9 +31,10 @@ const TransferTokenListView = () => {
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
+  const permissions = useSelector(selectAdminPermissions);
   const {
     allowedActions: { canCreate, canDelete, canUpdate, canRead },
-  } = useRBAC(adminPermissions.settings['transfer-tokens']);
+  } = useRBAC(permissions.settings['transfer-tokens']);
   const { push } = useHistory();
   const { trackUsage } = useTracking();
 

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedCreateView/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import EditView from '../EditView';
 
 const ProtectedTransferTokenCreateView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].create}>
+    <CheckPagePermissions permissions={permissions.settings['transfer-tokens'].create}>
       <EditView />
     </CheckPagePermissions>
   );

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedEditView/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import EditView from '../EditView';
 
 const ProtectedTransferTokenCreateView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].read}>
+    <CheckPagePermissions permissions={permissions.settings['transfer-tokens'].read}>
       <EditView />
     </CheckPagePermissions>
   );

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedListView/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
-import adminPermissions from '../../../../../permissions';
+import { selectAdminPermissions } from '../../../../App/selectors';
 import ListView from '../ListView';
 
-const ProtectedTransferTokenListView = () => (
-  <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].main}>
-    <ListView />
-  </CheckPagePermissions>
-);
+const ProtectedTransferTokenListView = () => {
+  const permissions = useSelector(selectAdminPermissions);
+
+  return (
+    <CheckPagePermissions permissions={permissions.settings['transfer-tokens'].main}>
+      <ListView />
+    </CheckPagePermissions>
+  );
+};
 
 export default ProtectedTransferTokenListView;

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -183,13 +183,13 @@ const EditPage = ({ canUpdate }) => {
         validateOnChange={false}
         validationSchema={editValidation}
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
                 primaryAction={
                   <Button
-                    disabled={isSubmitting || !canUpdate}
+                    disabled={(isSubmitting || !canUpdate) ? true : !dirty}
                     startIcon={<Check />}
                     loading={isSubmitting}
                     type="submit"

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/{utils/layout.js → constants.js}

@@ -1,4 +1,16 @@
-const layout = [
+import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
+
+export const FORM_INITIAL_VALUES = {
+  firstname: '',
+  lastname: '',
+  email: '',
+  roles: [],
+};
+
+export const ROLE_LAYOUT = [];
+
+export const FORM_LAYOUT = [
   [
     {
       intlLabel: {
@@ -55,4 +67,25 @@ const layout = [
   ],
 ];
 
-export default layout;
+export const FORM_SCHEMA = yup.object().shape({
+  firstname: yup.string().trim().required(translatedErrors.required),
+  lastname: yup.string(),
+  email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
+  roles: yup.array().min(1, translatedErrors.required).required(translatedErrors.required),
+});
+
+export const STEPPER = {
+  create: {
+    buttonSubmitLabel: {
+      id: 'app.containers.Users.ModalForm.footer.button-success',
+      defaultMessage: 'Invite user',
+    },
+    isDisabled: false,
+    next: 'magic-link',
+  },
+  'magic-link': {
+    buttonSubmitLabel: { id: 'global.finish', defaultMessage: 'Finish' },
+    isDisabled: true,
+    next: null,
+  },
+};