@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,320 @@
+/**
+ *
+ * ListView
+ *
+ */
+
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Header, List } from '@buffetjs/custom';
+import { Button } from '@buffetjs/core';
+import { Plus } from '@buffetjs/icons';
+import { omit } from 'lodash';
+import { useIntl } from 'react-intl';
+import {
+  request,
+  ListButton,
+  PopUpWarning,
+  useUserPermissions,
+  LoadingIndicatorPage,
+  EmptyState,
+} from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import PageTitle from '../../../components/SettingsPageTitle';
+import { ListRow } from '../../../components/Webhooks';
+import Wrapper from './Wrapper';
+import reducer, { initialState } from './reducer';
+
+function ListView() {
+  const {
+    isLoading,
+    allowedActions: { canCreate, canRead, canUpdate, canDelete },
+  } = useUserPermissions(adminPermissions.settings.webhooks);
+
+  const isMounted = useRef(true);
+  const { formatMessage } = useIntl();
+  const [showModal, setShowModal] = useState(false);
+  const [reducerState, dispatch] = useReducer(reducer, initialState);
+  const { push } = useHistory();
+  const { pathname } = useLocation();
+
+  const { webhooks, webhooksToDelete, webhookToDelete } = reducerState.toJS();
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (canRead) {
+      fetchData();
+    }
+  }, [canRead]);
+
+  const getWebhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
+
+  // New button
+  const addBtnLabel = formatMessage({
+    id: 'Settings.webhooks.list.button.add',
+  });
+
+  const newButtonProps = {
+    label: addBtnLabel,
+    onClick: () => handleGoTo('create'),
+    color: 'primary',
+    type: 'button',
+    icon: <Plus fill="#007eff" width="11px" height="11px" />,
+    Component: props => {
+      if (canCreate) {
+        return <Button {...props} />;
+      }
+
+      return null;
+    },
+  };
+
+  // Header props
+  const actions = [
+    {
+      ...newButtonProps,
+      icon: true,
+      style: {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+    },
+  ];
+
+  const headerProps = {
+    title: {
+      label: formatMessage({ id: 'Settings.webhooks.title' }),
+    },
+    content: formatMessage({ id: 'Settings.webhooks.list.description' }),
+    actions,
+  };
+
+  // List props
+  const rowsCount = webhooks.length;
+  const titleLabel = `${
+    rowsCount > 1
+      ? formatMessage({ id: 'Settings.webhooks.title' })
+      : formatMessage({ id: 'Settings.webhooks.singular' })
+  }`;
+  const title = `${rowsCount} ${titleLabel}`;
+
+  /* eslint-disable indent */
+  const deleteButtonProps = canDelete
+    ? {
+        color: 'delete',
+        disabled: !(webhooksToDelete.length > 0),
+        label: formatMessage({ id: 'app.utils.delete' }),
+        onClick: () => setShowModal(true),
+        type: 'button',
+      }
+    : null;
+  /* eslint-enable indent */
+
+  const listProps = {
+    title,
+    button: deleteButtonProps,
+    items: webhooks,
+  };
+
+  const fetchData = async () => {
+    try {
+      const { data } = await request('/admin/webhooks', {
+        method: 'GET',
+      });
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      }
+    } catch (err) {
+      if (isMounted.current) {
+        if (err.code !== 20) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    }
+  };
+
+  const handleChange = (value, id) => {
+    dispatch({
+      type: 'SET_WEBHOOKS_TO_DELETE',
+      value,
+      id,
+    });
+  };
+
+  const handleConfirmDelete = () => {
+    if (webhookToDelete) {
+      handleConfirmDeleteOne();
+    } else {
+      handleConfirmDeleteAll();
+    }
+  };
+
+  const handleConfirmDeleteOne = async () => {
+    try {
+      await request(`/admin/webhooks/${webhookToDelete}`, {
+        method: 'DELETE',
+      });
+
+      dispatch({
+        type: 'WEBHOOK_DELETED',
+        index: getWebhookIndex(webhookToDelete),
+      });
+    } catch (err) {
+      if (err.code !== 20) {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+    }
+    setShowModal(false);
+  };
+
+  const handleConfirmDeleteAll = async () => {
+    const body = {
+      ids: webhooksToDelete,
+    };
+
+    try {
+      await request('/admin/webhooks/batch-delete', {
+        method: 'POST',
+        body,
+      });
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'WEBHOOKS_DELETED',
+        });
+      }
+    } catch (err) {
+      if (isMounted.current) {
+        if (err.code !== 20) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    }
+    setShowModal(false);
+  };
+
+  const handleDeleteClick = id => {
+    setShowModal(true);
+
+    dispatch({
+      type: 'SET_WEBHOOK_TO_DELETE',
+      id,
+    });
+  };
+
+  const handleEnabledChange = async (value, id) => {
+    const webhookIndex = getWebhookIndex(id);
+
+    const initialWebhookProps = webhooks[webhookIndex];
+    const keys = [webhookIndex, 'isEnabled'];
+
+    const body = {
+      ...initialWebhookProps,
+      isEnabled: value,
+    };
+
+    delete body.id;
+
+    try {
+      dispatch({
+        type: 'SET_WEBHOOK_ENABLED',
+        keys,
+        value,
+      });
+
+      await request(`/admin/webhooks/${id}`, {
+        method: 'PUT',
+        body,
+      });
+    } catch (err) {
+      if (isMounted.current) {
+        dispatch({
+          type: 'SET_WEBHOOK_ENABLED',
+          keys,
+          value: !value,
+        });
+
+        if (err.code !== 20) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    }
+  };
+
+  const handleGoTo = to => {
+    push(`${pathname}/${to}`);
+  };
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Wrapper>
+      <PageTitle name="Webhooks" />
+      <Header {...headerProps} />
+      {canRead && (
+        <div className="list-wrapper">
+          {rowsCount > 0 ? (
+            <List
+              {...listProps}
+              customRowComponent={props => {
+                return (
+                  <ListRow
+                    {...props}
+                    canUpdate={canUpdate}
+                    canDelete={canDelete}
+                    onCheckChange={handleChange}
+                    onEditClick={handleGoTo}
+                    onDeleteCLick={handleDeleteClick}
+                    onEnabledChange={handleEnabledChange}
+                    itemsToDelete={webhooksToDelete}
+                  />
+                );
+              }}
+            />
+          ) : (
+            <EmptyState
+              title={formatMessage({ id: 'Settings.webhooks.list.empty.title' })}
+              description={formatMessage({ id: 'Settings.webhooks.list.empty.description' })}
+              link="https://strapi.akemona.com/documentation/developer-docs/latest/development/backend-customization.html#webhooks"
+              linkText={formatMessage({ id: 'Settings.webhooks.list.empty.link' })}
+            />
+          )}
+          <ListButton>{canCreate && <Button {...omit(newButtonProps, 'Component')} />}</ListButton>
+        </div>
+      )}
+      <PopUpWarning
+        isOpen={showModal}
+        toggleModal={() => setShowModal(!showModal)}
+        popUpWarningType="danger"
+        onConfirm={handleConfirmDelete}
+      />
+    </Wrapper>
+  );
+}
+
+export default ListView;

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

@@ -0,0 +1,43 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  webhooks: [],
+  webhooksToDelete: [],
+  webhookToDelete: null,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'GET_DATA_SUCCEEDED':
+      return state.update('webhooks', () => fromJS(action.data));
+    case 'SET_WEBHOOK_ENABLED':
+      return state.updateIn(['webhooks', ...action.keys], () => action.value);
+    case 'SET_WEBHOOK_TO_DELETE':
+      return state.update('webhookToDelete', () => action.id);
+    case 'SET_WEBHOOKS_TO_DELETE':
+      return state.update('webhooksToDelete', list => {
+        if (action.value) {
+          return list.push(action.id);
+        }
+
+        return list.filter(data => data !== action.id);
+      });
+    case 'WEBHOOKS_DELETED':
+      return state
+        .update('webhooks', webhooks =>
+          webhooks.filter(webhook => {
+            return !state.get('webhooksToDelete').includes(webhook.get('id'));
+          })
+        )
+        .update('webhooksToDelete', () => []);
+    case 'WEBHOOK_DELETED':
+      return state
+        .update('webhooks', webhooks => webhooks.remove(action.index))
+        .update('webhookToDelete', () => null);
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import EditView from '../EditView';
+
+const ProtectedCreateView = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.webhooks.create}>
+    <EditView />
+  </CheckPagePermissions>
+);
+
+export default ProtectedCreateView;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import EditView from '../EditView';
+
+const ProtectedEditView = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.webhooks.update}>
+    <EditView />
+  </CheckPagePermissions>
+);
+
+export default ProtectedEditView;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import adminPermissions from '../../../permissions';
+import ListView from '../ListView';
+
+const ProtectedListView = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings.webhooks.main}>
+    <ListView />
+  </CheckPagePermissions>
+);
+
+export default ProtectedListView;

package/admin/src/contexts/MarketPlace/index.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const MarketPlaceContext = createContext({});
+
+const MarketPlaceContextProvider = ({ children, ...rest }) => {
+  return (
+    <MarketPlaceContext.Provider value={rest}>
+      {children}
+    </MarketPlaceContext.Provider>
+  );
+};
+
+const useMarketPlaceContext = () => useContext(MarketPlaceContext);
+
+MarketPlaceContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  downloadPlugin: PropTypes.func.isRequired,
+};
+
+export {
+  MarketPlaceContext,
+  MarketPlaceContextProvider,
+  useMarketPlaceContext,
+};

package/admin/src/contexts/PermisssionsDataManagerContext/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const PermissionsDataManagerContext = createContext({});
+
+export default PermissionsDataManagerContext;

package/admin/src/contexts/SettingsHeaderSearchContext/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SettingsHeaderSearchContext = createContext({});
+
+export default SettingsHeaderSearchContext;

package/admin/src/contexts/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';

package/admin/src/hooks/index.js

@@ -0,0 +1,9 @@
+export { default as useModels } from './useModels';
+export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
+export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFromMarketPlace';
+export { default as useFetchRole } from './useFetchRole';
+export { default as useRolesList } from './useRolesList';
+export { default as useSettingsHeaderSearchContext } from './useSettingsHeaderSearchContext';
+export { default as useSettingsMenu } from './useSettingsMenu';
+export { default as useSettingsForm } from './useSettingsForm';
+export { default as usePermissionsDataManager } from './usePermissionsDataManager';

package/admin/src/hooks/useFetchPermissionsLayout/index.js

@@ -0,0 +1,32 @@
+import { useEffect, useReducer } from 'react';
+import { request } from 'strapi-helper-plugin';
+
+import reducer, { initialState } from './reducer';
+
+const useFetchPermissionsLayout = id => {
+  const [{ data, error, isLoading }, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const getData = async () => {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      const { data } = await request('/admin/permissions', {
+        method: 'GET',
+        params: { role: id },
+      });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data,
+      });
+    };
+
+    getData();
+  }, [id]);
+
+  return { data, error, isLoading };
+};
+
+export default useFetchPermissionsLayout;

package/admin/src/hooks/useFetchPermissionsLayout/reducer.js

@@ -0,0 +1,35 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  data: {},
+  error: null,
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.data = {};
+        draftState.error = null;
+        break;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.data = action.data;
+        draftState.isLoading = false;
+        draftState.error = null;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        draftState.error = action.error;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/hooks/useFetchPluginsFromMarketPlace/index.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+const useFetchPluginsFromMarketPlace = () => {
+  const { currentLocale } = useGlobalContext();
+  const [state, setState] = useState({
+    error: false,
+    isLoading: true,
+    data: null,
+  });
+
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
+
+    const getData = async () => {
+      try {
+        const { data } = await axios.get('https://marketplace.strapi.io/plugins', {
+          cancelToken: source.token,
+          params: { lang: currentLocale },
+        });
+
+        setState({
+          isLoading: false,
+          data,
+          error: false,
+        });
+      } catch (err) {
+        if (axios.isCancel(err)) {
+          // Silent
+        } else {
+          // handle error
+          setState(prev => ({ ...prev, isLoading: false, error: true }));
+        }
+      }
+    };
+
+    getData();
+
+    return () => {
+      source.cancel();
+    };
+  }, [currentLocale]);
+
+  return state;
+};
+
+export default useFetchPluginsFromMarketPlace;

package/admin/src/hooks/useFetchRole/index.js

@@ -0,0 +1,58 @@
+import { useCallback, useReducer, useEffect } from 'react';
+import { request } from 'strapi-helper-plugin';
+import reducer, { initialState } from './reducer';
+
+const useFetchRole = id => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    if (id) {
+      fetchRole(id);
+    } else {
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role: {},
+        permissions: [],
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const fetchRole = async roleId => {
+    try {
+      const [{ data: role }, { data: permissions }] = await Promise.all(
+        [`roles/${roleId}`, `roles/${roleId}/permissions`].map(endPoint =>
+          request(`/admin/${endPoint}`, { method: 'GET' })
+        )
+      );
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role,
+        permissions,
+      });
+    } catch (err) {
+      console.error(err);
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const handleSubmitSucceeded = useCallback(data => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      ...data,
+    });
+  }, []);
+
+  return { ...state, onSubmitSucceeded: handleSubmitSucceeded };
+};
+
+export default useFetchRole;

package/admin/src/hooks/useFetchRole/reducer.js

@@ -0,0 +1,33 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  role: {},
+  permissions: {},
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.role = action.role;
+        draftState.permissions = action.permissions;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.role.name = action.name;
+        draftState.role.description = action.description;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;