@strapi/admin 4.5.0-alpha.0 → 4.5.0-beta.0

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, customFieldUid }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -47,7 +47,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
       <form onSubmit={onSubmit}>
         <ModalHeader>
           <HeaderContainer>
-            <FieldTypeIcon type={getAttrType(type)} />
+            <FieldTypeIcon type={getAttrType()} customFieldUid={customFieldUid} />
             <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage(
                 {
@@ -81,7 +81,12 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
   );
 };
 
+FormModal.defaultProps = {
+  customFieldUid: null,
+};
+
 FormModal.propTypes = {
+  customFieldUid: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   onMetaChange: PropTypes.func.isRequired,

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

@@ -344,9 +344,10 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
           <ModalForm
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
-            type={get(attributes, [metaToEdit, 'type'], '')}
             onMetaChange={handleMetaChange}
             onSizeChange={handleSizeChange}
+            type={get(attributes, [metaToEdit, 'type'], '')}
+            customFieldUid={get(attributes, [metaToEdit, 'customField'], '')}
           />
         )}
       </Main>

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -17,9 +17,15 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Check from '@strapi/icons/Check';
+import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
+// TODO: replace with textAlign Typography props when available
+const FlexTextAlign = styled(Flex)`
+  text-align: center;
+`;
+
 const Header = ({
   allowedActions: { canUpdate, canCreate, canPublish },
   initialData,
@@ -31,6 +37,8 @@ const Header = ({
   onPublish,
   onUnpublish,
   status,
+  publishConfirmation: { show: showPublishConfirmation, draftCount },
+  onPublishPromptDismissal,
 }) => {
   const { goBack } = useHistory();
   const [showWarningUnpublish, setWarningUnpublish] = useState(false);
@@ -150,60 +158,115 @@ const Header = ({
           </Link>
         }
       />
-      {showWarningUnpublish && (
-        <Dialog
-          onClose={toggleWarningUnpublish}
-          title="Confirmation"
-          labelledBy="confirmation"
-          describedBy="confirm-description"
-          isOpen={showWarningUnpublish}
-        >
-          <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack spacing={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {formatMessage(
-                    {
-                      id: getTrad('popUpWarning.warning.unpublish'),
-                      defaultMessage:
-                        'Unpublish this content will automatically change it to a draft.',
-                    },
-                    {
-                      br: () => <br />,
-                    }
-                  )}
-                </Typography>
-              </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {formatMessage({
-                    id: getTrad('popUpWarning.warning.unpublish-question'),
-                    defaultMessage: 'Are you sure you want to unpublish it?',
-                  })}
-                </Typography>
-              </Flex>
-            </Stack>
-          </DialogBody>
-          <DialogFooter
-            startAction={
-              <Button onClick={toggleWarningUnpublish} variant="tertiary">
+      <Dialog
+        onClose={toggleWarningUnpublish}
+        title="Confirmation"
+        labelledBy="confirmation"
+        describedBy="confirm-description"
+        isOpen={showWarningUnpublish}
+      >
+        <DialogBody icon={<ExclamationMarkCircle />}>
+          <Stack spacing={2}>
+            <Flex justifyContent="center" style={{ textAlign: 'center' }}>
+              <Typography id="confirm-description">
+                {formatMessage(
+                  {
+                    id: getTrad('popUpWarning.warning.unpublish'),
+                    defaultMessage:
+                      'Unpublish this content will automatically change it to a draft.',
+                  },
+                  {
+                    br: () => <br />,
+                  }
+                )}
+              </Typography>
+            </Flex>
+            <Flex justifyContent="center" style={{ textAlign: 'center' }}>
+              <Typography id="confirm-description">
                 {formatMessage({
-                  id: 'components.popUpWarning.button.cancel',
-                  defaultMessage: 'No, cancel',
+                  id: getTrad('popUpWarning.warning.unpublish-question'),
+                  defaultMessage: 'Are you sure you want to unpublish it?',
                 })}
-              </Button>
-            }
-            endAction={
-              <Button variant="danger-light" onClick={handleUnpublish}>
+              </Typography>
+            </Flex>
+          </Stack>
+        </DialogBody>
+        <DialogFooter
+          startAction={
+            <Button onClick={toggleWarningUnpublish} variant="tertiary">
+              {formatMessage({
+                id: 'components.popUpWarning.button.cancel',
+                defaultMessage: 'Cancel',
+              })}
+            </Button>
+          }
+          endAction={
+            <Button variant="danger-light" onClick={handleUnpublish}>
+              {formatMessage({
+                id: 'components.popUpWarning.button.confirm',
+                defaultMessage: 'Confirm',
+              })}
+            </Button>
+          }
+        />
+      </Dialog>
+      <Dialog
+        onClose={onPublishPromptDismissal}
+        title={formatMessage({
+          id: getTrad(`popUpWarning.warning.has-draft-relations.title`),
+          defaultMessage: 'Confirmation',
+        })}
+        labelledBy="confirmation"
+        describedBy="confirm-description"
+        isOpen={showPublishConfirmation}
+      >
+        <DialogBody icon={<ExclamationMarkCircle />}>
+          <Stack spacing={2}>
+            <FlexTextAlign justifyContent="center">
+              <Typography id="confirm-description">
+                {draftCount}
+                {formatMessage(
+                  {
+                    id: getTrad(`popUpwarning.warning.has-draft-relations.message`),
+                    defaultMessage:
+                      '<b>{count, plural, one { relation is} other { relations are}}</b> not published yet and might lead to unexpected behavior.',
+                  },
+                  {
+                    b: (chunks) => <Typography fontWeight="bold">{chunks}</Typography>,
+                    count: draftCount,
+                  }
+                )}
+              </Typography>
+            </FlexTextAlign>
+            <FlexTextAlign justifyContent="center">
+              <Typography id="confirm-description">
                 {formatMessage({
-                  id: 'components.popUpWarning.button.confirm',
-                  defaultMessage: 'Yes, confirm',
+                  id: getTrad('popUpWarning.warning.publish-question'),
+                  defaultMessage: 'Do you still want to publish?',
                 })}
-              </Button>
-            }
-          />
-        </Dialog>
-      )}
+              </Typography>
+            </FlexTextAlign>
+          </Stack>
+        </DialogBody>
+        <DialogFooter
+          startAction={
+            <Button onClick={onPublishPromptDismissal} variant="tertiary">
+              {formatMessage({
+                id: 'components.popUpWarning.button.cancel',
+                defaultMessage: 'Cancel',
+              })}
+            </Button>
+          }
+          endAction={
+            <Button variant="success" onClick={onPublish}>
+              {formatMessage({
+                id: getTrad('popUpwarning.warning.has-draft-relations.button-confirm'),
+                defaultMessage: 'Publish',
+              })}
+            </Button>
+          }
+        />
+      </Dialog>
     </>
   );
 };
@@ -223,6 +286,11 @@ Header.propTypes = {
   modifiedData: PropTypes.object.isRequired,
   onPublish: PropTypes.func.isRequired,
   onUnpublish: PropTypes.func.isRequired,
+  publishConfirmation: PropTypes.shape({
+    show: PropTypes.bool.isRequired,
+    draftCount: PropTypes.number.isRequired,
+  }).isRequired,
+  onPublishPromptDismissal: PropTypes.func.isRequired,
 };
 
 const Memoized = memo(Header, isEqualFastCompare);

package/admin/src/content-manager/pages/EditView/Header/utils/select.js

@@ -11,6 +11,8 @@ function useSelect() {
     modifiedData,
     onPublish,
     onUnpublish,
+    publishConfirmation,
+    onPublishPromptDismissal,
   } = useCMEditViewDataManager();
 
   return {
@@ -23,6 +25,8 @@ function useSelect() {
     modifiedData,
     onPublish,
     onUnpublish,
+    publishConfirmation,
+    onPublishPromptDismissal,
   };
 }
 

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

@@ -1,7 +1,12 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { Suspense, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
+import {
+  CheckPermissions,
+  LoadingIndicatorPage,
+  useTracking,
+  LinkButton,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
@@ -93,6 +98,7 @@ const EditView = ({
         onDeleteSucceeded,
         onPost,
         onPublish,
+        onDraftRelationCheck,
         onPut,
         onUnpublish,
         redirectionLink,
@@ -112,6 +118,7 @@ const EditView = ({
             isSingleType={isSingleType}
             onPost={onPost}
             onPublish={onPublish}
+            onDraftRelationCheck={onDraftRelationCheck}
             onPut={onPut}
             onUnpublish={onUnpublish}
             readActionAllowedFields={readActionAllowedFields}
@@ -125,108 +132,110 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
-                      {formattedContentTypeLayout.map((row, index) => {
-                        if (isDynamicZone(row)) {
-                          const {
-                            0: {
-                              0: { name, fieldSchema, metadatas, labelAction },
-                            },
-                          } = row;
+                    <Suspense fallback={<LoadingIndicatorPage />}>
+                      <Stack spacing={6}>
+                        {formattedContentTypeLayout.map((row, index) => {
+                          if (isDynamicZone(row)) {
+                            const {
+                              0: {
+                                0: { name, fieldSchema, metadatas, labelAction },
+                              },
+                            } = row;
+
+                            return (
+                              <Box key={index}>
+                                <Grid gap={4}>
+                                  <GridItem col={12} s={12} xs={12}>
+                                    <DynamicZone
+                                      name={name}
+                                      fieldSchema={fieldSchema}
+                                      labelAction={labelAction}
+                                      metadatas={metadatas}
+                                    />
+                                  </GridItem>
+                                </Grid>
+                              </Box>
+                            );
+                          }
 
                           return (
-                            <Box key={index}>
-                              <Grid gap={4}>
-                                <GridItem col={12} s={12} xs={12}>
-                                  <DynamicZone
-                                    name={name}
-                                    fieldSchema={fieldSchema}
-                                    labelAction={labelAction}
-                                    metadatas={metadatas}
-                                  />
-                                </GridItem>
-                              </Grid>
-                            </Box>
-                          );
-                        }
+                            <Box
+                              key={index}
+                              hasRadius
+                              background="neutral0"
+                              shadow="tableShadow"
+                              paddingLeft={6}
+                              paddingRight={6}
+                              paddingTop={6}
+                              paddingBottom={6}
+                              borderColor="neutral150"
+                            >
+                              <Stack spacing={6}>
+                                {row.map((grid, gridIndex) => {
+                                  return (
+                                    <Grid gap={4} key={gridIndex}>
+                                      {grid.map(
+                                        ({
+                                          fieldSchema,
+                                          labelAction,
+                                          metadatas,
+                                          name,
+                                          size,
+                                          queryInfos,
+                                        }) => {
+                                          const isComponent = fieldSchema.type === 'component';
 
-                        return (
-                          <Box
-                            key={index}
-                            hasRadius
-                            background="neutral0"
-                            shadow="tableShadow"
-                            paddingLeft={6}
-                            paddingRight={6}
-                            paddingTop={6}
-                            paddingBottom={6}
-                            borderColor="neutral150"
-                          >
-                            <Stack spacing={6}>
-                              {row.map((grid, gridIndex) => {
-                                return (
-                                  <Grid gap={4} key={gridIndex}>
-                                    {grid.map(
-                                      ({
-                                        fieldSchema,
-                                        labelAction,
-                                        metadatas,
-                                        name,
-                                        size,
-                                        queryInfos,
-                                      }) => {
-                                        const isComponent = fieldSchema.type === 'component';
+                                          if (isComponent) {
+                                            const {
+                                              component,
+                                              max,
+                                              min,
+                                              repeatable = false,
+                                              required = false,
+                                            } = fieldSchema;
 
-                                        if (isComponent) {
-                                          const {
-                                            component,
-                                            max,
-                                            min,
-                                            repeatable = false,
-                                            required = false,
-                                          } = fieldSchema;
+                                            return (
+                                              <GridItem col={size} s={12} xs={12} key={component}>
+                                                <FieldComponent
+                                                  componentUid={component}
+                                                  labelAction={labelAction}
+                                                  isRepeatable={repeatable}
+                                                  intlLabel={{
+                                                    id: metadatas.label,
+                                                    defaultMessage: metadatas.label,
+                                                  }}
+                                                  max={max}
+                                                  min={min}
+                                                  name={name}
+                                                  required={required}
+                                                />
+                                              </GridItem>
+                                            );
+                                          }
 
                                           return (
-                                            <GridItem col={size} s={12} xs={12} key={component}>
-                                              <FieldComponent
-                                                componentUid={component}
+                                            <GridItem col={size} key={name} s={12} xs={12}>
+                                              <Inputs
+                                                size={size}
+                                                fieldSchema={fieldSchema}
+                                                keys={name}
                                                 labelAction={labelAction}
-                                                isRepeatable={repeatable}
-                                                intlLabel={{
-                                                  id: metadatas.label,
-                                                  defaultMessage: metadatas.label,
-                                                }}
-                                                max={max}
-                                                min={min}
-                                                name={name}
-                                                required={required}
+                                                metadatas={metadatas}
+                                                queryInfos={queryInfos}
                                               />
                                             </GridItem>
                                           );
                                         }
-
-                                        return (
-                                          <GridItem col={size} key={name} s={12} xs={12}>
-                                            <Inputs
-                                              size={size}
-                                              fieldSchema={fieldSchema}
-                                              keys={name}
-                                              labelAction={labelAction}
-                                              metadatas={metadatas}
-                                              queryInfos={queryInfos}
-                                            />
-                                          </GridItem>
-                                        );
-                                      }
-                                    )}
-                                  </Grid>
-                                );
-                              })}
-                            </Stack>
-                          </Box>
-                        );
-                      })}
-                    </Stack>
+                                      )}
+                                    </Grid>
+                                  );
+                                })}
+                              </Stack>
+                            </Box>
+                          );
+                        })}
+                      </Stack>
+                    </Suspense>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>

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

@@ -5,9 +5,11 @@ import { connect } from 'react-redux';
 import isEqual from 'react-fast-compare';
 import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
 import get from 'lodash/get';
 import { stringify } from 'qs';
+import axios from 'axios';
+
 import {
   NoPermissions,
   CheckPermissions,
@@ -19,31 +21,37 @@ import {
   useTracking,
   Link,
 } from '@strapi/helper-plugin';
+
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Button } from '@strapi/design-system/Button';
+
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import Cog from '@strapi/icons/Cog';
-import axios from 'axios';
+
 import { axiosInstance } from '../../../core/utils';
-import { InjectionZone } from '../../../shared/components';
+
 import DynamicTable from '../../components/DynamicTable';
+import AttributeFilter from '../../components/AttributeFilter';
+import { InjectionZone } from '../../../shared/components';
+
 import permissions from '../../../permissions';
+
 import { getRequestUrl, getTrad } from '../../utils';
+
 import FieldPicker from './FieldPicker';
 import PaginationFooter from './PaginationFooter';
 import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
 import makeSelectListView from './selectors';
 import { buildQueryString } from './utils';
-import AttributeFilter from '../../components/AttributeFilter';
 
 const cmPermissions = permissions.contentManager;
 
-const IconButtonCustom = styled(IconButton)`
+const ConfigureLayoutBox = styled(Box)`
   svg {
     path {
       fill: ${({ theme }) => theme.colors.neutral900};
@@ -51,7 +59,6 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
-/* eslint-disable react/no-array-index-key */
 function ListView({
   canCreate,
   canDelete,
@@ -240,16 +247,18 @@ function ListView({
     canCreate ? (
       <Button
         {...props}
+        forwardedAs={ReactRouterLink}
         onClick={() => {
           const trackerProperty = hasDraftAndPublish ? { status: 'draft' } : {};
 
           trackUsageRef.current('willCreateEntry', trackerProperty);
-          push({
-            pathname: `${pathname}/create`,
-            search: query.plugins ? pluginsQueryParams : '',
-          });
+        }}
+        to={{
+          pathname: `${pathname}/create`,
+          search: query.plugins ? pluginsQueryParams : '',
         }}
         startIcon={<Plus />}
+        style={{ textDecoration: 'none' }}
       >
         {formatMessage({
           id: getTrad('HeaderLayout.button.label-add-entry'),
@@ -283,20 +292,20 @@ function ListView({
               <InjectionZone area="contentManager.listView.actions" />
               <FieldPicker layout={layout} />
               <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
-                <Box paddingTop={1} paddingBottom={1}>
-                  <IconButtonCustom
+                <ConfigureLayoutBox paddingTop={1} paddingBottom={1}>
+                  <IconButton
                     onClick={() => {
                       trackUsage('willEditListLayout');
-
-                      push({ pathname: `${slug}/configurations/list`, search: pluginsQueryParams });
                     }}
+                    forwardedAs={ReactRouterLink}
+                    to={{ pathname: `${slug}/configurations/list`, search: pluginsQueryParams }}
                     icon={<Cog />}
                     label={formatMessage({
                       id: 'app.links.configure-view',
                       defaultMessage: 'Configure the view',
                     })}
                   />
-                </Box>
+                </ConfigureLayoutBox>
               </CheckPermissions>
             </>
           }

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

@@ -1,4 +1,5 @@
 import { stringify } from 'qs';
+import set from 'lodash/set';
 import createPluginsFilter from './createPluginsFilter';
 
 /**
@@ -12,12 +13,23 @@ const buildQueryString = (queryParams = {}) => {
    * Extracting pluginOptions from the query since we don't want them to be part
    * of the url
    */
-  const { plugins: _, ...otherQueryParams } = {
+  const {
+    plugins: _,
+    _q: query,
+    ...otherQueryParams
+  } = {
     ...queryParams,
     ...createPluginsFilter(queryParams.plugins),
   };
 
-  return `?${stringify(otherQueryParams, { encode: false })}`;
+  if (query) {
+    set(otherQueryParams, `_q`, encodeURIComponent(query));
+  }
+
+  return `${stringify(otherQueryParams, {
+    encode: false,
+    addQueryPrefix: true,
+  })}`;
 };
 
 export default buildQueryString;

package/admin/src/contexts/ApiTokenPermissions/index.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const ApiTokenPermissionsContext = createContext({});
+
+const ApiTokenPermissionsContextProvider = ({ children, ...rest }) => {
+  return (
+    <ApiTokenPermissionsContext.Provider value={rest}>
+      {children}
+    </ApiTokenPermissionsContext.Provider>
+  );
+};
+
+const useApiTokenPermissionsContext = () => useContext(ApiTokenPermissionsContext);
+
+ApiTokenPermissionsContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export {
+  ApiTokenPermissionsContext,
+  ApiTokenPermissionsContextProvider,
+  useApiTokenPermissionsContext,
+};