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

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

@@ -1,102 +0,0 @@
-/**
- *
- * 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

@@ -1,143 +0,0 @@
-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/utils/getBorderColor.js

@@ -1,12 +0,0 @@
-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

@@ -1,34 +0,0 @@
-/**
- *
- * 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

@@ -1,110 +0,0 @@
-/**
- *
- * 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

@@ -1,49 +0,0 @@
-/**
- *
- * 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;

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

@@ -1,113 +0,0 @@
-/**
- *
- * ListRow
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Checkbox, IconLinks } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-
-import Switch from '../Switch';
-import StyledListRow from './StyledListRow';
-
-function ListRow({
-  canDelete,
-  canUpdate,
-  id,
-  isEnabled,
-  itemsToDelete,
-  name,
-  url,
-  onCheckChange,
-  onEnabledChange,
-  onDeleteCLick,
-  onEditClick,
-}) {
-  const links = [
-    {
-      icon: canUpdate ? <FontAwesomeIcon icon={faPencilAlt} /> : null,
-      onClick: () => onEditClick(id),
-    },
-    {
-      icon: canDelete ? <FontAwesomeIcon icon={faTrashAlt} /> : null,
-      onClick: e => {
-        e.stopPropagation();
-        onDeleteCLick(id);
-      },
-    },
-  ];
-
-  const handleClick = () => {
-    if (canUpdate) {
-      onEditClick(id);
-    }
-  };
-
-  const isChecked = itemsToDelete.includes(id);
-
-  return (
-    <StyledListRow onClick={handleClick} disabled={!canUpdate}>
-      {canDelete && (
-        <td className="checkboxWrapper">
-          <Checkbox
-            name={name}
-            value={isChecked}
-            onClick={e => e.stopPropagation()}
-            onChange={({ target: { value } }) => onCheckChange(value, id)}
-          />
-        </td>
-      )}
-      <td className="nameWrapper">
-        <p>{name}</p>
-      </td>
-      <td className="urlWrapper">
-        <p title={url}>{url}</p>
-      </td>
-      <td className="switchWrapper">
-        <div onClick={e => e.stopPropagation()} role="button" aria-hidden="true">
-          <Switch
-            disabled={!canUpdate}
-            name={name}
-            value={isEnabled}
-            onChange={({ target: { value } }) => onEnabledChange(value, id)}
-          />
-        </div>
-      </td>
-      <td>
-        <IconLinks links={links} />
-      </td>
-    </StyledListRow>
-  );
-}
-
-ListRow.defaultProps = {
-  canDelete: false,
-  canUpdate: false,
-  itemsToDelete: [],
-  isEnabled: false,
-  name: null,
-  onCheckChange: () => {},
-  onDeleteCLick: () => {},
-  onEditClick: () => {},
-  onEnabledChange: () => {},
-  url: null,
-};
-
-ListRow.propTypes = {
-  canDelete: PropTypes.bool,
-  canUpdate: PropTypes.bool,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  itemsToDelete: PropTypes.instanceOf(Array),
-  isEnabled: PropTypes.bool,
-  name: PropTypes.string,
-  onCheckChange: PropTypes.func,
-  onDeleteCLick: PropTypes.func,
-  onEditClick: PropTypes.func,
-  onEnabledChange: PropTypes.func,
-  url: PropTypes.string,
-};
-
-export default ListRow;

package/admin/src/components/Webhooks/Switch/Toggle.js

@@ -1,30 +0,0 @@
-/**
- *
- * Toggle
- *
- */
-
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const Toggle = styled.input`
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')} !important;
-  opacity: 0;
-`;
-
-Toggle.defaultProps = {
-  disabled: true,
-  type: 'checkbox',
-};
-
-Toggle.propTypes = {
-  type: PropTypes.string,
-};
-
-export default Toggle;

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

@@ -1,67 +0,0 @@
-/**
- *
- * Wrapper
- *
- */
-
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  position: relative;
-  .button {
-    position: relative;
-    z-index: 2;
-    width: 30px;
-    height: 18px;
-    margin-right: 12px;
-    .button-rect {
-      position: relative;
-      z-index: -2;
-      margin-top: 3px;
-      width: 30px;
-      height: 12px;
-      background-color: #faa684;
-      border-radius: 6px;
-    }
-    .button-circle {
-      position: absolute;
-      top: 0;
-      right: -1px;
-      width: 17px;
-      height: 17px;
-      border-radius: 9px;
-      background-color: #f1f1f1;
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: -1;
-        margin: -1px;
-        border-radius: inherit;
-        background: linear-gradient(to bottom, #f1f1f1, #e7e7e7);
-      }
-    }
-  }
-  input {
-    z-index: 3;
-    cursor: pointer;
-  }
-  input:checked + .button {
-    .button-rect {
-      background-color: #6dbb1a;
-    }
-    .button-circle {
-      left: -1px;
-    }
-  }
-  .button,
-  p {
-    display: inline-block;
-    vertical-align: top;
-  }
-`;
-
-export default Wrapper;

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

@@ -1,51 +0,0 @@
-/**
- *
- * Switch
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import Toggle from './Toggle';
-import Wrapper from './Wrapper';
-
-function Switch({ disabled, name, value, onChange }) {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Wrapper>
-      <Toggle
-        disabled={disabled}
-        checked={value}
-        name={name}
-        onChange={({ target: { checked } }) => onChange({ target: { name, value: checked } })}
-      />
-      <div className="button">
-        <div className="button-rect" />
-        <div className="button-circle" />
-      </div>
-      <p>
-        {value
-          ? formatMessage({ id: 'Settings.webhooks.enabled' })
-          : formatMessage({ id: 'Settings.webhooks.disabled' })}
-      </p>
-    </Wrapper>
-  );
-}
-
-Switch.defaultProps = {
-  disabled: true,
-  onChange: () => {},
-  value: false,
-};
-
-Switch.propTypes = {
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.bool,
-};
-
-export default Switch;