@akemona-org/strapi-admin 3.7.0

package/admin/src/components/Webhooks/EventInput/Wrapper.js

@@ -0,0 +1,77 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import { sizes } from '@buffetjs/styles';
+
+const Wrapper = styled.div`
+  padding-top: 3px;
+  padding-bottom: 8px;
+  table {
+    width: 100%;
+    border-radius: ${sizes.borderRadius};
+    overflow: hidden;
+  }
+  tr {
+    &:before {
+      content: '-';
+      position: absolute;
+      left: 20px;
+      display: inline-block;
+      width: calc(100% - 40px);
+      height: 1px;
+      margin-top: -1px;
+      line-height: 1.1em;
+      color: transparent;
+      background-color: #f6f6f6;
+    }
+    &:first-of-type:before {
+      left: 0;
+      height: 2px;
+      width: 100%;
+      background-color: #fafafb;
+      z-index: 1;
+    }
+  }
+  thead {
+    background-color: #fafafb;
+    td {
+      height: 41px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+  tbody {
+    border-bottom-left-radius: ${sizes.borderRadius};
+    border-bottom-right-radius: ${sizes.borderRadius};
+    box-shadow: inset 0px 0px 0px 1px #f6f6f6;
+    td {
+      height: 54px;
+      padding-top: 3px;
+      input[type='checkbox']:disabled:before {
+        background-color: #e8e5e5;
+      }
+      &:first-of-type {
+        width: 200px;
+        padding-left: 30px;
+        text-transform: capitalize;
+        label {
+          width: fit-content;
+          font-weight: 500;
+          cursor: pointer;
+        }
+      }
+      &:not(:first-of-type) > div {
+        display: block;
+        width: fit-content;
+        margin: 0 auto;
+      }
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/Webhooks/EventInput/index.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import formatValue from './utils/formatValue';
+import Wrapper from './Wrapper';
+import EventRow from './EventRow';
+
+const displayedData = {
+  headers: {
+    default: [
+      'Settings.webhooks.events.create',
+      'Settings.webhooks.events.update',
+      'app.utils.delete',
+    ],
+    draftAndPublish: [
+      'Settings.webhooks.events.create',
+      'Settings.webhooks.events.update',
+      'app.utils.delete',
+      'app.utils.publish',
+      'app.utils.unpublish',
+    ],
+  },
+  events: {
+    default: {
+      entry: ['entry.create', 'entry.update', 'entry.delete'],
+      media: ['media.create', 'media.update', 'media.delete'],
+    },
+    draftAndPublish: {
+      entry: ['entry.create', 'entry.update', 'entry.delete', 'entry.publish', 'entry.unpublish'],
+      media: ['media.create', 'media.update', 'media.delete'],
+    },
+  },
+};
+
+const EventInput = ({ onChange, name: inputName, value: inputValue, shouldShowDPEvents }) => {
+  const headersName = shouldShowDPEvents
+    ? displayedData.headers.draftAndPublish
+    : displayedData.headers.default;
+  const events = shouldShowDPEvents
+    ? displayedData.events.draftAndPublish
+    : displayedData.events.default;
+
+  const disabledEvents = [];
+
+  const formattedValue = formatValue(inputValue);
+
+  const handleChange = ({ 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 handleChangeAll = ({ 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 (
+    <Wrapper>
+      <table>
+        <thead>
+          <tr>
+            <td />
+            {headersName.map(header => {
+              if (header === 'app.utils.publish' || header === 'app.utils.unpublish') {
+                return (
+                  <FormattedMessage id="Settings.webhooks.event.publish-tooltip" key={header}>
+                    {msg => (
+                      <td title={msg}>
+                        <FormattedMessage id={header} />
+                      </td>
+                    )}
+                  </FormattedMessage>
+                );
+              }
+
+              return (
+                <td key={header}>
+                  <FormattedMessage id={header} />
+                </td>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(events).map(event => {
+            return (
+              <EventRow
+                disabledEvents={disabledEvents}
+                key={event}
+                name={event}
+                events={events[event]}
+                inputValue={formattedValue[event]}
+                handleChange={handleChange}
+                handleChangeAll={handleChangeAll}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </Wrapper>
+  );
+};
+
+EventInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  shouldShowDPEvents: PropTypes.bool.isRequired,
+  value: PropTypes.array.isRequired,
+};
+
+export default EventInput;

package/admin/src/components/Webhooks/EventInput/utils/formatValue.js

@@ -0,0 +1,13 @@
+const formatValue = value =>
+  value.reduce((acc, curr) => {
+    const key = curr.split('.')[0];
+
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(curr);
+
+    return acc;
+  }, {});
+
+export default formatValue;

package/admin/src/components/Webhooks/HeadersInput/Wrapper.js

@@ -0,0 +1,102 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import { sizes } from '@buffetjs/styles';
+
+const Wrapper = styled.div`
+  margin-top: 12px;
+  padding: 23px 24px 26px 24px;
+  background-color: #fafafb;
+  border-radius: ${sizes.borderRadius};
+  > ul {
+    margin-bottom: 0;
+    padding: 0;
+    list-style-type: none;
+    & + button {
+      padding: 0;
+      color: #007eff;
+      font-size: 13px;
+      font-weight: 500;
+      outline: 0;
+      svg,
+      span {
+        vertical-align: middle;
+      }
+      svg {
+        margin-right: 10px;
+      }
+    }
+    li {
+      position: relative;
+      padding-right: 30px;
+      &:not(:first-of-type) {
+        margin-bottom: 20px;
+      }
+      &:last-of-type {
+        margin-bottom: 6px;
+      }
+      > section {
+        display: inline-block;
+        width: 50%;
+        vertical-align: top;
+        &:nth-child(odd) {
+          padding-right: 15px;
+        }
+        &:nth-child(even) {
+          padding-left: 15px;
+        }
+        > p {
+          font-size: 13px;
+          color: #333740;
+          font-weight: 500;
+        }
+        > div:first-of-type {
+          height: 34px;
+          > div:first-of-type {
+            height: 34px;
+            min-height: 34px;
+            border: 1px solid #e3e9f3;
+            border-radius: 2px;
+            font-size: 13px;
+            color: #333740;
+            align-items: normal;
+            > div:first-of-type {
+              height: 32px;
+              padding: 0 1rem;
+            }
+            > div:last-of-type {
+              display: none;
+            }
+            &:hover {
+              cursor: text;
+            }
+          }
+          > span + div:first-of-type {
+            border-color: #78caff;
+            box-shadow: none;
+          }
+        }
+        & + div {
+          position: absolute;
+          top: 7px;
+          right: 0;
+          button {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .bordered {
+    input {
+      border: 1px solid #f64d0a;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/Webhooks/HeadersInput/index.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import CreatableSelect from 'react-select/creatable';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { CircleButton } from 'strapi-helper-plugin';
+import { InputText } from '@buffetjs/core';
+import { Plus } from '@buffetjs/icons';
+
+import getBorderColor from './utils/getBorderColor';
+import keys from './keys';
+import Wrapper from './Wrapper';
+
+/* eslint-disable react/no-array-index-key */
+
+const HeadersInput = ({ errors, name, onClick, onChange, onRemove, value }) => {
+  const formatOption = value => ({ value, label: value });
+  const options = keys.map(key => formatOption(key));
+
+  const handleChangeKey = (selected, name) => {
+    if (selected === null) {
+      onChange({ target: { name, value: '' } });
+    } else {
+      const { value } = selected;
+      onChange({ target: { name, value } });
+    }
+  };
+
+  const customStyles = hasError => {
+    return {
+      control: (base, state) => ({
+        ...base,
+        border: `1px solid ${getBorderColor({
+          isFocused: state.isFocused,
+          hasError,
+        })} !important`,
+        borderRadius: '2px !important',
+      }),
+      menu: base => {
+        return {
+          ...base,
+          padding: '0',
+          border: '1px solid #e3e9f3',
+          borderTop: '1px solid #78caff',
+          borderTopRightRadius: '0',
+          borderTopLeftRadius: '0',
+          borderBottomRightRadius: '3px',
+          borderBottomLeftRadius: '3px',
+          boxShadow: 'none',
+          marginTop: '-1px;',
+        };
+      },
+      menuList: base => ({
+        ...base,
+        maxHeight: '224px',
+        paddingTop: '0',
+      }),
+      option: (base, state) => {
+        return {
+          ...base,
+          backgroundColor: state.isSelected || state.isFocused ? '#f6f6f6' : '#fff',
+          color: '#000000',
+          fontSize: '13px',
+          fontWeight: state.isSelected ? '600' : '400',
+          cursor: state.isFocused ? 'pointer' : 'initial',
+          height: '32px',
+          lineHeight: '16px',
+        };
+      },
+    };
+  };
+
+  return (
+    <Wrapper>
+      <ul>
+        <li>
+          <section>
+            <p>
+              <FormattedMessage id="Settings.webhooks.key" defaultMessage="Key" />
+            </p>
+          </section>
+          <section>
+            <p>
+              <FormattedMessage id="Settings.webhooks.value" defaultMessage="Value" />
+            </p>
+          </section>
+        </li>
+        {value.map((header, index) => {
+          const { key, value } = header;
+
+          return (
+            <li key={index}>
+              <section>
+                <CreatableSelect
+                  isClearable
+                  onChange={e => handleChangeKey(e, `${name}.${index}.key`)}
+                  name={`${name}.${index}.key`}
+                  options={options}
+                  styles={customStyles(get(errors, `headers.${index}.key`, null))}
+                  value={formatOption(key)}
+                />
+              </section>
+              <section>
+                <InputText
+                  className={get(errors, `headers.${index}.value`, null) && 'bordered'}
+                  onChange={onChange}
+                  name={`${name}.${index}.value`}
+                  value={value}
+                />
+              </section>
+              <div>
+                <CircleButton type="button" isRemoveButton onClick={() => onRemove(index)} />
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      <button onClick={() => onClick(name)} type="button">
+        <Plus fill="#007eff" width="10px" />
+        <FormattedMessage
+          id="Settings.webhooks.create.header"
+          defaultMessage="Create a new header"
+        />
+      </button>
+    </Wrapper>
+  );
+};
+
+HeadersInput.defaultProps = {
+  errors: {},
+  onRemove: () => {},
+};
+
+HeadersInput.propTypes = {
+  errors: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onRemove: PropTypes.func,
+  value: PropTypes.array.isRequired,
+};
+
+export default HeadersInput;

package/admin/src/components/Webhooks/HeadersInput/keys.js

@@ -0,0 +1,39 @@
+const keys = [
+  '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',
+];
+
+export default keys;

package/admin/src/components/Webhooks/HeadersInput/utils/getBorderColor.js

@@ -0,0 +1,12 @@
+const getBorderColor = ({ isFocused = false, hasError = false }) => {
+  if (isFocused) {
+    return '#78caff';
+  }
+  if (hasError) {
+    return '#F64D0A';
+  }
+
+  return '#E3E9F3';
+};
+
+export default getBorderColor;

package/admin/src/components/Webhooks/Inputs/Wrapper.js

@@ -0,0 +1,34 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import { colors, sizes } from '@buffetjs/styles';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: ${sizes.margin * 2.7}px;
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  > p {
+    width: 100%;
+    margin-bottom: -8px;
+    padding-top: 10px;
+    font-size: 13px;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .hasError {
+    input {
+      border-color: ${colors.darkOrange};
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/Webhooks/Inputs/index.js

@@ -0,0 +1,110 @@
+/**
+ *
+ * Inputs
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { ErrorMessage, Label } from '@buffetjs/styles';
+import { Error } from '@buffetjs/core';
+import HeadersInput from '../HeadersInput';
+import EventInput from '../EventInput';
+import Wrapper from './Wrapper';
+
+function Inputs({
+  error: inputError,
+  customError,
+  label,
+  name,
+  onChange,
+  onClick,
+  onRemove,
+  type,
+  validations,
+  value,
+  ...rest
+}) {
+  return (
+    <Wrapper>
+      <Label htmlFor={name}>{label}</Label>
+      {type === 'headers' ? (
+        <>
+          <HeadersInput
+            errors={customError}
+            name={name}
+            onClick={onClick}
+            onChange={onChange}
+            onRemove={onRemove}
+            value={value}
+          />
+          {Object.keys(customError).length > 0 && (
+            <ErrorMessage>
+              <FormattedMessage id="components.Input.error.validation.required" />
+            </ErrorMessage>
+          )}
+        </>
+      ) : (
+        <Error inputError={inputError} name={name} type="text" validations={validations}>
+          {({ canCheck, error, dispatch }) => {
+            const hasError = Boolean(error);
+
+            const handleChange = e => {
+              if (!canCheck) {
+                dispatch({
+                  type: 'SET_CHECK',
+                });
+              }
+              dispatch({
+                type: 'SET_ERROR',
+                error: null,
+              });
+
+              onChange(e);
+            };
+
+            return (
+              <>
+                <EventInput
+                  {...rest}
+                  name={name}
+                  onChange={e => {
+                    handleChange(e);
+                  }}
+                  value={value}
+                />
+                {hasError && <ErrorMessage>{error}</ErrorMessage>}
+              </>
+            );
+          }}
+        </Error>
+      )}
+    </Wrapper>
+  );
+}
+
+Inputs.defaultProps = {
+  error: null,
+  customError: {},
+  label: '',
+  onClick: () => {},
+  onRemove: () => {},
+  type: 'text',
+  validations: {},
+  value: null,
+};
+
+Inputs.propTypes = {
+  error: PropTypes.string,
+  customError: PropTypes.object,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  onRemove: PropTypes.func,
+  type: PropTypes.string,
+  validations: PropTypes.object,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+};
+
+export default Inputs;

package/admin/src/components/Webhooks/ListRow/StyledListRow.js

@@ -0,0 +1,49 @@
+/**
+ *
+ * StyledListRow
+ *
+ */
+
+import styled from 'styled-components';
+import { CustomRow as Row } from '@buffetjs/styles';
+import { sizes } from 'strapi-helper-plugin';
+
+const StyledListRow = styled(Row)`
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  .checkboxWrapper {
+    width: 55px;
+    padding-left: 30px;
+    > div {
+      height: 16px;
+    }
+  }
+  .nameWrapper {
+    max-width: 158px;
+  }
+  .urlWrapper {
+    max-width: 300px;
+  }
+
+  .switchWrapper {
+    min-width: 125px;
+  }
+
+  @media (min-width: ${sizes.wide}) {
+    .urlWrapper {
+      max-width: 400px;
+    }
+  }
+  td {
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`;
+
+StyledListRow.defaultProps = {
+  disabled: true,
+};
+
+export default StyledListRow;