chore(webhooks/EditView): code cleanup

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

@@ -4,7 +4,14 @@ 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 } from '@strapi/design-system';
+import {
+  FieldLabel,
+  Flex,
+  Typography,
+  BaseCheckbox,
+  Checkbox,
+  Loader,
+} from '@strapi/design-system';
 
 import { useModels } from '../../../../../../../hooks';
 
@@ -38,40 +45,34 @@ const StyledTable = styled.table`
 `;
 
 const getCEHeaders = (isDraftAndPublish) => {
-  if (isDraftAndPublish) {
+  const headers = [
-    return [
-      { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
-      { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
-      { id: 'app.utils.delete', defaultMessage: 'Delete' },
-      { id: 'app.utils.publish', defaultMessage: 'Publish' },
-      { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },
-    ];
-  }
-
-  return [
     { 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) {
-    return {
+    entryEvents.push('entry.publish', 'entry.unpublish');
-      entry: ['entry.create', 'entry.update', 'entry.delete', 'entry.publish', 'entry.unpublish'],
-      media: ['media.create', 'media.update', 'media.delete'],
-    };
   }
 
   return {
-    entry: ['entry.create', 'entry.update', 'entry.delete'],
+    entry: entryEvents,
     media: ['media.create', 'media.update', 'media.delete'],
   };
 };
 
 const Root = ({ children }) => {
   const { formatMessage } = useIntl();
-  const { collectionTypes } = useModels();
+  const { collectionTypes, isLoading } = useModels();
 
   const isDraftAndPublish = React.useMemo(
     () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
@@ -94,6 +95,14 @@ const Root = ({ children }) => {
           defaultMessage: 'Events',
         })}
       </FieldLabel>
+      {isLoading && (
+        <Loader>
+          {formatMessage({
+            id: 'Settings.webhooks.events.isLoading',
+            defaultMessage: 'Events loading',
+          })}
+        </Loader>
+      )}
       <StyledTable>{childrenWithProps}</StyledTable>
     </Flex>
   );
@@ -230,6 +239,7 @@ const removeHyphensAndTitleCase = (str) =>
     .join(' ');
 
 const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, handleChangeAll }) => {
+  const { formatMessage } = useIntl();
   const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));
 
   const hasSomeCheckboxSelected = inputValue.length > 0;
@@ -250,7 +260,10 @@ const EventRow = ({ disabledEvents, name, events, inputValue, handleChange, hand
       <td>
         <Checkbox
           indeterminate={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
-          aria-label="Select all entries"
+          aria-label={formatMessage({
+            id: 'global.select-all-entries',
+            defaultMessage: 'Select all entries',
+          })}
           name={name}
           onChange={onChangeAll}
           value={areAllCheckboxesSelected}

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js

@@ -32,7 +32,7 @@ const HeadersInput = () => {
           name="headers"
           render={({ push, remove }) => (
             <Grid gap={4}>
-              {values.headers?.map((header, index) => (
+              {values.headers.map((header, index) => (
                 <React.Fragment key={`header-${header.key}`}>
                   <GridItem col={6}>
                     <Field
@@ -46,8 +46,8 @@ const HeadersInput = () => {
                       error={
                         errors.headers?.[index]?.key &&
                         formatMessage({
-                          id: errors.headers[index]?.key,
+                          id: errors.headers[index].key,
-                          defaultMessage: errors.headers[index]?.key,
+                          defaultMessage: errors.headers[index].key,
                         })
                       }
                     />
@@ -66,8 +66,8 @@ const HeadersInput = () => {
                           error={
                             errors.headers?.[index]?.value &&
                             formatMessage({
-                              id: errors.headers[index]?.value,
+                              id: errors.headers[index].value,
-                              defaultMessage: errors.headers[index]?.value,
+                              defaultMessage: errors.headers[index].value,
                             })
                           }
                         />

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -104,13 +104,11 @@ const WebhookForm = ({
         <Layout.Root
           triggerContainer={
             showTriggerResponse && (
-              <div className="trigger-wrapper">
+              <TriggerContainer
-                <TriggerContainer
+                isPending={isTriggering}
-                  isPending={isTriggering}
+                response={triggerResponse}
-                  response={triggerResponse}
+                onCancel={() => setShowTriggerResponse(false)}
-                  onCancel={() => setShowTriggerResponse(false)}
+              />
-                />
-              </div>
             )
           }
         >

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js

@@ -15,16 +15,10 @@ import WebhookForm from './components/WebhookForm';
 
 const cleanData = (data) => ({
   ...data,
-  headers: data.headers.reduce((acc, current) => {
+  headers: data.headers.reduce((acc, { key, value }) => {
-    const { key, value } = current;
-
     if (key !== '') {
-      return {
+      acc[key] = value;
-        ...acc,
-        [key]: value,
-      };
     }
-
     return acc;
   }, {}),
 });

packages/core/admin/admin/src/translations/en.json

@@ -285,6 +285,7 @@
   "Settings.webhooks.create.header": "Create new header",
   "Settings.webhooks.created": "Webhook created",
   "Settings.webhooks.event.publish-tooltip": "This event only exists for contents with Draft/Publish system enabled",
+  "Settings.webhooks.events.isLoading": "Events loading",
   "Settings.webhooks.events.create": "Create",
   "Settings.webhooks.events.update": "Update",
   "Settings.webhooks.form.events": "Events",