@strapi/admin 4.11.1-beta.2 → 4.11.2

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

@@ -1,43 +1,45 @@
 import React from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import pick from 'lodash/pick';
-import get from 'lodash/get';
-import omit from 'lodash/omit';
+
+import {
+  Box,
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Main,
+  Typography,
+} from '@strapi/design-system';
 import {
+  auth,
   Form,
   GenericInput,
+  Link,
+  LoadingIndicatorPage,
   SettingsPageTitle,
-  auth,
   useAppInfo,
   useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
-  LoadingIndicatorPage,
-  Link,
 } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
-import {
-  Box,
-  Button,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  ContentLayout,
-  Typography,
-  Main,
-  Flex,
-} from '@strapi/design-system';
 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';
+import pick from 'lodash/pick';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useHistory, useRouteMatch } from 'react-router-dom';
 
+import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import { formatAPIErrors, getFullName } from '../../../../../utils';
+import SelectRoles from '../components/SelectRoles';
+import { editValidation } from '../utils/validations/users';
+
 import { putUser } from './utils/api';
 import layout from './utils/layout';
-import { editValidation } from '../utils/validations/users';
-import SelectRoles from '../components/SelectRoles';
-import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 
 const fieldsToPick = ['email', 'firstname', 'lastname', 'username', 'isActive', 'roles'];
 

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
+
 import { Button } from '@strapi/design-system';
 import { Envelop } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const CreateAction = ({ onClick }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -1,19 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import {
   BaseCheckbox,
   Box,
-  IconButton,
   Flex,
-  Typography,
+  IconButton,
   Tbody,
   Td,
   Tr,
+  Typography,
 } from '@strapi/design-system';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Pencil, Trash } from '@strapi/icons';
-import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { stopPropagation, onRowClick } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+
 import { getFullName } from '../../../../../../../utils';
 
 const TableRows = ({

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -1,35 +1,35 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
 import {
-  ModalLayout,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  Grid,
-  GridItem,
-  Breadcrumbs,
-  Crumb,
   Box,
   Button,
   Flex,
+  Grid,
+  GridItem,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
   Typography,
 } from '@strapi/design-system';
-import { Formik } from 'formik';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
 import {
   Form,
   GenericInput,
+  useFetchClient,
   useNotification,
   useOverlayBlocker,
-  useFetchClient,
 } from '@strapi/helper-plugin';
-import { useMutation } from 'react-query';
-
+import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import formDataModel from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/formDataModel';
 import roleSettingsForm from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
-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 SelectRoles from '../../components/SelectRoles';
+
 import layout from './utils/layout';
 import schema from './utils/schema';
 import stepper from './utils/stepper';
@@ -113,8 +113,11 @@ const ModalForm = ({ onSuccess, onToggle }) => {
   return (
     <ModalLayout onClose={onToggle} labelledBy="title">
       <ModalHeader>
+        {/**
+         * TODO: this is not semantically correct and should be amended.
+         */}
         <Breadcrumbs label={headerTitle}>
-          <Crumb>{headerTitle}</Crumb>
+          <Crumb isCurrent>{headerTitle}</Crumb>
         </Breadcrumbs>
       </ModalHeader>
       <Formik

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/schema.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 const schema = yup.object().shape({
   firstname: yup.string().trim().required(translatedErrors.required),

package/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { Box, Flex } from '@strapi/design-system';
-import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+import { PageSizeURLQuery, PaginationURLQuery } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
 
 const PaginationFooter = ({ pagination }) => {
   return (

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

@@ -1,27 +1,29 @@
 import React, { useState } from 'react';
-import qs from 'qs';
+
+import { ActionLayout, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import {
   DynamicTable,
+  NoPermissions,
   SearchURLQuery,
   SettingsPageTitle,
-  useRBAC,
-  useNotification,
-  useFocusWhenNavigate,
-  NoPermissions,
   useAPIErrorHandler,
   useFetchClient,
+  useFocusWhenNavigate,
+  useNotification,
+  useRBAC,
 } from '@strapi/helper-plugin';
-import { ActionLayout, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
-import { useLocation } from 'react-router-dom';
+import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+import CreateAction from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/CreateAction';
+import qs from 'qs';
 import { useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
-import CreateAction from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/CreateAction';
-import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+import { useLocation } from 'react-router-dom';
 
 import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import adminPermissions from '../../../../../permissions';
-import TableRows from './DynamicTable/TableRows';
 import Filters from '../../../components/Filters';
+
+import TableRows from './DynamicTable/TableRows';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
 import displayedFilters from './utils/displayedFilters';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Flex, Typography } from '@strapi/design-system';
 import { Status } from '@strapi/helper-plugin';
 

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
-import { useRBAC, LoadingIndicatorPage, useNotification } from '@strapi/helper-plugin';
+
+import { LoadingIndicatorPage, useNotification, useRBAC } from '@strapi/helper-plugin';
 import { Redirect, useLocation } from 'react-router-dom';
 
 import adminPermissions from '../../../../../permissions';

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+
 import adminPermissions from '../../../../../permissions';
 import ListPage from '../ListPage';
 

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { IconButton } from '@strapi/design-system';
-import { useNotification, ContentBox, useClipboard } from '@strapi/helper-plugin';
+import { ContentBox, useClipboard, useNotification } from '@strapi/helper-plugin';
 import { Duplicate } from '@strapi/icons';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 const MagicLinkWrapper = ({ children, target }) => {

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import basename from '../../../../../../core/utils/basename';
+
 import MagicLinkWrapper from './MagicLinkWrapper';
 
 const MagicLink = ({ registrationToken }) => {

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
+
+import { Option, Select } from '@strapi/design-system';
+import { getFetchClient } from '@strapi/helper-plugin';
+import { Loader as LoadingIcon } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
-import { Loader as LoadingIcon } from '@strapi/icons';
-import { getFetchClient } from '@strapi/helper-plugin';
 
 const rotation = keyframes`
   from {

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/edit.js

@@ -1,4 +1,5 @@
 import * as yup from 'yup';
+
 import { commonUserSchema } from './profile';
 import rolesValidation from './roles';
 

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/profile.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 export const commonUserSchema = {
   firstname: yup.string().trim().required(translatedErrors.required),

package/admin/src/pages/SettingsPage/pages/Users/utils/validations/users/roles.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 const schema = {
   roles: yup.array().min(1, translatedErrors.required).required(translatedErrors.required),

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/Events/index.js

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 
-import { useFormikContext } from 'formik';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 import {
-  FieldLabel,
-  Flex,
-  Typography,
   BaseCheckbox,
   Checkbox,
+  FieldLabel,
+  Flex,
   Loader,
   RawTable as Table,
-  RawTh as Th,
+  RawTbody as Tbody,
   RawTd as Td,
-  RawTr as Tr,
+  RawTh as Th,
   RawThead as Thead,
-  RawTbody as Tbody,
+  RawTr as Tr,
+  Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
+import { useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import { useContentTypes } from '../../../../../../../hooks/useContentTypes';
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useFormikContext } from 'formik';
+import React, { useEffect, useState } from 'react';
+
 import { ComboboxOption, CreatableCombobox } from '@strapi/design-system';
+import { useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
 
 const HTTP_HEADERS = [
   'A-IM',

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
-import { RemoveRoundedButton } from '@strapi/helper-plugin';
-import { Plus } from '@strapi/icons';
+
 import {
   Box,
   FieldLabel,
+  Flex,
   Grid,
   GridItem,
-  Flex,
-  TextInput,
   TextButton,
+  TextInput,
 } from '@strapi/design-system';
+import { RemoveRoundedButton } from '@strapi/helper-plugin';
+import { Plus } from '@strapi/icons';
 import { Field, FieldArray, useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
+
 import Combobox from './Combobox';
 
 const HeadersInput = () => {

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
+
+import { Box, Flex, Grid, GridItem, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Check, Cross, Loader } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Check, Cross, Loader } from '@strapi/icons';
-import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -1,25 +1,27 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Field, FormikProvider, useFormik } from 'formik';
-import { useIntl } from 'react-intl';
-import { Form, Link } from '@strapi/helper-plugin';
-import { ArrowLeft, Check, Play as Publish } from '@strapi/icons';
+
 import {
-  Grid,
-  GridItem,
+  Box,
   Button,
+  ContentLayout,
   Flex,
-  TextInput,
+  Grid,
+  GridItem,
   HeaderLayout,
-  ContentLayout,
-  Box,
+  TextInput,
 } from '@strapi/design-system';
-
+import { Form, Link } from '@strapi/helper-plugin';
+import { ArrowLeft, Check, Play as Publish } from '@strapi/icons';
 import EventTable from 'ee_else_ce/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable';
-import { makeWebhookValidationSchema } from './utils/makeWebhookValidationSchema';
+import { Field, FormikProvider, useFormik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import HeadersInput from '../HeadersInput';
 import TriggerContainer from '../TriggerContainer';
 
+import { makeWebhookValidationSchema } from './utils/makeWebhookValidationSchema';
+
 const WebhookForm = ({
   handleSubmit,
   triggerWebhook,
@@ -51,7 +53,12 @@ const WebhookForm = ({
       headers: mapHeaders(data?.headers || {}),
       events: data?.events || [],
     },
-    onSubmit: handleSubmit,
+    onSubmit(values, { resetForm, setSubmitting }) {
+      handleSubmit(values);
+
+      resetForm({ values });
+      setSubmitting(false);
+    },
     validationSchema: makeWebhookValidationSchema({ formatMessage }),
     validateOnChange: false,
     validateOnBlur: false,

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/utils/makeWebhookValidationSchema.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
 const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;

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

@@ -1,15 +1,18 @@
 import * as React from 'react';
+
+import { Main } from '@strapi/design-system';
 import {
   LoadingIndicatorPage,
   SettingsPageTitle,
-  useNotification,
-  useFetchClient,
   useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+
 import { useContentTypes } from '../../../../../hooks/useContentTypes';
+
 import WebhookForm from './components/WebhookForm';
 
 const cleanData = (data) => ({

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

@@ -1,47 +1,48 @@
 /* eslint-disable no-nested-ternary */
-import React, { useState, useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { useIntl } from 'react-intl';
-import { useQuery, useMutation } from 'react-query';
+import React, { useEffect, useState } from 'react';
 
 import {
-  useFetchClient,
-  useRBAC,
-  LoadingIndicatorPage,
-  useNotification,
-  useFocusWhenNavigate,
-  SettingsPageTitle,
-  ConfirmDialog,
-  onRowClick,
-  stopPropagation,
-  LinkButton,
-  useAPIErrorHandler,
-} from '@strapi/helper-plugin';
-import {
-  HeaderLayout,
-  Layout,
-  ContentLayout,
   ActionLayout,
+  BaseCheckbox,
+  Box,
+  Button,
+  ContentLayout,
   EmptyStateLayout,
   Flex,
+  HeaderLayout,
   IconButton,
-  BaseCheckbox,
+  Layout,
+  Main,
+  Switch,
   Table,
-  Thead,
-  Tr,
-  Th,
   Tbody,
   Td,
   TFooter,
+  Th,
+  Thead,
+  Tr,
   Typography,
-  Button,
-  Switch,
-  Main,
   useNotifyAT,
-  Box,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Plus, Pencil, Trash, EmptyDocuments } from '@strapi/icons';
+import {
+  ConfirmDialog,
+  LinkButton,
+  LoadingIndicatorPage,
+  onRowClick,
+  SettingsPageTitle,
+  stopPropagation,
+  useAPIErrorHandler,
+  useFetchClient,
+  useFocusWhenNavigate,
+  useNotification,
+  useRBAC,
+} from '@strapi/helper-plugin';
+import { EmptyDocuments, Pencil, Plus, Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from 'react-query';
+import { useHistory, useLocation } from 'react-router-dom';
+
 import adminPermissions from '../../../../../permissions';
 
 const ListView = () => {

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+
 import adminPermissions from '../../../../../permissions';
 import EditView from '../EditView';
 

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+
 import adminPermissions from '../../../../../permissions';
 import EditView from '../EditView';
 

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { CheckPagePermissions } from '@strapi/helper-plugin';
+
 import adminPermissions from '../../../../../permissions';
 import ListView from '../ListView';
 

package/admin/src/pages/SettingsPage/utils/createSectionsRoutes.js

@@ -1,4 +1,5 @@
 import flatMap from 'lodash/flatMap';
+
 import { createRoute } from '../../../utils';
 
 const createSectionsRoutes = (settings) => {

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

@@ -1,4 +1,2 @@
 export { default as createSectionsRoutes } from './createSectionsRoutes';
 export { default as getSectionsToDisplay } from './getSectionsToDisplay';
-
-export { default as routes } from './routes';

package/admin/src/pages/UseCasePage/index.js

@@ -1,20 +1,22 @@
 import React, { useState } from 'react';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-import { parse } from 'qs';
-import { pxToRem, useFetchClient, useNotification, auth } from '@strapi/helper-plugin';
+
 import {
-  Main,
-  Flex,
   Box,
-  Typography,
-  Select,
+  Button,
+  Flex,
+  Main,
   Option,
-  TextInput,
+  Select,
   TextButton,
-  Button,
+  TextInput,
+  Typography,
 } from '@strapi/design-system';
+import { auth, pxToRem, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { parse } from 'qs';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
 import Logo from '../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../layouts/UnauthenticatedLayout';
 

package/admin/src/permissions/index.js

@@ -1,5 +1,6 @@
-import merge from 'lodash/merge';
 import customPermissions from 'ee_else_ce/permissions/customPermissions';
+import merge from 'lodash/merge';
+
 import defaultPermissions from './defaultPermissions';
 
 const permissions = merge(defaultPermissions, customPermissions);