@strapi/admin 4.10.2 → 4.11.0-alpha.0

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -1,9 +1,9 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import {
   FocusTrap,
-  Box,
   Button,
   IconButtonGroup,
   Option,
@@ -33,6 +33,9 @@ import {
   CustomLinkIconButton,
 } from './WysiwygStyles';
 
+/**
+ * TODO: refactor this mess.
+ */
 const WysiwygNav = ({
   disabled,
   editorRef,
@@ -56,68 +59,9 @@ const WysiwygNav = ({
 
   if (disabled || isPreviewMode) {
     return (
-      <Box padding={2} background="neutral100">
-        <Flex justifyContent="space-between">
-          <Flex>
-            <Select
-              disabled
-              id="selectTitle"
-              placeholder={selectPlaceholder}
-              size="S"
-              aria-label={selectPlaceholder}
-            >
-              <Option value="h1">h1</Option>
-              <Option value="h2">h2</Option>
-              <Option value="h3">h3</Option>
-              <Option value="h4">h4</Option>
-              <Option value="h5">h5</Option>
-              <Option value="h6">h6</Option>
-            </Select>
-
-            <MainButtons>
-              <CustomIconButton disabled id="Bold" label="Bold" name="Bold" icon={<Bold />} />
-              <CustomIconButton
-                disabled
-                id="Italic"
-                label="Italic"
-                name="Italic"
-                icon={<Italic />}
-              />
-              <CustomIconButton
-                disabled
-                id="Underline"
-                label="Underline"
-                name="Underline"
-                icon={<Underline />}
-              />
-            </MainButtons>
-
-            <MoreButton disabled id="more" label="More" icon={<More />} />
-          </Flex>
-
-          {!isExpandMode && (
-            <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
-              {formatMessage({
-                id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-                defaultMessage: 'Markdown mode',
-              })}
-            </Button>
-          )}
-        </Flex>
-      </Box>
-    );
-  }
-
-  return (
-    <Box padding={2} background="neutral100">
-      <Flex justifyContent="space-between">
-        <Flex>
-          <Select
-            id="selectTitle"
-            placeholder={selectPlaceholder}
-            size="S"
-            onChange={(value) => onActionClick(value, editorRef)}
-          >
+      <Flex padding={2} background="neutral100" justifyContent="space-between">
+        <StyledFlex>
+          <Select disabled placeholder={selectPlaceholder} size="S" label={selectPlaceholder}>
             <Option value="h1">h1</Option>
             <Option value="h2">h2</Option>
             <Option value="h3">h3</Option>
@@ -127,22 +71,10 @@ const WysiwygNav = ({
           </Select>
 
           <MainButtons>
+            <CustomIconButton disabled id="Bold" label="Bold" name="Bold" icon={<Bold />} />
+            <CustomIconButton disabled id="Italic" label="Italic" name="Italic" icon={<Italic />} />
             <CustomIconButton
-              onClick={() => onActionClick('Bold', editorRef)}
-              id="Bold"
-              label="Bold"
-              name="Bold"
-              icon={<Bold />}
-            />
-            <CustomIconButton
-              onClick={() => onActionClick('Italic', editorRef)}
-              id="Italic"
-              label="Italic"
-              name="Italic"
-              icon={<Italic />}
-            />
-            <CustomIconButton
-              onClick={() => onActionClick('Underline', editorRef)}
+              disabled
               id="Underline"
               label="Underline"
               name="Underline"
@@ -150,90 +82,145 @@ const WysiwygNav = ({
             />
           </MainButtons>
 
-          <MoreButton
-            ref={buttonMoreRef}
-            onClick={handleTogglePopover}
-            id="more"
-            label="More"
-            icon={<More />}
-          />
-          {visiblePopover && (
-            <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
-                <Flex>
-                  <IconButtonGroupMargin>
-                    <CustomIconButton
-                      onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
-                      id="Strikethrough"
-                      label="Strikethrough"
-                      name="Strikethrough"
-                      icon={<StrikeThrough />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
-                      id="BulletList"
-                      label="BulletList"
-                      name="BulletList"
-                      icon={<BulletList />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
-                      id="NumberList"
-                      label="NumberList"
-                      name="NumberList"
-                      icon={<NumberList />}
-                    />
-                  </IconButtonGroupMargin>
-                  <IconButtonGroup>
-                    <CustomIconButton
-                      onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
-                      id="Code"
-                      label="Code"
-                      name="Code"
-                      icon={<Code />}
-                    />
-                    <CustomIconButton
-                      onClick={() => {
-                        handleTogglePopover();
-                        onToggleMediaLib();
-                      }}
-                      id="Image"
-                      label="Image"
-                      name="Image"
-                      icon={<Image />}
-                    />
-                    <CustomLinkIconButton
-                      onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
-                      id="Link"
-                      label="Link"
-                      name="Link"
-                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                      icon={<Link />}
-                    />
-                    <CustomIconButton
-                      onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
-                      id="Quote"
-                      label="Quote"
-                      name="Quote"
-                      icon={<Quote />}
-                    />
-                  </IconButtonGroup>
-                </Flex>
-              </FocusTrap>
-            </Popover>
-          )}
-        </Flex>
+          <MoreButton disabled id="more" label="More" icon={<More />} />
+        </StyledFlex>
 
-        {onTogglePreviewMode && (
+        {!isExpandMode && (
           <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
             {formatMessage({
-              id: 'components.Wysiwyg.ToggleMode.preview-mode',
-              defaultMessage: 'Preview mode',
+              id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+              defaultMessage: 'Markdown mode',
             })}
           </Button>
         )}
       </Flex>
-    </Box>
+    );
+  }
+
+  return (
+    <Flex padding={2} background="neutral100" justifyContent="space-between">
+      <StyledFlex>
+        <Select
+          placeholder={selectPlaceholder}
+          label={selectPlaceholder}
+          size="S"
+          onChange={(value) => onActionClick(value, editorRef)}
+        >
+          <Option value="h1">h1</Option>
+          <Option value="h2">h2</Option>
+          <Option value="h3">h3</Option>
+          <Option value="h4">h4</Option>
+          <Option value="h5">h5</Option>
+          <Option value="h6">h6</Option>
+        </Select>
+
+        <MainButtons>
+          <CustomIconButton
+            onClick={() => onActionClick('Bold', editorRef)}
+            id="Bold"
+            label="Bold"
+            name="Bold"
+            icon={<Bold />}
+          />
+          <CustomIconButton
+            onClick={() => onActionClick('Italic', editorRef)}
+            id="Italic"
+            label="Italic"
+            name="Italic"
+            icon={<Italic />}
+          />
+          <CustomIconButton
+            onClick={() => onActionClick('Underline', editorRef)}
+            id="Underline"
+            label="Underline"
+            name="Underline"
+            icon={<Underline />}
+          />
+        </MainButtons>
+
+        <MoreButton
+          ref={buttonMoreRef}
+          onClick={handleTogglePopover}
+          id="more"
+          label="More"
+          icon={<More />}
+        />
+        {visiblePopover && (
+          <Popover centered source={buttonMoreRef} spacing={4} id="popover">
+            <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
+              <Flex>
+                <IconButtonGroupMargin>
+                  <CustomIconButton
+                    onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
+                    id="Strikethrough"
+                    label="Strikethrough"
+                    name="Strikethrough"
+                    icon={<StrikeThrough />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
+                    id="BulletList"
+                    label="BulletList"
+                    name="BulletList"
+                    icon={<BulletList />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
+                    id="NumberList"
+                    label="NumberList"
+                    name="NumberList"
+                    icon={<NumberList />}
+                  />
+                </IconButtonGroupMargin>
+                <IconButtonGroup>
+                  <CustomIconButton
+                    onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
+                    id="Code"
+                    label="Code"
+                    name="Code"
+                    icon={<Code />}
+                  />
+                  <CustomIconButton
+                    onClick={() => {
+                      handleTogglePopover();
+                      onToggleMediaLib();
+                    }}
+                    id="Image"
+                    label="Image"
+                    name="Image"
+                    icon={<Image />}
+                  />
+                  <CustomLinkIconButton
+                    onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
+                    id="Link"
+                    label="Link"
+                    name="Link"
+                    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+                    icon={<Link />}
+                  />
+                  <CustomIconButton
+                    onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
+                    id="Quote"
+                    label="Quote"
+                    name="Quote"
+                    icon={<Quote />}
+                  />
+                </IconButtonGroup>
+              </Flex>
+            </FocusTrap>
+          </Popover>
+        )}
+      </StyledFlex>
+
+      {onTogglePreviewMode && (
+        <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+          {formatMessage({
+            id: 'components.Wysiwyg.ToggleMode.preview-mode',
+            defaultMessage: 'Preview mode',
+          })}
+        </Button>
+      )}
+    </Flex>
   );
 };
 
@@ -255,3 +242,17 @@ WysiwygNav.propTypes = {
 };
 
 export default WysiwygNav;
+
+const StyledFlex = styled(Flex)`
+  /* Hide the label, every input needs a label. */
+  label {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+`;

package/admin/src/content-manager/pages/ListSettingsView/{utils/excludedSortOptions.js → constants.js}

@@ -1,4 +1,4 @@
-export const EXCLUDED_SORT_OPTIONS = [
+export const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
   'media',
   'richtext',
   'dynamiczone',

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

@@ -7,7 +7,13 @@ import pick from 'lodash/pick';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
-import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
+import {
+  useNotification,
+  useTracking,
+  ConfirmDialog,
+  Link,
+  useFetchClient,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import {
   Box,
@@ -19,18 +25,19 @@ import {
   Button,
 } from '@strapi/design-system';
 import { Check, ArrowLeft } from '@strapi/icons';
+
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';
-import putCMSettingsLV from './utils/api';
 import Settings from './components/Settings';
 import SortDisplayedFields from './components/SortDisplayedFields';
 import EditFieldForm from './components/EditFieldForm';
 import init from './init';
 import reducer, { initialState } from './reducer';
-import { EXCLUDED_SORT_OPTIONS } from './utils/excludedSortOptions';
+import { EXCLUDED_SORT_ATTRIBUTE_TYPES } from './constants';
 
 const ListSettingsView = ({ layout, slug }) => {
+  const { put } = useFetchClient();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
@@ -130,18 +137,21 @@ const ListSettingsView = ({ layout, slug }) => {
     handleCloseModal();
   };
 
-  const submitMutation = useMutation((body) => putCMSettingsLV(body, slug), {
-    onSuccess() {
-      trackUsage('didEditListSettings');
-      refetchData();
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error' },
-      });
-    },
-  });
+  const submitMutation = useMutation(
+    (body) => put(`/content-manager/content-types/${slug}/configuration`, body),
+    {
+      onSuccess() {
+        trackUsage('didEditListSettings');
+        refetchData();
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      },
+    }
+  );
   const { isLoading: isSubmittingForm } = submitMutation;
 
   const handleChangeEditLabel = ({ target: { name, value } }) => {
@@ -153,29 +163,16 @@ const ListSettingsView = ({ layout, slug }) => {
   };
 
   const listRemainingFields = Object.entries(attributes)
-    .reduce((acc, cur) => {
-      const [attrName, fieldSchema] = cur;
-
-      const isDisplayable = checkIfAttributeIsDisplayable(fieldSchema);
-      const isAlreadyDisplayed = displayedFields.includes(attrName);
-
-      if (isDisplayable && !isAlreadyDisplayed) {
-        acc.push(attrName);
-      }
-
-      return acc;
-    }, [])
+    .filter(
+      ([name, attribute]) =>
+        checkIfAttributeIsDisplayable(attribute) && !displayedFields.includes(name)
+    )
+    .map(([name]) => name)
     .sort();
 
-  const sortOptions = Object.entries(attributes).reduce((acc, cur) => {
-    const [name, { type }] = cur;
-
-    if (!EXCLUDED_SORT_OPTIONS.includes(type)) {
-      acc.push(name);
-    }
-
-    return acc;
-  }, []);
+  const sortOptions = Object.entries(attributes)
+    .filter(([, attribute]) => !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(attribute.type))
+    .map(([name]) => name);
 
   const move = (originalIndex, atIndex) => {
     dispatch({

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

@@ -21,6 +21,7 @@ import {
   useTracking,
   Link,
   useAPIErrorHandler,
+  getYupInnerErrors,
 } from '@strapi/helper-plugin';
 
 import {
@@ -35,6 +36,7 @@ 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';
@@ -42,7 +44,7 @@ import { InjectionZone } from '../../../shared/components';
 
 import permissions from '../../../permissions';
 
-import { getRequestUrl, getTrad } from '../../utils';
+import { createYupSchema, getRequestUrl, getTrad } from '../../utils';
 
 import FieldPicker from './FieldPicker';
 import PaginationFooter from './PaginationFooter';
@@ -64,6 +66,7 @@ function ListView({
   canCreate,
   canDelete,
   canRead,
+  canPublish,
   data,
   getData,
   getDataSucceeded,
@@ -100,6 +103,50 @@ 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
@@ -200,6 +247,70 @@ 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();
@@ -331,9 +442,12 @@ function ListView({
             <DynamicTable
               canCreate={canCreate}
               canDelete={canDelete}
+              canPublish={canPublish}
               contentTypeName={headerLayoutTitle}
-              onConfirmDeleteAll={handleConfirmDeleteAllData}
               onConfirmDelete={handleConfirmDeleteData}
+              onConfirmDeleteAll={handleConfirmDeleteAllData}
+              onConfirmPublishAll={handleConfirmPublishAllData}
+              onConfirmUnpublishAll={handleConfirmUnpublishAllData}
               isBulkable={isBulkable}
               isLoading={isLoading}
               // FIXME: remove the layout props drilling
@@ -355,10 +469,12 @@ 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,3 +18,5 @@ 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/content-manager/{components/EditViewDataManagerProvider/utils → 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 '../../../utils/isFieldTypeNumber';
+import isFieldTypeNumber from './isFieldTypeNumber';
 
 yup.addMethod(yup.mixed, 'defined', function () {
   return this.test('defined', errorsTrads.required, (value) => value !== undefined);

package/admin/src/injectionZones.js

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