@strapi/admin 4.11.0-beta.1 → 4.11.0-exp.9xg4-3qfm-9w8f.1

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

@@ -48,29 +48,29 @@ const Providers = ({
   themes,
 }) => {
   return (
-    <LanguageProvider messages={messages} localeNames={localeNames}>
-      <ThemeToggleProvider themes={themes}>
-        <Theme>
-          <QueryClientProvider client={queryClient}>
-            <Provider store={store}>
-              <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-                <ConfigurationsProvider
-                  authLogo={authLogo}
-                  menuLogo={menuLogo}
-                  showReleaseNotification={showReleaseNotification}
-                  showTutorials={showTutorials}
+    <ThemeToggleProvider themes={themes}>
+      <Theme>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store}>
+            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+              <ConfigurationsProvider
+                authLogo={authLogo}
+                menuLogo={menuLogo}
+                showReleaseNotification={showReleaseNotification}
+                showTutorials={showTutorials}
+              >
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
                 >
-                  <StrapiAppProvider
-                    getPlugin={getPlugin}
-                    menu={menu}
-                    plugins={plugins}
-                    runHookParallel={runHookParallel}
-                    runHookWaterfall={runHookWaterfall}
-                    runHookSeries={runHookSeries}
-                    settings={settings}
-                  >
-                    <LibraryProvider components={components} fields={fields}>
-                      <CustomFieldsProvider customFields={customFields}>
+                  <LibraryProvider components={components} fields={fields}>
+                    <CustomFieldsProvider customFields={customFields}>
+                      <LanguageProvider messages={messages} localeNames={localeNames}>
                         <AutoReloadOverlayBlockerProvider>
                           <OverlayBlockerProvider>
                             <GuidedTour>
@@ -78,16 +78,16 @@ const Providers = ({
                             </GuidedTour>
                           </OverlayBlockerProvider>
                         </AutoReloadOverlayBlockerProvider>
-                      </CustomFieldsProvider>
-                    </LibraryProvider>
-                  </StrapiAppProvider>
-                </ConfigurationsProvider>
-              </AdminContext.Provider>
-            </Provider>
-          </QueryClientProvider>
-        </Theme>
-      </ThemeToggleProvider>
-    </LanguageProvider>
+                      </LanguageProvider>
+                    </CustomFieldsProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </ConfigurationsProvider>
+            </AdminContext.Provider>
+          </Provider>
+        </QueryClientProvider>
+      </Theme>
+    </ThemeToggleProvider>
   );
 };
 

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

@@ -1,19 +1,17 @@
 import React from 'react';
-import { DesignSystemProvider } from '@strapi/design-system';
+import { ThemeProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
 const Theme = ({ children }) => {
   const { currentTheme, themes } = useThemeToggle();
-  const { locale } = useIntl();
 
   return (
-    <DesignSystemProvider locale={locale} theme={themes[currentTheme] || themes.light}>
+    <ThemeProvider theme={themes[currentTheme] || themes.light}>
       {children}
       <GlobalStyle />
-    </DesignSystemProvider>
+    </ThemeProvider>
   );
 };
 

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
+import InjectionZoneList from '../../InjectionZoneList';
+import { getTrad } from '../../../utils';
+
+const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<ExclamationMarkCircle />}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
+          <Flex justifyContent="center">
+            <Typography id="confirm-description">
+              {formatMessage({
+                id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
+                defaultMessage: 'Are you sure you want to delete these entries?',
+              })}
+            </Typography>
+          </Flex>
+          <Flex>
+            <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+          </Flex>
+        </Flex>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={
+          <Button
+            onClick={onConfirm}
+            variant="danger-light"
+            startIcon={<Trash />}
+            id="confirm-delete"
+            loading={isConfirmButtonLoading}
+          >
+            {formatMessage({
+              id: 'app.components.Button.confirm',
+              defaultMessage: 'Confirm',
+            })}
+          </Button>
+        }
+      />
+    </Dialog>
+  );
+};
+
+ConfirmDialogDeleteAll.propTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+export default ConfirmDialogDeleteAll;

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -9,22 +9,19 @@ import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
 import TableRows from './TableRows';
+import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 import { PublicationState } from './CellContent/PublicationState/PublicationState';
-import BulkActionsBar from './BulkActionsBar';
 
 const DynamicTable = ({
   canCreate,
   canDelete,
-  canPublish,
   contentTypeName,
   action,
   isBulkable,
   isLoading,
   onConfirmDelete,
   onConfirmDeleteAll,
-  onConfirmPublishAll,
-  onConfirmUnpublishAll,
   layout,
   rows,
 }) => {
@@ -92,27 +89,17 @@ const DynamicTable = ({
 
   return (
     <Table
-      components={{ ConfirmDialogDelete }}
+      components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
       contentType={contentTypeName}
       action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
+      onConfirmDeleteAll={onConfirmDeleteAll}
       onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
-      withMainAction={(canDelete || canPublish) && isBulkable}
-      renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
-        <BulkActionsBar
-          showPublish={canPublish && hasDraftAndPublish}
-          showDelete={canDelete}
-          onConfirmDeleteAll={onConfirmDeleteAll}
-          onConfirmPublishAll={onConfirmPublishAll}
-          onConfirmUnpublishAll={onConfirmUnpublishAll}
-          selectedEntries={selectedEntries}
-          clearSelectedEntries={clearSelectedEntries}
-        />
-      )}
+      withMainAction={canDelete && isBulkable}
     >
       <TableRows
         canCreate={canCreate}
@@ -134,7 +121,6 @@ DynamicTable.defaultProps = {
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
-  canPublish: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
   action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,
@@ -153,8 +139,6 @@ DynamicTable.propTypes = {
   }).isRequired,
   onConfirmDelete: PropTypes.func.isRequired,
   onConfirmDeleteAll: PropTypes.func.isRequired,
-  onConfirmPublishAll: PropTypes.func.isRequired,
-  onConfirmUnpublishAll: PropTypes.func.isRequired,
   rows: PropTypes.array.isRequired,
 };
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -8,6 +8,7 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
+import { flushSync } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Main } from '@strapi/design-system';
@@ -21,13 +22,12 @@ import {
   getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
-import { createYupSchema, getTrad } from '../../utils';
+import { getTrad } from '../../utils';
 
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
 import reducer, { initialState } from './reducer';
-import { cleanData } from './utils';
-
+import { cleanData, createYupSchema } from './utils';
 import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
 import { usePrev } from '../../hooks';
 
@@ -55,6 +55,7 @@ const EditViewDataManagerProvider = ({
   status,
   updateActionAllowedFields,
 }) => {
+  const [isSaving, setIsSaving] = React.useState(false);
   /**
    * TODO: this should be moved into the global reducer
    * to match ever other reducer in the CM.
@@ -376,14 +377,20 @@ const EditViewDataManagerProvider = ({
       try {
         if (isEmpty(errors)) {
           const formData = createFormData(modifiedData, initialData);
+          flushSync(() => {
+            setIsSaving(true);
+          });
 
           if (isCreatingEntry) {
             await onPost(formData, trackerProperty);
           } else {
             await onPut(formData, trackerProperty);
           }
+
+          setIsSaving(false);
         }
       } catch (err) {
+        setIsSaving(false);
         errors = {
           ...errors,
           ...getAPIInnerErrors(err, { getTrad }),
@@ -445,9 +452,14 @@ const EditViewDataManagerProvider = ({
 
     try {
       if (isEmpty(errors)) {
+        flushSync(() => {
+          setIsSaving(true);
+        });
         await onPublish();
+        setIsSaving(false);
       }
     } catch (err) {
+      setIsSaving(false);
       errors = {
         ...errors,
         ...getAPIInnerErrors(err, { getTrad }),
@@ -639,10 +651,12 @@ const EditViewDataManagerProvider = ({
         </Main>
       ) : (
         <>
-          <Prompt
-            when={!isEqual(modifiedData, initialData)}
-            message={formatMessage({ id: 'global.prompt.unsaved' })}
-          />
+          {!isSaving ? (
+            <Prompt
+              when={!isEqual(modifiedData, initialData)}
+              message={formatMessage({ id: 'global.prompt.unsaved' })}
+            />
+          ) : null}
           <form noValidate onSubmit={handleSubmit}>
             {children}
           </form>

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/index.js

@@ -1,3 +1,4 @@
 export { default as moveFields } from './moveFields';
 export { default as cleanData } from './cleanData';
+export { default as createYupSchema } from './schema';
 export { findAllAndReplace } from './findAllAndReplace';

package/admin/src/content-manager/{utils → components/EditViewDataManagerProvider/utils}/schema.js

@@ -7,7 +7,7 @@ import toNumber from 'lodash/toNumber';
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
-import isFieldTypeNumber from './isFieldTypeNumber';
+import isFieldTypeNumber from '../../../utils/isFieldTypeNumber';
 
 yup.addMethod(yup.mixed, 'defined', function () {
   return this.test('defined', errorsTrads.required, (value) => value !== undefined);

package/admin/src/content-manager/components/Inputs/index.js

@@ -12,7 +12,14 @@ import Wysiwyg from '../Wysiwyg';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
-import { connect, generateOptions, getInputType, select, VALIDATIONS_TO_OMIT } from './utils';
+import {
+  connect,
+  generateOptions,
+  getInputType,
+  getStep,
+  select,
+  VALIDATIONS_TO_OMIT,
+} from './utils';
 
 function Inputs({
   allowedFields,
@@ -86,7 +93,9 @@ function Inputs({
     return value;
   }, [type, value]);
 
-  const step = getStep(type);
+  const step = useMemo(() => {
+    return getStep(type);
+  }, [type]);
 
   const isUserAllowedToEditField = useMemo(() => {
     const joinedName = fieldName.join('.');
@@ -175,9 +184,6 @@ function Inputs({
 
     let minutes;
 
-    /**
-     * Wtf is this?
-     */
     if (inputType === 'datetime') {
       minutes = parseInt(inputValue.substr(14, 2), 10);
     } else if (inputType === 'time') {
@@ -310,19 +316,6 @@ Inputs.propTypes = {
   customFieldInputs: PropTypes.object,
 };
 
-const getStep = (type) => {
-  switch (type) {
-    case 'float':
-    case 'decimal':
-      return 0.01;
-    case 'time':
-    case 'datetime':
-      return 15;
-    default:
-      return 1;
-  }
-};
-
 const Memoized = memo(Inputs, isEqual);
 
 export default connect(Memoized, select);

package/admin/src/content-manager/components/Inputs/utils/getStep.js

@@ -0,0 +1,13 @@
+const getStep = (type) => {
+  let step;
+
+  if (type === 'float' || type === 'decimal') {
+    step = 0.01;
+  } else {
+    step = 1;
+  }
+
+  return step;
+};
+
+export default getStep;

package/admin/src/content-manager/components/Inputs/utils/index.js

@@ -1,5 +1,6 @@
 export { default as connect } from './connect';
 export { default as generateOptions } from './generateOptions';
 export { default as getInputType } from './getInputType';
+export { default as getStep } from './getStep';
 export { default as select } from './select';
 export { default as VALIDATIONS_TO_OMIT } from './VALIDATIONS_TO_OMIT';

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

@@ -21,7 +21,6 @@ import {
   useTracking,
   Link,
   useAPIErrorHandler,
-  getYupInnerErrors,
 } from '@strapi/helper-plugin';
 
 import {
@@ -36,7 +35,6 @@ import {
 } from '@strapi/design-system';
 
 import { ArrowLeft, Plus, Cog } from '@strapi/icons';
-import { useMutation } from 'react-query';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -44,7 +42,7 @@ import { InjectionZone } from '../../../shared/components';
 
 import permissions from '../../../permissions';
 
-import { createYupSchema, getRequestUrl, getTrad } from '../../utils';
+import { getRequestUrl, getTrad } from '../../utils';
 
 import FieldPicker from './FieldPicker';
 import PaginationFooter from './PaginationFooter';
@@ -66,7 +64,6 @@ function ListView({
   canCreate,
   canDelete,
   canRead,
-  canPublish,
   data,
   getData,
   getDataSucceeded,
@@ -103,50 +100,6 @@ function ListView({
   const fetchClient = useFetchClient();
   const { post, del } = fetchClient;
 
-  const bulkPublishMutation = useMutation(
-    (data) =>
-      post(`/content-manager/collection-types/${contentType.uid}/actions/bulkPublish`, data),
-    {
-      onSuccess() {
-        toggleNotification({
-          type: 'success',
-          message: { id: 'content-manager.success.record.publish', defaultMessage: 'Published' },
-        });
-
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
-      },
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
-    }
-  );
-  const bulkUnpublishMutation = useMutation(
-    (data) =>
-      post(`/content-manager/collection-types/${contentType.uid}/actions/bulkUnpublish`, data),
-    {
-      onSuccess() {
-        toggleNotification({
-          type: 'success',
-          message: {
-            id: 'content-manager.success.record.unpublish',
-            defaultMessage: 'Unpublished',
-          },
-        });
-
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
-      },
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
-    }
-  );
-
   // FIXME
   // Using a ref to avoid requests being fired multiple times on slug on change
   // We need it because the hook as mulitple dependencies so it may run before the permissions have checked
@@ -246,70 +199,6 @@ function ListView({
     [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
-  /**
-   * @param {number[]} selectedEntries - Array of ids to publish
-   * @returns {{validIds: number[], errors: Object.<number, string>}} - Returns an object with the valid ids and the errors
-   */
-  const validateEntriesToPublish = async (selectedEntries) => {
-    const validations = { validIds: [], errors: {} };
-    // Create the validation schema based on the contentType
-    const schema = createYupSchema(
-      contentType,
-      { components: layout.components },
-      { isDraft: false }
-    );
-    // Get the selected entries
-    const entries = data.filter((entry) => {
-      return selectedEntries.includes(entry.id);
-    });
-    // Validate each entry and map the unresolved promises
-    const validationPromises = entries.map((entry) =>
-      schema.validate(entry, { abortEarly: false })
-    );
-    // Resolve all the promises in one go
-    const resolvedPromises = await Promise.allSettled(validationPromises);
-    // Set the validations
-    resolvedPromises.forEach((promise) => {
-      if (promise.status === 'rejected') {
-        const entityId = promise.reason.value.id;
-        validations.errors[entityId] = getYupInnerErrors(promise.reason);
-      }
-
-      if (promise.status === 'fulfilled') {
-        validations.validIds.push(promise.value.id);
-      }
-    });
-
-    return validations;
-  };
-
-  const handleConfirmPublishAllData = async (selectedEntries) => {
-    const validations = await validateEntriesToPublish(selectedEntries);
-
-    if (Object.values(validations.errors).length) {
-      toggleNotification({
-        type: 'warning',
-        title: {
-          id: 'content-manager.listView.validation.errors.title',
-          defaultMessage: 'Action required',
-        },
-        message: {
-          id: 'content-manager.listView.validation.errors.message',
-          defaultMessage:
-            'Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)',
-        },
-      });
-
-      throw new Error('Validation error');
-    }
-
-    return bulkPublishMutation.mutateAsync({ ids: selectedEntries });
-  };
-
-  const handleConfirmUnpublishAllData = (selectedEntries) => {
-    return bulkUnpublishMutation.mutateAsync({ ids: selectedEntries });
-  };
-
   useEffect(() => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
@@ -441,12 +330,9 @@ function ListView({
             <DynamicTable
               canCreate={canCreate}
               canDelete={canDelete}
-              canPublish={canPublish}
               contentTypeName={headerLayoutTitle}
-              onConfirmDelete={handleConfirmDeleteData}
               onConfirmDeleteAll={handleConfirmDeleteAllData}
-              onConfirmPublishAll={handleConfirmPublishAllData}
-              onConfirmUnpublishAll={handleConfirmUnpublishAllData}
+              onConfirmDelete={handleConfirmDeleteData}
               isBulkable={isBulkable}
               isLoading={isLoading}
               // FIXME: remove the layout props drilling
@@ -468,12 +354,10 @@ ListView.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   canRead: PropTypes.bool.isRequired,
-  canPublish: PropTypes.bool.isRequired,
   data: PropTypes.array.isRequired,
   layout: PropTypes.exact({
     components: PropTypes.object.isRequired,
     contentType: PropTypes.shape({
-      uid: PropTypes.string.isRequired,
       attributes: PropTypes.object.isRequired,
       metadatas: PropTypes.object.isRequired,
       info: PropTypes.shape({ displayName: PropTypes.string.isRequired }).isRequired,

package/admin/src/content-manager/utils/index.js

@@ -18,5 +18,3 @@ export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
 
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';
-
-export { default as createYupSchema } from './schema';

package/admin/src/hooks/useContentTypes/useContentTypes.js

@@ -2,8 +2,6 @@ import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/hel
 import { useQueries } from 'react-query';
 
 export function useContentTypes() {
-  console.log('----> read');
-
   const { get } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();

package/admin/src/index.js

@@ -1,7 +1,7 @@
-import ReactDOM from 'react-dom';
 import { getFetchClient } from '@strapi/helper-plugin';
-import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import { createRoot } from 'react-dom/client';
 import appCustomisations from './app';
+import { Components, Fields, Middlewares, Reducers } from './core/apis';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
 import appReducers from './reducers';
@@ -68,7 +68,8 @@ const run = async () => {
 
   await app.loadTrads();
 
-  ReactDOM.render(app.render(), MOUNT_NODE);
+  const root = createRoot(MOUNT_NODE);
+  root.render(app.render());
 };
 
 run();

package/admin/src/injectionZones.js

@@ -13,12 +13,7 @@ const injectionZones = {
   },
   contentManager: {
     editView: { informations: [], 'right-links': [] },
-    listView: {
-      actions: [],
-      deleteModalAdditionalInfos: [],
-      publishModalAdditionalInfos: [],
-      unpublishModalAdditionalInfos: [],
-    },
+    listView: { actions: [], deleteModalAdditionalInfos: [] },
   },
 };
 

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

@@ -47,7 +47,7 @@ const ListPage = () => {
     pagination,
     isError,
     isLoading,
-    refetchQueries: refetchAdminUsers,
+    refetch: refetchAdminUsers,
   } = useAdminUsers(qs.parse(search, { ignoreQueryPrefix: true }), {
     enabled: canRead,
   });