@strapi/admin 4.11.4 → 4.11.5

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

@@ -10,8 +10,6 @@ import {
   HeaderLayout,
   useNotifyAT,
   Flex,
-  Typography,
-  Status,
 } from '@strapi/design-system';
 import {
   NoPermissions,
@@ -33,7 +31,6 @@ import {
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Cog, Plus } from '@strapi/icons';
 import axios from 'axios';
-import getReviewWorkflowsColumn from 'ee_else_ce/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumn';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
@@ -45,6 +42,7 @@ import { bindActionCreators, compose } from 'redux';
 import styled from 'styled-components';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -57,7 +55,7 @@ import { ConfirmDialogDeleteAll } from './components/ConfirmDialogDeleteAll';
 import { FieldPicker } from './components/FieldPicker';
 import { TableRows } from './components/TableRows';
 import makeSelectListView, { selectDisplayedHeaders } from './selectors';
-import { buildQueryString } from './utils';
+import { buildValidGetParams } from './utils';
 
 const ConfigureLayoutBox = styled(Box)`
   svg {
@@ -67,6 +65,8 @@ const ConfigureLayoutBox = styled(Box)`
   }
 `;
 
+const REVIEW_WORKFLOW_COLUMNS_CE = null;
+
 function ListView({
   canCreate,
   canDelete,
@@ -101,14 +101,30 @@ function ListView({
   useFocusWhenNavigate();
 
   const [{ query }] = useQueryParams();
-  const params = buildQueryString(query);
+  const params = React.useMemo(() => buildValidGetParams(query), [query]);
   const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false });
 
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const hasDraftAndPublish = options?.draftAndPublish || false;
   const fetchClient = useFetchClient();
+
+  const hasDraftAndPublish = options?.draftAndPublish ?? false;
+  const hasReviewWorkflows = options?.reviewWorkflows ?? false;
+
+  const reviewWorkflowColumns = useEnterprise(
+    REVIEW_WORKFLOW_COLUMNS_CE,
+    async () =>
+      (
+        await import(
+          '../../../../../ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/constants'
+        )
+      ).REVIEW_WORKFLOW_COLUMNS_EE,
+    {
+      enabled: !!options?.reviewWorkflows,
+    }
+  );
+
   const { post, del } = fetchClient;
 
   const bulkPublishMutation = useMutation(
@@ -121,7 +137,7 @@ function ListView({
           message: { id: 'content-manager.success.record.publish', defaultMessage: 'Published' },
         });
 
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
       },
       onError(error) {
         toggleNotification({
@@ -144,7 +160,7 @@ function ListView({
           },
         });
 
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
       },
       onError(error) {
         toggleNotification({
@@ -159,19 +175,17 @@ function ListView({
   // Using a ref to avoid requests being fired multiple times on slug on change
   // We need it because the hook as mulitple dependencies so it may run before the permissions have checked
   const requestUrlRef = React.useRef('');
-
   /**
    * TODO: re-write all of this, it's a mess.
    */
   const fetchData = React.useCallback(
-    async (endPoint, source) => {
+    async (endPoint, options) => {
       getData();
 
       try {
-        const opts = source ? { cancelToken: source.token } : null;
         const {
           data: { results, pagination: paginationResult },
-        } = await fetchClient.get(endPoint, opts);
+        } = await fetchClient.get(endPoint, options);
 
         notifyStatus(
           formatMessage(
@@ -218,12 +232,12 @@ function ListView({
   const handleConfirmDeleteAllData = React.useCallback(
     async (ids) => {
       try {
-        await post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
+        await post(`/content-manager/collection-types/${slug}/actions/bulkDelete`, {
           ids,
         });
 
-        const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
-        fetchData(requestUrl);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
+
         trackUsageRef.current('didBulkDeleteEntries');
       } catch (err) {
         toggleNotification({
@@ -232,16 +246,16 @@ function ListView({
         });
       }
     },
-    [fetchData, params, slug, toggleNotification, formatAPIError, post]
+    [slug, toggleNotification, formatAPIError, post, fetchData, params]
   );
 
   const handleConfirmDeleteData = React.useCallback(
     async (idToDelete) => {
       try {
-        await del(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
+        await del(`/content-manager/collection-types/${slug}/${idToDelete}`);
 
-        const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
-        fetchData(requestUrl);
+        const requestUrl = getRequestUrl(`collection-types/${slug}`);
+        fetchData(requestUrl, { params });
 
         toggleNotification({
           type: 'success',
@@ -254,7 +268,7 @@ function ListView({
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatAPIError, del]
+    [slug, toggleNotification, formatAPIError, del, fetchData, params]
   );
 
   /**
@@ -326,10 +340,10 @@ function ListView({
     const source = CancelToken.source();
 
     const shouldSendRequest = canRead;
-    const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
+    const requestUrl = getRequestUrl(`collection-types/${slug}`);
 
     if (shouldSendRequest && requestUrl.includes(requestUrlRef.current)) {
-      fetchData(requestUrl, source);
+      fetchData(requestUrl, { cancelToken: source.token, params });
     }
 
     return () => {
@@ -388,24 +402,8 @@ function ListView({
       };
     });
 
-    if (!hasDraftAndPublish) {
-      return formattedHeaders;
-    }
-
-    // this should not exist. Ideally we would use registerHook() similar to what has been done
-    // in the i18n plugin. In order to do that review-workflows should have been a plugin. In
-    // a future iteration we need to find a better pattern.
-
-    // In CE this will return null - in EE a column definition including the custom formatting component.
-    const reviewWorkflowColumn = getReviewWorkflowsColumn(layout);
-
-    if (reviewWorkflowColumn) {
-      formattedHeaders.push(reviewWorkflowColumn);
-    }
-
-    return [
-      ...formattedHeaders,
-      {
+    if (hasDraftAndPublish) {
+      formattedHeaders.push({
         key: '__published_at_temp_key__',
         name: 'publishedAt',
         fieldSchema: {
@@ -419,25 +417,29 @@ function ListView({
           searchable: false,
           sortable: true,
         },
-        // eslint-disable-next-line react/no-unstable-nested-components
-        cellFormatter(cellData) {
-          const isPublished = cellData.publishedAt;
-          const variant = isPublished ? 'success' : 'secondary';
-
-          return (
-            <Status width="min-content" showBullet={false} variant={variant} size="S">
-              <Typography fontWeight="bold" textColor={`${variant}700`}>
-                {formatMessage({
-                  id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
-                  defaultMessage: isPublished ? 'Published' : 'Draft',
-                })}
-              </Typography>
-            </Status>
-          );
-        },
-      },
-    ];
-  }, [runHookWaterfall, displayedHeaders, layout, hasDraftAndPublish, formatMessage]);
+      });
+    }
+
+    if (reviewWorkflowColumns) {
+      // Make sure the column header label is translated
+      if (typeof reviewWorkflowColumns.metadatas.label !== 'string') {
+        reviewWorkflowColumns.metadatas.label = formatMessage(
+          reviewWorkflowColumns.metadatas.label
+        );
+      }
+
+      formattedHeaders.push(reviewWorkflowColumns);
+    }
+
+    return formattedHeaders;
+  }, [
+    runHookWaterfall,
+    displayedHeaders,
+    layout,
+    reviewWorkflowColumns,
+    hasDraftAndPublish,
+    formatMessage,
+  ]);
 
   const subtitle = canRead
     ? formatMessage(
@@ -580,6 +582,10 @@ function ListView({
                 canCreate={canCreate}
                 canDelete={canDelete}
                 contentType={contentType}
+                features={{
+                  hasDraftAndPublish,
+                  hasReviewWorkflows,
+                }}
                 headers={tableHeaders}
                 rows={data}
                 withBulkActions

package/admin/src/content-manager/pages/ListView/utils/buildValidGetParams.js

@@ -0,0 +1,30 @@
+const createPluginsFilter = (obj = {}) =>
+  Object.values(obj).reduce((acc, current) => Object.assign(acc, current), {});
+
+/**
+ * @description
+ * Creates a valid query params object for get requests
+ * ie. plugins[18n][locale]=en becomes locale=en
+ * @param {object} [query={}] - The query params
+ * @returns {object} - The modified query params
+ */
+const buildValidGetParams = (query = {}) => {
+  // Extract pluginOptions from the query, they shouldn't be part of the URL
+  const {
+    plugins: _,
+    _q: searchQuery,
+    ...validQueryParams
+  } = {
+    ...query,
+    ...createPluginsFilter(query.plugins),
+  };
+
+  if (searchQuery) {
+    // Encode the search query here since the paramsSerializer will not
+    validQueryParams._q = encodeURIComponent(searchQuery);
+  }
+
+  return validQueryParams;
+};
+
+export default buildValidGetParams;

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

@@ -1 +1 @@
-export { default as buildQueryString } from './buildQueryString';
+export { default as buildValidGetParams } from './buildValidGetParams';

package/admin/src/hooks/useAdminUsers/useAdminUsers.js

@@ -1,10 +1,8 @@
 import { useFetchClient } from '@strapi/helper-plugin';
-import { stringify } from 'qs';
 import { useQuery } from 'react-query';
 
 export function useAdminUsers(params = {}, queryOptions = {}) {
   const { id = '', ...queryParams } = params;
-  const queryString = stringify(queryParams, { encode: false });
 
   const { get } = useFetchClient();
 
@@ -13,7 +11,9 @@ export function useAdminUsers(params = {}, queryOptions = {}) {
     async () => {
       const {
         data: { data },
-      } = await get(`/admin/users/${id}${queryString ? `?${queryString}` : ''}`);
+      } = await get(`/admin/users/${id}`, {
+        params: queryParams,
+      });
 
       return data;
     },

package/admin/src/hooks/useEnterprise/useEnterprise.js

@@ -9,7 +9,7 @@ function isEnterprise() {
 export function useEnterprise(
   ceData,
   eeCallback,
-  { defaultValue = null, combine = (ceData, eeData) => eeData } = {}
+  { defaultValue = null, combine = (ceData, eeData) => eeData, enabled = true } = {}
 ) {
   const eeCallbackRef = useCallbackRef(eeCallback);
   const combineCallbackRef = useCallbackRef(combine);
@@ -17,7 +17,7 @@ export function useEnterprise(
   // We have to use a nested object here, because functions (e.g. Components)
   // can not be stored as value directly
   const [{ data }, setData] = React.useState({
-    data: isEnterprise() ? defaultValue : ceData,
+    data: isEnterprise() && enabled ? defaultValue : ceData,
   });
 
   React.useEffect(() => {
@@ -27,10 +27,10 @@ export function useEnterprise(
       setData({ data: combineCallbackRef(ceData, eeData) });
     }
 
-    if (isEnterprise()) {
+    if (isEnterprise() && enabled) {
       importEE();
     }
-  }, [ceData, eeCallbackRef, combineCallbackRef]);
+  }, [ceData, eeCallbackRef, combineCallbackRef, enabled]);
 
   return data;
 }

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/pages/App/index.js

@@ -31,7 +31,6 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 
 import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
-import { getUID } from './utils';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -113,8 +112,6 @@ function App() {
           authLogo: prefixFileUrlWithBackendUrl(authLogo),
         });
 
-        const deviceId = await getUID();
-
         if (uuid) {
           const {
             data: { data: properties },

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

@@ -64,7 +64,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
         try {
           const {
             data: { data },
-          } = await get(`/admin/registration-info?registrationToken=${registrationToken}`);
+          } = await get(`/admin/registration-info`, {
+            params: {
+              registrationToken,
+            },
+          });
 
           if (data) {
             setUserInfo(data);

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

@@ -77,19 +77,14 @@ const ProfilePage = () => {
   const { isLoading: isLoadingSSO, data: dataSSO } = useQuery(
     ['providers', 'isSSOLocked'],
     async () => {
-      if (window.strapi.isEE) {
-        const {
-          data: { data },
-        } = await get('/admin/providers/isSSOLocked');
+      const {
+        data: { data },
+      } = await get('/admin/providers/isSSOLocked');
 
-        return data;
-      }
-
-      return {
-        isSSOLocked: false,
-      };
+      return data;
     },
     {
+      enabled: window.strapi.isEE && window.strapi.features.isEnabled('sso'),
       onError() {
         toggleNotification({
           type: 'warning',
@@ -178,7 +173,7 @@ const ProfilePage = () => {
     );
   }
 
-  const hasLockedRole = dataSSO?.isSSOLocked;
+  const hasLockedRole = dataSSO?.isSSOLocked ?? false;
   const { email, firstname, lastname, username, preferedLanguage } = data;
   const initialData = { email, firstname, lastname, username, preferedLanguage, currentTheme };
 
@@ -203,7 +198,12 @@ const ProfilePage = () => {
               <HeaderLayout
                 title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
-                  <Button startIcon={<Check />} loading={isSubmitting} type="submit" disabled={!dirty}>
+                  <Button
+                    startIcon={<Check />}
+                    loading={isSubmitting}
+                    type="submit"
+                    disabled={!dirty}
+                  >
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -50,17 +50,19 @@ const SettingsNav = ({ menu }) => {
       <SubNavSections>
         {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
-            {section.links.map((link) => (
-              <SubNavLink
-                as={NavLink}
-                withBullet={link.hasNotification}
-                to={link.to}
-                onClick={() => handleClickOnLink(link.to)}
-                key={link.id}
-              >
-                {formatMessage(link.intlLabel)}
-              </SubNavLink>
-            ))}
+            {section.links.map((link) => {
+              return (
+                <SubNavLink
+                  as={NavLink}
+                  withBullet={link.hasNotification}
+                  to={link.to}
+                  onClick={() => handleClickOnLink(link.to)}
+                  key={link.id}
+                >
+                  {formatMessage(link.intlLabel)}
+                </SubNavLink>
+              );
+            })}
           </SubNavSection>
         ))}
       </SubNavSections>

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

@@ -17,7 +17,7 @@ const TokenBox = ({ token, tokenType }) => {
     const didCopy = await copy(token);
 
     if (didCopy) {
-      trackUsage.current('didCopyTokenKey', {
+      trackUsage('didCopyTokenKey', {
         tokenType,
       });
       toggleNotification({

package/admin/src/translations/zh-Hans.json

@@ -799,7 +799,7 @@
     "content-manager.popUpWarning.warning.unpublish-question": "您确定不要发布它吗？",
     "content-manager.popUpWarning.warning.updateAllSettings": "这将修改所有设置",
     "content-manager.popUpwarning.warning.has-draft-relations.button-confirm": "是, 发布",
-    "content-manager.popUpwarning.warning.has-draft-relations.message": "<b>{count, plural, =0 { 个关联的内容} one { 个关联的内容} other { 个关联的内容}}</b> 尚未发布。<br></br>它可能会在你的项目上产生关联失效和错误。",
+    "content-manager.popUpwarning.warning.has-draft-relations.message": "<b>{count, plural, one { 个关联的内容} other { 个关联的内容}}</b> 尚未发布，这可能会导致不可预期的行为。",
     "content-manager.popover.display-relations.label": "显示关联",
     "content-manager.relation.add": "添加关联",
     "content-manager.relation.disconnect": "删除",

package/build/2799.cf9b491f.chunk.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[2799],{42799:function(n,a,e){e.r(a),e.d(a,{REVIEW_WORKFLOW_COLUMNS_EE:function(){return t}});var s=e(47510);const t={key:"__strapi_reviewWorkflows_stage_temp_key__",name:"strapi_reviewWorkflows_stage",fieldSchema:{type:"relation"},metadatas:{label:{id:(0,s.Z)("containers.ListPage.table-headers.reviewWorkflows.stage"),defaultMessage:"Review stage"},searchable:!1,sortable:!0,mainField:{name:"name",schema:{type:"string"}}}}}}]);

package/build/539.865446c0.chunk.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[539],{60539:function(v,a,t){t.r(a),t.d(a,{ReviewWorkflowsStageEE:function(){return r}});var n=t(32735),e=t(87933),l=t(72850),i=t(49372),u=t(19565),d=t(60216),o=t.n(d),h=t(61937),g=t(54504);function r({color:s,name:m}){const{themeColorName:p}=(0,g.k)(s);return n.createElement(e.k,{alignItems:"center",gap:2,maxWidth:(0,u.Q1)(300)},n.createElement(l.x,{height:2,background:s,borderColor:p==="neutral0"?"neutral150":"transparent",hasRadius:!0,shrink:0,width:2}),n.createElement(i.Z,{fontWeight:"regular",textColor:"neutral700",ellipsis:!0},m))}r.defaultProps={color:h.FT},r.propTypes={color:o().string,name:o().string.isRequired}}}]);