@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/content-manager/pages/ListView/components/Body/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BaseCheckbox, IconButton, Td, Flex } from '@strapi/design-system';
+import { BaseCheckbox, IconButton, Flex } from '@strapi/design-system';
 import { useTracking, useTableContext, Table } from '@strapi/helper-plugin';
 import { Trash, Duplicate, Pencil } from '@strapi/icons';
 import PropTypes from 'prop-types';
@@ -29,15 +29,14 @@ const CheckboxDataCell = ({ rowId, index }) => {
   );
 
   return (
-    <Td onClick={stopPropagation}>
-      <BaseCheckbox
-        aria-label={ariaLabel}
-        checked={isChecked}
-        onChange={() => {
-          onSelectRow({ name: rowId, value: !isChecked });
-        }}
-      />
-    </Td>
+    <BaseCheckbox
+      aria-label={ariaLabel}
+      checked={isChecked}
+      onClick={stopPropagation}
+      onChange={() => {
+        onSelectRow({ name: rowId, value: !isChecked });
+      }}
+    />
   );
 };
 
@@ -75,61 +74,59 @@ const EntityActionsDataCell = ({
   );
 
   return (
-    <Td>
-      <Flex gap={1} justifyContent="end" onClick={stopPropagation}>
+    <Flex gap={1} justifyContent="end" onClick={stopPropagation}>
+      <IconButton
+        forwardedAs={Link}
+        onClick={() => {
+          trackUsage('willEditEntryFromButton');
+        }}
+        to={{
+          pathname: `${pathname}/${rowId}`,
+          state: { from: pathname },
+          search: pluginsQueryParams,
+        }}
+        label={formatMessage(
+          { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+          { target: itemLineText }
+        )}
+        noBorder
+      >
+        <Pencil />
+      </IconButton>
+
+      {canCreate && (
+        <IconButton
+          onClick={handleCloneClick(rowId)}
+          label={formatMessage(
+            {
+              id: 'app.component.table.duplicate',
+              defaultMessage: 'Duplicate {target}',
+            },
+            { target: itemLineText }
+          )}
+          noBorder
+        >
+          <Duplicate />
+        </IconButton>
+      )}
+
+      {canDelete && (
         <IconButton
-          forwardedAs={Link}
           onClick={() => {
-            trackUsage('willEditEntryFromButton');
-          }}
-          to={{
-            pathname: `${pathname}/${rowId}`,
-            state: { from: pathname },
-            search: pluginsQueryParams,
+            trackUsage('willDeleteEntryFromList');
+            setSelectedEntries([rowId]);
+            setIsConfirmDeleteRowOpen(true);
           }}
           label={formatMessage(
-            { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+            { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
             { target: itemLineText }
           )}
           noBorder
         >
-          <Pencil />
+          <Trash />
         </IconButton>
-
-        {canCreate && (
-          <IconButton
-            onClick={handleCloneClick(rowId)}
-            label={formatMessage(
-              {
-                id: 'app.component.table.duplicate',
-                defaultMessage: 'Duplicate {target}',
-              },
-              { target: itemLineText }
-            )}
-            noBorder
-          >
-            <Duplicate />
-          </IconButton>
-        )}
-
-        {canDelete && (
-          <IconButton
-            onClick={() => {
-              trackUsage('willDeleteEntryFromList');
-              setSelectedEntries([rowId]);
-              setIsConfirmDeleteRowOpen(true);
-            }}
-            label={formatMessage(
-              { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-              { target: itemLineText }
-            )}
-            noBorder
-          >
-            <Trash />
-          </IconButton>
-        )}
-      </Flex>
-    </Td>
+      )}
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/ListView/components/BulkActionButtons/SelectedEntriesModal/index.js

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import formatAPIError from '../../../../../../utils/formatAPIErrors';
+import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -156,7 +156,9 @@ const SelectedEntriesTableContent = ({
       <Table.Body>
         {rowsToDisplay.map((row, index) => (
           <Tr key={row.id}>
-            <Body.CheckboxDataCell rowId={row.id} index={index} />
+            <Td>
+              <Body.CheckboxDataCell rowId={row.id} index={index} />
+            </Td>
             <Td>
               <Typography>{row.id}</Typography>
             </Td>
@@ -301,7 +303,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIError(error),
+          message: formatAPIErrors(error),
         });
       },
     }

package/admin/src/content-manager/pages/ListView/components/TableRows/index.js

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { useEnterprise } from '../../../../../hooks/useEnterprise';
-import { getFullName } from '../../../../../utils';
+import { getFullName } from '../../../../../utils/getFullName';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';

package/admin/src/content-manager/pages/ListView/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { bindActionCreators } from '@reduxjs/toolkit';
 import {
   Main,
   ActionLayout,
@@ -39,11 +40,11 @@ import PropTypes from 'prop-types';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
-import { connect, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
-import { bindActionCreators, compose } from 'redux';
 
-import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import { HOOKS } from '../../../constants';
+import { useTypedSelector } from '../../../core/store/hooks';
 import { useAdminUsers } from '../../../hooks/useAdminUsers';
 import { useEnterprise } from '../../../hooks/useEnterprise';
 import { InjectionZone } from '../../../shared/components';
@@ -53,7 +54,7 @@ import { CREATOR_FIELDS } from '../../constants/attributes';
 import { useAllowedAttributes } from '../../hooks/useAllowedAttributes';
 import { getTrad, getDisplayName } from '../../utils';
 
-import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
+import * as Actions from './actions';
 import { Body } from './components/Body';
 import BulkActionButtons from './components/BulkActionButtons';
 import CellContent from './components/CellContent';
@@ -61,24 +62,23 @@ import { ViewSettingsMenu } from './components/ViewSettingsMenu';
 import makeSelectListView, { selectDisplayedHeaders } from './selectors';
 import { buildValidGetParams } from './utils';
 
+const { INJECT_COLUMN_IN_TABLE } = HOOKS;
 const REVIEW_WORKFLOW_COLUMNS_CE = null;
 const REVIEW_WORKFLOW_COLUMNS_CELL_CE = () => null;
 const REVIEW_WORKFLOW_FILTER_CE = [];
 const USER_FILTER_ATTRIBUTES = [...CREATOR_FIELDS, 'strapi_assignee'];
 
-function ListView({
-  canCreate,
-  canDelete,
-  canRead,
-  canPublish,
-  data,
-  getData,
-  getDataSucceeded,
-  isLoading,
-  layout,
-  pagination,
-  slug,
-}) {
+function ListView({ canCreate, canDelete, canRead, canPublish, layout, slug }) {
+  const dispatch = useDispatch();
+  const { getData, getDataSucceeded } = React.useMemo(
+    () =>
+      bindActionCreators(
+        { getData: Actions.getData, getDataSucceeded: Actions.getDataSucceeded },
+        dispatch
+      ),
+    [dispatch]
+  );
+  const { pagination, isLoading, data } = useTypedSelector(makeSelectListView());
   const { total } = pagination;
   const { contentType } = layout;
   const {
@@ -185,6 +185,7 @@ function ListView({
       };
 
       filter.fieldSchema.mainField = {
+        ...mainField,
         name: 'id',
       };
     }
@@ -467,7 +468,7 @@ function ListView({
   });
 
   const { runHookWaterfall } = useStrapiApp();
-  const displayedHeaders = useSelector(selectDisplayedHeaders);
+  const displayedHeaders = useTypedSelector(selectDisplayedHeaders);
 
   const tableHeaders = React.useMemo(() => {
     const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, {
@@ -720,7 +721,7 @@ function ListView({
                 {/* Empty content */}
                 <Table.EmptyBody
                   contentType={headerLayoutTitle}
-                  aciton={getCreateAction({ variant: 'secondary' })}
+                  action={getCreateAction({ variant: 'secondary' })}
                 />
                 {/* Content */}
                 <Body.Root
@@ -730,9 +731,11 @@ function ListView({
                 >
                   {data.map((rowData, index) => {
                     return (
-                      <Tr cursor="pointer" key={data.id} onClick={handleRowClick(rowData.id)}>
+                      <Tr cursor="pointer" key={rowData.id} onClick={handleRowClick(rowData.id)}>
                         {/* Bulk action row checkbox */}
-                        <Body.CheckboxDataCell rowId={rowData.id} index={index} />
+                        <Td>
+                          <Body.CheckboxDataCell rowId={rowData.id} index={index} />
+                        </Td>
                         {/* Field data */}
                         {tableHeaders.map(({ key, name, cellFormatter, ...rest }) => {
                           if (hasDraftAndPublish && name === 'publishedAt') {
@@ -831,14 +834,16 @@ function ListView({
                         })}
                         {/* Actions: edit, duplicate, delete */}
                         {(canDelete || canPublish) && isBulkable && (
-                          <Body.EntityActionsDataCell
-                            rowId={rowData.id}
-                            index={index}
-                            setIsConfirmDeleteRowOpen={setIsConfirmDeleteRowOpen}
-                            canCreate={canCreate}
-                            canDelete={canDelete}
-                            handleCloneClick={handleCloneClick}
-                          />
+                          <Td>
+                            <Body.EntityActionsDataCell
+                              rowId={rowData.id}
+                              index={index}
+                              setIsConfirmDeleteRowOpen={setIsConfirmDeleteRowOpen}
+                              canCreate={canCreate}
+                              canDelete={canDelete}
+                              handleCloneClick={handleCloneClick}
+                            />
+                          </Td>
                         )}
                       </Tr>
                     );
@@ -864,7 +869,6 @@ ListView.propTypes = {
   canDelete: PropTypes.bool.isRequired,
   canRead: PropTypes.bool.isRequired,
   canPublish: PropTypes.bool.isRequired,
-  data: PropTypes.array.isRequired,
   layout: PropTypes.exact({
     components: PropTypes.object.isRequired,
     contentType: PropTypes.shape({
@@ -879,27 +883,7 @@ ListView.propTypes = {
       settings: PropTypes.object.isRequired,
     }).isRequired,
   }).isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  getData: PropTypes.func.isRequired,
-  getDataSucceeded: PropTypes.func.isRequired,
-  pagination: PropTypes.shape({ total: PropTypes.number.isRequired, pageCount: PropTypes.number })
-    .isRequired,
   slug: PropTypes.string.isRequired,
 };
 
-const mapStateToProps = makeSelectListView();
-
-export function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    {
-      getData,
-      getDataSucceeded,
-      onChangeListHeaders,
-      onResetListHeaders,
-    },
-    dispatch
-  );
-}
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
-
-export default compose(withConnect)(React.memo(ListView, isEqual));
+export default React.memo(ListView, isEqual);

package/admin/src/content-manager/pages/ListView/selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { initialState } from './reducer';
 

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -5,7 +5,7 @@ const checkIfAttributeIsDisplayable = (attribute) => {
     return !(attribute?.relationType ?? '').toLowerCase().includes('morph');
   }
 
-  return !['json', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
+  return !['json', 'dynamiczone', 'richtext', 'password', 'blocks'].includes(type) && !!type;
 };
 
 export default checkIfAttributeIsDisplayable;

package/admin/src/content-manager/utils/schema.js

@@ -228,8 +228,8 @@ const createYupSchemaAttribute = (type, validations, options) => {
         return true;
       }
 
-      // The backend validates the actual schema
-      if (!Array.isArray(value)) {
+      // The backend validates the actual schema, check if a value different than null is not an array
+      if (value && !Array.isArray(value)) {
         return false;
       }
 

package/admin/src/contexts/admin.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface AdminContextValue {
+  /**
+   * TODO: this should come from `StrapiApp['getAdminInjectedComponents']`
+   */
+  getAdminInjectedComponents: () => unknown;
+}
+
+const AdminContext = React.createContext<AdminContextValue>({
+  getAdminInjectedComponents() {
+    throw new Error('AdminContext: getAdminInjectedComponents() not implemented');
+  },
+});
+
+const useAdmin = () => React.useContext(AdminContext);
+
+export { AdminContext, useAdmin };
+export type { AdminContextValue };

package/admin/src/contexts/apiTokenPermissions.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable check-file/filename-naming-convention */
+
+import * as React from 'react';
+
+import { Entity } from '@strapi/types';
+
+interface PseudoEvent {
+  target: { value: string };
+}
+
+interface ApiTokenPermissionsContextValue {
+  selectedAction: string[] | null;
+  routes: string[];
+  selectedActions: string[];
+  data: {
+    allActionsIds: Entity.ID[];
+    permissions: {
+      apiId: string;
+      label: string;
+      controllers: { controller: string; actions: { actionId: string; action: string } }[];
+    }[];
+  };
+  onChange: ({ target: { value } }: PseudoEvent) => void;
+  onChangeSelectAll: ({ target: { value } }: PseudoEvent) => void;
+  setSelectedAction: ({ target: { value } }: PseudoEvent) => void;
+}
+
+interface ApiTokenPermissionsContextProviderProps extends ApiTokenPermissionsContextValue {
+  children: React.ReactNode[];
+}
+
+const ApiTokenPermissionsContext = React.createContext<ApiTokenPermissionsContextValue>({
+  selectedAction: null,
+  routes: [],
+  selectedActions: [],
+  data: {
+    allActionsIds: [],
+    permissions: [],
+  },
+  onChange: () => {},
+  onChangeSelectAll: () => {},
+  setSelectedAction: () => {},
+});
+
+const ApiTokenPermissionsContextProvider = ({
+  children,
+  ...rest
+}: ApiTokenPermissionsContextProviderProps) => {
+  return (
+    <ApiTokenPermissionsContext.Provider value={rest}>
+      {children}
+    </ApiTokenPermissionsContext.Provider>
+  );
+};
+
+const useApiTokenPermissionsContext = () => React.useContext(ApiTokenPermissionsContext);
+
+export {
+  ApiTokenPermissionsContext,
+  ApiTokenPermissionsContextProvider,
+  useApiTokenPermissionsContext,
+};
+
+export type { ApiTokenPermissionsContextValue, ApiTokenPermissionsContextProviderProps };

package/admin/src/contexts/configuration.ts

@@ -0,0 +1,25 @@
+import { createContext } from 'react';
+
+export interface ConfigurationContextValue {
+  logos: {
+    auth: { custom?: string | null; default: string };
+    menu: { custom?: string | null; default: string };
+  };
+  showTutorials: boolean;
+  showReleaseNotification: boolean;
+  updateProjectSettings: (settings: { authLogo?: string; menuLogo?: string }) => void;
+}
+
+const ConfigurationContext = createContext<ConfigurationContextValue>({
+  logos: {
+    auth: { default: '' },
+    menu: { default: '' },
+  },
+  showTutorials: false,
+  showReleaseNotification: false,
+  updateProjectSettings: () => {
+    throw new Error('updateProjectSettings was not implemented');
+  },
+});
+
+export { ConfigurationContext };

package/admin/src/contexts/themeToggle.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+import { DefaultTheme } from 'styled-components';
+
+export type ThemeName = 'light' | 'dark' | 'system';
+export type NonSystemThemeName = Exclude<ThemeName, 'system'>;
+
+interface ThemeToggleContextContextValue {
+  currentTheme?: ThemeName;
+  onChangeTheme?: (nextTheme: ThemeName) => void;
+  themes?: {
+    dark: DefaultTheme;
+    light: DefaultTheme;
+  };
+  systemTheme?: NonSystemThemeName;
+}
+
+export const ThemeToggleContext = createContext<ThemeToggleContextContextValue>({});

package/admin/src/core/store/configure.ts

@@ -0,0 +1,91 @@
+import {
+  configureStore,
+  StoreEnhancer,
+  Middleware,
+  Reducer,
+  combineReducers,
+} from '@reduxjs/toolkit';
+
+import { RBACReducer } from '../../components/RBACProvider';
+// @ts-expect-error no types, yet.
+import rbacManagerReducer from '../../content-manager/hooks/useSyncRbac/reducer';
+// @ts-expect-error no types, yet.
+import cmAppReducer from '../../content-manager/pages/App/reducer';
+// @ts-expect-error no types, yet.
+import editViewLayoutManagerReducer from '../../content-manager/pages/EditViewLayoutManager/reducer';
+// @ts-expect-error no types, yet.
+import listViewReducer from '../../content-manager/pages/ListView/reducer';
+// @ts-expect-error no types, yet.
+import editViewCrudReducer from '../../content-manager/sharedReducers/crudReducer/reducer';
+// @ts-expect-error no types, yet.
+import appReducer from '../../pages/App/reducer';
+
+/**
+ * @description Static reducers are ones we know, they live in the admin package.
+ */
+const staticReducers = {
+  admin_app: appReducer,
+  rbacProvider: RBACReducer,
+  'content-manager_app': cmAppReducer,
+  'content-manager_listView': listViewReducer,
+  'content-manager_rbacManager': rbacManagerReducer,
+  'content-manager_editViewLayoutManager': editViewLayoutManagerReducer,
+  'content-manager_editViewCrudReducer': editViewCrudReducer,
+} as const;
+
+const injectReducerStoreEnhancer: (appReducers: Record<string, Reducer>) => StoreEnhancer =
+  (appReducers) =>
+  (next) =>
+  (...args) => {
+    const store = next(...args);
+
+    const asyncReducers: Record<string, Reducer> = {};
+
+    return {
+      ...store,
+      asyncReducers,
+      injectReducer: (key: string, asyncReducer: Reducer) => {
+        asyncReducers[key] = asyncReducer;
+        store.replaceReducer(
+          // @ts-expect-error we dynamically add reducers which makes the types uncomfortable.
+          combineReducers({
+            ...appReducers,
+            ...asyncReducers,
+          })
+        );
+      },
+    };
+  };
+
+/**
+ * @description This is the main store configuration function, injected Reducers use our legacy app.addReducer API,
+ * which we're trying to phase out. App Middlewares could potentially be improved...?
+ */
+const configureStoreImpl = (
+  appMiddlewares: Array<() => Middleware> = [],
+  injectedReducers: Record<string, Reducer> = {}
+) => {
+  const coreReducers = { ...staticReducers, ...injectedReducers } as const;
+
+  const store = configureStore({
+    reducer: coreReducers,
+    devTools: process.env.NODE_ENV !== 'production',
+    middleware: (getDefaultMiddleware) => [
+      ...getDefaultMiddleware(),
+      ...appMiddlewares.map((m) => m()),
+    ],
+    enhancers: [injectReducerStoreEnhancer(coreReducers)],
+  });
+
+  return store;
+};
+
+type Store = ReturnType<typeof configureStoreImpl> & {
+  asyncReducers: Record<string, Reducer>;
+  injectReducer: (key: string, asyncReducer: Reducer) => void;
+};
+
+type RootState = ReturnType<Store['getState']>;
+
+export { configureStoreImpl as configureStore };
+export type { RootState, Store };

package/admin/src/core/store/hooks.ts

@@ -0,0 +1,15 @@
+import { createSelector, Selector } from '@reduxjs/toolkit';
+import { useDispatch, useStore, TypedUseSelectorHook, useSelector } from 'react-redux';
+
+import type { RootState, Store } from './configure';
+
+type AppDispatch = Store['dispatch'];
+
+const useTypedDispatch: () => AppDispatch = useDispatch;
+const useTypedStore = useStore as () => Store;
+const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+const createTypedSelector = <TResult>(selector: Selector<RootState, TResult>) =>
+  createSelector((state: RootState) => state, selector);
+
+export { useTypedDispatch, useTypedStore, useTypedSelector, createTypedSelector };

package/admin/src/hooks/{useConfigurations/__mocks__/index.js → __mocks__/useConfigurations.ts}

@@ -1,7 +1,9 @@
-export default function () {
+const useConfiguration = () => {
   return {
     logos: {
       auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
     },
   };
-}
+};
+
+export { useConfiguration };

package/admin/src/hooks/index.js

@@ -1,10 +1,2 @@
-export { default as useConfigurations } from './useConfigurations';
-export { useContentTypes } from './useContentTypes';
-export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
-export { default as useMenu } from './useMenu';
-export { default as usePermissionsDataManager } from './usePermissionsDataManager';
-export { default as useRegenerate } from './useRegenerate';
-export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as useSettingsMenu } from './useSettingsMenu';
-export { default as useThemeToggle } from './useThemeToggle';