@strapi/admin 4.14.3 → 4.14.5

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

@@ -25,8 +25,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 
-import useDebounce from '../../hooks/useDebounce';
-import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
+import { useDebounce } from '../../hooks/useDebounce';
 import { selectAdminPermissions } from '../App/selectors';
 
 import MissingPluginBanner from './components/MissingPluginBanner';
@@ -36,6 +35,7 @@ import NpmPackagesPagination from './components/NpmPackagesPagination';
 import OfflineLayout from './components/OfflineLayout';
 import PageHeader from './components/PageHeader';
 import SortSelect from './components/SortSelect';
+import { useNavigatorOnline } from './hooks/useNavigatorOnline';
 import useMarketplaceData from './utils/useMarketplaceData';
 
 const MarketPlacePage = () => {
@@ -47,7 +47,7 @@ const MarketPlacePage = () => {
   const debouncedSearch = useDebounce(query?.search, 500) || '';
 
   const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfo();
-  const isOnline = useNavigatorOnLine();
+  const isOnline = useNavigatorOnline();
 
   const npmPackageType = query?.npmPackageType || 'plugin';
 

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

@@ -26,8 +26,8 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
-import { useThemeToggle } from '../../hooks';
+import { useLocales } from '../../components/LanguageProvider';
+import { useThemeToggle } from '../../hooks/useThemeToggle';
 import { getFullName } from '../../utils';
 
 import Password from './components/Password';
@@ -36,7 +36,7 @@ import UserInfo from './components/UserInfo';
 import schema from './utils/schema';
 
 const ProfilePage = () => {
-  const { changeLocale, localeNames } = useLocalesProvider();
+  const { changeLocale, localeNames } = useLocales();
   const { setUserDisplayName } = useAppInfo();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();

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

@@ -6,7 +6,7 @@ import { Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useRegenerate } from '../../../../../hooks';
+import { useRegenerate } from '../../../hooks/useRegenerate';
 
 export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) => {
   const { formatMessage } = useIntl();

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

@@ -27,102 +27,24 @@ const Table = ({
   tokenType,
 }) => {
   const { canDelete, canUpdate, canRead } = permissions;
-  const withBulkActions = canDelete || canUpdate || canRead;
-  const [{ query }] = useQueryParams();
-  const { formatMessage } = useIntl();
-  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
-  const { trackUsage } = useTracking();
-
-  const sortedTokens = tokens.sort((a, b) => {
-    const comparison = a.name.localeCompare(b.name);
-
-    return sortOrder === 'DESC' ? -comparison : comparison;
-  });
 
+  /**
+   * TODO: This needs refactoring to the new `Table` component.
+   */
   return (
     <DynamicTable
       headers={headers}
       contentType={contentType}
       rows={tokens}
-      withBulkActions={withBulkActions}
+      withBulkActions={canDelete || canUpdate || canRead}
       isLoading={isLoading}
       onConfirmDelete={onConfirmDelete}
     >
-      <Tbody>
-        {sortedTokens.map((token) => {
-          return (
-            <Tr
-              key={token.id}
-              {...onRowClick({
-                fn() {
-                  trackUsage('willEditTokenFromList', {
-                    tokenType,
-                  });
-                  push(`${pathname}/${token.id}`);
-                },
-                condition: canUpdate,
-              })}
-            >
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
-                  {token.name}
-                </Typography>
-              </Td>
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" ellipsis>
-                  {token.description}
-                </Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(token.createdAt)} />
-                </Typography>
-              </Td>
-              <Td>
-                {token.lastUsedAt && (
-                  <Typography textColor="neutral800">
-                    <RelativeTime
-                      timestamp={new Date(token.lastUsedAt)}
-                      customIntervals={[
-                        {
-                          unit: 'hours',
-                          threshold: 1,
-                          text: formatMessage({
-                            id: 'Settings.apiTokens.lastHour',
-                            defaultMessage: 'last hour',
-                          }),
-                        },
-                      ]}
-                    />
-                  </Typography>
-                )}
-              </Td>
-
-              {withBulkActions && (
-                <Td>
-                  <Flex justifyContent="end">
-                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
-                    {!canUpdate && canRead && (
-                      <ReadButton tokenName={token.name} tokenId={token.id} />
-                    )}
-                    {canDelete && (
-                      <DeleteButton
-                        tokenName={token.name}
-                        onClickDelete={() => onConfirmDelete(token.id)}
-                        tokenType={tokenType}
-                      />
-                    )}
-                  </Flex>
-                </Td>
-              )}
-            </Tr>
-          );
-        })}
-      </Tbody>
+      <TableRows
+        tokenType={tokenType}
+        permissions={permissions}
+        onConfirmDelete={onConfirmDelete}
+      />
     </DynamicTable>
   );
 };
@@ -159,3 +81,113 @@ Table.defaultProps = {
 };
 
 export default Table;
+
+const TableRows = ({ tokenType, permissions, rows, withBulkActions, onConfirmDelete }) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { trackUsage } = useTracking();
+
+  const sortedTokens = rows.sort((a, b) => {
+    const comparison = a.name.localeCompare(b.name);
+
+    return sortOrder === 'DESC' ? -comparison : comparison;
+  });
+
+  return (
+    <Tbody>
+      {sortedTokens.map((token) => {
+        return (
+          <Tr
+            key={token.id}
+            {...onRowClick({
+              fn() {
+                trackUsage('willEditTokenFromList', {
+                  tokenType,
+                });
+                push(`${pathname}/${token.id}`);
+              },
+              condition: canUpdate,
+            })}
+          >
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" fontWeight="bold" ellipsis>
+                {token.name}
+              </Typography>
+            </Td>
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" ellipsis>
+                {token.description}
+              </Typography>
+            </Td>
+            <Td>
+              <Typography textColor="neutral800">
+                <RelativeTime timestamp={new Date(token.createdAt)} />
+              </Typography>
+            </Td>
+            <Td>
+              {token.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime
+                    timestamp={new Date(token.lastUsedAt)}
+                    customIntervals={[
+                      {
+                        unit: 'hours',
+                        threshold: 1,
+                        text: formatMessage({
+                          id: 'Settings.apiTokens.lastHour',
+                          defaultMessage: 'last hour',
+                        }),
+                      },
+                    ]}
+                  />
+                </Typography>
+              )}
+            </Td>
+
+            {withBulkActions && (
+              <Td>
+                <Flex justifyContent="end">
+                  {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={token.name} tokenId={token.id} />
+                  )}
+                  {canDelete && (
+                    <DeleteButton
+                      tokenName={token.name}
+                      onClickDelete={() => onConfirmDelete(token.id)}
+                      tokenType={tokenType}
+                    />
+                  )}
+                </Flex>
+              </Td>
+            )}
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  rows: [],
+  withBulkActions: false,
+};
+
+TableRows.propTypes = {
+  rows: PropTypes.array,
+  permissions: PropTypes.shape({
+    canRead: PropTypes.bool,
+    canDelete: PropTypes.bool,
+    canUpdate: PropTypes.bool,
+  }).isRequired,
+  onConfirmDelete: PropTypes.func.isRequired,
+  tokenType: PropTypes.string.isRequired,
+  withBulkActions: PropTypes.bool,
+};

package/admin/src/{hooks/useRegenerate/index.js → pages/SettingsPage/hooks/useRegenerate.ts}

@@ -1,8 +1,14 @@
 import { useState } from 'react';
 
 import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { AxiosError } from 'axios';
 
-const useRegenerate = (url, id, onRegenerate, onError) => {
+export const useRegenerate = (
+  url: string,
+  id: number | string,
+  onRegenerate: (accessKey: string) => void,
+  onError?: (error: unknown) => void
+): { isLoadingConfirmation: boolean; regenerateData: () => void } => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
@@ -23,10 +29,12 @@ const useRegenerate = (url, id, onRegenerate, onError) => {
       if (onError) {
         onError(error);
       } else {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
+        if (error instanceof AxiosError) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        }
       }
     }
   };
@@ -36,5 +44,3 @@ const useRegenerate = (url, id, onRegenerate, onError) => {
     isLoadingConfirmation,
   };
 };
-
-export default useRegenerate;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Regenerate/index.js

@@ -6,7 +6,7 @@ import { Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useRegenerate } from '../../../../../../../hooks';
+import { useRegenerate } from '../../../../../hooks/useRegenerate';
 
 export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/CustomizationInfos/index.js

@@ -5,7 +5,7 @@ import { useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useConfigurations } from '../../../../../../hooks';
+import { useConfiguration } from '../../../../../../hooks/useConfiguration';
 import { DIMENSION, SIZE } from '../../utils/constants';
 import LogoInput from '../LogoInput';
 
@@ -17,7 +17,7 @@ const CustomizationInfos = forwardRef(({ canUpdate, projectSettingsStored }, ref
   const { trackUsage } = useTracking();
   const {
     logos: { menu, auth },
-  } = useConfigurations();
+  } = useConfiguration();
   const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, projectSettingsStored)
   );

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -29,7 +29,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 
-import { useConfigurations } from '../../../../hooks';
+import { useConfiguration } from '../../../../hooks/useConfiguration';
 import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../App/selectors';
 
@@ -44,7 +44,7 @@ const ApplicationInfosPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const permissions = useSelector(selectAdminPermissions);
   const { formatAPIError } = useAPIErrorHandler();
 

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

@@ -33,10 +33,10 @@ import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import Permissions from '../EditPage/components/Permissions';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import schema from './utils/schema';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -16,7 +16,7 @@ import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 
 import ActionRow from './ActionRow';
 import createDefaultConditionsForm from './utils/createDefaultConditionsForm';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import HiddenAction from '../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import HiddenAction from '../../../HiddenAction';
 import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
 import RequiredSign from '../../../RequiredSign';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import CollapseLabel from '../../../CollapseLabel';
 import Curve from '../../../Curve';
 import HiddenAction from '../../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
 
 import { findDisplayedActions, getCheckboxesState } from './utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PermissionsDataManagerProvider/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-import { PermissionsDataManagerContext } from '../../../../../../../contexts';
+import { PermissionsDataManagerContext } from '../../hooks/usePermissionsDataManager';
 
 const PermissionsDataManagerProvider = ({ children, value }) => {
   return (

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/hooks/usePermissionsDataManager.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+// Note: I had to guess most of these types based on the name and usage, but I actually don't
+// know if they are correct, because the usage is very generic. Feel free to correct them if
+// they create problems.
+export interface PermissionsDataManagerContextValue {
+  availableConditions: unknown[];
+  modifiedData: object;
+  onChangeCollectionTypeLeftActionRowCheckbox: (
+    pathToData: string,
+    propertyName: string,
+    nam: string,
+    value: unknown
+  ) => void;
+  onChangeConditions: (conditions: object) => void;
+  onChangeSimpleCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeParentCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeCollectionTypeGlobalActionCheckbox: (
+    kind: string,
+    actionId: string,
+    value: unknown
+  ) => void;
+}
+
+export const PermissionsDataManagerContext =
+  React.createContext<PermissionsDataManagerContextValue | null>(null);
+
+export const usePermissionsDataManager = () => React.useContext(PermissionsDataManagerContext);

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

@@ -16,9 +16,9 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { useAdminRoles } from '../../../../../hooks/useAdminRoles';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import { Permissions, RoleForm } from './components';
 import schema from './utils/schema';

package/admin/src/{hooks/useAdminRolePermissions/index.js → pages/SettingsPage/pages/Roles/hooks/useAdminRolePermissions.ts}

@@ -1,15 +1,22 @@
 import { useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
 import { useQuery } from 'react-query';
 
-export const useAdminRolePermissions = (params = {}, queryOptions = {}) => {
+import { RolePermissions } from '../../../../../../../shared/permissions';
+import { APIBaseParams, APIResponse } from '../../../../../types/adminAPI';
+
+export interface APIRolePermissionsQueryParams extends APIBaseParams {
+  id: null | Entity.ID;
+}
+
+export const useAdminRolePermissions = (
+  params: APIRolePermissionsQueryParams = { id: null },
+  queryOptions = {}
+) => {
   const { id, ...queryParams } = params;
 
   const { get } = useFetchClient();
 
-  if (!id && (queryOptions?.enabled === undefined || !!queryOptions?.enabled === true)) {
-    throw new Error('"id" is a required argument');
-  }
-
   const {
     data: permissions,
     error,
@@ -21,7 +28,7 @@ export const useAdminRolePermissions = (params = {}, queryOptions = {}) => {
     async () => {
       const {
         data: { data },
-      } = await get(`/admin/roles/${id}/permissions`, {
+      } = await get<APIResponse<RolePermissions>>(`/admin/roles/${id}/permissions`, {
         params: queryParams,
       });
 

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/index.js

@@ -16,7 +16,7 @@ import {
 import { Plus } from '@strapi/icons';
 import qs from 'qs';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
@@ -28,7 +28,6 @@ import tableHeaders from './utils/tableHeaders';
 
 const TransferTokenListView = () => {
   useFocusWhenNavigate();
-  const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const permissions = useSelector(selectAdminPermissions);
@@ -64,6 +63,7 @@ const TransferTokenListView = () => {
     data: transferTokens,
     status,
     isFetching,
+    refetch,
   } = useQuery(
     ['transfer-tokens'],
     async () => {
@@ -81,8 +81,6 @@ const TransferTokenListView = () => {
     {
       enabled: canRead,
       onError(err) {
-        console.log('error', err);
-
         if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
           toggleNotification({
             type: 'warning',
@@ -112,7 +110,7 @@ const TransferTokenListView = () => {
     },
     {
       async onSuccess() {
-        await queryClient.invalidateQueries(['transfer-tokens']);
+        await refetch(['transfer-tokens']);
       },
       onError(err) {
         if (err?.response?.data?.data) {

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

@@ -17,7 +17,7 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import Logo from '../../components/UnauthenticatedLogo';
+import { Logo } from '../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../layouts/UnauthenticatedLayout';
 
 export const options = [

package/admin/src/shared/hooks/index.js

@@ -1,2 +1 @@
-export { default as useAdminProvider } from './useAdminProvider';
 export { default as useInjectionZone } from './useInjectionZone';

package/admin/src/shared/hooks/useInjectionZone/index.js

@@ -1,7 +1,7 @@
-import useAdminProvider from '../useAdminProvider';
+import { useAdmin } from '../../../contexts/admin';
 
 const useInjectionZone = (area) => {
-  const { getAdminInjectedComponents } = useAdminProvider();
+  const { getAdminInjectedComponents } = useAdmin();
 
   const [moduleName, page, position] = area.split('.');
 

package/admin/src/translations/en.json

@@ -626,6 +626,14 @@
   "components.Blocks.modifiers.underline": "Underline",
   "components.Blocks.modifiers.strikethrough": "Strikethrough",
   "components.Blocks.modifiers.code": "Code",
+  "components.Blocks.link": "Link",
+  "components.Blocks.popover.text": "Text",
+  "components.Blocks.popover.text.placeholder": "Enter link text",
+  "components.Blocks.popover.link": "Link",
+  "components.Blocks.popover.save": "Save",
+  "components.Blocks.popover.cancel": "Cancel",
+  "components.Blocks.popover.delete": "Delete",
+  "components.Blocks.popover.edit": "Edit",
   "components.Blocks.blocks.selectBlock": "Select a block",
   "components.Blocks.blocks.text": "Text",
   "components.Blocks.blocks.heading1": "Heading 1",

package/admin/src/types/adminAPI.ts

@@ -0,0 +1,29 @@
+/* eslint-disable check-file/filename-naming-convention */
+
+export interface APIBaseParams {
+  filters?: unknown;
+  locale?: string;
+  publicationState?: 'preview' | 'live';
+  sort?: unknown;
+}
+
+export type APIResponsePagination = {
+  page: number;
+  pageSize: number;
+  pageCount: number;
+  total: number;
+};
+
+export type APIResponseMeta = {
+  pagination: APIResponsePagination;
+};
+
+export type APIResponse<TRes = any> = {
+  data: TRes;
+  meta: APIResponseMeta;
+};
+
+// TODO: the users API response shape is outdated and should be updated
+export type APIResponseUsersLegacy<TRes = any> = {
+  data: TRes;
+};

package/admin/src/utils/createRoute.js

@@ -12,7 +12,10 @@ const LazyCompo = ({ loadComponent }) => {
       try {
         const loadedCompo = await loadComponent();
 
-        setCompo(() => loadedCompo.default);
+        // TODO the loaded component provided can currently come from a default or named export
+        // We will move the entire codebase to use named exports only
+        // Until then we support both cases with priority given to the existing default exports
+        setCompo(() => loadedCompo?.default ?? loadedCompo);
       } catch (err) {
         // TODO return the error component
         console.log(err);