@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/Webhooks/EditView/index.js

@@ -0,0 +1,448 @@
+/**
+ *
+ * EditView
+ *
+ */
+
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { get, isEmpty, isEqual, omit } from 'lodash';
+import { Header, Inputs as InputsIndex } from '@buffetjs/custom';
+import { Play } from '@buffetjs/icons';
+import {
+  request,
+  useGlobalContext,
+  getYupInnerErrors,
+  BackHeader,
+  LoadingIndicatorPage,
+} from 'strapi-helper-plugin';
+import { useModels } from '../../../hooks';
+import PageTitle from '../../../components/SettingsPageTitle';
+import { Inputs, TriggerContainer } from '../../../components/Webhooks';
+import reducer, { initialState } from './reducer';
+import { cleanData, form, schema } from './utils';
+import Wrapper from './Wrapper';
+
+function EditView() {
+  const { isLoading: isLoadingForModels, collectionTypes } = useModels();
+
+  const isMounted = useRef();
+  const { formatMessage } = useGlobalContext();
+  const [submittedOnce, setSubmittedOnce] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reducerState, dispatch] = useReducer(reducer, initialState);
+  const { push, replace } = useHistory();
+  const {
+    params: { id },
+  } = useRouteMatch('/settings/webhooks/:id');
+
+  const abortController = new AbortController();
+  const { signal } = abortController;
+  const isCreating = id === 'create';
+
+  const {
+    formErrors,
+    modifiedData,
+    initialData,
+    isLoading,
+    isTriggering,
+    triggerResponse,
+  } = reducerState.toJS();
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    const fetchData = async () => {
+      try {
+        const { data } = await request(`/admin/webhooks/${id}`, {
+          method: 'GET',
+        });
+
+        if (isMounted.current) {
+          dispatch({
+            type: 'GET_DATA_SUCCEEDED',
+            data,
+          });
+        }
+      } catch (err) {
+        if (isMounted.current) {
+          dispatch({ type: 'UNSET_LOADER' });
+
+          if (err.code !== 20) {
+            strapi.notification.toggle({
+              type: 'warning',
+              message: { id: 'notification.error' },
+            });
+          }
+        }
+      }
+    };
+
+    if (!isCreating) {
+      fetchData();
+    } else {
+      dispatch({ type: 'UNSET_LOADER' });
+    }
+
+    return () => {
+      isMounted.current = false;
+      abortController.abort();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, isCreating]);
+
+  const areActionDisabled = isEqual(initialData, modifiedData);
+
+  const isTriggerActionDisabled = isCreating || (!isCreating && !areActionDisabled) || isTriggering;
+
+  const formattedErrors = Object.keys(formErrors)
+    .filter(key => key.includes('headers'))
+    .reduce((obj, key) => {
+      obj[key] = formErrors[key];
+
+      return obj;
+    }, {});
+
+  /* eslint-disable indent */
+  const headerTitle = isCreating
+    ? formatMessage({
+        id: 'Settings.webhooks.create',
+      })
+    : initialData.name;
+
+  const headersActions = [
+    {
+      color: 'primary',
+      disabled: isTriggerActionDisabled,
+      label: formatMessage({
+        id: 'Settings.webhooks.trigger',
+      }),
+      onClick: () => handleTrigger(),
+      title: isTriggerActionDisabled
+        ? formatMessage({
+            id: 'Settings.webhooks.trigger.save',
+          })
+        : null,
+      type: 'button',
+      icon: (
+        <Play width="8px" height="10px" fill={isTriggerActionDisabled ? '#b4b6ba' : '#ffffff'} />
+      ),
+    },
+    {
+      color: 'cancel',
+      disabled: areActionDisabled,
+      label: formatMessage({
+        id: 'app.components.Button.reset',
+      }),
+      onClick: () => handleReset(),
+      style: {
+        paddingLeft: '20px',
+        paddingRight: '20px',
+      },
+      type: 'button',
+    },
+    {
+      color: 'success',
+      disabled: areActionDisabled,
+      label: formatMessage({
+        id: 'app.components.Button.save',
+      }),
+      isLoading: isSubmitting,
+      style: {
+        minWidth: 140,
+      },
+      type: 'submit',
+    },
+  ];
+  /* eslint-enable indent */
+
+  const headerProps = {
+    title: {
+      label: headerTitle,
+    },
+    actions: headersActions,
+  };
+
+  const checkFormErrors = async (submit = false) => {
+    try {
+      await schema.validate(modifiedData, { abortEarly: false });
+
+      if (isMounted.current) {
+        setErrors({});
+
+        if (submit) {
+          submitForm();
+        }
+      }
+    } catch (err) {
+      if (isMounted.current) {
+        setErrors(getYupInnerErrors(err));
+
+        if (submit) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.form.error.fields' },
+          });
+        }
+      }
+    }
+  };
+
+  const createWebhooks = async () => {
+    try {
+      strapi.lockAppWithOverlay();
+      setIsSubmitting(true);
+      const { data } = await request('/admin/webhooks', {
+        method: 'POST',
+        body: cleanData(modifiedData),
+      });
+      setIsSubmitting(false);
+      dispatch({
+        type: 'SUBMIT_SUCCEEDED',
+      });
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: 'Settings.webhooks.created' },
+      });
+      replace(`/settings/webhooks/${data.id}`);
+    } catch (err) {
+      setIsSubmitting(false);
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    } finally {
+      strapi.unlockApp();
+    }
+  };
+
+  const getErrorMessage = error => {
+    if (!error) {
+      return null;
+    }
+
+    return formatMessage({
+      id: error.id,
+    });
+  };
+
+  const goToList = () => push('/settings/webhooks');
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name.split('.'),
+      value,
+    });
+
+    if (submittedOnce) {
+      if (name === 'events') {
+        resetEventsError();
+      }
+      if (name.includes('headers')) {
+        resetHeadersError(name);
+      }
+    }
+  };
+
+  const handleClick = () => {
+    dispatch({
+      type: 'ADD_NEW_HEADER',
+      keys: ['headers'],
+    });
+  };
+
+  const handleTrigger = async () => {
+    dispatch({
+      type: 'SET_IS_TRIGGERING',
+    });
+
+    try {
+      const { data } = await request(`/admin/webhooks/${id}/trigger`, {
+        method: 'POST',
+        signal,
+      });
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'TRIGGER_SUCCEEDED',
+          response: data,
+        });
+      }
+    } catch (err) {
+      if (isMounted.current) {
+        if (err.code !== 20) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+        dispatch({
+          type: 'SET_IS_TRIGGERING',
+        });
+      }
+    }
+  };
+
+  const handleRemove = index => {
+    dispatch({
+      type: 'ON_HEADER_REMOVE',
+      index,
+    });
+
+    resetHeadersErrors();
+  };
+
+  const handleReset = () =>
+    dispatch({
+      type: 'RESET_FORM',
+    });
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    setSubmittedOnce(true);
+    checkFormErrors(true);
+  };
+
+  const onCancelTrigger = () => {
+    abortController.abort();
+
+    dispatch({
+      type: 'ON_TRIGGER_CANCELED',
+    });
+  };
+
+  const resetEventsError = () => {
+    const errors = formErrors;
+    delete errors.events;
+    setErrors(errors);
+  };
+
+  const resetHeadersError = keys => {
+    const errors = formErrors;
+
+    setErrors(omit(errors, [keys]));
+  };
+
+  const resetHeadersErrors = () => {
+    const errors = formErrors;
+    const newErrors = Object.keys(errors)
+      .filter(key => !key.includes('headers'))
+      .reduce((obj, key) => {
+        obj[key] = formErrors[key];
+
+        return obj;
+      }, {});
+
+    setErrors(newErrors);
+  };
+
+  const setErrors = errors => {
+    dispatch({
+      type: 'SET_ERRORS',
+      errors,
+    });
+  };
+
+  const submitForm = () => {
+    if (!isCreating) {
+      updateWebhook();
+    } else {
+      createWebhooks();
+    }
+  };
+
+  const updateWebhook = async () => {
+    try {
+      strapi.lockAppWithOverlay();
+      setIsSubmitting(true);
+
+      const body = cleanData(modifiedData);
+      delete body.id;
+
+      await request(`/admin/webhooks/${id}`, {
+        method: 'PUT',
+        body,
+      });
+      setIsSubmitting(false);
+      dispatch({
+        type: 'SUBMIT_SUCCEEDED',
+      });
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: 'notification.form.success.fields' },
+      });
+    } catch (err) {
+      setIsSubmitting(false);
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    } finally {
+      strapi.unlockApp();
+    }
+  };
+
+  const shouldShowDPEvents = useMemo(
+    () => collectionTypes.some(ct => ct.options.draftAndPublish === true),
+    [collectionTypes]
+  );
+
+  if (isLoading || isLoadingForModels) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Wrapper>
+      <PageTitle name="Webhooks" />
+      <BackHeader onClick={goToList} />
+      <form onSubmit={handleSubmit}>
+        <Header {...headerProps} />
+        {(isTriggering || !isEmpty(triggerResponse)) && (
+          <div className="trigger-wrapper">
+            <TriggerContainer
+              isPending={isTriggering}
+              response={triggerResponse}
+              onCancel={onCancelTrigger}
+            />
+          </div>
+        )}
+        <div className="form-wrapper">
+          <div className="form-card">
+            <div className="row">
+              {Object.keys(form).map(key => {
+                return (
+                  <div key={key} className={form[key].styleName}>
+                    <InputsIndex
+                      {...form[key]}
+                      customInputs={{
+                        headers: Inputs,
+                        events: Inputs,
+                      }}
+                      label={formatMessage({
+                        id: form[key].label,
+                      })}
+                      error={getErrorMessage(get(formErrors, key, null))}
+                      name={key}
+                      onChange={handleChange}
+                      shouldShowDPEvents={shouldShowDPEvents}
+                      validations={form[key].validations}
+                      value={modifiedData[key] || form[key].value}
+                      {...(form[key].type === 'headers' && {
+                        onClick: handleClick,
+                        onRemove: handleRemove,
+                        customError: formattedErrors,
+                      })}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </form>
+    </Wrapper>
+  );
+}
+
+export default EditView;

package/admin/src/containers/Webhooks/EditView/reducer.js

@@ -0,0 +1,76 @@
+import { fromJS } from 'immutable';
+import { get } from 'lodash';
+
+const header = { key: '', value: '' };
+
+const initialWebhook = {
+  events: [],
+  headers: [header],
+  name: '',
+  url: '',
+};
+
+const initialState = fromJS({
+  formErrors: {},
+  initialData: initialWebhook,
+  isTriggering: false,
+  modifiedData: initialWebhook,
+  isLoading: true,
+  triggerResponse: {},
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_NEW_HEADER':
+      return state.updateIn(['modifiedData', ...action.keys], arr => arr.push(fromJS(header)));
+    case 'GET_DATA_SUCCEEDED': {
+      const headers = get(action, ['data', 'headers'], {});
+      let formattedHeaders = [header];
+
+      if (Object.keys(headers).length > 0) {
+        formattedHeaders = Object.keys(headers).map(key => {
+          return { key, value: headers[key] };
+        });
+      }
+
+      const data = fromJS(action.data).update('headers', () => fromJS(formattedHeaders));
+
+      return state
+        .update('isLoading', () => false)
+        .update('initialData', () => data)
+        .update('modifiedData', () => data);
+    }
+    case 'ON_CHANGE':
+      return state.updateIn(['modifiedData', ...action.keys], () => action.value);
+    case 'ON_HEADER_REMOVE': {
+      return state.updateIn(['modifiedData', 'headers'], headers => {
+        if (headers.size === 1) {
+          return fromJS([header]);
+        }
+
+        return headers.remove(action.index);
+      });
+    }
+    case 'ON_TRIGGER_CANCELED':
+      return state.update('isTriggering', () => false).set('triggerResponse', fromJS({}));
+    case 'RESET_FORM':
+      return state.update('modifiedData', () => state.get('initialData'));
+    case 'SET_ERRORS':
+      return state.update('formErrors', () => fromJS(action.errors));
+    case 'SET_IS_TRIGGERING':
+      return state.update('isTriggering', isTriggering => !isTriggering);
+    case 'SUBMIT_SUCCEEDED':
+      return state.update('initialData', () => state.get('modifiedData'));
+    case 'TRIGGER_SUCCEEDED':
+      return state
+        .update('triggerResponse', () => fromJS(action.response))
+        .update('isTriggering', () => false);
+    case 'UNSET_LOADER':
+      return state.update('isLoading', () => false);
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/Webhooks/EditView/utils/fieldsRegex.js

@@ -0,0 +1,4 @@
+const NAME_REGEX = new RegExp('(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)');
+const URL_REGEX = new RegExp('(^$)|((https?://.*)(d*)/?(.*))');
+
+export { NAME_REGEX, URL_REGEX };

package/admin/src/containers/Webhooks/EditView/utils/form.js

@@ -0,0 +1,38 @@
+import { NAME_REGEX, URL_REGEX } from './fieldsRegex';
+
+const form = {
+  name: {
+    styleName: 'col-6',
+    label: 'Settings.webhooks.form.name',
+    type: 'text',
+    value: '',
+    validations: {
+      required: true,
+      regex: NAME_REGEX,
+    },
+  },
+  url: {
+    styleName: 'col-12',
+    label: 'Settings.webhooks.form.url',
+    type: 'text',
+    value: '',
+    validations: {
+      required: true,
+      regex: URL_REGEX,
+    },
+  },
+  headers: {
+    styleName: 'col-12',
+    label: 'Settings.webhooks.form.headers',
+    type: 'headers',
+    value: [{ key: '', value: '' }],
+  },
+  events: {
+    styleName: 'col-12',
+    label: 'Settings.webhooks.form.events',
+    type: 'events',
+    value: [],
+  },
+};
+
+export default form;

package/admin/src/containers/Webhooks/EditView/utils/formatData.js

@@ -0,0 +1,26 @@
+import { set } from 'lodash';
+
+const cleanData = data => {
+  const webhooks = data;
+
+  set(webhooks, 'headers', unformatHeaders(data.headers));
+
+  return webhooks;
+};
+
+const unformatHeaders = headers => {
+  return headers.reduce((acc, current) => {
+    const { key, value } = current;
+
+    if (key !== '') {
+      return {
+        ...acc,
+        [key]: value,
+      };
+    }
+
+    return acc;
+  }, {});
+};
+
+export default cleanData;

package/admin/src/containers/Webhooks/EditView/utils/index.js

@@ -0,0 +1,3 @@
+export { default as cleanData } from './formatData';
+export { default as form } from './form';
+export { default as schema } from './schema';

package/admin/src/containers/Webhooks/EditView/utils/schema.js

@@ -0,0 +1,35 @@
+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(),
+});
+
+export default schema;

package/admin/src/containers/Webhooks/ListView/Wrapper.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 60px;
+  > div:first-of-type {
+    margin-bottom: 33px;
+  }
+  .list-wrapper {
+    border-radius: 2px;
+    box-shadow: 0 2px 4px #e3e9f3;
+    background: white;
+    > div,
+    > div > div:last-of-type {
+      box-shadow: none;
+      border-radius: 2px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  p {
+    margin-bottom: 0;
+  }
+`;
+
+export default Wrapper;