@strapi/admin 4.11.0-beta.1 → 4.11.0-exp.2

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';
@@ -55,6 +56,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.
@@ -194,14 +196,21 @@ const EditViewDataManagerProvider = ({
 
   const dispatchAddComponent = useCallback(
     (type) =>
-      (keys, componentLayoutData, components, shouldCheckErrors = false) => {
+      (
+        keys,
+        componentLayoutData,
+        allComponents,
+        shouldCheckErrors = false,
+        position = undefined
+      ) => {
         trackUsageRef.current('didAddComponentToDynamicZone');
 
         dispatch({
           type,
           keys: keys.split('.'),
+          position,
           componentLayoutData,
-          allComponents: components,
+          allComponents,
           shouldCheckErrors,
         });
       },
@@ -376,14 +385,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 +460,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 +659,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/reducer.js

@@ -52,7 +52,13 @@ const reducer = (state, action) =>
       }
       case 'ADD_COMPONENT_TO_DYNAMIC_ZONE':
       case 'ADD_REPEATABLE_COMPONENT_TO_FIELD': {
-        const { keys, allComponents, componentLayoutData, shouldCheckErrors } = action;
+        const {
+          keys,
+          allComponents,
+          componentLayoutData,
+          shouldCheckErrors,
+          position = undefined,
+        } = action;
 
         if (shouldCheckErrors) {
           draftState.shouldCheckErrors = !state.shouldCheckErrors;
@@ -62,7 +68,15 @@ const reducer = (state, action) =>
           draftState.modifiedDZName = keys[0];
         }
 
-        const currentValue = get(state, ['modifiedData', ...keys], []);
+        const currentValue = [...get(state, ['modifiedData', ...keys], [])];
+
+        let actualPosition = position;
+
+        if (actualPosition === undefined) {
+          actualPosition = currentValue.length;
+        } else if (actualPosition < 0) {
+          actualPosition = 0;
+        }
 
         const defaultDataStructure =
           action.type === 'ADD_COMPONENT_TO_DYNAMIC_ZONE'
@@ -87,11 +101,9 @@ const reducer = (state, action) =>
           componentLayoutData.attributes
         );
 
-        const newValue = Array.isArray(currentValue)
-          ? [...currentValue, componentDataStructure]
-          : [componentDataStructure];
+        currentValue.splice(actualPosition, 0, componentDataStructure);
 
-        set(draftState, ['modifiedData', ...keys], newValue);
+        set(draftState, ['modifiedData', ...keys], currentValue);
 
         break;
       }

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -25,6 +25,12 @@ const CustomLink = styled(Flex)`
     > div:first-child {
       background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
+
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.primary600};
+        }
+      }
     }
   }
 `;
@@ -49,7 +55,7 @@ const DynamicZoneList = ({ components }) => {
           as={Link}
           to={`/content-manager/components/${componentUid}/configurations/edit`}
         >
-          <ComponentIcon />
+          <ComponentIcon icon={componentLayouts?.[componentUid]?.info?.icon} />
 
           <Box paddingTop={1}>
             <Typography fontSize={1} textColor="neutral600" fontWeight="bold">

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

@@ -13,7 +13,7 @@ import { Pencil, Layer } from '@strapi/icons';
 import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
-import DynamicZone from '../../components/DynamicZone';
+import { DynamicZone } from '../../components/DynamicZone';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';

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/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,
   });

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable/EventTableCE.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import EventTable from '../Events';
+
+// This component is overwritten by the EE counterpart
+export function EventTableCE() {
+  return (
+    <EventTable.Root>
+      <EventTable.Headers />
+      <EventTable.Body />
+    </EventTable.Root>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { EventTableCE } from './EventTableCE';
+
+export default EventTableCE;

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

@@ -0,0 +1,331 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { useFormikContext } from 'formik';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import {
+  FieldLabel,
+  Flex,
+  Typography,
+  BaseCheckbox,
+  Checkbox,
+  Loader,
+  RawTable as Table,
+  RawTh as Th,
+  RawTd as Td,
+  RawTr as Tr,
+  RawThead as Thead,
+  RawTbody as Tbody,
+  VisuallyHidden,
+} from '@strapi/design-system';
+
+import { useContentTypes } from '../../../../../../../hooks/useContentTypes';
+
+export const formatValue = (value) =>
+  value.reduce((acc, curr) => {
+    const key = curr.split('.')[0];
+
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(curr);
+
+    return acc;
+  }, {});
+
+// TODO check whether we want to move alternating background colour tables to the design system
+const StyledTable = styled(Table)`
+  tbody tr:nth-child(odd) {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  thead th span {
+    color: ${({ theme }) => theme.colors.neutral500};
+  }
+
+  td,
+  th {
+    padding-block-start: ${({ theme }) => theme.spaces[3]};
+    padding-block-end: ${({ theme }) => theme.spaces[3]};
+    width: 10%;
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  tbody tr td:first-child {
+    // Add padding to the start of the first column to avoid the checkbox appearing
+    // too close to the edge of the table
+    padding-inline-start: ${({ theme }) => theme.spaces[2]};
+  }
+`;
+
+const getCEHeaders = (isDraftAndPublish) => {
+  const headers = [
+    { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
+    { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
+    { id: 'app.utils.delete', defaultMessage: 'Delete' },
+  ];
+
+  if (isDraftAndPublish) {
+    headers.push({ id: 'app.utils.publish', defaultMessage: 'Publish' });
+    headers.push({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' });
+  }
+
+  return headers;
+};
+
+const getCEEvents = (isDraftAndPublish) => {
+  const entryEvents = ['entry.create', 'entry.update', 'entry.delete'];
+
+  if (isDraftAndPublish) {
+    entryEvents.push('entry.publish', 'entry.unpublish');
+  }
+
+  return {
+    entry: entryEvents,
+    media: ['media.create', 'media.update', 'media.delete'],
+  };
+};
+
+const WebhookEventContext = React.createContext();
+
+const Root = ({ children }) => {
+  const { formatMessage } = useIntl();
+  const { collectionTypes, isLoading } = useContentTypes();
+
+  const isDraftAndPublish = React.useMemo(
+    () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
+    [collectionTypes]
+  );
+
+  const label = formatMessage({
+    id: 'Settings.webhooks.form.events',
+    defaultMessage: 'Events',
+  });
+
+  return (
+    <WebhookEventContext.Provider value={{ isDraftAndPublish }}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
+        <FieldLabel aria-hidden>{label}</FieldLabel>
+        {isLoading && (
+          <Loader>
+            {formatMessage({
+              id: 'Settings.webhooks.events.isLoading',
+              defaultMessage: 'Events loading',
+            })}
+          </Loader>
+        )}
+        <StyledTable aria-label={label}>{children}</StyledTable>
+      </Flex>
+    </WebhookEventContext.Provider>
+  );
+};
+
+Root.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const Headers = ({ getHeaders = getCEHeaders }) => {
+  const { isDraftAndPublish } = React.useContext(WebhookEventContext);
+
+  const { formatMessage } = useIntl();
+  const headers = getHeaders(isDraftAndPublish);
+
+  return (
+    <Thead>
+      <Tr>
+        <Th>
+          <VisuallyHidden>
+            {formatMessage({
+              id: 'Settings.webhooks.event.select',
+              defaultMessage: 'Select event',
+            })}
+          </VisuallyHidden>
+        </Th>
+        {headers.map((header) => {
+          if (['app.utils.publish', 'app.utils.unpublish'].includes(header.id)) {
+            return (
+              <Th
+                key={header.id}
+                title={formatMessage({
+                  id: 'Settings.webhooks.event.publish-tooltip',
+                  defaultMessage: 'This event only exists for content with draft & publish enabled',
+                })}
+              >
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage(header)}
+                </Typography>
+              </Th>
+            );
+          }
+
+          return (
+            <Th key={header.id}>
+              <Typography variant="sigma" textColor="neutral600">
+                {formatMessage(header)}
+              </Typography>
+            </Th>
+          );
+        })}
+      </Tr>
+    </Thead>
+  );
+};
+
+Headers.defaultProps = {
+  getHeaders: getCEHeaders,
+};
+
+Headers.propTypes = {
+  getHeaders: PropTypes.func,
+};
+
+const Body = ({ providedEvents }) => {
+  const { isDraftAndPublish } = React.useContext(WebhookEventContext);
+
+  const events = providedEvents || getCEEvents(isDraftAndPublish);
+  const { values, handleChange: onChange } = useFormikContext();
+
+  const inputName = 'events';
+  const inputValue = values.events;
+  const disabledEvents = [];
+
+  const formattedValue = formatValue(inputValue);
+
+  const handleSelect = ({ target: { name, value } }) => {
+    let set = new Set(inputValue);
+
+    if (value) {
+      set.add(name);
+    } else {
+      set.delete(name);
+    }
+    onChange({ target: { name: inputName, value: Array.from(set) } });
+  };
+
+  const handleSelectAll = ({ target: { name, value } }) => {
+    let set = new Set(inputValue);
+
+    if (value) {
+      events[name].forEach((event) => {
+        if (!disabledEvents.includes(event)) {
+          set.add(event);
+        }
+      });
+    } else {
+      events[name].forEach((event) => set.delete(event));
+    }
+    onChange({ target: { name: inputName, value: Array.from(set) } });
+  };
+
+  return (
+    <Tbody>
+      {Object.entries(events).map(([event, value]) => {
+        return (
+          <EventRow
+            disabledEvents={disabledEvents}
+            key={event}
+            name={event}
+            events={value}
+            inputValue={formattedValue[event]}
+            handleSelect={handleSelect}
+            handleSelectAll={handleSelectAll}
+          />
+        );
+      })}
+    </Tbody>
+  );
+};
+
+Body.defaultProps = {
+  providedEvents: null,
+};
+
+Body.propTypes = {
+  providedEvents: PropTypes.object,
+};
+
+/**
+ * Converts a string to title case and removes hyphens.
+ *
+ * @param {string} str - The string to convert.
+ * @returns {string} The converted string.
+ */
+const removeHyphensAndTitleCase = (str) =>
+  str
+    .replace(/-/g, ' ')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+
+const EventRow = ({ disabledEvents, name, events, inputValue, handleSelect, handleSelectAll }) => {
+  const { formatMessage } = useIntl();
+  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));
+
+  const hasSomeCheckboxSelected = inputValue.length > 0;
+  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;
+
+  const onChangeAll = ({ target: { name } }) => {
+    const valueToSet = !areAllCheckboxesSelected;
+
+    handleSelectAll({
+      target: { name, value: valueToSet },
+    });
+  };
+
+  const targetColumns = 5;
+
+  return (
+    <Tr>
+      <Td>
+        <Checkbox
+          indeterminate={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
+          aria-label={formatMessage({
+            id: 'global.select-all-entries',
+            defaultMessage: 'Select all entries',
+          })}
+          name={name}
+          onChange={onChangeAll}
+          value={areAllCheckboxesSelected}
+        >
+          {removeHyphensAndTitleCase(name)}
+        </Checkbox>
+      </Td>
+
+      {events.map((event) => {
+        return (
+          <Td key={event}>
+            <BaseCheckbox
+              disabled={disabledEvents.includes(event)}
+              aria-label={event}
+              name={event}
+              value={inputValue.includes(event)}
+              onValueChange={(value) => handleSelect({ target: { name: event, value } })}
+            />
+          </Td>
+        );
+      })}
+      {events.length < targetColumns && <Td colSpan={`${targetColumns - events.length}`} />}
+    </Tr>
+  );
+};
+
+EventRow.defaultProps = {
+  disabledEvents: [],
+  events: [],
+  inputValue: [],
+  handleSelect() {},
+  handleSelectAll() {},
+};
+
+EventRow.propTypes = {
+  disabledEvents: PropTypes.array,
+  events: PropTypes.array,
+  inputValue: PropTypes.array,
+  handleSelect: PropTypes.func,
+  handleSelectAll: PropTypes.func,
+  name: PropTypes.string.isRequired,
+};
+
+export default { Root, Headers, Body, EventRow };

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

@@ -1,10 +1,59 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useFormikContext } from 'formik';
 import { ComboboxOption, CreatableCombobox } from '@strapi/design-system';
-import keys from './keys';
+
+const HTTP_HEADERS = [
+  'A-IM',
+  'Accept',
+  'Accept-Charset',
+  'Accept-Encoding',
+  'Accept-Language',
+  'Accept-Datetime',
+  'Access-Control-Request-Method',
+  'Access-Control-Request-Headers',
+  'Authorization',
+  'Cache-Control',
+  'Connection',
+  'Content-Length',
+  'Content-Type',
+  'Cookie',
+  'Date',
+  'Expect',
+  'Forwarded',
+  'From',
+  'Host',
+  'If-Match',
+  'If-Modified-Since',
+  'If-None-Match',
+  'If-Range',
+  'If-Unmodified-Since',
+  'Max-Forwards',
+  'Origin',
+  'Pragma',
+  'Proxy-Authorization',
+  'Range',
+  'Referer',
+  'TE',
+  'User-Agent',
+  'Upgrade',
+  'Via',
+  'Warning',
+];
 
 const Combobox = ({ name, onChange, value, ...props }) => {
-  const [options, setOptions] = useState(value ? [...keys, value] : keys);
+  const {
+    values: { headers },
+  } = useFormikContext();
+  const [options, setOptions] = useState(HTTP_HEADERS);
+
+  useEffect(() => {
+    setOptions(
+      HTTP_HEADERS.filter(
+        (key) => !headers?.some((header) => header.key !== value && header.key === key)
+      )
+    );
+  }, [headers, value]);
 
   const handleChange = (value) => {
     onChange({ target: { name, value } });
@@ -13,12 +62,13 @@ const Combobox = ({ name, onChange, value, ...props }) => {
   const handleCreateOption = (value) => {
     setOptions((prev) => [...prev, value]);
 
-    onChange({ target: { name, value } });
+    handleChange(value);
   };
 
   return (
     <CreatableCombobox
       {...props}
+      onClear={() => handleChange('')}
       onChange={handleChange}
       onCreateOption={handleCreateOption}
       placeholder=""