@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CheckIcon from '@strapi/icons/CheckIcon';
+import ClearField from '@strapi/icons/ClearField';
+import Close from '@strapi/icons/Close';
+import LoadingIcon from '@strapi/icons/LoadingIcon';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { Stack } from '@strapi/parts/Stack';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+
+// Being discussed in Notion: create a <Icon /> component in Parts
+const Icon = styled.svg(
+  ({ theme, color }) => `
+  width: ${12 / 16}rem;
+  height: ${12 / 16}rem;
+
+  path {
+    fill: ${theme.colors[color]};
+  }
+`
+);
+
+const Status = ({ isPending, statusCode }) => {
+  if (isPending) {
+    return (
+      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+        <Icon as={LoadingIcon} />
+        <Text>
+          <FormattedMessage id="Settings.webhooks.trigger.pending" defaultMessage="pending" />
+        </Text>
+      </Stack>
+    );
+  }
+
+  if (statusCode >= 200 && statusCode < 300) {
+    return (
+      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+        <Icon as={CheckIcon} color="success700" />
+        <Text>
+          <FormattedMessage id="Settings.webhooks.trigger.success" defaultMessage="success" />
+        </Text>
+      </Stack>
+    );
+  }
+
+  if (statusCode >= 300) {
+    return (
+      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+        <Icon as={Close} color="danger700" />
+        <Text>
+          <FormattedMessage id="Settings.error" defaultMessage="error" /> {statusCode}
+        </Text>
+      </Stack>
+    );
+  }
+
+  return null;
+};
+Status.propTypes = {
+  isPending: PropTypes.bool.isRequired,
+  statusCode: PropTypes.number,
+};
+Status.defaultProps = {
+  statusCode: undefined,
+};
+
+const Message = ({ statusCode, message }) => {
+  if (statusCode >= 200 && statusCode < 300) {
+    return (
+      <Row justifyContent="flex-end">
+        <Text>
+          <FormattedMessage id="Settings.webhooks.trigger.success.label" defaultMessage="success" />
+        </Text>
+      </Row>
+    );
+  }
+
+  if (statusCode >= 300) {
+    return (
+      <Row justifyContent="flex-end" title={message}>
+        <Text
+          // ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
+          style={{
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {message}
+        </Text>
+      </Row>
+    );
+  }
+
+  return null;
+};
+Message.propTypes = {
+  statusCode: PropTypes.number,
+  message: PropTypes.string,
+};
+Message.defaultProps = {
+  statusCode: undefined,
+  message: undefined,
+};
+
+const CancelButton = ({ onCancel }) => (
+  <Row justifyContent="flex-end">
+    <button onClick={onCancel} type="button">
+      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+        <Text textColor="neutral400">
+          <FormattedMessage id="Settings.webhooks.trigger.cancel" defaultMessage="cancel" />
+        </Text>
+        <Icon as={ClearField} color="neutral400" />
+      </Stack>
+    </button>
+  </Row>
+);
+CancelButton.propTypes = { onCancel: PropTypes.func.isRequired };
+
+const TriggerContainer = ({ isPending, onCancel, response }) => {
+  const { statusCode, message } = response;
+
+  return (
+    <Box background="neutral0" padding={5} shadow="filterShadow" hasRadius>
+      <Grid gap={4} style={{ alignItems: 'center' }}>
+        <GridItem col={3}>
+          <Text>
+            <FormattedMessage id="Settings.webhooks.trigger.test" defaultMessage="test-trigger" />
+          </Text>
+        </GridItem>
+        <GridItem col={3}>
+          <Status isPending={isPending} statusCode={statusCode} />
+        </GridItem>
+        <GridItem col={6}>
+          {!isPending ? (
+            <Message statusCode={statusCode} message={message} />
+          ) : (
+            <CancelButton onCancel={onCancel} />
+          )}
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+};
+
+TriggerContainer.defaultProps = {
+  isPending: false,
+  onCancel: () => {},
+  response: {},
+};
+
+TriggerContainer.propTypes = {
+  isPending: PropTypes.bool,
+  onCancel: PropTypes.func,
+  response: PropTypes.object,
+};
+
+export default TriggerContainer;

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@strapi/helper-plugin';
+import BackIcon from '@strapi/icons/BackIcon';
+import CheckIcon from '@strapi/icons/CheckIcon';
+import Publish from '@strapi/icons/Publish';
+import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
+import { Box } from '@strapi/parts/Box';
+import { Button } from '@strapi/parts/Button';
+import { Link } from '@strapi/parts/Link';
+import { Stack } from '@strapi/parts/Stack';
+import { TextInput } from '@strapi/parts/TextInput';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { Field, Formik } from 'formik';
+
+import { useIntl } from 'react-intl';
+import EventInput from '../EventInput';
+import HeadersInput from '../HeadersInput';
+import TriggerContainer from '../TriggerContainer';
+import schema from '../utils/schema';
+
+const WebhookForm = ({
+  handleSubmit,
+  data,
+  triggerWebhook,
+  isCreating,
+  isTriggering,
+  isTriggerIdle,
+  triggerResponse,
+  isDraftAndPublishEvents,
+}) => {
+  const { formatMessage } = useIntl();
+
+  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, handleReset }) => (
+        <Form noValidate>
+          <HeaderLayout
+            primaryAction={
+              <Stack horizontal size={2}>
+                <Button
+                  onClick={triggerWebhook}
+                  variant="tertiary"
+                  startIcon={<Publish />}
+                  disabled={isCreating || isTriggering}
+                  size="L"
+                >
+                  {formatMessage({
+                    id: 'Settings.webhooks.trigger',
+                    defaultMessage: 'Trigger',
+                  })}
+                </Button>
+                <Button variant="secondary" onClick={handleReset} size="L">
+                  {formatMessage({
+                    id: 'app.components.Button.reset',
+                    defaultMessage: 'Reset',
+                  })}
+                </Button>
+                <Button startIcon={<CheckIcon />} onClick={handleSubmit} type="submit" size="L">
+                  {formatMessage({
+                    id: 'app.components.Button.save',
+                    defaultMessage: 'Save',
+                  })}
+                </Button>
+              </Stack>
+            }
+            title={
+              isCreating
+                ? formatMessage({
+                    id: 'Settings.webhooks.create',
+                    defaultMessage: 'Create a webhook',
+                  })
+                : data?.name
+            }
+            navigationAction={
+              <Link startIcon={<BackIcon />} to="/settings/webhooks">
+                {formatMessage({
+                  id: 'app.components.go-back',
+                  defaultMessage: 'Go back',
+                })}
+              </Link>
+            }
+          />
+          <ContentLayout>
+            <Stack size={4}>
+              {(isTriggering || !isTriggerIdle) && (
+                <div className="trigger-wrapper">
+                  <TriggerContainer
+                    isPending={isTriggering}
+                    response={triggerResponse}
+                    onCancel={triggerResponse?.cancel}
+                  />
+                </div>
+              )}
+              <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
+                <Stack size={6}>
+                  <Grid gap={6}>
+                    <GridItem col={6}>
+                      <Field
+                        as={TextInput}
+                        name="name"
+                        error={errors.name && formatMessage({ id: errors.name })}
+                        label={formatMessage({
+                          id: 'Settings.webhooks.form.name',
+                          defaultMessage: 'Name',
+                        })}
+                      />
+                    </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',
+                        })}
+                      />
+                    </GridItem>
+                  </Grid>
+                  <HeadersInput />
+                  <EventInput isDraftAndPublish={isDraftAndPublishEvents} />
+                </Stack>
+              </Box>
+            </Stack>
+          </ContentLayout>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+WebhookForm.propTypes = {
+  data: PropTypes.object,
+  handleSubmit: PropTypes.func.isRequired,
+  triggerWebhook: PropTypes.func.isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  isDraftAndPublishEvents: PropTypes.bool.isRequired,
+  isTriggering: PropTypes.bool.isRequired,
+  isTriggerIdle: PropTypes.bool.isRequired,
+  triggerResponse: PropTypes.object,
+};
+
+WebhookForm.defaultProps = {
+  data: undefined,
+  triggerResponse: undefined,
+};
+
+export default WebhookForm;

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

@@ -0,0 +1,38 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+import { NAME_REGEX, URL_REGEX } from './fieldsRegex';
+
+const schema = yup.object().shape({
+  name: yup
+    .string(translatedErrors.string)
+    .required(translatedErrors.required)
+    .matches(NAME_REGEX, translatedErrors.regex),
+  url: yup
+    .string(translatedErrors.string)
+    .required(translatedErrors.required)
+    .matches(URL_REGEX, translatedErrors.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(translatedErrors.required),
+        value: yup.string().required(translatedErrors.required),
+      })
+    );
+  }),
+  events: yup
+    .array()
+    .min(1, translatedErrors.min)
+    .required(translatedErrors.required),
+});
+
+export default schema;

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

@@ -0,0 +1,183 @@
+/**
+ *
+ * EditView
+ *
+ */
+import React, { useCallback, useMemo } from 'react';
+import {
+  LoadingIndicatorPage,
+  request,
+  SettingsPageTitle,
+  to,
+  useNotification,
+  useOverlayBlocker,
+} from '@strapi/helper-plugin';
+import { Main } from '@strapi/parts/Main';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import WebhookForm from './components/WebhookForm';
+import { useModels } from '../../../../../hooks';
+import cleanData from './utils/formatData';
+
+const EditView = () => {
+  const {
+    params: { id },
+  } = useRouteMatch('/settings/webhooks/:id');
+
+  const { replace } = useHistory();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const toggleNotification = useNotification();
+  const queryClient = useQueryClient();
+  const { isLoading: isLoadingForModels, collectionTypes } = useModels();
+
+  const isCreating = id === 'create';
+
+  const fetchWebhook = useCallback(
+    async id => {
+      const [err, { data }] = await to(
+        request(`/admin/webhooks/${id}`, {
+          method: 'GET',
+        })
+      );
+
+      if (err) {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+
+        return null;
+      }
+
+      return data;
+    },
+    [toggleNotification]
+  );
+
+  const triggerWebhookFn = useCallback(
+    async id => {
+      const abortController = new AbortController();
+      const { signal } = abortController;
+
+      const [err, { data }] = await to(
+        request(`/admin/webhooks/${id}/trigger`, {
+          method: 'POST',
+          signal,
+        })
+      );
+
+      if (err && err?.code !== 20) {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+
+      data.cancel = () => abortController.abort();
+
+      return data;
+    },
+    [toggleNotification]
+  );
+
+  const { isLoading, data } = useQuery(['get-webhook', id], () => fetchWebhook(id), {
+    enabled: !isCreating,
+  });
+
+  const {
+    isLoading: isTriggering,
+    data: triggerResponse,
+    refetch: triggerWebhook,
+    isIdle: isTriggerIdle,
+  } = useQuery(['trigger-webhook', id], () => triggerWebhookFn(id), { enabled: false });
+
+  const createWebhookMutation = useMutation(body =>
+    request('/admin/webhooks', {
+      method: 'POST',
+      body,
+    })
+  );
+
+  const updateWebhookMutation = useMutation(({ id, body }) =>
+    request(`/admin/webhooks/${id}`, {
+      method: 'PUT',
+      body,
+    })
+  );
+
+  const handleSubmit = async data => {
+    if (isCreating) {
+      lockApp();
+      createWebhookMutation.mutate(cleanData(data), {
+        onSuccess: result => {
+          toggleNotification({
+            type: 'success',
+            message: { id: 'Settings.webhooks.created' },
+          });
+          replace(`/settings/webhooks/${result.data.id}`);
+          unlockApp();
+        },
+        onError: e => {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.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();
+          },
+        }
+      );
+    }
+  };
+
+  const isDraftAndPublishEvents = useMemo(
+    () => collectionTypes.some(ct => ct.options.draftAndPublish === true),
+    [collectionTypes]
+  );
+
+  if (isLoading || isLoadingForModels) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Webhooks" />
+      <WebhookForm
+        {...{
+          handleSubmit,
+          data,
+          triggerWebhook,
+          isCreating,
+          isTriggering,
+          isTriggerIdle,
+          triggerResponse,
+          isDraftAndPublishEvents,
+        }}
+      />
+    </Main>
+  );
+};
+
+export default EditView;