@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/Users/ListPage/Header.js

@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { Button } from '@buffetjs/core';
+import { Header as HeaderCompo } from '@buffetjs/custom';
+import { Envelope } from '@buffetjs/icons';
+
+const Header = ({
+  canCreate,
+  canDelete,
+  canRead,
+  count,
+  dataToDelete,
+  isLoading,
+  onClickAddUser,
+  onClickDelete,
+}) => {
+  const { formatMessage } = useGlobalContext();
+  const tradBaseId = 'Settings.permissions.users.listview.';
+  const headerDescriptionSuffix =
+    count > 1 ? 'header.description.plural' : 'header.description.singular';
+
+  /* eslint-disable indent */
+  const headerProps = {
+    actions: isLoading
+      ? []
+      : [
+          {
+            color: 'delete',
+            disabled: !dataToDelete.length,
+            label: formatMessage({ id: 'app.utils.delete' }),
+            onClick: onClickDelete,
+            type: 'button',
+            Component: props => (canDelete ? <Button {...props} /> : null),
+          },
+
+          {
+            color: 'primary',
+            icon: <Envelope style={{ verticalAlign: 'middle' }} />,
+            label: formatMessage({ id: 'Settings.permissions.users.create' }),
+            onClick: onClickAddUser,
+            type: 'button',
+            Component: props => (canCreate ? <Button {...props} /> : null),
+          },
+        ],
+    content: canRead
+      ? formatMessage({ id: `${tradBaseId}${headerDescriptionSuffix}` }, { number: count })
+      : null,
+    title: { label: formatMessage({ id: `${tradBaseId}header.title` }) },
+  };
+  /* eslint-enable indent */
+
+  return <HeaderCompo {...headerProps} isLoading={isLoading} />;
+};
+
+Header.defaultProps = {
+  canCreate: false,
+  canDelete: false,
+  canRead: false,
+  count: 0,
+  dataToDelete: [],
+  isLoading: false,
+  onClickAddUser: () => {},
+  onClickDelete: () => {},
+};
+
+Header.propTypes = {
+  canCreate: PropTypes.bool,
+  canDelete: PropTypes.bool,
+  canRead: PropTypes.bool,
+  count: PropTypes.number,
+  dataToDelete: PropTypes.array,
+  isLoading: PropTypes.bool,
+  onClickAddUser: PropTypes.func,
+  onClickDelete: PropTypes.func,
+};
+
+export default memo(Header);

package/admin/src/containers/Users/ListPage/ModalForm.js

@@ -0,0 +1,101 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@buffetjs/core';
+import { Modal, ModalFooter, ModalHeader, useGlobalContext } from 'strapi-helper-plugin';
+import stepper from './stepper';
+
+const ModalForm = ({ isOpen, onClosed, onToggle }) => {
+  const [currentStep, setStep] = useState('create');
+  // Little trick to focus the first input
+  // Without this the focus is lost
+  const [showBody, setShowBody] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [registrationToken, setRegistrationToken] = useState(null);
+  const { formatMessage } = useGlobalContext();
+  const ref = useRef(null);
+  const { buttonSubmitLabel, Component, isDisabled, next } = stepper[currentStep];
+
+  const goNext = () => {
+    if (next) {
+      setStep(next);
+    } else {
+      onToggle();
+    }
+  };
+
+  const handleClick = () => {
+    if (ref.current) {
+      ref.current.submit();
+    } else {
+      goNext();
+    }
+  };
+
+  const handleClosed = () => {
+    // Fetch data only if the user has submitted a new entry
+    // We can use the registrationToken to know this
+    if (registrationToken || currentStep === 'magic-link') {
+      onClosed();
+    }
+
+    // Reset the state so we know that the user has created a new entry when there is a registrationToken
+    setStep('create');
+    setShowBody(false);
+    setRegistrationToken(null);
+  };
+
+  const handleSubmit = (e, data) => {
+    const { registrationToken } = data;
+
+    setRegistrationToken(registrationToken);
+    goNext();
+  };
+
+  const handleOpened = () => {
+    setShowBody(true);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpened={handleOpened}
+      onToggle={onToggle}
+      onClosed={handleClosed}
+      withoverflow="true"
+    >
+      <ModalHeader headerBreadcrumbs={['Settings.permissions.users.add-new']} />
+      {showBody && (
+        <Component
+          isDisabled={isDisabled}
+          onSubmit={handleSubmit}
+          ref={currentStep === 'create' ? ref : null}
+          registrationToken={registrationToken}
+          setIsSubmiting={setIsSubmiting}
+          showMagicLink={currentStep === 'magic-link'}
+        />
+      )}
+      <ModalFooter>
+        <section>
+          <Button type="button" color="cancel" onClick={onToggle}>
+            {formatMessage({ id: 'app.components.Button.cancel' })}
+          </Button>
+          <Button color="success" type="button" onClick={handleClick} isLoading={isSubmiting}>
+            {formatMessage({ id: buttonSubmitLabel })}
+          </Button>
+        </section>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+ModalForm.defaultProps = {
+  onClosed: () => {},
+};
+
+ModalForm.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClosed: PropTypes.func,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default ModalForm;

package/admin/src/containers/Users/ListPage/index.js

@@ -0,0 +1,289 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import {
+  BaselineAlignment,
+  useQuery,
+  request,
+  useUserPermissions,
+  LoadingIndicatorPage,
+  PopUpWarning,
+} from 'strapi-helper-plugin';
+import { get } from 'lodash';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Flex, Padded } from '@buffetjs/core';
+import PageTitle from '../../../components/SettingsPageTitle';
+import { useSettingsHeaderSearchContext } from '../../../hooks';
+import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users';
+import adminPermissions from '../../../permissions';
+import Header from './Header';
+import ModalForm from './ModalForm';
+import getFilters from './utils/getFilters';
+import init from './init';
+import { initialState, reducer } from './reducer';
+
+const ListPage = () => {
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate, canDelete, canRead, canUpdate },
+  } = useUserPermissions(adminPermissions.settings.users);
+  const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false);
+  const [isModalOpened, setIsModalOpened] = useState(false);
+  const { toggleHeaderSearch } = useSettingsHeaderSearchContext();
+  const query = useQuery();
+  const { push } = useHistory();
+  const { search } = useLocation();
+  const filters = useMemo(() => {
+    return getFilters(search);
+  }, [search]);
+
+  const [
+    {
+      data,
+      dataToDelete,
+      isLoading,
+      pagination: { total },
+      shouldRefetchData,
+      showModalConfirmButtonLoading,
+    },
+    dispatch,
+  ] = useReducer(reducer, initialState, init);
+  const pageSize = parseInt(query.get('pageSize') || 10, 10);
+  const page = parseInt(query.get('page') || 0, 10);
+  const _sort = decodeURIComponent(query.get('_sort'));
+  const _q = decodeURIComponent(query.get('_q') || '');
+  const getDataRef = useRef();
+  const listRef = useRef();
+
+  getDataRef.current = async () => {
+    if (!canRead) {
+      dispatch({
+        type: 'UNSET_IS_LOADING',
+      });
+
+      return;
+    }
+    // Show the loading state and reset the state
+    dispatch({
+      type: 'GET_DATA',
+    });
+
+    try {
+      const {
+        data: { results, pagination },
+      } = await request(`/admin/users${search}`, { method: 'GET' });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data: results,
+        pagination,
+      });
+    } catch (err) {
+      console.error(err.response);
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isLoadingForPermissions) {
+      getDataRef.current();
+    }
+  }, [search, isLoadingForPermissions]);
+
+  useEffect(() => {
+    if (canRead) {
+      toggleHeaderSearch({ id: 'Settings.permissions.menu.link.users.label' });
+    }
+
+    return () => {
+      if (canRead) {
+        toggleHeaderSearch();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canRead]);
+
+  const handleChangeDataToDelete = ids => {
+    dispatch({
+      type: 'ON_CHANGE_DATA_TO_DELETE',
+      dataToDelete: ids,
+    });
+  };
+
+  const handleChangeFilter = ({ filter, name, value }) => {
+    const filterName = `${name}${filter}`;
+
+    updateSearchParams(filterName, encodeURIComponent(value), true);
+  };
+
+  const handleChangeFooterParams = ({ target: { name, value } }) => {
+    let paramName = name.split('.')[1].replace('_', '');
+
+    if (paramName === 'limit') {
+      paramName = 'pageSize';
+    }
+
+    updateSearchParams(paramName, value);
+  };
+
+  const handleChangeSort = ({ target: { name, value } }) => {
+    updateSearchParams(name, value);
+  };
+
+  const handleClickDeleteFilter = ({ target: { name } }) => {
+    const currentSearch = new URLSearchParams(search);
+
+    currentSearch.delete(name);
+
+    push({ search: currentSearch.toString() });
+  };
+
+  const handleClickDelete = useCallback(id => {
+    handleToggleModal();
+
+    dispatch({
+      type: 'ON_CHANGE_DATA_TO_DELETE',
+      dataToDelete: [id],
+    });
+  }, []);
+
+  const handleCloseModal = () => {
+    // Refetch data
+    getDataRef.current();
+  };
+
+  const handleClosedModalDelete = () => {
+    if (shouldRefetchData) {
+      getDataRef.current();
+    } else {
+      // Empty the selected ids when the modal closes
+      dispatch({
+        type: 'RESET_DATA_TO_DELETE',
+      });
+
+      // Reset the list's reducer dataToDelete state using a ref so we don't need an effect
+      listRef.current.resetDataToDelete();
+    }
+  };
+
+  const handleConfirmDeleteData = useCallback(async () => {
+    dispatch({
+      type: 'ON_DELETE_USERS',
+    });
+
+    let shouldDispatchSucceededAction = false;
+
+    try {
+      await request('/admin/users/batch-delete', {
+        method: 'POST',
+        body: {
+          ids: dataToDelete,
+        },
+      });
+      shouldDispatchSucceededAction = true;
+    } catch (err) {
+      const errorMessage = get(err, 'response.payload.data', 'An error occured');
+
+      strapi.notification.toggle({
+        type: 'warning',
+        message: errorMessage,
+      });
+    }
+
+    // Only dispatch the action once
+    if (shouldDispatchSucceededAction) {
+      dispatch({
+        type: 'ON_DELETE_USERS_SUCCEEDED',
+      });
+    }
+
+    handleToggleModal();
+  }, [dataToDelete]);
+
+  const handleToggle = () => setIsModalOpened(prev => !prev);
+
+  const handleToggleModal = () => setIsWarningDeleteAllOpened(prev => !prev);
+
+  const updateSearchParams = (name, value, shouldDeleteSearch = false) => {
+    const currentSearch = new URLSearchParams(search);
+    // Update the currentSearch
+    currentSearch.set(name, value);
+
+    if (shouldDeleteSearch) {
+      currentSearch.delete('_q');
+    }
+
+    push({
+      search: currentSearch.toString(),
+    });
+  };
+
+  if (isLoadingForPermissions) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <div>
+      <PageTitle name="Users" />
+      <Header
+        canCreate={canCreate}
+        canDelete={canDelete}
+        canRead={canRead}
+        count={total}
+        dataToDelete={dataToDelete}
+        onClickAddUser={handleToggle}
+        onClickDelete={handleToggleModal}
+        isLoading={isLoading}
+      />
+      {canRead && (
+        <>
+          <BaselineAlignment top size="1px">
+            <Flex flexWrap="wrap">
+              <SortPicker onChange={handleChangeSort} value={_sort} />
+              <Padded right size="10px" />
+              <BaselineAlignment bottom size="6px">
+                <FilterPicker onChange={handleChangeFilter} />
+              </BaselineAlignment>
+              <Padded right size="10px" />
+              {filters.map((filter, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Filter key={i} {...filter} onClick={handleClickDeleteFilter} />
+              ))}
+            </Flex>
+          </BaselineAlignment>
+          <BaselineAlignment top size="8px" />
+          <Padded top size="sm">
+            <List
+              canDelete={canDelete}
+              canUpdate={canUpdate}
+              dataToDelete={dataToDelete}
+              isLoading={isLoading}
+              data={data}
+              onChange={handleChangeDataToDelete}
+              onClickDelete={handleClickDelete}
+              searchParam={_q}
+              filters={filters}
+              ref={listRef}
+            />
+          </Padded>
+          <Footer
+            count={total}
+            onChange={handleChangeFooterParams}
+            params={{ _limit: pageSize, _page: page }}
+          />
+        </>
+      )}
+      <ModalForm isOpen={isModalOpened} onClosed={handleCloseModal} onToggle={handleToggle} />
+      <PopUpWarning
+        isOpen={isWarningDeleteAllOpened}
+        onClosed={handleClosedModalDelete}
+        onConfirm={handleConfirmDeleteData}
+        toggleModal={handleToggleModal}
+        isConfirmButtonLoading={showModalConfirmButtonLoading}
+      />
+    </div>
+  );
+};
+
+export default ListPage;

package/admin/src/containers/Users/ListPage/init.js

@@ -0,0 +1,3 @@
+const init = initialState => initialState;
+
+export default init;

package/admin/src/containers/Users/ListPage/reducer.js

@@ -0,0 +1,57 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+const initialState = {
+  data: [],
+  dataToDelete: [],
+  isLoading: true,
+  pagination: {
+    page: 1,
+    pageSize: 10,
+    pageCount: 0,
+    total: 0,
+  },
+  showModalConfirmButtonLoading: false,
+  shouldRefetchData: false,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        return initialState;
+      }
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.data = action.data;
+        draftState.isLoading = false;
+        draftState.pagination = action.pagination;
+        break;
+      }
+      case 'ON_CHANGE_DATA_TO_DELETE': {
+        draftState.dataToDelete = action.dataToDelete;
+        break;
+      }
+      case 'ON_DELETE_USERS': {
+        draftState.showModalConfirmButtonLoading = true;
+        break;
+      }
+      case 'ON_DELETE_USERS_SUCCEEDED': {
+        draftState.shouldRefetchData = true;
+        break;
+      }
+      case 'RESET_DATA_TO_DELETE': {
+        draftState.shouldRefetchData = false;
+        draftState.dataToDelete = [];
+        draftState.showModalConfirmButtonLoading = false;
+        break;
+      }
+      case 'UNSET_IS_LOADING': {
+        draftState.isLoading = false;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState, reducer };

package/admin/src/containers/Users/ListPage/stepper.js

@@ -0,0 +1,18 @@
+import { ModalCreateBody } from '../../../components/Users';
+
+const stepper = {
+  create: {
+    buttonSubmitLabel: 'app.containers.Users.ModalForm.footer.button-success',
+    Component: ModalCreateBody,
+    isDisabled: false,
+    next: 'magic-link',
+  },
+  'magic-link': {
+    buttonSubmitLabel: 'form.button.continue',
+    Component: ModalCreateBody,
+    isDisabled: true,
+    next: null,
+  },
+};
+
+export default stepper;

package/admin/src/containers/Users/ListPage/utils/getFilters.js

@@ -0,0 +1,30 @@
+const getFilters = search => {
+  const query = new URLSearchParams(search);
+  const filters = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (let pair of query.entries()) {
+    if (!['_sort', 'pageSize', 'page', '_q'].includes(pair[0])) {
+      const splitted = pair[0].split('_');
+      let filterName;
+      let filterType;
+
+      // Filter type === '=')
+      if (splitted.length === 1) {
+        filterType = '=';
+        filterName = pair[0];
+      } else {
+        filterType = `_${splitted[1]}`;
+        filterName = splitted[0];
+      }
+
+      const value = decodeURIComponent(pair[1]);
+
+      filters.push({ displayName: filterName, name: pair[0], filter: filterType, value });
+    }
+  }
+
+  return filters;
+};
+
+export default getFilters;

package/admin/src/containers/Users/ProtectedEditPage/index.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useMemo } from 'react';
+import { useUserPermissions, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import { Redirect, useLocation } from 'react-router-dom';
+import { get } from 'lodash';
+import adminPermissions from '../../../permissions';
+import EditPage from '../EditPage';
+
+const ProtectedEditPage = () => {
+  const permissions = useMemo(() => {
+    return {
+      read: adminPermissions.settings.users.read,
+      update: adminPermissions.settings.users.update,
+    };
+  }, []);
+
+  const {
+    isLoading,
+    allowedActions: { canRead, canUpdate },
+  } = useUserPermissions(permissions);
+  const { state } = useLocation();
+  const from = get(state, 'from', '/');
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (!canRead && !canUpdate) {
+        strapi.notification.toggle({
+          type: 'info',
+          message: { id: 'notification.permission.not-allowed-read' },
+        });
+      }
+    }
+  }, [isLoading, canRead, canUpdate]);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  if (!canRead && !canUpdate) {
+    return <Redirect to={from} />;
+  }
+
+  return <EditPage canUpdate={canUpdate} />;
+};
+
+export default ProtectedEditPage;

package/admin/src/containers/Users/ProtectedListPage/index.js

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

package/admin/src/containers/Webhooks/EditView/Wrapper.js

@@ -0,0 +1,61 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  > div:first-of-type {
+    left: 24rem;
+  }
+  .header-title {
+    h1 {
+      text-transform: none;
+    }
+  }
+  .header-title + div {
+    button: first-of-type {
+      position: relative;
+      margin-right: 30px;
+      overflow: initial;
+      &::after {
+        content: '-';
+        position: absolute;
+        top: 5px;
+        right: -20px;
+        width: 1px;
+        height: 20px;
+        background-color: #e9eaeb;
+        color: transparent;
+      }
+      span svg {
+        margin-top: -2px;
+        margin-right: -10px;
+        margin-bottom: -5px;
+      }
+    }
+  }
+  .form-wrapper {
+    padding-top: 4px;
+  }
+  .form-card {
+    margin-bottom: 30px;
+    padding: 21px 25px 0px 25px;
+    background-color: #ffffff;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px 0 #e3e9f3;
+  }
+  .row {
+    > div {
+      position: relative;
+      z-index: 0;
+      &:nth-of-type(3) {
+        z-index: 1;
+      }
+    }
+  }
+`;
+
+export default Wrapper;