@strapi/admin 4.10.0-beta.0 → 4.10.0-beta.1

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

@@ -1,13 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
-import matchSorter from 'match-sorter';
 import {
-  AnErrorOccurred,
   CheckPagePermissions,
   useFocusWhenNavigate,
   useTracking,
-  LoadingIndicatorPage,
   useNotification,
   useAppInfos,
   useQueryParams,
@@ -18,8 +15,6 @@ import {
   Main,
   Searchbar,
   Box,
-  useNotifyAT,
-  Typography,
   Flex,
   Tabs,
   Tab,
@@ -28,39 +23,25 @@ import {
   TabPanel,
 } from '@strapi/design-system';
 
-import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch';
 import PageHeader from './components/PageHeader';
-import useFetchMarketplaceProviders from '../../hooks/useFetchMarketplaceProviders';
-import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
-import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
 import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 import MissingPluginBanner from './components/MissingPluginBanner';
 import NpmPackagesGrid from './components/NpmPackagesGrid';
 import SortSelect from './components/SortSelect';
 import NpmPackagesFilters from './components/NpmPackagesFilters';
-
-const matchSearch = (npmPackages, search) => {
-  return matchSorter(npmPackages, search, {
-    keys: [
-      {
-        threshold: matchSorter.rankings.WORD_STARTS_WITH,
-        key: 'attributes.name',
-      },
-      { threshold: matchSorter.rankings.WORD_STARTS_WITH, key: 'attributes.description' },
-    ],
-    baseSort: (a, b) => (a.index < b.index ? -1 : 1),
-  });
-};
+import NpmPackagesPagination from './components/NpmPackagesPagination';
+import useDebounce from '../../hooks/useDebounce';
+import OfflineLayout from './components/OfflineLayout';
+import useMarketplaceData from './utils/useMarketplaceData';
 
 const MarketPlacePage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
-  const { notifyStatus } = useNotifyAT();
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
-  const [searchQuery, setSearchQuery] = useState('');
   const [{ query }, setQuery] = useQueryParams();
+  const debouncedSearch = useDebounce(query?.search, 500) || '';
 
   const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfos();
   const isOnline = useNavigatorOnLine();
@@ -74,33 +55,6 @@ const MarketPlacePage = () => {
 
   useFocusWhenNavigate();
 
-  const marketplaceTitle = formatMessage({
-    id: 'global.marketplace',
-    defaultMessage: 'Marketplace',
-  });
-
-  const notifyMarketplaceLoad = () => {
-    notifyStatus(
-      formatMessage(
-        {
-          id: 'app.utils.notify.data-loaded',
-          defaultMessage: 'The {target} has loaded',
-        },
-        { target: marketplaceTitle }
-      )
-    );
-  };
-
-  const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
-    useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider);
-
-  const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
-    useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin);
-
-  const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
-
-  const hasFailed = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('error');
-
   useEffect(() => {
     trackUsageRef.current('didGoToMarketplace');
   }, []);
@@ -118,94 +72,50 @@ const MarketPlacePage = () => {
     }
   }, [toggleNotification, isInDevelopmentMode]);
 
-  if (!isOnline) {
-    return (
-      <Layout>
-        <Main>
-          <PageHeader isOnline={isOnline} />
-          <Flex
-            width="100%"
-            direction="column"
-            alignItems="center"
-            justifyContent="center"
-            style={{ paddingTop: '120px' }}
-          >
-            <Box paddingBottom={2}>
-              <Typography textColor="neutral700" variant="alpha">
-                {formatMessage({
-                  id: 'admin.pages.MarketPlacePage.offline.title',
-                  defaultMessage: 'You are offline',
-                })}
-              </Typography>
-            </Box>
-            <Box paddingBottom={6}>
-              <Typography textColor="neutral700" variant="epsilon">
-                {formatMessage({
-                  id: 'admin.pages.MarketPlacePage.offline.subtitle',
-                  defaultMessage:
-                    'You need to be connected to the Internet to access Strapi Market.',
-                })}
-              </Typography>
-            </Box>
-            <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
-          </Flex>
-        </Main>
-      </Layout>
-    );
-  }
-
-  if (hasFailed) {
-    return (
-      <Layout>
-        <ContentLayout>
-          <Box paddingTop={8}>
-            <AnErrorOccurred />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
-  }
+  const {
+    pluginsResponse,
+    providersResponse,
+    pluginsStatus,
+    providersStatus,
+    possibleCollections,
+    possibleCategories,
+    pagination,
+  } = useMarketplaceData({ npmPackageType, debouncedSearch, query, tabQuery });
 
-  if (isLoading) {
-    return (
-      <Layout>
-        <Main aria-busy>
-          <LoadingIndicatorPage />
-        </Main>
-      </Layout>
-    );
+  if (!isOnline) {
+    return <OfflineLayout />;
   }
 
-  // Search for plugins and providers that match the search query
-  const pluginSearchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
-  const providerSearchResults = matchSearch(marketplaceProvidersResponse.data, searchQuery);
-  const emptySearchMessage = formatMessage(
-    {
-      id: 'admin.pages.MarketPlacePage.search.empty',
-      defaultMessage: 'No result for "{target}"',
-    },
-    { target: searchQuery }
-  );
-
   const handleTabChange = (selected) => {
     const selectedTab = selected === 0 ? 'plugin' : 'provider';
     const hasTabQuery = tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length;
 
     if (hasTabQuery) {
-      setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab });
+      setQuery({
+        // Keep filters and search
+        ...tabQuery[selectedTab],
+        search: query?.search || '',
+        // Set tab and reset page
+        npmPackageType: selectedTab,
+        page: 1,
+      });
     } else {
       setQuery({
+        // Set tab
         npmPackageType: selectedTab,
         // Clear filters
         collections: [],
         categories: [],
         sort: 'name:asc',
+        page: 1,
+        // Keep search
+        search: query?.search || '',
       });
     }
   };
 
   const handleSelectChange = (update) => {
-    setQuery(update);
+    setQuery({ ...update, page: 1 });
     setTabQuery((prev) => ({
       ...prev,
       [npmPackageType]: { ...prev[npmPackageType], ...update },
@@ -213,19 +123,13 @@ const MarketPlacePage = () => {
   };
 
   const handleSelectClear = (filterType) => {
-    setQuery({ [filterType]: [] }, 'remove');
+    setQuery({ [filterType]: [], page: null }, 'remove');
     setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} }));
   };
 
   // Check if plugins and providers are installed already
   const installedPackageNames = Object.keys(dependencies);
 
-  const possibleCollections =
-    npmPackageType === 'plugin'
-      ? marketplacePluginsResponse.meta.collections
-      : marketplaceProvidersResponse.meta.collections;
-  const possibleCategories = marketplacePluginsResponse.meta.categories;
-
   return (
     <Layout>
       <Main>
@@ -237,27 +141,6 @@ const MarketPlacePage = () => {
         />
         <PageHeader isOnline={isOnline} npmPackageType={npmPackageType} />
         <ContentLayout>
-          <Box width="25%" paddingBottom={4}>
-            <Searchbar
-              name="searchbar"
-              onClear={() => setSearchQuery('')}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              clearLabel={formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.clear',
-                defaultMessage: 'Clear the search',
-              })}
-              placeholder={formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search',
-              })}
-            >
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search',
-              })}
-            </Searchbar>
-          </Box>
           <TabGroup
             label={formatMessage({
               id: 'admin.pages.MarketPlacePage.tab-group.label',
@@ -268,24 +151,49 @@ const MarketPlacePage = () => {
             initialSelectedTabIndex={['plugin', 'provider'].indexOf(npmPackageType)}
             onTabChange={handleTabChange}
           >
-            <Box paddingBottom={4}>
+            <Flex justifyContent="space-between" paddingBottom={4}>
               <Tabs>
                 <Tab>
                   {formatMessage({
                     id: 'admin.pages.MarketPlacePage.plugins',
                     defaultMessage: 'Plugins',
                   })}{' '}
-                  ({pluginSearchResults.length})
+                  {pluginsStatus === 'success'
+                    ? `(${pluginsResponse.meta.pagination.total})`
+                    : '...'}
                 </Tab>
                 <Tab>
                   {formatMessage({
                     id: 'admin.pages.MarketPlacePage.providers',
                     defaultMessage: 'Providers',
                   })}{' '}
-                  ({providerSearchResults.length})
+                  {providersStatus === 'success'
+                    ? `(${providersResponse.meta.pagination.total})`
+                    : '...'}
                 </Tab>
               </Tabs>
-            </Box>
+              <Box width="25%">
+                <Searchbar
+                  name="searchbar"
+                  onClear={() => setQuery({ search: '', page: 1 })}
+                  value={query?.search}
+                  onChange={(e) => setQuery({ search: e.target.value, page: 1 })}
+                  clearLabel={formatMessage({
+                    id: 'admin.pages.MarketPlacePage.search.clear',
+                    defaultMessage: 'Clear the search',
+                  })}
+                  placeholder={formatMessage({
+                    id: 'admin.pages.MarketPlacePage.search.placeholder',
+                    defaultMessage: 'Search',
+                  })}
+                >
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.search.placeholder',
+                    defaultMessage: 'Search',
+                  })}
+                </Searchbar>
+              </Box>
+            </Flex>
             <Flex paddingBottom={4} gap={2}>
               <SortSelect
                 sortQuery={query?.sort || 'name:asc'}
@@ -304,36 +212,33 @@ const MarketPlacePage = () => {
             <TabPanels>
               {/* Plugins panel */}
               <TabPanel>
-                {searchQuery.length > 0 && !pluginSearchResults.length ? (
-                  <EmptyNpmPackageSearch content={emptySearchMessage} />
-                ) : (
-                  <NpmPackagesGrid
-                    npmPackages={pluginSearchResults}
-                    installedPackageNames={installedPackageNames}
-                    useYarn={useYarn}
-                    isInDevelopmentMode={isInDevelopmentMode}
-                    npmPackageType="plugin"
-                    strapiAppVersion={strapiVersion}
-                  />
-                )}
+                <NpmPackagesGrid
+                  npmPackages={pluginsResponse?.data}
+                  status={pluginsStatus}
+                  installedPackageNames={installedPackageNames}
+                  useYarn={useYarn}
+                  isInDevelopmentMode={isInDevelopmentMode}
+                  npmPackageType="plugin"
+                  strapiAppVersion={strapiVersion}
+                  debouncedSearch={debouncedSearch}
+                />
               </TabPanel>
               {/* Providers panel */}
               <TabPanel>
-                {searchQuery.length > 0 && !providerSearchResults.length ? (
-                  <EmptyNpmPackageSearch content={emptySearchMessage} />
-                ) : (
-                  <NpmPackagesGrid
-                    npmPackages={providerSearchResults}
-                    installedPackageNames={installedPackageNames}
-                    useYarn={useYarn}
-                    isInDevelopmentMode={isInDevelopmentMode}
-                    npmPackageType="provider"
-                  />
-                )}
+                <NpmPackagesGrid
+                  npmPackages={providersResponse?.data}
+                  status={providersStatus}
+                  installedPackageNames={installedPackageNames}
+                  useYarn={useYarn}
+                  isInDevelopmentMode={isInDevelopmentMode}
+                  npmPackageType="provider"
+                  debouncedSearch={debouncedSearch}
+                />
               </TabPanel>
             </TabPanels>
           </TabGroup>
-          <Box paddingTop={7}>
+          {pagination && <NpmPackagesPagination pagination={pagination} />}
+          <Box paddingTop={8}>
             <MissingPluginBanner />
           </Box>
         </ContentLayout>

package/admin/src/pages/MarketplacePage/utils/useMarketplaceData.js

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { useNotifyAT } from '@strapi/design-system';
+import useFetchMarketplacePlugins from '../../../hooks/useFetchMarketplacePlugins';
+import useFetchMarketplaceProviders from '../../../hooks/useFetchMarketplaceProviders';
+
+function useMarketplaceData({ npmPackageType, debouncedSearch, query, tabQuery }) {
+  const { notifyStatus } = useNotifyAT();
+  const { formatMessage } = useIntl();
+  const marketplaceTitle = formatMessage({
+    id: 'global.marketplace',
+    defaultMessage: 'Marketplace',
+  });
+
+  const notifyMarketplaceLoad = () => {
+    notifyStatus(
+      formatMessage(
+        {
+          id: 'app.utils.notify.data-loaded',
+          defaultMessage: 'The {target} has loaded',
+        },
+        { target: marketplaceTitle }
+      )
+    );
+  };
+
+  const paginationParams = {
+    page: query?.page || 1,
+    pageSize: query?.pageSize || 24,
+  };
+
+  const { data: pluginsResponse, status: pluginsStatus } = useFetchMarketplacePlugins(
+    notifyMarketplaceLoad,
+    {
+      ...tabQuery.plugin,
+      pagination: paginationParams,
+      search: debouncedSearch,
+    }
+  );
+
+  const { data: providersResponse, status: providersStatus } = useFetchMarketplaceProviders(
+    notifyMarketplaceLoad,
+    {
+      ...tabQuery.provider,
+      pagination: paginationParams,
+      search: debouncedSearch,
+    }
+  );
+
+  const npmPackageTypeResponse = npmPackageType === 'plugin' ? pluginsResponse : providersResponse;
+  const npmPackageTypeStatus = npmPackageType === 'plugin' ? pluginsStatus : providersStatus;
+
+  const [possibleCollections, setPossibleCollections] = useState({});
+  const [possibleCategories, setPossibleCategories] = useState({});
+
+  // Keep possible filters up to date, but don't lose them while loading
+  useEffect(() => {
+    if (npmPackageTypeStatus === 'success') {
+      setPossibleCollections(npmPackageTypeResponse.meta.collections);
+    }
+
+    if (pluginsStatus === 'success') {
+      setPossibleCategories(pluginsResponse.meta.categories);
+    }
+  }, [
+    pluginsResponse?.meta.categories,
+    pluginsStatus,
+    npmPackageTypeResponse?.meta.collections,
+    npmPackageTypeStatus,
+  ]);
+
+  const { pagination } = npmPackageTypeStatus === 'success' ? npmPackageTypeResponse.meta : {};
+
+  return {
+    pluginsResponse,
+    providersResponse,
+    pluginsStatus,
+    providersStatus,
+    possibleCollections,
+    possibleCategories,
+    pagination,
+  };
+}
+
+export default useMarketplaceData;

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

@@ -15,6 +15,7 @@ const FormHead = ({
   isSubmitting,
   backUrl,
   regenerateUrl,
+  onErrorRegenerate,
 }) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
@@ -35,6 +36,7 @@ const FormHead = ({
                 backUrl={regenerateUrl}
                 onRegenerate={handleRegenerate}
                 idToRegenerate={token?.id}
+                onError={onErrorRegenerate}
               />
             )}
             <Button
@@ -95,10 +97,12 @@ FormHead.propTypes = {
     label: PropTypes.string,
   }).isRequired,
   regenerateUrl: PropTypes.string.isRequired,
+  onErrorRegenerate: PropTypes.func,
 };
 
 FormHead.defaultProps = {
   token: undefined,
+  onErrorRegenerate: undefined,
 };
 
 export default FormHead;

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

@@ -6,13 +6,14 @@ import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../hooks';
 
-export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
+export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) => {
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const { regenerateData, isLoadingConfirmation } = useRegenerate(
     backUrl,
     idToRegenerate,
-    onRegenerate
+    onRegenerate,
+    onError
   );
   const handleConfirmRegeneration = async () => {
     regenerateData();
@@ -62,12 +63,13 @@ export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl }) => {
   );
 };
 
-Regenerate.defaultProps = { onRegenerate() {} };
+Regenerate.defaultProps = { onRegenerate() {}, onError: undefined };
 
 Regenerate.propTypes = {
   onRegenerate: PropTypes.func,
   idToRegenerate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   backUrl: PropTypes.string.isRequired,
+  onError: PropTypes.func,
 };
 
 export default Regenerate;

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

@@ -4,21 +4,21 @@ import { useIntl } from 'react-intl';
 
 import { Select, Option } from '@strapi/design-system';
 
-const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
+const TokenTypeSelect = ({ name, errors, values, onChange, canEditInputs, options, label }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Select
-      name="type"
+      name={name}
       label={formatMessage({
         id: label.id,
         defaultMessage: label.defaultMessage,
       })}
-      value={values?.type}
+      value={values && values[name]}
       error={
-        errors.type
+        errors[name]
           ? formatMessage(
-              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
+              errors[name]?.id ? errors[name] : { id: errors[name], defaultMessage: errors[name] }
             )
           : null
       }
@@ -38,6 +38,7 @@ const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, lab
 };
 
 TokenTypeSelect.propTypes = {
+  name: PropTypes.string,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.shape({
@@ -62,6 +63,7 @@ TokenTypeSelect.propTypes = {
 };
 
 TokenTypeSelect.defaultProps = {
+  name: 'type',
   errors: {},
   options: [],
 };

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js

@@ -4,8 +4,9 @@ import { Box, Flex, Td, Tr, Typography, IconButton } from '@strapi/design-system
 import { stopPropagation, onRowClick, pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-const RoleRow = ({ id, name, description, usersCount, icons, rowIndex }) => {
+const RoleRow = ({ id, name, description, usersCount, icons, rowIndex, canUpdate }) => {
   const { formatMessage } = useIntl();
+  const [, editObject] = icons;
 
   const usersCountText = formatMessage(
     {
@@ -19,9 +20,11 @@ const RoleRow = ({ id, name, description, usersCount, icons, rowIndex }) => {
     <Tr
       aria-rowindex={rowIndex}
       key={id}
-      {...onRowClick({
-        fn: icons[1].onClick,
-      })}
+      {...(canUpdate
+        ? onRowClick({
+            fn: editObject.onClick,
+          })
+        : {})}
     >
       <Td maxWidth={pxToRem(130)}>
         <Typography ellipsis textColor="neutral800">
@@ -58,6 +61,11 @@ RoleRow.propTypes = {
   usersCount: PropTypes.number.isRequired,
   icons: PropTypes.array.isRequired,
   rowIndex: PropTypes.number.isRequired,
+  canUpdate: PropTypes.bool,
+};
+
+RoleRow.defaultProps = {
+  canUpdate: false,
 };
 
 export default RoleRow;

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

@@ -9,6 +9,8 @@ import {
   useQueryParams,
   useRBAC,
   useFocusWhenNavigate,
+  useFilter,
+  useCollator,
 } from '@strapi/helper-plugin';
 import { Plus, Trash, Duplicate, Pencil } from '@strapi/icons';
 import {
@@ -27,7 +29,6 @@ import {
   VisuallyHidden,
 } from '@strapi/design-system';
 import get from 'lodash/get';
-import matchSorter from 'match-sorter';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { useRolesList } from '../../../../../hooks';
@@ -38,6 +39,7 @@ import reducer, { initialState } from './reducer';
 
 const useSortedRoles = () => {
   useFocusWhenNavigate();
+  const { locale } = useIntl();
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canCreate, canDelete, canRead, canUpdate },
@@ -46,7 +48,23 @@ const useSortedRoles = () => {
   const { getData, roles, isLoading } = useRolesList(false);
   const [{ query }] = useQueryParams();
   const _q = query?._q || '';
-  const sortedRoles = matchSorter(roles, _q, { keys: ['name', 'description'] });
+
+  const { includes } = useFilter(locale, {
+    sensitivity: 'base',
+  });
+
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
+  const sortedRoles = (roles || [])
+    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .sort(
+      (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
+    );
 
   useEffect(() => {
     if (!isLoadingForPermissions && canRead) {
@@ -356,6 +374,7 @@ const RoleListPage = () => {
                   usersCount={role.usersCount}
                   icons={getIcons(role)}
                   rowIndex={index + 2}
+                  canUpdate={canUpdate}
                 />
               ))}
             </Tbody>