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

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

@@ -32,25 +32,19 @@ const HeadersInput = () => {
           name="headers"
           render={({ push, remove }) => (
             <Grid gap={4}>
-              {values.headers?.map((header, i) => (
+              {values.headers.map((header, index) => (
                 // eslint-disable-next-line
-                <React.Fragment key={i}>
+                <React.Fragment key={`${index}.${header.key}`}>
                   <GridItem col={6}>
                     <Field
                       as={Combobox}
-                      name={`headers.${i}.key`}
-                      aria-label={`row ${i + 1} key`}
+                      name={`headers.${index}.key`}
+                      aria-label={`row ${index + 1} key`}
                       label={formatMessage({
                         id: 'Settings.webhooks.key',
                         defaultMessage: 'Key',
                       })}
-                      error={
-                        errors.headers?.[i]?.key &&
-                        formatMessage({
-                          id: errors.headers[i]?.key,
-                          defaultMessage: errors.headers[i]?.key,
-                        })
-                      }
+                      error={errors.headers?.[index]?.key && errors.headers[index].key}
                     />
                   </GridItem>
                   <GridItem col={6}>
@@ -58,34 +52,29 @@ const HeadersInput = () => {
                       <Box style={{ flex: 1 }}>
                         <Field
                           as={TextInput}
-                          aria-label={`row ${i + 1} value`}
+                          name={`headers.${index}.value`}
+                          aria-label={`row ${index + 1} value`}
                           label={formatMessage({
                             id: 'Settings.webhooks.value',
                             defaultMessage: 'Value',
                           })}
-                          name={`headers.${i}.value`}
-                          error={
-                            errors.headers?.[i]?.value &&
-                            formatMessage({
-                              id: errors.headers[i]?.value,
-                              defaultMessage: errors.headers[i]?.value,
-                            })
-                          }
+                          error={errors.headers?.[index]?.value && errors.headers[index].value}
                         />
                       </Box>
                       <Flex
                         paddingLeft={2}
                         style={{ alignSelf: 'center' }}
-                        paddingTop={errors.headers?.[i]?.value ? 0 : 5}
+                        paddingTop={errors.headers?.[index]?.value ? 0 : 5}
                       >
                         <RemoveRoundedButton
-                          onClick={() => values.headers.length !== 1 && remove(i)}
+                          disabled={values.headers.length === 1}
+                          onClick={() => remove(index)}
                           label={formatMessage(
                             {
                               id: 'Settings.webhooks.headers.remove',
                               defaultMessage: 'Remove header row {number}',
                             },
-                            { number: i + 1 }
+                            { number: index + 1 }
                           )}
                         />
                       </Flex>

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

@@ -1,145 +1,159 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { Field, FormikProvider, useFormik } from 'formik';
+import { useIntl } from 'react-intl';
 import { Form, Link } from '@strapi/helper-plugin';
 import { ArrowLeft, Check, Play as Publish } from '@strapi/icons';
 import {
-  ContentLayout,
-  HeaderLayout,
-  Box,
+  Grid,
+  GridItem,
   Button,
   Flex,
   TextInput,
-  Grid,
-  GridItem,
+  HeaderLayout,
+  ContentLayout,
+  Box,
 } from '@strapi/design-system';
-import { Field, Formik } from 'formik';
 
-import { useIntl } from 'react-intl';
-import EventInput from '../EventInput';
+import EventTable from 'ee_else_ce/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable';
+import { makeWebhookValidationSchema } from './utils/makeWebhookValidationSchema';
 import HeadersInput from '../HeadersInput';
 import TriggerContainer from '../TriggerContainer';
-import schema from '../utils/schema';
 
 const WebhookForm = ({
   handleSubmit,
-  data,
   triggerWebhook,
   isCreating,
   isTriggering,
   triggerResponse,
-  isDraftAndPublishEvents,
+  data,
 }) => {
   const { formatMessage } = useIntl();
   const [showTriggerResponse, setShowTriggerResponse] = useState(false);
 
+  /**
+   * Map the headers into a form that can be used within the formik form
+   * @param {Object} headers
+   * @returns {Array}
+   */
+  const mapHeaders = (headers) => {
+    if (!Object.keys(headers).length) {
+      return [{ key: '', value: '' }];
+    }
+
+    return Object.entries(headers).map(([key, value]) => ({ key, value }));
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      name: data?.name || '',
+      url: data?.url || '',
+      headers: mapHeaders(data?.headers || {}),
+      events: data?.events || [],
+    },
+    onSubmit: handleSubmit,
+    validationSchema: makeWebhookValidationSchema({ formatMessage }),
+    validateOnChange: false,
+    validateOnBlur: false,
+  });
+
   return (
-    <Formik
-      onSubmit={handleSubmit}
-      initialValues={{
-        name: data?.name || '',
-        url: data?.url || '',
-        headers: Object.keys(data?.headers || []).length
-          ? Object.entries(data.headers).map(([key, value]) => ({ key, value }))
-          : [{ key: '', value: '' }],
-        events: data?.events || [],
-      }}
-      validationSchema={schema}
-      validateOnChange={false}
-      validateOnBlur={false}
-    >
-      {({ handleSubmit, errors }) => (
-        <Form noValidate>
-          <HeaderLayout
-            primaryAction={
-              <Flex gap={2}>
-                <Button
-                  onClick={() => {
-                    triggerWebhook();
-                    setShowTriggerResponse(true);
-                  }}
-                  variant="tertiary"
-                  startIcon={<Publish />}
-                  disabled={isCreating || isTriggering}
-                  size="L"
-                >
-                  {formatMessage({
-                    id: 'Settings.webhooks.trigger',
-                    defaultMessage: 'Trigger',
-                  })}
-                </Button>
-                <Button startIcon={<Check />} onClick={handleSubmit} type="submit" size="L">
-                  {formatMessage({
-                    id: 'global.save',
-                    defaultMessage: 'Save',
-                  })}
-                </Button>
-              </Flex>
-            }
-            title={
-              isCreating
-                ? formatMessage({
-                    id: 'Settings.webhooks.create',
-                    defaultMessage: 'Create a webhook',
-                  })
-                : data?.name
-            }
-            navigationAction={
-              <Link startIcon={<ArrowLeft />} to="/settings/webhooks">
+    <FormikProvider value={formik}>
+      <Form onSubmit={formik.handleSubmit}>
+        <HeaderLayout
+          primaryAction={
+            <Flex gap={2}>
+              <Button
+                onClick={() => {
+                  triggerWebhook();
+                  setShowTriggerResponse(true);
+                }}
+                variant="tertiary"
+                startIcon={<Publish />}
+                disabled={isCreating || isTriggering}
+                size="L"
+              >
                 {formatMessage({
-                  id: 'global.back',
-                  defaultMessage: 'Back',
+                  id: 'Settings.webhooks.trigger',
+                  defaultMessage: 'Trigger',
                 })}
-              </Link>
-            }
-          />
-          <ContentLayout>
-            <Flex direction="column" alignItems="stretch" gap={4}>
-              {showTriggerResponse && (
-                <div className="trigger-wrapper">
-                  <TriggerContainer
-                    isPending={isTriggering}
-                    response={triggerResponse}
-                    onCancel={() => setShowTriggerResponse(false)}
-                  />
-                </div>
-              )}
-              <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
-                <Flex direction="column" alignItems="stretch" gap={6}>
-                  <Grid gap={6}>
-                    <GridItem col={6}>
-                      <Field
-                        as={TextInput}
-                        name="name"
-                        error={errors.name && formatMessage({ id: errors.name })}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
-                        required
-                      />
-                    </GridItem>
-                    <GridItem col={12}>
-                      <Field
-                        as={TextInput}
-                        name="url"
-                        error={errors.url && formatMessage({ id: errors.url })}
-                        label={formatMessage({
-                          id: 'Settings.roles.form.input.url',
-                          defaultMessage: 'Url',
-                        })}
-                        required
-                      />
-                    </GridItem>
-                  </Grid>
-                  <HeadersInput />
-                  <EventInput isDraftAndPublish={isDraftAndPublishEvents} />
-                </Flex>
-              </Box>
+              </Button>
+              <Button
+                startIcon={<Check />}
+                type="submit"
+                size="L"
+                disabled={!formik.dirty}
+                loading={formik.isSubmitting}
+              >
+                {formatMessage({
+                  id: 'global.save',
+                  defaultMessage: 'Save',
+                })}
+              </Button>
             </Flex>
-          </ContentLayout>
-        </Form>
-      )}
-    </Formik>
+          }
+          title={
+            isCreating
+              ? formatMessage({
+                  id: 'Settings.webhooks.create',
+                  defaultMessage: 'Create a webhook',
+                })
+              : data?.name
+          }
+          navigationAction={
+            <Link startIcon={<ArrowLeft />} to="/settings/webhooks">
+              {formatMessage({
+                id: 'global.back',
+                defaultMessage: 'Back',
+              })}
+            </Link>
+          }
+        />
+        <ContentLayout>
+          <Flex direction="column" alignItems="stretch" gap={4}>
+            {showTriggerResponse && (
+              <TriggerContainer
+                isPending={isTriggering}
+                response={triggerResponse}
+                onCancel={() => setShowTriggerResponse(false)}
+              />
+            )}
+            <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
+              <Flex direction="column" alignItems="stretch" gap={6}>
+                <Grid gap={6}>
+                  <GridItem col={6}>
+                    <Field
+                      as={TextInput}
+                      name="name"
+                      error={formik?.errors?.name && formik.errors.name}
+                      label={formatMessage({
+                        id: 'global.name',
+                        defaultMessage: 'Name',
+                      })}
+                      required
+                    />
+                  </GridItem>
+                  <GridItem col={12}>
+                    <Field
+                      as={TextInput}
+                      name="url"
+                      error={formik?.errors?.url && formik.errors.url}
+                      label={formatMessage({
+                        id: 'Settings.roles.form.input.url',
+                        defaultMessage: 'Url',
+                      })}
+                      required
+                    />
+                  </GridItem>
+                </Grid>
+                <HeadersInput />
+                <EventTable />
+              </Flex>
+            </Box>
+          </Flex>
+        </ContentLayout>
+      </Form>
+    </FormikProvider>
   );
 };
 
@@ -148,7 +162,6 @@ WebhookForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   triggerWebhook: PropTypes.func.isRequired,
   isCreating: PropTypes.bool.isRequired,
-  isDraftAndPublishEvents: PropTypes.bool.isRequired,
   isTriggering: PropTypes.bool.isRequired,
   triggerResponse: PropTypes.object,
 };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/utils/makeWebhookValidationSchema.js

@@ -0,0 +1,62 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
+const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
+
+export const makeWebhookValidationSchema = ({ formatMessage }) =>
+  yup.object().shape({
+    name: yup
+      .string()
+      .required(
+        formatMessage({
+          id: 'Settings.webhooks.validation.name',
+          defaultMessage: 'Name is required',
+        })
+      )
+      .matches(NAME_REGEX, translatedErrors.regex),
+    url: yup
+      .string()
+      .required(
+        formatMessage({
+          id: 'Settings.webhooks.validation.url.required',
+          defaultMessage: 'Url is required',
+        })
+      )
+      .matches(
+        URL_REGEX,
+        formatMessage({
+          id: translatedErrors.regex,
+          defaultMessage: 'The value does not match the regex',
+        })
+      ),
+    headers: yup.lazy((array) => {
+      let baseSchema = yup.array();
+
+      if (array.length === 1) {
+        const { key, value } = array[0];
+
+        if (!key && !value) {
+          return baseSchema;
+        }
+      }
+
+      return baseSchema.of(
+        yup.object().shape({
+          key: yup.string().required(
+            formatMessage({
+              id: 'Settings.webhooks.validation.key',
+              defaultMessage: 'Key is required',
+            })
+          ),
+          value: yup.string().required(
+            formatMessage({
+              id: 'Settings.webhooks.validation.value',
+              defaultMessage: 'Value is required',
+            })
+          ),
+        })
+      );
+    }),
+    events: yup.array(),
+  });

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

@@ -1,60 +1,68 @@
-/**
- *
- * EditView
- *
- */
 import * as React from 'react';
 import {
   LoadingIndicatorPage,
   SettingsPageTitle,
   useNotification,
-  useOverlayBlocker,
   useFetchClient,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useContentTypes } from '../../../../../hooks/useContentTypes';
 import WebhookForm from './components/WebhookForm';
-import cleanData from './utils/formatData';
+
+const cleanData = (data) => ({
+  ...data,
+  headers: data.headers.reduce((acc, { key, value }) => {
+    if (key !== '') {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {}),
+});
 
 const EditView = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/webhooks/:id');
+  const isCreating = id === 'create';
 
   const { replace } = useHistory();
-  const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
+  const { formatAPIError } = useAPIErrorHandler();
   const queryClient = useQueryClient();
-  const { isLoading: isLoadingForModels, collectionTypes } = useContentTypes();
+  const { isLoading: isLoadingForModels } = useContentTypes();
   const { put, get, post } = useFetchClient();
 
-  const isCreating = id === 'create';
-
-  const { isLoading, data } = useQuery(
-    ['get-webhook', id],
+  const {
+    isLoading,
+    data: webhookData,
+    error: webhookError,
+  } = useQuery(
+    ['webhooks', id],
     async () => {
-      try {
-        const {
-          data: { data },
-        } = await get(`/admin/webhooks/${id}`);
+      const {
+        data: { data },
+      } = await get(`/admin/webhooks/${id}`);
 
-        return data;
-      } catch (err) {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-
-        return null;
-      }
+      return data;
     },
     {
       enabled: !isCreating,
     }
   );
 
+  React.useEffect(() => {
+    if (webhookError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(webhookError),
+      });
+    }
+  }, [webhookError, toggleNotification, formatAPIError]);
+
   const {
     isLoading: isTriggering,
     data: triggerResponse,
@@ -64,10 +72,10 @@ const EditView = () => {
 
   const triggerWebhook = () =>
     mutate(null, {
-      onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-          message: { id: 'notification.error' },
+          message: formatAPIError(error),
         });
       },
     });
@@ -78,7 +86,6 @@ const EditView = () => {
 
   const handleSubmit = async (data) => {
     if (isCreating) {
-      lockApp();
       createWebhookMutation.mutate(cleanData(data), {
         onSuccess({ data: result }) {
           toggleNotification({
@@ -86,48 +93,37 @@ const EditView = () => {
             message: { id: 'Settings.webhooks.created' },
           });
           replace(`/settings/webhooks/${result.data.id}`);
-          unlockApp();
         },
-        onError(e) {
+        onError(error) {
           toggleNotification({
             type: 'warning',
-            message: { id: 'notification.error' },
+            message: formatAPIError(error),
           });
-          console.log(e);
-          unlockApp();
         },
       });
-    } else {
-      lockApp();
-      updateWebhookMutation.mutate(
-        { id, body: cleanData(data) },
-        {
-          onSuccess() {
-            queryClient.invalidateQueries(['get-webhook', id]);
-            toggleNotification({
-              type: 'success',
-              message: { id: 'notification.form.success.fields' },
-            });
-            unlockApp();
-          },
-          onError(e) {
-            toggleNotification({
-              type: 'warning',
-              message: { id: 'notification.error' },
-            });
-            console.log(e);
-            unlockApp();
-          },
-        }
-      );
+
+      return;
     }
+    updateWebhookMutation.mutate(
+      { id, body: cleanData(data) },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries(['webhooks', id]);
+          toggleNotification({
+            type: 'success',
+            message: { id: 'notification.form.success.fields' },
+          });
+        },
+        onError(error) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        },
+      }
+    );
   };
 
-  const isDraftAndPublishEvents = React.useMemo(
-    () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
-    [collectionTypes]
-  );
-
   if (isLoading || isLoadingForModels) {
     return <LoadingIndicatorPage />;
   }
@@ -137,14 +133,13 @@ const EditView = () => {
       <SettingsPageTitle name="Webhooks" />
       <WebhookForm
         {...{
+          data: webhookData,
           handleSubmit,
-          data,
           triggerWebhook,
           isCreating,
           isTriggering,
           isTriggerIdle,
           triggerResponse: triggerResponse?.data.data,
-          isDraftAndPublishEvents,
         }}
       />
     </Main>

package/admin/src/translations/en.json

@@ -285,6 +285,8 @@
   "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.event.select": "Select event",
+  "Settings.webhooks.events.isLoading": "Events loading",
   "Settings.webhooks.events.create": "Create",
   "Settings.webhooks.events.update": "Update",
   "Settings.webhooks.events.delete": "Delete webhook",
@@ -313,6 +315,10 @@
   "Settings.webhooks.trigger.test": "Test-trigger",
   "Settings.webhooks.trigger.title": "Save before Trigger",
   "Settings.webhooks.value": "Value",
+  "Settings.webhooks.validation.name": "Name is required",
+  "Settings.webhooks.validation.url.required": "Url is required",
+  "Settings.webhooks.validation.key": "Key is required",
+  "Settings.webhooks.validation.value": "Value is required",
   "Usecase.back-end": "Back-end developer",
   "Usecase.button.skip": "Skip this question",
   "Usecase.content-creator": "Content Creator",