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

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

@@ -1,102 +0,0 @@
-import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
-import { Modal, ModalFooter, ModalHeader } 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 } = useIntl();
-  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/pages/Users/ListPage/index.js

@@ -1,291 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import {
-  BaselineAlignment,
-  useQuery,
-  request,
-  useRBAC,
-  LoadingIndicatorPage,
-  PopUpWarning,
-  useNotification,
-} 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 },
-  } = useRBAC(adminPermissions.settings.users);
-  const toggleNotification = useNotification();
-  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);
-      toggleNotification({
-        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');
-
-      toggleNotification({
-        type: 'warning',
-        message: errorMessage,
-      });
-    }
-
-    // Only dispatch the action once
-    if (shouldDispatchSucceededAction) {
-      dispatch({
-        type: 'ON_DELETE_USERS_SUCCEEDED',
-      });
-    }
-
-    handleToggleModal();
-  }, [dataToDelete, toggleNotification]);
-
-  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/pages/Users/ListPage/init.js

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

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

@@ -1,57 +0,0 @@
-/* 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/pages/Users/ListPage/stepper.js

@@ -1,18 +0,0 @@
-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/pages/Users/ListPage/utils/getFilters.js

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

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

@@ -1,46 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { useRBAC, LoadingIndicatorPage, useNotification } 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 toggleNotification = useNotification();
-  const permissions = useMemo(() => {
-    return {
-      read: adminPermissions.settings.users.read,
-      update: adminPermissions.settings.users.update,
-    };
-  }, []);
-
-  const {
-    isLoading,
-    allowedActions: { canRead, canUpdate },
-  } = useRBAC(permissions);
-  const { state } = useLocation();
-  const from = get(state, 'from', '/');
-
-  useEffect(() => {
-    if (!isLoading) {
-      if (!canRead && !canUpdate) {
-        toggleNotification({
-          type: 'info',
-          message: { id: 'notification.permission.not-allowed-read' },
-        });
-      }
-    }
-  }, [isLoading, canRead, canUpdate, toggleNotification]);
-
-  if (isLoading) {
-    return <LoadingIndicatorPage />;
-  }
-
-  if (!canRead && !canUpdate) {
-    return <Redirect to={from} />;
-  }
-
-  return <EditPage canUpdate={canUpdate} />;
-};
-
-export default ProtectedEditPage;

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

@@ -1,12 +0,0 @@
-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/pages/Webhooks/EditView/Wrapper.js

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