@strapi/admin 4.10.2-alpha.0 → 4.10.4

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/pages/Admin/index.js

@@ -44,6 +44,9 @@ const SettingsPage = lazy(() =>
 );
 
 // Simple hook easier for testing
+/**
+ * TODO: remove this, it's bad.
+ */
 const useTrackUsage = () => {
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -149,7 +149,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
             return (
               <Form noValidate>
                 <Main>
-                  <Flex direction="column" alignItems="stretch" gap={3}>
+                  <Flex direction="column" alignItems="center" gap={3}>
                     <Logo />
 
                     <Typography as="h1" variant="alpha" textAlign="center">

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js

@@ -10,7 +10,7 @@ const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, cust
   return (
     <Select
       data-testid={`${message}-button`}
-      aria-label={message}
+      label={message}
       placeholder={message}
       size="M"
       onChange={onChange}

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, Popover, Flex, FocusTrap } from '@strapi/design-system';
+import styled from 'styled-components';
+import { Popover, Flex, FocusTrap } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 
@@ -19,61 +20,57 @@ const FiltersPopover = ({
   return (
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
-        <Flex direction="column" alignItems="stretch" gap={1}>
-          <Box>
+        <FiltersFlex direction="column" alignItems="stretch" gap={1}>
+          <FilterSelect
+            message={formatMessage({
+              id: 'admin.pages.MarketPlacePage.filters.collections',
+              defaultMessage: 'Collections',
+            })}
+            value={query?.collections || []}
+            onChange={(newCollections) => {
+              const update = { collections: newCollections };
+              handleSelectChange(update);
+            }}
+            onClear={() => handleSelectClear('collections')}
+            possibleFilters={possibleCollections}
+            customizeContent={(values) =>
+              formatMessage(
+                {
+                  id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                  defaultMessage:
+                    '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+                },
+                { count: values.length }
+              )
+            }
+          />
+          {npmPackageType === 'plugin' && (
             <FilterSelect
               message={formatMessage({
-                id: 'admin.pages.MarketPlacePage.filters.collections',
-                defaultMessage: 'Collections',
+                id: 'admin.pages.MarketPlacePage.filters.categories',
+                defaultMessage: 'Categories',
               })}
-              value={query?.collections || []}
-              onChange={(newCollections) => {
-                const update = { collections: newCollections };
+              value={query?.categories || []}
+              onChange={(newCategories) => {
+                const update = { categories: newCategories };
                 handleSelectChange(update);
               }}
-              onClear={() => handleSelectClear('collections')}
-              possibleFilters={possibleCollections}
+              onClear={() => handleSelectClear('categories')}
+              possibleFilters={possibleCategories}
               customizeContent={(values) =>
                 formatMessage(
                   {
-                    id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                    id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
                     defaultMessage:
-                      '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+                      '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
                   },
                   { count: values.length }
                 )
               }
+              name="categories"
             />
-          </Box>
-          {npmPackageType === 'plugin' && (
-            <Box>
-              <FilterSelect
-                message={formatMessage({
-                  id: 'admin.pages.MarketPlacePage.filters.categories',
-                  defaultMessage: 'Categories',
-                })}
-                value={query?.categories || []}
-                onChange={(newCategories) => {
-                  const update = { categories: newCategories };
-                  handleSelectChange(update);
-                }}
-                onClear={() => handleSelectClear('categories')}
-                possibleFilters={possibleCategories}
-                customizeContent={(values) =>
-                  formatMessage(
-                    {
-                      id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
-                      defaultMessage:
-                        '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
-                    },
-                    { count: values.length }
-                  )
-                }
-                name="categories"
-              />
-            </Box>
           )}
-        </Flex>
+        </FiltersFlex>
       </FocusTrap>
     </Popover>
   );
@@ -91,3 +88,17 @@ FiltersPopover.propTypes = {
 };
 
 export default FiltersPopover;
+
+const FiltersFlex = 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/pages/MarketplacePage/components/SortSelect/index.js

@@ -10,6 +10,18 @@ const SelectWrapper = styled(Box)`
   span {
     font-size: ${({ theme }) => theme.fontSizes[1]};
   }
+
+  /* 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;
+  }
 `;
 
 const SortSelect = ({ sortQuery, handleSelectChange }) => {
@@ -68,6 +80,10 @@ const SortSelect = ({ sortQuery, handleSelectChange }) => {
         onChange={(sortName) => {
           handleSelectChange({ sort: sortName });
         }}
+        label={formatMessage({
+          id: 'admin.pages.MarketPlacePage.sort.label',
+          defaultMessage: 'Sort by',
+        })}
       >
         {Object.entries(sortTypes).map(([sortName, messages]) => {
           return (

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

@@ -67,13 +67,13 @@ const SelectRoles = ({ disabled, error, onChange, value }) => {
       placeholder={placeholder}
       multi
       startIcon={startIcon}
-      value={value}
+      value={value.map((v) => v.toString())}
       withTags
       required
     >
       {(data || []).map((role) => {
         return (
-          <Option key={role.id} value={role.id}>
+          <Option key={role.id} value={role.id.toString()}>
             {formatMessage({
               id: `global.${role.code}`,
               defaultMessage: role.name,

package/admin/src/translations/en.json

@@ -326,6 +326,7 @@
   "Users.components.List.empty": "There is no users...",
   "Users.components.List.empty.withFilters": "There is no users with the applied filters...",
   "Users.components.List.empty.withSearch": "There is no users corresponding to the search ({search})...",
+  "admin.pages.MarketPlacePage.sort.label": "Sort by",
   "admin.pages.MarketPlacePage.filters.categories": "Categories",
   "admin.pages.MarketPlacePage.filters.categoriesSelected": "{count, plural, =0 {No categories} one {# category} other {# categories}} selected",
   "admin.pages.MarketPlacePage.filters.collections": "Collections",