@akemona-org/strapi-admin 3.7.0

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

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

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

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

@@ -0,0 +1,51 @@
+/**
+ *
+ * Switch
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+import Toggle from './Toggle';
+import Wrapper from './Wrapper';
+
+function Switch({ disabled, name, value, onChange }) {
+  const { formatMessage } = useGlobalContext();
+
+  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;

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

@@ -0,0 +1,64 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  overflow-x: auto;
+  margin-bottom: 22px;
+  box-shadow: 0 2px 4px 0 #e3e9f3;
+  table {
+    width: 100%;
+    height: 68px;
+    background-color: white;
+    border-radius: 2px;
+    td {
+      padding: 0 25px;
+      p {
+        margin-bottom: 0;
+        font-size: 13px;
+        line-height: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        svg,
+        span {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+        svg + span {
+          margin-left: 10px;
+        }
+        &.success-label {
+          svg {
+            margin-bottom: -2px;
+          }
+        }
+      }
+      &:first-of-type {
+        p {
+          font-weight: 500;
+        }
+      }
+      &:last-of-type {
+        max-width: 400px;
+        text-align: right;
+        button {
+          color: #b4b6ba;
+          &,
+          &:focus {
+            outline: 0;
+          }
+          svg {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Fail, Success, Pending, Remove } from '@buffetjs/icons';
+
+import Wrapper from './Wrapper';
+
+const TriggerContainer = ({ isPending, onCancel, response }) => {
+  const { statusCode, message } = response;
+
+  return (
+    <Wrapper>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <p>
+                <FormattedMessage
+                  id="Settings.webhooks.trigger.test"
+                  defaultMessage="test-trigger"
+                />
+              </p>
+            </td>
+            {isPending && (
+              <>
+                <td>
+                  <p>
+                    <Pending fill="#ffb500" width="15px" height="15px" />
+                    <FormattedMessage
+                      id="Settings.webhooks.trigger.pending"
+                      defaultMessage="pending"
+                    />
+                  </p>
+                </td>
+                <td>
+                  <button onClick={onCancel} type="button">
+                    <FormattedMessage
+                      id="Settings.webhooks.trigger.cancel"
+                      defaultMessage="cancel"
+                    />
+                    <Remove fill="#b4b6ba" />
+                  </button>
+                </td>
+              </>
+            )}
+
+            {!isPending && statusCode >= 200 && statusCode < 300 && (
+              <>
+                <td>
+                  <p className="success-label">
+                    <Success fill="#6DBB1A" width="19px" height="19px" />
+                    <FormattedMessage
+                      id="Settings.webhooks.trigger.success"
+                      defaultMessage="success"
+                    />
+                  </p>
+                </td>
+                <td>
+                  <p>
+                    <FormattedMessage
+                      id="Settings.webhooks.trigger.success.label"
+                      defaultMessage="success"
+                    />
+                  </p>
+                </td>
+              </>
+            )}
+
+            {!isPending && statusCode >= 300 && (
+              <>
+                <td>
+                  <p className="fail-label">
+                    <Fail fill="#f64d0a" width="15px" height="15px" />
+                    <FormattedMessage id="Settings.error" defaultMessage="error" />
+                    &nbsp;
+                    {statusCode}
+                  </p>
+                </td>
+                <td>
+                  <p title={message}>{message}</p>
+                </td>
+              </>
+            )}
+          </tr>
+        </tbody>
+      </table>
+    </Wrapper>
+  );
+};
+
+TriggerContainer.defaultProps = {
+  isPending: false,
+  onCancel: () => {},
+  response: {},
+};
+
+TriggerContainer.propTypes = {
+  isPending: PropTypes.bool,
+  onCancel: PropTypes.func,
+  response: PropTypes.object,
+};
+
+export default TriggerContainer;

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

@@ -0,0 +1,4 @@
+export { default as Inputs } from './Inputs';
+export { default as ListRow } from './ListRow';
+export { default as Switch } from './Switch';
+export { default as TriggerContainer } from './TriggerContainer';

package/admin/src/config.js

@@ -0,0 +1,13 @@
+// DO NOT MODIFY THESE OPTIONS
+
+// NOTE TO PLUGINS DEVELOPERS:
+// If you modify this file you also need to update the documentation accordingly
+// Here's the file: strapi/docs/3.0.0-beta.x/admin-panel/customization.md#tutorial-videos
+// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
+
+// IMPORTANT: It also needs to be added to the migration guide.
+
+export const LOGIN_LOGO = null;
+export const SHOW_TUTORIALS = true;
+export const SETTINGS_BASE_URL = '/settings';
+export const STRAPI_UPDATE_NOTIF = true;

package/admin/src/configureStore.js

@@ -0,0 +1,60 @@
+/**
+ * Create the store with dynamic reducers
+ */
+
+import { createStore, applyMiddleware, compose } from 'redux';
+import { fromJS } from 'immutable';
+// import { routerMiddleware } from 'react-router-redux';
+import createSagaMiddleware from 'redux-saga';
+import createReducer from './reducers';
+
+const sagaMiddleware = createSagaMiddleware();
+
+export default function configureStore(initialState = {}, reducers, strapi) {
+  // Create the store with two middlewares
+  // 1. sagaMiddleware: Makes redux-sagas work
+  // 2. routerMiddleware: Syncs the location/URL path to the state
+  const middlewares = [sagaMiddleware];
+
+  strapi.middlewares.middlewares.forEach(middleware => {
+    middlewares.push(middleware());
+  });
+
+  const enhancers = [applyMiddleware(...middlewares)];
+
+  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
+  /* eslint-disable no-underscore-dangle */
+  const composeEnhancers =
+    process.env.NODE_ENV !== 'production' &&
+    typeof window === 'object' &&
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+          // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
+          // Prevent recomputing reducers for `replaceReducer`
+          shouldHotReload: false,
+          name: 'Strapi - Dashboard',
+        })
+      : compose;
+  /* eslint-enable */
+
+  const store = createStore(
+    createReducer(reducers),
+    fromJS(initialState),
+    composeEnhancers(...enhancers)
+  );
+
+  // Extensions
+  store.runSaga = sagaMiddleware.run;
+  store.injectedReducers = {}; // Reducer registry
+  store.injectedSagas = {}; // Saga registry
+
+  // Make reducers hot reloadable, see http://mxs.is/googmo
+  /* istanbul ignore next */
+  if (module.hot) {
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createReducer(store.injectedReducers));
+    });
+  }
+
+  return store;
+}

package/admin/src/containers/Admin/Content.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Content = styled.div`
+  min-height: calc(100vh - ${props => props.theme.main.sizes.header.height});
+  width: calc(100vw - ${props => props.theme.main.sizes.leftMenu.width});
+  margin-top: ${props => props.theme.main.sizes.header.height};
+  margin-left: ${props => props.theme.main.sizes.leftMenu.width};
+  background: ${props => props.theme.main.colors.content['background-alpha']};
+`;
+
+Content.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        content: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Content.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default Content;

package/admin/src/containers/Admin/Logout/components.js

@@ -0,0 +1,128 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  > div {
+    height: 6rem;
+    width: 100%;
+    line-height: 5.8rem;
+    z-index: 999;
+    > button,
+    > button.btn {
+      position: relative;
+      z-index: 9;
+      width: 100%;
+      padding-left: 20px;
+      padding-right: 20px;
+      background: white;
+      border: none;
+      border-radius: 0;
+      color: #333740;
+      font-size: 14px;
+      font-weight: 500;
+      text-align: right;
+      cursor: pointer;
+      transition: background 0.2s ease-out;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: #333740;
+        background-color: #fafafb !important;
+        z-index: 9;
+      }
+
+      > i,
+      > svg {
+        margin-left: 10px;
+        transition: transform 0.3s ease-out;
+
+        &[alt='true'] {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+  }
+
+  &:after {
+    position: absolute;
+    right: -1px;
+    top: calc(50% - 10px);
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 20px;
+    border-left: 1px solid #f3f4f4;
+    transition: opacity 0.2s ease-out;
+  }
+
+  &:hover:after {
+    opacity: 0;
+  }
+
+  .dropDownContent {
+    z-index: 8;
+    top: -3px !important;
+    left: auto !important;
+    min-width: 190px;
+    margin: 0 !important;
+    padding: 0;
+    line-height: 1.8rem;
+    border: none !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    font-size: 14px;
+    overflow: hidden;
+    box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
+    &:active {
+      outline: 0;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -1px;
+      width: calc(100% + 1px);
+      height: 3px;
+      box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+    }
+
+    > button {
+      height: 54px;
+      padding: 0px 15px;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: #fafafb !important;
+        border-radius: 0px;
+        cursor: pointer;
+        outline: 0;
+      }
+      &:hover,
+      &:active {
+        color: #333740;
+      }
+    }
+
+    > button:last-child {
+      color: #f75b1d;
+      > i,
+      svg {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .item {
+    &:active {
+      color: black;
+    }
+    &:hover {
+      background-color: #fafafb !important;
+    }
+  }
+`;
+
+export default Wrapper;