@strapi/admin 4.11.0-alpha.0 → 4.11.0-beta.0

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -17,7 +17,6 @@ import {
   LoadingIndicatorPage,
   Link,
 } from '@strapi/helper-plugin';
-import { useQuery } from 'react-query';
 import { Formik } from 'formik';
 import {
   Box,
@@ -32,11 +31,13 @@ import {
 } from '@strapi/design-system';
 import { ArrowLeft, Check } from '@strapi/icons';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
+
 import { formatAPIErrors, getFullName } from '../../../../../utils';
-import { fetchUser, putUser } from './utils/api';
+import { putUser } from './utils/api';
 import layout from './utils/layout';
 import { editValidation } from '../utils/validations/users';
 import SelectRoles from '../components/SelectRoles';
+import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 
 const fieldsToPick = ['email', 'firstname', 'lastname', 'username', 'isActive', 'roles'];
 
@@ -51,26 +52,35 @@ const EditPage = ({ canUpdate }) => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   useFocusWhenNavigate();
 
-  const { status, data } = useQuery(['user', id], () => fetchUser(id), {
-    retry: false,
-    onError(err) {
-      const status = err.response.status;
+  const {
+    users: [user],
+    isLoading,
+  } = useAdminUsers(
+    { id },
+    {
+      onError(error) {
+        const { status } = error.response;
 
-      // Redirect the use to the homepage if is not allowed to read
-      if (status === 403) {
-        toggleNotification({
-          type: 'info',
-          message: {
-            id: 'notification.permission.not-allowed-read',
-            defaultMessage: 'You are not allowed to see this document',
-          },
-        });
+        // Redirect the use to the homepage if is not allowed to read
+        if (status === 403) {
+          toggleNotification({
+            type: 'info',
+            message: {
+              id: 'notification.permission.not-allowed-read',
+              defaultMessage: 'You are not allowed to see this document',
+            },
+          });
 
-        push('/');
-      }
-      console.log(err.response.status);
-    },
-  });
+          push('/');
+        } else {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          });
+        }
+      },
+    }
+  );
 
   const handleSubmit = async (body, actions) => {
     lockApp();
@@ -113,19 +123,18 @@ const EditPage = ({ canUpdate }) => {
     unlockApp();
   };
 
-  const isLoading = status !== 'success';
   const headerLabel = isLoading
     ? { id: 'app.containers.Users.EditPage.header.label-loading', defaultMessage: 'Edit user' }
     : { id: 'app.containers.Users.EditPage.header.label', defaultMessage: 'Edit {name}' };
 
-  const initialData = Object.keys(pick(data, fieldsToPick)).reduce((acc, current) => {
+  const initialData = Object.keys(pick(user, fieldsToPick)).reduce((acc, current) => {
     if (current === 'roles') {
-      acc[current] = (data?.roles || []).map(({ id }) => id);
+      acc[current] = (user?.roles || []).map(({ id }) => id);
 
       return acc;
     }
 
-    acc[current] = data?.[current];
+    acc[current] = user?.[current];
 
     return acc;
   }, {});
@@ -138,6 +147,7 @@ const EditPage = ({ canUpdate }) => {
   if (isLoading) {
     return (
       <Main aria-busy="true">
+        {/* TODO: translate */}
         <SettingsPageTitle name="Users" />
         <HeaderLayout
           primaryAction={
@@ -200,9 +210,9 @@ const EditPage = ({ canUpdate }) => {
                 }
               />
               <ContentLayout>
-                {data?.registrationToken && (
+                {user?.registrationToken && (
                   <Box paddingBottom={6}>
-                    <MagicLink registrationToken={data.registrationToken} />
+                    <MagicLink registrationToken={user.registrationToken} />
                   </Box>
                 )}
                 <Flex direction="column" alignItems="stretch" gap={7}>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/api.js

@@ -1,12 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
 
-const fetchUser = async (id) => {
-  const { get } = getFetchClient();
-  const { data } = await get(`/admin/users/${id}`);
-
-  return data.data;
-};
-
 const putUser = async (id, body) => {
   const { put } = getFetchClient();
 
@@ -15,4 +8,4 @@ const putUser = async (id, body) => {
   return data.data;
 };
 
-export { fetchUser, putUser };
+export { putUser };

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

@@ -15,7 +15,6 @@ import {
   Flex,
   Typography,
 } from '@strapi/design-system';
-
 import { Formik } from 'formik';
 import {
   Form,
@@ -24,20 +23,21 @@ import {
   useOverlayBlocker,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { useQueryClient, useMutation } from 'react-query';
+import { useMutation } from 'react-query';
+
 import formDataModel from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/formDataModel';
 import roleSettingsForm from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
+
 import SelectRoles from '../../components/SelectRoles';
 import layout from './utils/layout';
 import schema from './utils/schema';
 import stepper from './utils/stepper';
 
-const ModalForm = ({ queryName, onToggle }) => {
+const ModalForm = ({ onSuccess, onToggle }) => {
   const [currentStep, setStep] = useState('create');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [registrationToken, setRegistrationToken] = useState(null);
-  const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
@@ -50,8 +50,7 @@ const ModalForm = ({ queryName, onToggle }) => {
       async onSuccess({ data }) {
         setRegistrationToken(data.data.registrationToken);
 
-        await queryClient.refetchQueries(queryName);
-        await queryClient.refetchQueries(['ee', 'license-limit-info']);
+        await onSuccess();
 
         goNext();
         setIsSubmitting(false);
@@ -216,7 +215,7 @@ const ModalForm = ({ queryName, onToggle }) => {
 
 ModalForm.propTypes = {
   onToggle: PropTypes.func.isRequired,
-  queryName: PropTypes.array.isRequired,
+  onSuccess: PropTypes.func.isRequired,
 };
 
 export default ModalForm;

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import qs from 'qs';
 import {
   DynamicTable,
   SearchURLQuery,
@@ -8,29 +9,28 @@ import {
   useFocusWhenNavigate,
   NoPermissions,
   useAPIErrorHandler,
+  useFetchClient,
 } from '@strapi/helper-plugin';
-import {
-  ActionLayout,
-  ContentLayout,
-  HeaderLayout,
-  Main,
-  useNotifyAT,
-} from '@strapi/design-system';
+import { ActionLayout, ContentLayout, HeaderLayout, Main } from '@strapi/design-system';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import CreateAction from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/CreateAction';
 import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+
+import { useAdminUsers } from '../../../../../hooks/useAdminUsers';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
 import Filters from '../../../components/Filters';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
-import { deleteData, fetchData } from './utils/api';
 import displayedFilters from './utils/displayedFilters';
 import tableHeaders from './utils/tableHeaders';
 
+const EE_LICENSE_LIMIT_QUERY_KEY = ['ee', 'license-limit-info'];
+
 const ListPage = () => {
+  const { post } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const [isModalOpened, setIsModalOpen] = useState(false);
   const {
@@ -42,8 +42,15 @@ const ListPage = () => {
   const { search } = useLocation();
   useFocusWhenNavigate();
   useLicenseLimitNotification();
-  const { notifyStatus } = useNotifyAT();
-  const queryName = ['users', search];
+  const {
+    users,
+    pagination,
+    isError,
+    isLoading,
+    refetchQueries: refetchAdminUsers,
+  } = useAdminUsers(qs.parse(search, { ignoreQueryPrefix: true }), {
+    enabled: canRead,
+  });
 
   const headers = tableHeaders.map((header) => ({
     ...header,
@@ -58,59 +65,33 @@ const ListPage = () => {
     defaultMessage: 'Users',
   });
 
-  const notifyLoad = () => {
-    notifyStatus(
-      formatMessage(
-        {
-          id: 'app.utils.notify.data-loaded',
-          defaultMessage: 'The {target} has loaded',
-        },
-        { target: title }
-      )
-    );
-  };
-
-  const { status, data, isFetching } = useQuery(queryName, () => fetchData(search, notifyLoad), {
-    enabled: canRead,
-    retry: false,
-    onError(error) {
-      toggleNotification({
-        type: 'warning',
-        message: {
-          id: 'notification.error',
-          message: formatAPIError(error),
-          defaultMessage: 'An error occured',
-        },
-      });
-    },
-  });
-
   const handleToggle = () => {
     setIsModalOpen((prev) => !prev);
   };
 
-  const deleteAllMutation = useMutation((ids) => deleteData(ids), {
-    async onSuccess() {
-      await queryClient.refetchQueries(queryName);
-
-      // Toggle enabled/ disabled state on the invite button
-      await queryClient.refetchQueries(['ee', 'license-limit-info']);
+  const deleteAllMutation = useMutation(
+    async (ids) => {
+      await post('/admin/users/batch-delete', { ids });
     },
-    onError(error) {
-      toggleNotification({
-        type: 'warning',
-        message: {
-          id: 'notification.error',
-          message: formatAPIError(error),
-          defaultMessage: 'An error occured',
-        },
-      });
-    },
-  });
+    {
+      async onSuccess() {
+        await refetchAdminUsers();
 
-  // This can be improved but we need to show an something to the user
-  const isLoading =
-    (status !== 'success' && status !== 'error') || (status === 'success' && isFetching);
+        // Toggle enabled/ disabled state on the invite button
+        await queryClient.refetchQueries(EE_LICENSE_LIMIT_QUERY_KEY);
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: {
+            id: 'notification.error',
+            message: formatAPIError(error),
+            defaultMessage: 'An error occured',
+          },
+        });
+      },
+    }
+  );
 
   return (
     <Main aria-busy={isLoading}>
@@ -141,7 +122,8 @@ const ListPage = () => {
 
       <ContentLayout canRead={canRead}>
         {!canRead && <NoPermissions />}
-        {status === 'error' && <div>TODO: An error occurred</div>}
+        {/* TODO: Replace error message with something better */}
+        {isError && <div>TODO: An error occurred</div>}
         {canRead && (
           <>
             <DynamicTable
@@ -150,23 +132,32 @@ const ListPage = () => {
               onConfirmDeleteAll={deleteAllMutation.mutateAsync}
               onConfirmDelete={(id) => deleteAllMutation.mutateAsync([id])}
               headers={headers}
-              rows={data?.results}
+              rows={users}
               withBulkActions
               withMainAction={canDelete}
             >
               <TableRows
                 canDelete={canDelete}
                 headers={headers}
-                rows={data?.results || []}
+                rows={users}
                 withBulkActions
                 withMainAction={canDelete}
               />
             </DynamicTable>
-            <PaginationFooter pagination={data?.pagination} />
+
+            {pagination && <PaginationFooter pagination={pagination} />}
           </>
         )}
       </ContentLayout>
-      {isModalOpened && <ModalForm onToggle={handleToggle} queryName={queryName} />}
+      {isModalOpened && (
+        <ModalForm
+          onSuccess={async () => {
+            await refetchAdminUsers();
+            await queryClient.refetchQueries(EE_LICENSE_LIMIT_QUERY_KEY);
+          }}
+          onToggle={handleToggle}
+        />
+      )}
     </Main>
   );
 };

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -1,30 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { IconButton } from '@strapi/design-system';
-import { useNotification, ContentBox } from '@strapi/helper-plugin';
+import { useNotification, ContentBox, useClipboard } from '@strapi/helper-plugin';
 import { Duplicate } from '@strapi/icons';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useIntl } from 'react-intl';
 
 const MagicLinkWrapper = ({ children, target }) => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
-
-  const handleCopy = () => {
-    toggleNotification({ type: 'info', message: { id: 'notification.link-copied' } });
-  };
+  const { copy } = useClipboard();
 
   const copyLabel = formatMessage({
     id: 'app.component.CopyToClipboard.label',
     defaultMessage: 'Copy to clipboard',
   });
 
+  const handleClick = async () => {
+    const didCopy = await copy(target);
+
+    if (didCopy) {
+      toggleNotification({ type: 'info', message: { id: 'notification.link-copied' } });
+    }
+  };
+
   return (
     <ContentBox
       endAction={
-        <CopyToClipboard onCopy={handleCopy} text={target}>
-          <IconButton label={copyLabel} noBorder icon={<Duplicate />} />
-        </CopyToClipboard>
+        <IconButton label={copyLabel} noBorder icon={<Duplicate />} onClick={handleClick} />
       }
       title={target}
       titleEllipsis

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -5,7 +5,18 @@ import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import EventRow from './EventRow';
-import formatValue from './utils/formatValue';
+
+export const formatValue = (value) =>
+  value.reduce((acc, curr) => {
+    const key = curr.split('.')[0];
+
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(curr);
+
+    return acc;
+  }, {});
 
 const StyledTable = styled.table`
   td {

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

@@ -14,7 +14,7 @@ import {
 import { Main } from '@strapi/design-system';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { useModels } from '../../../../../hooks';
+import { useContentTypes } from '../../../../../hooks/useContentTypes';
 import WebhookForm from './components/WebhookForm';
 import cleanData from './utils/formatData';
 
@@ -27,7 +27,7 @@ const EditView = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
   const queryClient = useQueryClient();
-  const { isLoading: isLoadingForModels, collectionTypes } = useModels();
+  const { isLoading: isLoadingForModels, collectionTypes } = useContentTypes();
   const { put, get, post } = useFetchClient();
 
   const isCreating = id === 'create';