@strapi/admin 4.12.0-beta.0 → 4.12.0-beta.3

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

@@ -10,6 +10,11 @@ import {
   HeaderLayout,
   useNotifyAT,
   Flex,
+  Td,
+  Tr,
+  Typography,
+  Status,
+  lightTheme,
 } from '@strapi/design-system';
 import {
   NoPermissions,
@@ -23,14 +28,13 @@ import {
   useTracking,
   Link,
   useAPIErrorHandler,
-  getYupInnerErrors,
   useStrapiApp,
-  DynamicTable,
+  Table,
   PaginationURLQuery,
   PageSizeURLQuery,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Cog, Plus } from '@strapi/icons';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
@@ -46,14 +50,13 @@ import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import AttributeFilter from '../../components/AttributeFilter';
-import BulkActionsBar from '../../components/DynamicTable/BulkActionsBar';
-import { createYupSchema, getRequestUrl, getTrad } from '../../utils';
+import { getRequestUrl, getTrad } from '../../utils';
 
 import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
-import { ConfirmDialogDelete } from './components/ConfirmDialogDelete';
-import { ConfirmDialogDeleteAll } from './components/ConfirmDialogDeleteAll';
+import { Body } from './components/Body';
+import BulkActionButtons from './components/BulkActionButtons';
+import CellContent from './components/CellContent';
 import { FieldPicker } from './components/FieldPicker';
-import { TableRows } from './components/TableRows';
 import makeSelectListView, { selectDisplayedHeaders } from './selectors';
 import { buildValidGetParams } from './utils';
 
@@ -66,6 +69,7 @@ const ConfigureLayoutBox = styled(Box)`
 `;
 
 const REVIEW_WORKFLOW_COLUMNS_CE = null;
+const REVIEW_WORKFLOW_COLUMNS_CELL_CE = () => null;
 
 function ListView({
   canCreate,
@@ -88,7 +92,7 @@ function ListView({
     metadatas,
     settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
   } = contentType;
-
+  const [isConfirmDeleteRowOpen, setIsConfirmDeleteRowOpen] = React.useState(false);
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { refetchPermissions } = useRBACProvider();
@@ -124,29 +128,18 @@ function ListView({
       enabled: !!options?.reviewWorkflows,
     }
   );
-
-  const { post, del } = fetchClient;
-
-  const bulkPublishMutation = useMutation(
-    (data) =>
-      post(`/content-manager/collection-types/${contentType.uid}/actions/bulkPublish`, data),
+  const ReviewWorkflowsStage = useEnterprise(
+    REVIEW_WORKFLOW_COLUMNS_CELL_CE,
+    async () =>
+      (await import('../../../../../ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn'))
+        .ReviewWorkflowsStageEE,
     {
-      onSuccess() {
-        toggleNotification({
-          type: 'success',
-          message: { id: 'content-manager.success.record.publish', defaultMessage: 'Published' },
-        });
-
-        fetchData(`/content-manager/collection-types/${slug}`, { params });
-      },
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
+      enabled: hasReviewWorkflows,
     }
   );
+
+  const { post, del } = fetchClient;
+
   const bulkUnpublishMutation = useMutation(
     (data) =>
       post(`/content-manager/collection-types/${contentType.uid}/actions/bulkUnpublish`, data),
@@ -271,66 +264,6 @@ function ListView({
     [slug, toggleNotification, formatAPIError, del, fetchData, params]
   );
 
-  /**
-   * @param {number[]} selectedEntries - Array of ids to publish
-   * @returns {{validIds: number[], errors: Object.<number, string>}} - Returns an object with the valid ids and the errors
-   */
-  const validateEntriesToPublish = async (selectedEntries) => {
-    const validations = { validIds: [], errors: {} };
-    // Create the validation schema based on the contentType
-    const schema = createYupSchema(
-      contentType,
-      { components: layout.components },
-      { isDraft: false }
-    );
-    // Get the selected entries
-    const entries = data.filter((entry) => {
-      return selectedEntries.includes(entry.id);
-    });
-    // Validate each entry and map the unresolved promises
-    const validationPromises = entries.map((entry) =>
-      schema.validate(entry, { abortEarly: false })
-    );
-    // Resolve all the promises in one go
-    const resolvedPromises = await Promise.allSettled(validationPromises);
-    // Set the validations
-    resolvedPromises.forEach((promise) => {
-      if (promise.status === 'rejected') {
-        const entityId = promise.reason.value.id;
-        validations.errors[entityId] = getYupInnerErrors(promise.reason);
-      }
-
-      if (promise.status === 'fulfilled') {
-        validations.validIds.push(promise.value.id);
-      }
-    });
-
-    return validations;
-  };
-
-  const handleConfirmPublishAllData = async (selectedEntries) => {
-    const validations = await validateEntriesToPublish(selectedEntries);
-
-    if (Object.values(validations.errors).length) {
-      toggleNotification({
-        type: 'warning',
-        title: {
-          id: 'content-manager.listView.validation.errors.title',
-          defaultMessage: 'Action required',
-        },
-        message: {
-          id: 'content-manager.listView.validation.errors.message',
-          defaultMessage:
-            'Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)',
-        },
-      });
-
-      throw new Error('Validation error');
-    }
-
-    return bulkPublishMutation.mutateAsync({ ids: selectedEntries });
-  };
-
   const handleConfirmUnpublishAllData = (selectedEntries) => {
     return bulkUnpublishMutation.mutateAsync({ ids: selectedEntries });
   };
@@ -475,6 +408,57 @@ function ListView({
       </Button>
     ) : null;
 
+  /**
+   *
+   * @param {string} id
+   * @returns void
+   */
+  const handleRowClick = (id) => () => {
+    trackUsage('willEditEntryFromList');
+    push({
+      pathname: `${pathname}/${id}`,
+      state: { from: pathname },
+      search: pluginsQueryParams,
+    });
+  };
+
+  const handleCloneClick = (id) => async () => {
+    try {
+      const { data } = await post(
+        `/content-manager/collection-types/${contentType.uid}/auto-clone/${id}?${pluginsQueryParams}`
+      );
+
+      if ('id' in data) {
+        push({
+          pathname: `${pathname}/${data.id}`,
+          state: { from: pathname },
+          search: pluginsQueryParams,
+        });
+      }
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        push({
+          pathname: `${pathname}/create/clone/${id}`,
+          state: { from: pathname, error: formatAPIError(err) },
+          search: pluginsQueryParams,
+        });
+      }
+    }
+  };
+
+  // Add 1 column for the checkbox and 1 for the actions
+  const colCount = tableHeaders.length + 2;
+
+  // We have this function to refetch data when selected entries modal is closed
+  const refetchData = () => {
+    fetchData(`/content-manager/collection-types/${slug}`, { params });
+  };
+
+  // Block rendering until the review stage component is fully loaded in EE
+  if (!ReviewWorkflowsStage) {
+    return null;
+  }
+
   return (
     <Main aria-busy={isLoading}>
       <HeaderLayout
@@ -544,54 +528,129 @@ function ListView({
       <ContentLayout>
         {canRead ? (
           <Flex gap={4} direction="column" alignItems="stretch">
-            <DynamicTable
-              canCreate={canCreate}
-              canDelete={canDelete}
-              canPublish={canPublish}
-              contentTypeName={headerLayoutTitle}
-              onConfirmDelete={handleConfirmDeleteData}
-              onConfirmDeleteAll={handleConfirmDeleteAllData}
-              onConfirmPublishAll={handleConfirmPublishAllData}
-              onConfirmUnpublishAll={handleConfirmUnpublishAllData}
-              isBulkable={isBulkable}
-              isLoading={isLoading}
-              // FIXME: remove the layout props drilling
-              layout={layout}
-              rows={data}
-              components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
-              contentType={headerLayoutTitle}
-              action={getCreateAction({ variant: 'secondary' })}
-              headers={tableHeaders}
-              onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
-              withBulkActions
-              withMainAction={canDelete && isBulkable}
-              renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
-                <BulkActionsBar
+            <Table.Root rows={data} isLoading={isLoading} colCount={colCount}>
+              <Table.ActionBar>
+                <BulkActionButtons
                   showPublish={canPublish && hasDraftAndPublish}
                   showDelete={canDelete}
                   onConfirmDeleteAll={handleConfirmDeleteAllData}
-                  onConfirmPublishAll={handleConfirmPublishAllData}
                   onConfirmUnpublishAll={handleConfirmUnpublishAllData}
-                  selectedEntries={selectedEntries}
-                  clearSelectedEntries={clearSelectedEntries}
+                  refetchData={refetchData}
                 />
-              )}
-              bulkAction
-            >
-              <TableRows
-                canCreate={canCreate}
-                canDelete={canDelete}
-                contentType={contentType}
-                features={{
-                  hasDraftAndPublish,
-                  hasReviewWorkflows,
-                }}
-                headers={tableHeaders}
-                rows={data}
-                withBulkActions
-                withMainAction={canDelete && isBulkable}
-              />
-            </DynamicTable>
+              </Table.ActionBar>
+              <Table.Content>
+                <Table.Head>
+                  {/* Bulk action select all checkbox */}
+                  <Table.HeaderCheckboxCell />
+                  {/* Dynamic headers based on fields */}
+                  {tableHeaders.map(({ fieldSchema, key, name, metadatas }) => (
+                    <Table.HeaderCell
+                      key={key}
+                      name={name}
+                      fieldSchemaType={fieldSchema.type}
+                      relationFieldName={metadatas.mainField?.name}
+                      isSortable={metadatas.sortable}
+                      label={metadatas.label}
+                    />
+                  ))}
+                  {/* Visually hidden header for actions */}
+                  <Table.HeaderHiddenActionsCell />
+                </Table.Head>
+                {/* Loading content */}
+                <Table.LoadingBody />
+                {/* Empty content */}
+                <Table.EmptyBody
+                  contentType={headerLayoutTitle}
+                  aciton={getCreateAction({ variant: 'secondary' })}
+                />
+                {/* Content */}
+                <Body.Root
+                  onConfirmDelete={handleConfirmDeleteData}
+                  isConfirmDeleteRowOpen={isConfirmDeleteRowOpen}
+                  setIsConfirmDeleteRowOpen={setIsConfirmDeleteRowOpen}
+                >
+                  {data.map((rowData, index) => {
+                    return (
+                      <Tr cursor="pointer" key={data.id} onClick={handleRowClick(rowData.id)}>
+                        {/* Bulk action row checkbox */}
+                        <Body.CheckboxDataCell rowId={rowData.id} index={index} />
+                        {/* Field data */}
+                        {tableHeaders.map(({ key, name, ...rest }) => {
+                          if (hasDraftAndPublish && name === 'publishedAt') {
+                            return (
+                              <Td key={key}>
+                                <Status
+                                  width="min-content"
+                                  showBullet={false}
+                                  variant={rowData.publishedAt ? 'success' : 'secondary'}
+                                  size="S"
+                                >
+                                  <Typography
+                                    fontWeight="bold"
+                                    textColor={`${
+                                      rowData.publishedAt ? 'success' : 'secondary'
+                                    }700`}
+                                  >
+                                    {formatMessage({
+                                      id: getTrad(
+                                        `containers.List.${
+                                          rowData.publishedAt ? 'published' : 'draft'
+                                        }`
+                                      ),
+                                      defaultMessage: rowData.publishedAt ? 'Published' : 'Draft',
+                                    })}
+                                  </Typography>
+                                </Status>
+                              </Td>
+                            );
+                          }
+
+                          if (hasReviewWorkflows && name === 'strapi_stage') {
+                            return (
+                              <Td key={key}>
+                                {rowData.strapi_stage ? (
+                                  <ReviewWorkflowsStage
+                                    color={
+                                      rowData.strapi_stage.color ?? lightTheme.colors.primary600
+                                    }
+                                    name={rowData.strapi_stage.name}
+                                  />
+                                ) : (
+                                  <Typography textColor="neutral800">-</Typography>
+                                )}
+                              </Td>
+                            );
+                          }
+
+                          return (
+                            <Td key={key}>
+                              <CellContent
+                                content={rowData[name.split('.')[0]]}
+                                name={name}
+                                contentType={layout.contentType}
+                                {...rest}
+                                rowId={rowData.id}
+                              />
+                            </Td>
+                          );
+                        })}
+                        {/* Actions: edit, duplicate, delete */}
+                        {(canDelete || canPublish) && isBulkable && (
+                          <Body.EntityActionsDataCell
+                            rowId={rowData.id}
+                            index={index}
+                            setIsConfirmDeleteRowOpen={setIsConfirmDeleteRowOpen}
+                            canCreate={canCreate}
+                            canDelete={canDelete}
+                            handleCloneClick={handleCloneClick}
+                          />
+                        )}
+                      </Tr>
+                    );
+                  })}
+                </Body.Root>
+              </Table.Content>
+            </Table.Root>
             <Flex alignItems="flex-end" justifyContent="space-between">
               <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
               <PaginationURLQuery pagination={{ pageCount: pagination?.pageCount || 1 }} />

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import { hasPermissions, useRBACProvider, useStrapiApp, useAppInfo } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
@@ -19,25 +19,15 @@ const useSettingsMenu = () => {
   const { shouldUpdateStrapi } = useAppInfo();
   const { settings } = useStrapiApp();
   const permissions = useSelector(selectAdminPermissions);
+
   const { global: globalLinks, admin: adminLinks } = useEnterprise(
     LINKS_CE,
     async () => (await import('../../../../ee/admin/hooks/useSettingsMenu/constants')).LINKS_EE,
     {
       combine(ceLinks, eeLinks) {
-        function addPermissions(link) {
-          if (!link.id) {
-            throw new Error('The settings menu item must have an id attribute.');
-          }
-
-          return {
-            ...link,
-            permissions: permissions.settings?.[link.id]?.main,
-          };
-        }
-
         return {
-          admin: [...eeLinks.admin, ...ceLinks.admin].map(addPermissions),
-          global: [...ceLinks.global, ...eeLinks.global].map(addPermissions),
+          admin: [...eeLinks.admin, ...ceLinks.admin],
+          global: [...ceLinks.global, ...eeLinks.global],
         };
       },
       defaultValue: {
@@ -47,6 +37,20 @@ const useSettingsMenu = () => {
     }
   );
 
+  const addPermissions = useCallback(
+    (link) => {
+      if (!link.id) {
+        throw new Error('The settings menu item must have an id attribute.');
+      }
+
+      return {
+        ...link,
+        permissions: permissions.settings?.[link.id]?.main,
+      };
+    },
+    [permissions.settings]
+  );
+
   useEffect(() => {
     const getData = async () => {
       const buildMenuPermissions = (sections) =>
@@ -86,26 +90,36 @@ const useSettingsMenu = () => {
     };
 
     const { global, ...otherSections } = settings;
+
     const sections = formatLinks([
       {
         ...settings.global,
-        links: sortLinks([...settings.global.links, ...globalLinks]).map((link) => ({
-          ...link,
-          hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
-        })),
+        links: sortLinks([...settings.global.links, ...globalLinks.map(addPermissions)]).map(
+          (link) => ({
+            ...link,
+            hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
+          })
+        ),
       },
       {
         id: 'permissions',
         intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
-        links: adminLinks,
+        links: adminLinks.map(addPermissions),
       },
       ...Object.values(otherSections),
     ]);
 
     getData();
-  }, [adminLinks, globalLinks, userPermissions, settings, shouldUpdateStrapi]);
+  }, [adminLinks, globalLinks, userPermissions, settings, shouldUpdateStrapi, addPermissions]);
+
+  const filterMenu = (menuItem) => {
+    return {
+      ...menuItem,
+      links: menuItem.links.filter((link) => link.isDisplayed),
+    };
+  };
 
-  return { isLoading, menu };
+  return { isLoading, menu: menu.map(filterMenu) };
 };
 
 export default useSettingsMenu;

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { MenuItem, SimpleMenu } from '@strapi/design-system';
+import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
@@ -16,13 +16,13 @@ const LocaleToggle = () => {
   const { locale } = useIntl();
 
   return (
-    <SimpleMenu label={localeNames[locale]}>
-      {Object.keys(localeNames).map((lang) => (
-        <MenuItem onClick={() => changeLocale(lang)} key={lang}>
-          {localeNames[lang]}
-        </MenuItem>
+    <SingleSelect value={locale} onChange={(language) => changeLocale(language)}>
+      {Object.entries(localeNames).map(([language, name]) => (
+        <SingleSelectOption key={language} value={language}>
+          {name}
+        </SingleSelectOption>
       ))}
-    </SimpleMenu>
+    </SingleSelect>
   );
 };
 

package/admin/src/pages/AuthPage/components/Login/index.js

@@ -6,7 +6,7 @@ import UnauthenticatedLayout from '../../../../layouts/UnauthenticatedLayout';
 
 import BaseLogin from './BaseLogin';
 
-const Login = (loginProps) => {
+export const LoginCE = (loginProps) => {
   return (
     <UnauthenticatedLayout>
       <BaseLogin {...loginProps} />
@@ -14,12 +14,10 @@ const Login = (loginProps) => {
   );
 };
 
-Login.defaultProps = {
+LoginCE.defaultProps = {
   onSubmit: (e) => e.preventDefault(),
 };
 
-Login.propTypes = {
+LoginCE.propTypes = {
   onSubmit: PropTypes.func,
 };
-
-export default Login;

package/admin/src/pages/AuthPage/constants.js

@@ -1,5 +1,4 @@
 import { translatedErrors } from '@strapi/helper-plugin';
-import Login from 'ee_else_ce/pages/AuthPage/components/Login';
 import * as yup from 'yup';
 
 import ForgotPassword from './components/ForgotPassword';
@@ -27,8 +26,10 @@ export const FORMS = {
     schema: null,
     inputsPrefix: '',
   },
+
+  // the `Component` attribute is set after all forms and CE/EE components are loaded, but since we
+  // are here outside of a React component we can not use the hook directly
   login: {
-    Component: Login,
     endPoint: 'login',
     fieldsToDisable: [],
     fieldsToOmit: ['rememberMe'],

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

@@ -13,6 +13,7 @@ import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvi
 import { useEnterprise } from '../../hooks/useEnterprise';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 
+import { LoginCE } from './components/Login';
 import { FORMS } from './constants';
 import init from './init';
 import { initialState, reducer } from './reducer';
@@ -29,6 +30,10 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
   const query = useQuery();
+  const Login = useEnterprise(
+    LoginCE,
+    async () => (await import('../../../../ee/admin/pages/AuthPage/components/Login')).LoginEE
+  );
   const forms = useEnterprise(
     FORMS,
     async () => (await import('../../../../ee/admin/pages/AuthPage/constants')).FORMS,
@@ -50,7 +55,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   );
   const CancelToken = axios.CancelToken;
   const source = CancelToken.source();
-  const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
+  const { endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
     forms?.[authType] ?? {};
 
   useEffect(() => {
@@ -274,6 +279,18 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     );
   }
 
+  if (Login) {
+    // Assign the component to render for the login form
+    forms.login.Component = Login;
+  }
+
+  // block rendering until the Login EE component is fully loaded
+  if (!Login) {
+    return null;
+  }
+
+  const { Component } = forms?.[authType] ?? {};
+
   return (
     <Component
       {...rest}

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

@@ -3,11 +3,10 @@
  *
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { Box, Grid, GridItem, Layout, Main } from '@strapi/design-system';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
-import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
 import { Helmet } from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -16,6 +15,7 @@ import styled from 'styled-components';
 import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
 import { useContentTypes } from '../../hooks/useContentTypes';
+import { useEnterprise } from '../../hooks/useEnterprise';
 
 import cornerOrnamentPath from './assets/corner-ornament.svg';
 import ContentBlocks from './ContentBlocks';
@@ -32,15 +32,12 @@ const LogoContainer = styled(Box)`
   }
 `;
 
-const HomePage = () => {
+export const HomePageCE = () => {
   // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useContentTypes();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
-  useLicenseLimitNotification();
-
   const showGuidedTour =
     !isGuidedTourCompleted(guidedTourState) && isGuidedTourVisible && !isSkipped;
-
   const { push } = useHistory();
   const handleClick = (e) => {
     e.preventDefault();
@@ -92,4 +89,19 @@ const HomePage = () => {
   );
 };
 
-export default memo(HomePage);
+function HomePageSwitch() {
+  const HomePage = useEnterprise(
+    HomePageCE,
+    // eslint-disable-next-line import/no-cycle
+    async () => (await import('../../../../ee/admin/pages/HomePage')).HomePageEE
+  );
+
+  // block rendering until the EE component is fully loaded
+  if (!HomePage) {
+    return null;
+  }
+
+  return <HomePage />;
+}
+
+export default HomePageSwitch;