@strapi/admin 4.10.6 → 4.11.0-beta.0

package/admin/src/hooks/useContentTypes/useContentTypes.js

@@ -0,0 +1,47 @@
+import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+
+export function useContentTypes() {
+  console.log('----> read');
+
+  const { get } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const queries = useQueries(
+    ['components', 'content-types'].map((type) => {
+      return {
+        queryKey: ['content-manager', type],
+        async queryFn() {
+          const {
+            data: { data },
+          } = await get(`/content-manager/${type}`);
+
+          return data;
+        },
+        onError(error) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        },
+      };
+    })
+  );
+
+  const [components, contentTypes] = queries;
+  const isLoading = components.isLoading || contentTypes.isLoading;
+
+  const collectionTypes = (contentTypes?.data ?? []).filter(
+    (contentType) => contentType.kind === 'collectionType' && contentType.isDisplayed
+  );
+  const singleTypes = (contentTypes?.data ?? []).filter(
+    (contentType) => contentType.kind !== 'collectionType' && contentType.isDisplayed
+  );
+
+  return {
+    isLoading,
+    components: components?.data ?? [],
+    collectionTypes,
+    singleTypes,
+  };
+}

package/admin/src/injectionZones.js

@@ -13,7 +13,12 @@ const injectionZones = {
   },
   contentManager: {
     editView: { informations: [], 'right-links': [] },
-    listView: { actions: [], deleteModalAdditionalInfos: [] },
+    listView: {
+      actions: [],
+      deleteModalAdditionalInfos: [],
+      publishModalAdditionalInfos: [],
+      unpublishModalAdditionalInfos: [],
+    },
   },
 };
 

package/admin/src/pages/HomePage/index.js

@@ -11,8 +11,9 @@ import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
 import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
 import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+
 import cornerOrnamentPath from './assets/corner-ornament.svg';
-import { useModels } from '../../hooks';
+import { useContentTypes } from '../../hooks/useContentTypes';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
 import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
 import SocialLinks from './SocialLinks';
@@ -31,7 +32,7 @@ const LogoContainer = styled(Box)`
 
 const HomePage = () => {
   // Temporary until we develop the menu API
-  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
+  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useContentTypes();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
   useLicenseLimitNotification();
 

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/InstallPluginButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { useNotification, useTracking, useClipboard } from '@strapi/helper-plugin';
 import { Box, Icon, Typography } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import CardButton from './CardButton';
@@ -17,14 +17,18 @@ const InstallPluginButton = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const { copy } = useClipboard();
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(commandToCopy);
-    trackUsage('willInstallPlugin');
-    toggleNotification({
-      type: 'success',
-      message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-    });
+  const handleCopy = async () => {
+    const didCopy = await copy(commandToCopy);
+
+    if (didCopy) {
+      trackUsage('willInstallPlugin');
+      toggleNotification({
+        type: 'success',
+        message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+      });
+    }
   };
 
   // Already installed

package/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js

@@ -1,44 +1,46 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl';
-import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
+import { ContentBox, useNotification, useTracking, useClipboard } from '@strapi/helper-plugin';
 import { IconButton } from '@strapi/design-system';
 import { Duplicate, Key } from '@strapi/icons';
 import PropTypes from 'prop-types';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const TokenBox = ({ token, tokenType }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
-  const trackUsageRef = useRef(trackUsage);
+
+  const { copy } = useClipboard();
+
+  const handleClick = (token) => async () => {
+    const didCopy = await copy(token);
+
+    if (didCopy) {
+      trackUsage.current('didCopyTokenKey', {
+        tokenType,
+      });
+      toggleNotification({
+        type: 'success',
+        message: { id: 'Settings.tokens.notification.copied' },
+      });
+    }
+  };
 
   return (
     <ContentBox
       endAction={
         token && (
           <span style={{ alignSelf: 'start' }}>
-            <CopyToClipboard
-              onCopy={() => {
-                trackUsageRef.current('didCopyTokenKey', {
-                  tokenType,
-                });
-                toggleNotification({
-                  type: 'success',
-                  message: { id: 'Settings.tokens.notification.copied' },
-                });
-              }}
-              text={token}
-            >
-              <IconButton
-                label={formatMessage({
-                  id: 'app.component.CopyToClipboard.label',
-                  defaultMessage: 'Copy to clipboard',
-                })}
-                noBorder
-                icon={<Duplicate />}
-                style={{ padding: 0, height: '1rem' }}
-              />
-            </CopyToClipboard>
+            <IconButton
+              label={formatMessage({
+                id: 'app.component.CopyToClipboard.label',
+                defaultMessage: 'Copy to clipboard',
+              })}
+              onClick={handleClick(token)}
+              noBorder
+              icon={<Duplicate />}
+              style={{ padding: 0, height: '1rem' }}
+            />
           </span>
         )
       }

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/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';

package/admin/src/translations/en.json

@@ -795,7 +795,9 @@
   "content-manager.plugin.description.long": "Quick way to see, edit and delete the data in your database.",
   "content-manager.plugin.description.short": "Quick way to see, edit and delete the data in your database.",
   "content-manager.popUpWarning.bodyMessage.contentType.delete": "Are you sure to delete Content-Type?",
-  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure to delete all Content-Types?",
+  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure you want to delete these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.publish.all": "Are you sure you want to publish these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.unpublish.all": "Are you sure you want to unpublish these entries?",
   "content-manager.popUpWarning.warning.has-draft-relations.title": "Confirmation",
   "content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
   "content-manager.popUpWarning.warning.unpublish": "If you don't publish this content, it will automatically turn into a Draft.",
@@ -818,6 +820,8 @@
   "content-manager.success.record.save": "Saved",
   "content-manager.success.record.unpublish": "Unpublished",
   "content-manager.utils.data-loaded": "The {number, plural, =1 {entry has} other {entries have}} successfully been loaded",
+  "content-manager.listView.validation.errors.title": "Action required",
+  "content-manager.listView.validation.errors.message": "Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)",
   "dark": "Dark",
   "form.button.continue": "Continue",
   "form.button.done": "Done",