@strapi/admin 4.14.5 → 4.15.0

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 {
@@ -468,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, {
@@ -731,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') {
@@ -832,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>
                     );
@@ -865,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({
@@ -880,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/contexts/admin.ts

@@ -16,3 +16,4 @@ const AdminContext = React.createContext<AdminContextValue>({
 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/themeToggle.ts

@@ -2,7 +2,8 @@ import { createContext } from 'react';
 
 import { DefaultTheme } from 'styled-components';
 
-export type ThemeName = 'light' | 'dark';
+export type ThemeName = 'light' | 'dark' | 'system';
+export type NonSystemThemeName = Exclude<ThemeName, 'system'>;
 
 interface ThemeToggleContextContextValue {
   currentTheme?: ThemeName;
@@ -11,6 +12,7 @@ interface ThemeToggleContextContextValue {
     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/index.js

@@ -1,3 +1,2 @@
-export { useContentTypes } from './useContentTypes';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as useSettingsMenu } from './useSettingsMenu';

package/admin/src/hooks/{useContentTypes/useContentTypes.js → useContentTypes.ts}

@@ -1,32 +1,55 @@
 import * as React from 'react';
 
 import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { AxiosError } from 'axios';
 import { useQueries } from 'react-query';
 
+import { Component, ContentType } from '../../../shared/schema';
+import { APIResponse } from '../types/adminAPI';
+
 export function useContentTypes() {
   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) {
+  const queries = useQueries([
+    {
+      queryKey: ['content-manager', 'components'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get<APIResponse<Component[]>>(`/content-manager/components`);
+
+        return data;
+      },
+      onError(error: unknown) {
+        if (error instanceof AxiosError) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        }
+      },
+    },
+
+    {
+      queryKey: ['content-manager', 'content-types'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get<APIResponse<ContentType[]>>(`/content-manager/content-types`);
+
+        return data;
+      },
+      onError(error: unknown) {
+        if (error instanceof AxiosError) {
           toggleNotification({
             type: 'warning',
             message: formatAPIError(error),
           });
-        },
-      };
-    })
-  );
+        }
+      },
+    },
+  ]);
 
   const [components, contentTypes] = queries;
   const isLoading = components.isLoading || contentTypes.isLoading;

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

@@ -1,13 +1,25 @@
 import { useEffect, useReducer } from 'react';
 
-import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getYupInnerErrors, useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import { checkFormValidity, formatAPIErrors } from '../../utils';
+import { formatAPIErrors } from '../../utils/formatAPIErrors';
 
 import init from './init';
 import { initialState, reducer } from './reducer';
 
+const checkFormValidity = async (data, schema) => {
+  let errors = null;
+
+  try {
+    await schema.validate(data, { abortEarly: false });
+  } catch (err) {
+    errors = getYupInnerErrors(err);
+  }
+
+  return errors;
+};
+
 /**
  * TODO: refactor this, it's confusing and hard to read.
  * It's also only used in `Settings/pages/SingleSignOn` so it can

package/admin/src/hooks/useSettingsMenu/constants.js

@@ -21,6 +21,34 @@ export const LINKS_CE = {
       to: '/settings/transfer-tokens?sort=name:ASC',
       id: 'transfer-tokens',
     },
+    // If the Enterprise feature is not enabled and if the config doesn't disable it, we promote the Enterprise feature by displaying them in the settings menu.
+    // Disable this by adding "promoteEE: false" to your `./config/admin.js` file
+    ...(!window.strapi.features.isEnabled(window.strapi.features.SSO) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'Settings.sso.title', defaultMessage: 'Single Sign-On' },
+            to: '/settings/purchase-single-sign-on',
+            id: 'sso',
+            lockIcon: true,
+          },
+        ]
+      : []),
+
+    ...(!window.strapi.features.isEnabled(window.strapi.features.REVIEW_WORKFLOWS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: {
+              id: 'Settings.review-workflows.page.title',
+              defaultMessage: 'Review Workflows',
+            },
+            to: '/settings/purchase-review-workflows',
+            id: 'review-workflows',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 
   admin: [
@@ -35,5 +63,16 @@ export const LINKS_CE = {
       to: '/settings/users?pageSize=10&page=1&sort=firstname',
       id: 'users',
     },
+    ...(!window.strapi.features.isEnabled(window.strapi.features.AUDIT_LOGS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+            to: '/settings/purchase-audit-logs',
+            id: 'auditLogs',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 };

package/admin/src/index.js

@@ -2,10 +2,9 @@ import { getFetchClient } from '@strapi/helper-plugin';
 import { createRoot } from 'react-dom/client';
 
 import appCustomisations from './app';
-import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import { Components, Fields, Middlewares } from './core/apis';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
-import appReducers from './reducers';
 
 window.strapi = {
   /**
@@ -25,6 +24,7 @@ window.strapi = {
   projectType: 'Community',
   flags: {
     nps: false,
+    promoteEE: true,
   },
 };
 
@@ -35,7 +35,6 @@ const library = {
   fields: Fields(),
 };
 const middlewares = Middlewares();
-const reducers = Reducers({ appReducers });
 
 const MOUNT_NODE = document.getElementById('app');
 
@@ -69,7 +68,6 @@ const run = async () => {
     adminConfig: customConfig,
     bootstrap: customConfig,
     middlewares,
-    reducers,
   });
 
   await app.bootstrapAdmin();

package/admin/src/layouts/{AppLayout/index.js → AppLayout.tsx}

@@ -1,7 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Flex, SkipToContent } from '@strapi/design-system';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
@@ -9,7 +8,12 @@ const FlexBox = styled(Box)`
   flex: 1;
 `;
 
-const AppLayout = ({ children, sideNav }) => {
+interface AppLayoutProps {
+  children: React.ReactNode;
+  sideNav: React.ReactNode;
+}
+
+export const AppLayout = ({ children, sideNav }: AppLayoutProps) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -24,10 +28,3 @@ const AppLayout = ({ children, sideNav }) => {
     </Box>
   );
 };
-
-AppLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-  sideNav: PropTypes.node.isRequired,
-};
-
-export default AppLayout;

package/admin/src/layouts/UnauthenticatedLayout.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { Box, Flex, SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+import { useLocales } from '../components/LanguageProvider';
+
+const Wrapper = styled(Box)`
+  margin: 0 auto;
+  width: 552px;
+`;
+
+export const Column = styled(Flex)`
+  flex-direction: column;
+`;
+
+const LocaleToggle = () => {
+  const { changeLocale, localeNames } = useLocales();
+  const { formatMessage, locale } = useIntl();
+
+  return (
+    <SingleSelect
+      aria-label={formatMessage({
+        id: 'global.localeToggle.label',
+        defaultMessage: 'Select interface language',
+      })}
+      value={locale}
+      onChange={(language) => {
+        changeLocale(language as string);
+      }}
+    >
+      {Object.entries(localeNames).map(([language, name]) => (
+        <SingleSelectOption key={language} value={language}>
+          {name}
+        </SingleSelectOption>
+      ))}
+    </SingleSelect>
+  );
+};
+
+interface LayoutContentProps {
+  children: React.ReactNode;
+}
+
+export const LayoutContent = ({ children }: LayoutContentProps) => (
+  <Wrapper
+    shadow="tableShadow"
+    hasRadius
+    paddingTop={9}
+    paddingBottom={9}
+    paddingLeft={10}
+    paddingRight={10}
+    background="neutral0"
+  >
+    {children}
+  </Wrapper>
+);
+
+interface UnauthenticatedLayoutProps {
+  children: React.ReactNode;
+}
+
+export const UnauthenticatedLayout = ({ children }: UnauthenticatedLayoutProps) => {
+  return (
+    <div>
+      <Flex as="header" justifyContent="flex-end">
+        <Box paddingTop={6} paddingRight={8}>
+          <LocaleToggle />
+        </Box>
+      </Flex>
+      <Box paddingTop={2} paddingBottom={11}>
+        {children}
+      </Box>
+    </div>
+  );
+};