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

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

@@ -21,13 +21,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';
 

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/injectionZones.js

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

package/admin/src/translations/en.json

@@ -795,9 +795,7 @@
   "content-manager.plugin.description.long": "Quick way to see, edit and delete the data in your database.",
   "content-manager.plugin.description.short": "Quick way to see, edit and delete the data in your database.",
   "content-manager.popUpWarning.bodyMessage.contentType.delete": "Are you sure to delete Content-Type?",
-  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure you want to delete these entries?",
-  "content-manager.popUpWarning.bodyMessage.contentType.publish.all": "Are you sure you want to publish these entries?",
-  "content-manager.popUpWarning.bodyMessage.contentType.unpublish.all": "Are you sure you want to unpublish these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure to delete all Content-Types?",
   "content-manager.popUpWarning.warning.has-draft-relations.title": "Confirmation",
   "content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
   "content-manager.popUpWarning.warning.unpublish": "If you don't publish this content, it will automatically turn into a Draft.",
@@ -820,8 +818,6 @@
   "content-manager.success.record.save": "Saved",
   "content-manager.success.record.unpublish": "Unpublished",
   "content-manager.utils.data-loaded": "The {number, plural, =1 {entry has} other {entries have}} successfully been loaded",
-  "content-manager.listView.validation.errors.title": "Action required",
-  "content-manager.listView.validation.errors.message": "Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)",
   "dark": "Dark",
   "form.button.continue": "Continue",
   "form.button.done": "Done",

package/build/{1657.ca8562dd.chunk.js → 1657.3f2b2c11.chunk.js}

@@ -147,15 +147,7 @@ https://www.w3ctech.com/topic/2226`));let H=A(...z);return H.postcssPlugin=D,H.p
   & > * + * {
     margin-left: -${u.N/2}px;
   }
-`},99223:function(y,p,n){"use strict";n.d(p,{Z:function(){return E}});var l=n(74512),u=n(32735),a=n(60216),c=n(8471),s=n(87933),d=n(72850);const m=(0,c.ZP)(s.k)`
-  & > * + * {
-    margin-left: ${({theme:T})=>T.spaces[2]};
-  }
-
-  margin-left: ${({pullRight:T})=>T?"auto":void 0};
-`,f=(0,c.ZP)(m)`
-  flex-shrink: 0;
-`,E=({startActions:T,endActions:h})=>T||h?(0,l.jsx)(d.x,{paddingLeft:10,paddingRight:10,children:(0,l.jsx)(d.x,{paddingBottom:4,children:(0,l.jsxs)(s.k,{justifyContent:"space-between",alignItems:"flex-start",children:[T&&(0,l.jsx)(m,{wrap:"wrap",children:T}),h&&(0,l.jsx)(f,{pullRight:!0,children:h})]})})}):null;E.defaultProps={endActions:void 0,startActions:void 0},E.propTypes={endActions:a.node,startActions:a.node}},41234:function(y,p,n){"use strict";n.d(p,{q:function(){return f}});var l=n(74512),u=n(8471),a=n(72850),c=n(49372),s=n(87933);const d=u.ZP.div`
+`},99223:function(y,p,n){"use strict";n.d(p,{Z:function(){return a}});var l=n(74512),u=n(87933);const a=({startActions:c,endActions:s})=>!c&&!s?null:(0,l.jsxs)(u.k,{justifyContent:"space-between",alignItems:"flex-start",paddingBottom:4,paddingLeft:10,paddingRight:10,children:[(0,l.jsx)(u.k,{gap:2,wrap:"wrap",children:c}),(0,l.jsx)(u.k,{gap:2,shrink:0,wrap:"wrap",children:s})]})},41234:function(y,p,n){"use strict";n.d(p,{q:function(){return f}});var l=n(74512),u=n(8471),a=n(72850),c=n(49372),s=n(87933);const d=u.ZP.div`
   margin-right: ${({theme:E})=>E.spaces[3]};
   width: ${6/16}rem;
   height: ${6/16}rem;