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

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -0,0 +1,486 @@
+/**
+ *
+ * ListView
+ *
+ */
+
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import {
+  request,
+  useRBAC,
+  LoadingIndicatorPage,
+  useNotification,
+  useFocusWhenNavigate,
+  SettingsPageTitle,
+  ConfirmDialog,
+  onRowClick,
+  stopPropagation,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+import { Row } from '@strapi/parts/Row';
+import { Stack } from '@strapi/parts/Stack';
+import { IconButton } from '@strapi/parts/IconButton';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Table, Thead, Tr, Th, Tbody, Td, TFooter } from '@strapi/parts/Table';
+import { Text, TableLabel, Subtitle } from '@strapi/parts/Text';
+import { Button } from '@strapi/parts/Button';
+import { VisuallyHidden } from '@strapi/parts/VisuallyHidden';
+import { Switch } from '@strapi/parts/Switch';
+import { Main } from '@strapi/parts/Main';
+import { LinkButton } from '@strapi/parts/LinkButton';
+import { useNotifyAT } from '@strapi/parts/LiveRegions';
+import { Box } from '@strapi/parts/Box';
+import AddIcon from '@strapi/icons/AddIcon';
+import EditIcon from '@strapi/icons/EditIcon';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import EmptyStateDocument from '@strapi/icons/EmptyStateDocument';
+import reducer, { initialState } from './reducer';
+import adminPermissions from '../../../../../permissions';
+
+const ListView = () => {
+  const {
+    isLoading,
+    allowedActions: { canCreate, canRead, canUpdate, canDelete },
+  } = useRBAC(adminPermissions.settings.webhooks);
+  const toggleNotification = useNotification();
+  const isMounted = useRef(true);
+  const { formatMessage } = useIntl();
+  const [showModal, setShowModal] = useState(false);
+  const [{ webhooks, webhooksToDelete, webhookToDelete, loadingWebhooks }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
+  const { notifyStatus } = useNotifyAT();
+
+  useFocusWhenNavigate();
+  const { push } = useHistory();
+  const { pathname } = useLocation();
+  const rowsCount = webhooks.length;
+  const webhooksToDeleteLength = webhooksToDelete.length;
+  const getWebhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (canRead) {
+      fetchWebHooks();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canRead]);
+
+  const fetchWebHooks = async () => {
+    try {
+      const { data } = await request('/admin/webhooks', {
+        method: 'GET',
+      });
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+        notifyStatus('webhooks have been loaded');
+      }
+    } catch (err) {
+      console.log(err);
+
+      if (isMounted.current) {
+        if (err.code !== 20) {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+        dispatch({
+          type: 'TOGGLE_LOADING',
+        });
+      }
+    }
+  };
+
+  const handleToggleModal = () => {
+    setShowModal(prev => !prev);
+  };
+
+  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) {
+        toggleNotification({
+          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) {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    }
+    setShowModal(false);
+  };
+
+  const handleDeleteClick = id => {
+    setShowModal(true);
+
+    if (id !== 'all') {
+      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) {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    }
+  };
+
+  const handleSelectAllCheckbox = () => {
+    dispatch({
+      type: 'SET_ALL_WEBHOOKS_TO_DELETE',
+    });
+  };
+
+  const handleSelectOneCheckbox = (value, id) => {
+    dispatch({
+      type: 'SET_WEBHOOKS_TO_DELETE',
+      value,
+      id,
+    });
+  };
+
+  const handleGoTo = to => {
+    push(`${pathname}/${to}`);
+  };
+
+  return (
+    <Layout>
+      <SettingsPageTitle name="Webhooks" />
+      <Main aria-busy={isLoading || loadingWebhooks}>
+        <>
+          <HeaderLayout
+            title={formatMessage({ id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' })}
+            subtitle={formatMessage({
+              id: 'Settings.webhooks.list.description',
+              defaultMessage: 'Get POST changes notifications.',
+            })}
+            primaryAction={
+              canCreate &&
+              !loadingWebhooks && (
+                <LinkButton
+                  startIcon={<AddIcon />}
+                  variant="default"
+                  to={`${pathname}/create`}
+                  size="L"
+                >
+                  {formatMessage({
+                    id: 'Settings.webhooks.list.button.add',
+                    defaultMessage: 'Add new webhook',
+                  })}
+                </LinkButton>
+              )
+            }
+          />
+          {webhooksToDeleteLength > 0 && canDelete && (
+            <ActionLayout
+              startActions={
+                <>
+                  <Subtitle textColor="neutral600">
+                    {formatMessage(
+                      {
+                        id: 'Settings.webhooks.to.delete',
+                        defaultMessage:
+                          '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected',
+                      },
+                      { webhooksToDeleteLength }
+                    )}
+                  </Subtitle>
+                  <Button
+                    onClick={() => handleDeleteClick('all')}
+                    startIcon={<DeleteIcon />}
+                    size="L"
+                    variant="danger-light"
+                  >
+                    Delete
+                  </Button>
+                </>
+              }
+            />
+          )}
+          <ContentLayout>
+            {isLoading || loadingWebhooks ? (
+              <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                <LoadingIndicatorPage />
+              </Box>
+            ) : (
+              <>
+                {rowsCount > 0 ? (
+                  <Table
+                    colCount={5}
+                    rowCount={rowsCount + 1}
+                    footer={
+                      <TFooter
+                        onClick={() => (canCreate ? handleGoTo('create') : {})}
+                        icon={<AddIcon />}
+                      >
+                        {formatMessage({
+                          id: 'Settings.webhooks.list.button.add',
+                          defaultMessage: 'Add new webhook',
+                        })}
+                      </TFooter>
+                    }
+                  >
+                    <Thead>
+                      <Tr>
+                        <Th>
+                          <BaseCheckbox
+                            aria-label={formatMessage({
+                              id: 'Settings.webhooks.list.all-entries.select',
+                              defaultMessage: 'Select all entries',
+                            })}
+                            indeterminate={
+                              webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount
+                            }
+                            value={webhooksToDeleteLength === rowsCount}
+                            onValueChange={handleSelectAllCheckbox}
+                          />
+                        </Th>
+                        <Th>
+                          <TableLabel textColor="neutral600">
+                            {formatMessage({
+                              id: 'Settings.webhooks.form.name',
+                              defaultMessage: 'Name',
+                            })}
+                          </TableLabel>
+                        </Th>
+                        <Th>
+                          <TableLabel textColor="neutral600">
+                            {formatMessage({
+                              id: 'Settings.webhooks.form.url',
+                              defaultMessage: 'URL',
+                            })}
+                          </TableLabel>
+                        </Th>
+                        <Th width="30%">
+                          <TableLabel textColor="neutral600">
+                            {formatMessage({
+                              id: 'Settings.webhooks.list.th.status',
+                              defaultMessage: 'Status',
+                            })}
+                          </TableLabel>
+                        </Th>
+                        <Th>
+                          <VisuallyHidden>
+                            {formatMessage({
+                              id: 'Settings.webhooks.list.th.actions',
+                              defaultMessage: 'Actions',
+                            })}
+                          </VisuallyHidden>
+                        </Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {webhooks.map(webhook => (
+                        <Tr
+                          key={webhook.id}
+                          {...onRowClick({
+                            fn: () => handleGoTo(webhook.id),
+                            condition: canUpdate,
+                          })}
+                        >
+                          <Td {...stopPropagation}>
+                            <BaseCheckbox
+                              aria-label={`${formatMessage({
+                                id: 'Settings.webhooks.list.select',
+                                defaultMessage: 'Select',
+                              })} ${webhook.name}`}
+                              value={webhooksToDelete?.includes(webhook.id)}
+                              onValueChange={value => handleSelectOneCheckbox(value, webhook.id)}
+                              id="select"
+                              name="select"
+                            />
+                          </Td>
+                          <Td>
+                            <Text bold textColor="neutral800">
+                              {webhook.name}
+                            </Text>
+                          </Td>
+                          <Td>
+                            <Text textColor="neutral800">{webhook.url}</Text>
+                          </Td>
+                          <Td>
+                            <Row {...stopPropagation}>
+                              <Switch
+                                onLabel={formatMessage({
+                                  id: 'Settings.webhooks.enabled',
+                                  defaultMessage: 'Enabled',
+                                })}
+                                offLabel={formatMessage({
+                                  id: 'Settings.webhooks.disabled',
+                                  defaultMessage: 'Disabled',
+                                })}
+                                label={`${webhook.name} ${formatMessage({
+                                  id: 'Settings.webhooks.list.th.status',
+                                  defaultMessage: 'Status',
+                                })}`}
+                                selected={webhook.isEnabled}
+                                onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
+                                visibleLabels
+                              />
+                            </Row>
+                          </Td>
+                          <Td>
+                            <Stack horizontal size={1} {...stopPropagation}>
+                              {canUpdate && (
+                                <IconButton
+                                  onClick={() => {
+                                    handleGoTo(webhook.id);
+                                  }}
+                                  label={formatMessage({
+                                    id: 'Settings.webhooks.events.update',
+                                    defaultMessage: 'Update',
+                                  })}
+                                  icon={<EditIcon />}
+                                  noBorder
+                                />
+                              )}
+                              {canDelete && (
+                                <IconButton
+                                  onClick={() => handleDeleteClick(webhook.id)}
+                                  label={formatMessage({
+                                    id: 'Settings.webhooks.events.delete',
+                                    defaultMessage: 'Delete',
+                                  })}
+                                  icon={<DeleteIcon />}
+                                  noBorder
+                                  id={`delete-${webhook.id}`}
+                                />
+                              )}
+                            </Stack>
+                          </Td>
+                        </Tr>
+                      ))}
+                    </Tbody>
+                  </Table>
+                ) : (
+                  <EmptyStateLayout
+                    icon={<EmptyStateDocument width="160px" />}
+                    content={formatMessage({
+                      id: 'Settings.webhooks.list.empty.description',
+                      defaultMessage: 'Add your first webhook',
+                    })}
+                    action={
+                      <Button
+                        variant="secondary"
+                        startIcon={<AddIcon />}
+                        onClick={() => (canCreate ? handleGoTo('create') : {})}
+                      >
+                        {formatMessage({
+                          id: 'Settings.webhooks.list.button.add',
+                          defaultMessage: 'Add new webhook',
+                        })}
+                      </Button>
+                    }
+                  />
+                )}
+              </>
+            )}
+          </ContentLayout>
+        </>
+      </Main>
+      <ConfirmDialog
+        isOpen={showModal}
+        onToggleDialog={handleToggleModal}
+        onConfirm={handleConfirmDelete}
+      />
+    </Layout>
+  );
+};
+
+export default ListView;

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/reducer.js

@@ -0,0 +1,72 @@
+import produce from 'immer';
+import set from 'lodash/set';
+
+const initialState = {
+  webhooks: [],
+  webhooksToDelete: [],
+  webhookToDelete: null,
+  loadingWebhooks: true,
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.webhooks = action.data;
+        draftState.loadingWebhooks = false;
+        break;
+      }
+
+      case 'TOGGLE_LOADING': {
+        draftState.loadingWebhooks = !state.loadingWebhooks;
+        break;
+      }
+
+      case 'SET_WEBHOOK_ENABLED': {
+        set(draftState, ['webhooks', ...action.keys], action.value);
+        break;
+      }
+
+      case 'SET_WEBHOOK_TO_DELETE': {
+        draftState.webhookToDelete = action.id;
+        break;
+      }
+      case 'SET_WEBHOOKS_TO_DELETE': {
+        if (action.value) {
+          draftState.webhooksToDelete.push(action.id);
+        } else {
+          draftState.webhooksToDelete = state.webhooksToDelete.filter(id => id !== action.id);
+        }
+
+        break;
+      }
+      case 'SET_ALL_WEBHOOKS_TO_DELETE': {
+        if (state.webhooksToDelete.length === 0) {
+          draftState.webhooksToDelete = state.webhooks.map(webhook => webhook.id);
+        } else {
+          draftState.webhooksToDelete = [];
+        }
+
+        break;
+      }
+      case 'WEBHOOKS_DELETED': {
+        draftState.webhooks = state.webhooks.filter(
+          webhook => !state.webhooksToDelete.includes(webhook.id)
+        );
+        draftState.webhooksToDelete = [];
+        break;
+      }
+      case 'WEBHOOK_DELETED': {
+        draftState.webhooks = state.webhooks.filter((_, index) => index !== action.index);
+        draftState.webhookToDelete = null;
+
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/pages/SettingsPage/pages/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/pages/SettingsPage/pages/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/pages/SettingsPage/pages/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/pages/SettingsPage/utils/defaultRoutes.js

@@ -1,5 +1,5 @@
-import RolesCreatePage from 'ee_else_ce/pages/Roles/CreatePage';
-import ProtectedRolesListPage from 'ee_else_ce/pages/Roles/ProtectedListPage';
+import RolesCreatePage from 'ee_else_ce/pages/SettingsPage/pages/Roles/CreatePage';
+import ProtectedRolesListPage from 'ee_else_ce/pages/SettingsPage/pages/Roles/ProtectedListPage';
 
 const defaultRoutes = [
   {
@@ -27,7 +27,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "admin-edit-roles-page" */ '../../Roles/ProtectedEditPage'
+        /* webpackChunkName: "admin-edit-roles-page" */ '../pages/Roles/ProtectedEditPage'
       );
 
       return component;
@@ -38,7 +38,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "admin-users" */ '../../Users/ProtectedListPage'
+        /* webpackChunkName: "admin-users" */ '../pages/Users/ProtectedListPage'
       );
 
       return component;
@@ -49,7 +49,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "admin-edit-users" */ '../../Users/ProtectedEditPage'
+        /* webpackChunkName: "admin-edit-users" */ '../pages/Users/ProtectedEditPage'
       );
 
       return component;
@@ -60,7 +60,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedCreateView'
+        /* webpackChunkName: "webhook-edit-page" */ '../pages/Webhooks/ProtectedCreateView'
       );
 
       return component;
@@ -71,7 +71,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedEditView'
+        /* webpackChunkName: "webhook-edit-page" */ '../pages/Webhooks/ProtectedEditView'
       );
 
       return component;
@@ -82,7 +82,7 @@ const defaultRoutes = [
   {
     Component: async () => {
       const component = await import(
-        /* webpackChunkName: "webhook-list-page" */ '../../Webhooks/ProtectedListView'
+        /* webpackChunkName: "webhook-list-page" */ '../pages/Webhooks/ProtectedListView'
       );
 
       return component;