merge bis + fix merge conflicts

packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -23,6 +23,10 @@ const Wrapper = styled.div`
     margin-block-end: 10px;
   }
 
+  p {
+    margin-bottom: 10px;
+  }
+
   h1 {
     font-size: ${36 / 16}rem;
     font-weight: 600;

packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -20,7 +20,7 @@ loadCss();
 const md = new Markdown({
   html: true, // Enable HTML tags in source
   xhtmlOut: false,
-  breaks: false,
+  breaks: true,
   langPrefix: 'language-',
   linkify: true,
   typographer: true,

packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -12,6 +12,7 @@ const Editor = ({
   editorRef,
   error,
   isPreviewMode,
+  isExpandMode,
   name,
   onChange,
   placeholder,
@@ -64,7 +65,7 @@ const Editor = ({
 
   return (
     <EditorAndPreviewWrapper>
-      <EditorStylesContainer disabled={disabled || isPreviewMode}>
+      <EditorStylesContainer isExpandMode={isExpandMode} disabled={disabled || isPreviewMode}>
         <textarea ref={textareaRef} />
       </EditorStylesContainer>
       {isPreviewMode && <PreviewWysiwyg data={value} />}
@@ -76,6 +77,7 @@ Editor.defaultProps = {
   disabled: false,
   error: undefined,
   isPreviewMode: false,
+  isExpandMode: false,
   placeholder: '',
   value: '',
 };
@@ -85,6 +87,7 @@ Editor.propTypes = {
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
   error: PropTypes.string,
   isPreviewMode: PropTypes.bool,
+  isExpandMode: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,

packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 /* stylelint-disable */
 export const EditorStylesContainer = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
     color: ${({ theme }) => theme.colors.neutral600} !important;
@@ -12,7 +13,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: ${14 / 16}rem;
-    height: 290px;
+    height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,

packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -28,7 +28,9 @@ import {
 } from './WysiwygStyles';
 
 const WysiwygNav = ({
+  disabled,
   editorRef,
+  isExpandMode,
   isPreviewMode,
   onActionClick,
   onToggleMediaLib,
@@ -46,7 +48,7 @@ const WysiwygNav = ({
     setVisiblePopover(prev => !prev);
   };
 
-  if (isPreviewMode) {
+  if (disabled || isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
         <Flex justifyContent="space-between">
@@ -87,12 +89,14 @@ const WysiwygNav = ({
             <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
+          {!isExpandMode && (
             <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
               {formatMessage({
                 id: 'components.Wysiwyg.ToggleMode.markdown-mode',
                 defaultMessage: 'Markdown mode',
               })}
             </Button>
+          )}
         </Flex>
       </Box>
     );
@@ -149,7 +153,7 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <FocusTrap onEscape={handleTogglePopover}>
+              <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
                 <Flex>
                   <IconButtonGroupMargin>
                     <CustomIconButton
@@ -235,7 +239,9 @@ WysiwygNav.defaultProps = {
 };
 
 WysiwygNav.propTypes = {
+  disabled: PropTypes.bool.isRequired,
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  isExpandMode: PropTypes.bool.isRequired,
   isPreviewMode: PropTypes.bool,
   onActionClick: PropTypes.func,
   onToggleMediaLib: PropTypes.func,

packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js

@@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
 
 export const EditorAndPreviewWrapper = styled.div`
   position: relative;
+  height: calc(100% - 48px);
 `;
 
 // FOOTER

packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js

@@ -144,15 +144,18 @@ const Wysiwyg = ({
           onCollapse={handleToggleExpand}
         >
           <WysiwygNav
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             isPreviewMode={isPreviewMode}
             onActionClick={handleActionClick}
             onToggleMediaLib={handleToggleMediaLib}
             onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
+            disabled={disabled}
           />
 
           <Editor
             disabled={disabled}
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             error={errorMessage}
             isPreviewMode={isPreviewMode}
@@ -185,7 +188,7 @@ const Wysiwyg = ({
 
 Wysiwyg.defaultProps = {
   description: null,
-  disabled: true,
+  disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,

packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IntlProvider } from 'react-intl';
 import { render, waitFor, fireEvent } from '@testing-library/react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
+import { lightTheme } from '@strapi/design-system/themes';
 import Wysiwyg from '../index';
 
 jest.mock('@strapi/helper-plugin', () => ({
@@ -39,6 +40,7 @@ describe('Wysiwyg render and actions buttons', () => {
             name="rich-text"
             intlLabel={{ id: 'hello world', defaultMessage: 'hello world' }}
             onChange={onChange}
+            disabled={false}
           />
         </IntlProvider>
       </ThemeProvider>
@@ -203,7 +205,7 @@ describe('Wysiwyg render and actions buttons', () => {
         background: #ffffff;
       }
 
-      .c28 .sc-BHvUt {
+      .c28 .sc-pVTFL {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -607,7 +609,8 @@ describe('Wysiwyg render and actions buttons', () => {
       }
 
       .c32 {
-        cursor: not-allowed !important;
+        cursor: auto;
+        height: 100%;
       }
 
       .c32 .CodeMirror-placeholder {
@@ -1008,6 +1011,7 @@ describe('Wysiwyg render and actions buttons', () => {
 
       .c31 {
         position: relative;
+        height: calc(100% - 48px);
       }
 
       .c36 {
@@ -1238,7 +1242,6 @@ describe('Wysiwyg render and actions buttons', () => {
           >
             <div
               class="c32"
-              disabled=""
             >
               <textarea
                 style="display: none;"
@@ -1254,8 +1257,6 @@ describe('Wysiwyg render and actions buttons', () => {
                     aria-label="Editor"
                     autocapitalize="off"
                     autocorrect="off"
-                    disabled=""
-                    readonly=""
                     spellcheck="false"
                     style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
                     tabindex="0"

packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -41,9 +41,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
         <Stack size={2}>
           {editLayout.map((row, index) => (
-            <React.Fragment key={row.rowId}>
+            <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
-              <RowsLayout row={row} rowIndex={index} onRemoveField={onRemoveField} />
-            </React.Fragment>
           ))}
           <SimpleMenu
             id="label"

packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -47,19 +47,18 @@ const ModalForm = ({ onChange }) => {
   return formToDisplay.map(meta => {
     const formType = get(attributes, [selectedField, 'type']);
 
-    if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
+    if (
+      formType === 'dynamiczone' ||
+      (formType === 'component' && !['label', 'description'].includes(meta))
+    ) {
       return null;
     }
 
-    if ((formType === 'component' || formType === 'media') && meta !== 'label') {
+    if (formType === 'component' && meta !== 'label') {
       return null;
     }
 
-    if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
+    if (['media', 'json', 'boolean'].includes(formType) && meta === 'placeholder') {
-      return null;
-    }
-
-    if (formType === 'richtext' && meta === 'editable') {
       return null;
     }
 

packages/core/admin/package.json

@@ -87,12 +87,12 @@
     "koa-passport": "4.1.4",
     "koa-static": "5.0.0",
     "lodash": "4.17.21",
-    "markdown-it": "^12.0.6",
+    "markdown-it": "^12.3.2",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-container": "^3.0.0",
-    "markdown-it-deflist": "^2.0.3",
+    "markdown-it-deflist": "^2.1.0",
     "markdown-it-emoji": "^2.0.0",
-    "markdown-it-footnote": "^3.0.2",
+    "markdown-it-footnote": "^3.0.3",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-sub": "^1.0.0",

packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

@@ -38,6 +38,7 @@ const DateTimePicker = ({
   name,
   required,
   size,
+  step,
   value,
   ...props
 }) => {
@@ -146,6 +147,7 @@ const DateTimePicker = ({
             onClear={onClear && handleTimeClear}
             clearLabel={clearLabel}
             disabled={disabled}
+            step={step}
           />
         </Stack>
         <FieldHint />
@@ -168,6 +170,7 @@ DateTimePicker.defaultProps = {
   onClear: undefined,
   required: false,
   size: 'M',
+  step: 1,
   value: undefined,
 };
 
@@ -184,6 +187,7 @@ DateTimePicker.propTypes = {
   onClear: PropTypes.func,
   required: PropTypes.bool,
   size: PropTypes.oneOf(['S', 'M']),
+  step: PropTypes.number,
   value: PropTypes.instanceOf(Date),
 };
 

packages/core/helper-plugin/lib/src/components/GenericInput/index.js

@@ -146,6 +146,7 @@ const GenericInput = ({
 
             onChange({ target: { name, value: formattedDate, type } });
           }}
+          step={step}
           onClear={() => onChange({ target: { name, value: '', type } })}
           placeholder={formattedPlaceholder}
           required={required}

packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js

@@ -12,6 +12,7 @@ import {
   CardTitle,
   CardSubtitle,
 } from '@strapi/design-system/Card';
+import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Pencil from '@strapi/icons/Pencil';
@@ -68,7 +69,9 @@ export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size
       </CardHeader>
       <CardBody>
         <CardContent>
+          <Box paddingTop={1}>
             <CardTitle as="h2">{name}</CardTitle>
+          </Box>
           <CardSubtitle>
             <Extension>{extension}</Extension>
           </CardSubtitle>

packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
 import {
   Card,
   CardAction,
@@ -58,7 +59,9 @@ export const ImageAssetCard = ({
       </CardHeader>
       <CardBody>
         <CardContent>
+          <Box paddingTop={1}>
             <CardTitle as="h2">{name}</CardTitle>
+          </Box>
           <CardSubtitle>
             <Extension>{extension}</Extension>
             {height && width && ` - ${height}✕${width}`}

packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js

@@ -12,6 +12,7 @@ import {
 } from '@strapi/design-system/Card';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 import { AssetType } from '../../constants';
@@ -82,7 +83,9 @@ export const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploade
         </CardHeader>
         <CardBody>
           <CardContent>
+            <Box paddingTop={1}>
               <CardTitle as="h2">{asset.name}</CardTitle>
+            </Box>
             <CardSubtitle>
               <Extension>{asset.ext}</Extension>
             </CardSubtitle>

packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js

@@ -70,7 +70,9 @@ export const VideoAssetCard = ({
       </CardHeader>
       <CardBody>
         <CardContent>
+          <Box paddingTop={1}>
             <CardTitle as="h2">{name}</CardTitle>
+          </Box>
           <CardSubtitle>
             <Extension>{extension}</Extension>
           </CardSubtitle>

packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js

@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c23 {
+      .c24 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -54,7 +54,7 @@ describe('DocAssetCard', () => {
         padding-left: 12px;
       }
 
-      .c19 {
+      .c20 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -105,7 +105,7 @@ describe('DocAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c20 {
+      .c21 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -123,20 +123,20 @@ describe('DocAssetCard', () => {
         align-items: center;
       }
 
-      .c15 {
+      .c16 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c16 {
+      .c17 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c22 {
+      .c23 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -144,14 +144,14 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c18 {
+      .c19 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c21 {
+      .c22 {
         margin-left: 4px;
       }
 
@@ -232,6 +232,10 @@ describe('DocAssetCard', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
+      .c15 {
+        padding-top: 4px;
+      }
+
       .c8 {
         width: 100%;
         height: 5.5rem;
@@ -353,7 +357,7 @@ describe('DocAssetCard', () => {
         fill: #666687;
       }
 
-      .c17 {
+      .c18 {
         text-transform: uppercase;
       }
 
@@ -447,30 +451,34 @@ describe('DocAssetCard', () => {
               <div
                 class="c14"
               >
-                <h2
+                <div
                   class="c15"
+                >
+                  <h2
+                    class="c16"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
+                </div>
                 <div
-                  class="c16"
+                  class="c17"
                 >
                   <span
-                    class="c17"
+                    class="c18"
                   >
                     png
                   </span>
                 </div>
               </div>
               <div
-                class="c18"
+                class="c19"
               >
                 <div
-                  class="c19 c20 c21"
+                  class="c20 c21 c22"
                 >
                   <span
-                    class="c22"
+                    class="c23"
                   >
                     Doc
                   </span>
@@ -480,7 +488,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c23"
+          class="c24"
         >
           <p
             aria-live="polite"

packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js

@@ -31,7 +31,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c21 {
+      .c22 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -43,6 +43,10 @@ describe('ImageAssetCard', () => {
         width: 1px;
       }
 
+      .c13 {
+        padding-top: 4px;
+      }
+
       .c0 {
         background: #ffffff;
         border-radius: 4px;
@@ -56,7 +60,7 @@ describe('ImageAssetCard', () => {
         padding-left: 12px;
       }
 
-      .c17 {
+      .c18 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -107,7 +111,7 @@ describe('ImageAssetCard', () => {
         align-items: flex-start;
       }
 
-      .c18 {
+      .c19 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -146,20 +150,20 @@ describe('ImageAssetCard', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c13 {
+      .c14 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c14 {
+      .c15 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c20 {
+      .c21 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -167,14 +171,14 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c16 {
+      .c17 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c19 {
+      .c20 {
         margin-left: 4px;
       }
 
@@ -353,7 +357,7 @@ describe('ImageAssetCard', () => {
         fill: #666687;
       }
 
-      .c15 {
+      .c16 {
         text-transform: uppercase;
       }
 
@@ -422,17 +426,21 @@ describe('ImageAssetCard', () => {
               <div
                 class="c12"
               >
-                <h2
+                <div
                   class="c13"
+                >
+                  <h2
+                    class="c14"
                     id="card-1-title"
                   >
                     hello.png
                   </h2>
+                </div>
                 <div
-                  class="c14"
+                  class="c15"
                 >
                   <span
-                    class="c15"
+                    class="c16"
                   >
                     png
                   </span>
@@ -440,13 +448,13 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c16"
+                class="c17"
               >
                 <div
-                  class="c17 c18 c19"
+                  class="c18 c19 c20"
                 >
                   <span
-                    class="c20"
+                    class="c21"
                   >
                     Image
                   </span>
@@ -456,7 +464,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c21"
+          class="c22"
         >
           <p
             aria-live="polite"

packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js

@@ -11,8 +11,8 @@ export const DialogTitle = () => {
     <ModalHeader>
       <Typography fontWeight="bold" textColor="neutral800" as="h2" id="asset-dialog-title">
         {formatMessage({
-          id: getTrad('header.actions.upload-assets'),
+          id: getTrad('header.actions.add-assets'),
-          defaultMessage: 'Upload assets',
+          defaultMessage: 'Add new assets',
         })}
       </Typography>
     </ModalHeader>

packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js

@@ -25,7 +25,7 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })
         <Typography variant="pi" textColor="neutral600">
           {formatMessage({
             id: getTrad('modal.upload-list.sub-header-subtitle'),
-            defaultMessage: 'Manage the assets before adding them to the Media Library',
+            defaultMessage: 'Manage the assets before uploading them to the Media Library',
           })}
         </Typography>
       </Stack>

packages/core/upload/admin/src/components/AssetDialog/index.js

@@ -127,8 +127,8 @@ export const AssetDialog = ({
               canCreate ? (
                 <Button variant="secondary" startIcon={<PlusIcon />} onClick={onAddAsset}>
                   {formatMessage({
-                    id: getTrad('modal.header.browse'),
+                    id: getTrad('header.actions.add-assets'),
-                    defaultMessage: 'Upload assets',
+                    defaultMessage: 'Add new assets',
                   })}
                 </Button>
               ) : (

packages/core/upload/admin/src/components/AssetList/tests/AssetList.test.js

@@ -130,7 +130,7 @@ describe('MediaLibrary / AssetList', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -142,12 +142,16 @@ describe('MediaLibrary / AssetList', () => {
         width: 1px;
       }
 
-      .c26 {
+      .c11 {
+        padding-top: 4px;
+      }
+
+      .c27 {
         width: 100%;
         height: 10.25rem;
       }
 
-      .c27 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -165,7 +169,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c21 {
+      .c22 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -190,14 +194,14 @@ describe('MediaLibrary / AssetList', () => {
         padding-left: 12px;
       }
 
-      .c15 {
+      .c16 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
         min-width: 20px;
       }
 
-      .c22 {
+      .c23 {
         background: #32324d;
         color: #ffffff;
         padding: 4px;
@@ -242,7 +246,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: flex-start;
       }
 
-      .c16 {
+      .c17 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -260,7 +264,7 @@ describe('MediaLibrary / AssetList', () => {
         align-items: center;
       }
 
-      .c19 {
+      .c20 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -295,20 +299,20 @@ describe('MediaLibrary / AssetList', () => {
         background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
       }
 
-      .c11 {
+      .c12 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c12 {
+      .c13 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c18 {
+      .c19 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -316,20 +320,20 @@ describe('MediaLibrary / AssetList', () => {
         text-transform: uppercase;
       }
 
-      .c24 {
+      .c25 {
         color: #ffffff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c14 {
+      .c15 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c17 {
+      .c18 {
         margin-left: 4px;
       }
 
@@ -410,36 +414,36 @@ describe('MediaLibrary / AssetList', () => {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c23 {
+      .c24 {
         position: absolute;
         bottom: 4px;
         right: 4px;
       }
 
-      .c13 {
+      .c14 {
         text-transform: uppercase;
       }
 
-      .c25 {
+      .c26 {
         text-transform: uppercase;
       }
 
-      .c20 canvas,
+      .c21 canvas,
-      .c20 video {
+      .c21 video {
         display: block;
         max-width: 100%;
         max-height: 10.25rem;
       }
 
-      .c30 {
+      .c31 {
         text-transform: uppercase;
       }
 
-      .c29 svg {
+      .c30 svg {
         font-size: 3rem;
       }
 
-      .c28 {
+      .c29 {
         border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
       }
@@ -494,17 +498,21 @@ describe('MediaLibrary / AssetList', () => {
                   <div
                     class="c10"
                   >
-                    <h2
+                    <div
                       class="c11"
+                    >
+                      <h2
+                        class="c12"
                         id="card-1-title"
                       >
                         strapi-cover_1fabc982ce.png
                       </h2>
+                    </div>
                     <div
-                      class="c12"
+                      class="c13"
                     >
                       <span
-                        class="c13"
+                        class="c14"
                       >
                         png
                       </span>
@@ -512,13 +520,13 @@ describe('MediaLibrary / AssetList', () => {
                     </div>
                   </div>
                   <div
-                    class="c14"
+                    class="c15"
                   >
                     <div
-                      class="c15 c16 c17"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c18"
+                        class="c19"
                       >
                         Image
                       </span>
@@ -548,10 +556,10 @@ describe('MediaLibrary / AssetList', () => {
                   class="c6"
                 >
                   <div
-                    class="c19"
+                    class="c20"
                   >
                     <div
-                      class="c20"
+                      class="c21"
                     >
                       <figure
                         class=""
@@ -565,7 +573,7 @@ describe('MediaLibrary / AssetList', () => {
                           />
                         </video>
                         <figcaption
-                          class="c21"
+                          class="c22"
                         >
                           mov_bbb.mp4
                         </figcaption>
@@ -574,10 +582,10 @@ describe('MediaLibrary / AssetList', () => {
                   </div>
                 </div>
                 <time
-                  class="c22 c23"
+                  class="c23 c24"
                 >
                   <span
-                    class="c24"
+                    class="c25"
                   >
                     ...
                   </span>
@@ -592,30 +600,34 @@ describe('MediaLibrary / AssetList', () => {
                   <div
                     class="c10"
                   >
-                    <h2
+                    <div
                       class="c11"
+                    >
+                      <h2
+                        class="c12"
                         id="card-2-title"
                       >
                         mov_bbb.mp4
                       </h2>
+                    </div>
                     <div
-                      class="c12"
+                      class="c13"
                     >
                       <span
-                        class="c25"
+                        class="c26"
                       >
                         mp4
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c14"
+                    class="c15"
                   >
                     <div
-                      class="c15 c16 c17"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c18"
+                        class="c19"
                       >
                         Video
                       </span>
@@ -642,12 +654,12 @@ describe('MediaLibrary / AssetList', () => {
                   />
                 </div>
                 <div
-                  class="c26 c27 c28"
+                  class="c27 c28 c29"
                   height="10.25rem"
                   width="100%"
                 >
                   <span
-                    class="c29"
+                    class="c30"
                   >
                     <svg
                       aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -680,30 +692,34 @@ describe('MediaLibrary / AssetList', () => {
                   <div
                     class="c10"
                   >
-                    <h2
+                    <div
                       class="c11"
+                    >
+                      <h2
+                        class="c12"
                         id="card-3-title"
                       >
                         CARTE MARIAGE AVS - Printemps.pdf
                       </h2>
+                    </div>
                     <div
-                      class="c12"
+                      class="c13"
                     >
                       <span
-                        class="c30"
+                        class="c31"
                       >
                         pdf
                       </span>
                     </div>
                   </div>
                   <div
-                    class="c14"
+                    class="c15"
                   >
                     <div
-                      class="c15 c16 c17"
+                      class="c16 c17 c18"
                     >
                       <span
-                        class="c18"
+                        class="c19"
                       >
                         Doc
                       </span>
@@ -733,7 +749,7 @@ describe('MediaLibrary / AssetList', () => {
           </div>
         </div>
         <div
-          class="c31"
+          class="c32"
         >
           <p
             aria-live="polite"

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/EmptyStateAsset.js

@@ -79,7 +79,7 @@ export const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
       >
         {formatMessage({
           id: getTrad('mediaLibraryInput.placeholder'),
-          defaultMessage: 'Click to select an asset or drag and drop one in this area',
+          defaultMessage: 'Click to add an asset or drag and drop one in this area',
         })}
       </TextAlignTypography>
     </Flex>

packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.js

@@ -18,8 +18,8 @@ export const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
       <ModalHeader>
         <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
           {formatMessage({
-            id: getTrad('header.actions.upload-assets'),
+            id: getTrad('header.actions.add-assets'),
-            defaultMessage: 'Upload assets',
+            defaultMessage: 'Add new assets',
           })}
         </Typography>
       </ModalHeader>

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js

@@ -62,8 +62,8 @@ export const PendingAssetStep = ({
       <ModalHeader>
         <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
           {formatMessage({
-            id: getTrad('header.actions.upload-assets'),
+            id: getTrad('header.actions.add-assets'),
-            defaultMessage: 'Upload assets',
+            defaultMessage: 'Add new assets',
           })}
         </Typography>
       </ModalHeader>
@@ -85,14 +85,14 @@ export const PendingAssetStep = ({
               <Typography variant="pi" textColor="neutral600">
                 {formatMessage({
                   id: getTrad('modal.upload-list.sub-header-subtitle'),
-                  defaultMessage: 'Manage the assets before adding them to the Media Library',
+                  defaultMessage: 'Manage the assets before uploading them to the Media Library',
                 })}
               </Typography>
             </Stack>
             <Button size="S" onClick={onClickAddAsset}>
               {formatMessage({
-                id: getTrad('header.actions.upload-new-asset'),
+                id: getTrad('header.actions.add-assets'),
-                defaultMessage: 'Upload new asset',
+                defaultMessage: 'Add new assets',
               })}
             </Button>
           </Flex>

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c51 {
+.c52 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -46,7 +46,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c48 {
+.c49 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -163,12 +163,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c47 {
+.c48 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c49 > * + * {
+.c50 > * + * {
   margin-left: 8px;
 }
 
@@ -327,7 +327,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #4945ff;
 }
 
-.c50 {
+.c51 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -339,7 +339,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c50 .sc-kJpAUB {
+.c51 .sc-kJpAUB {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -350,56 +350,56 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c50 .c15 {
+.c51 .c15 {
   color: #ffffff;
 }
 
-.c50[aria-disabled='true'] {
+.c51[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c50[aria-disabled='true'] .c15 {
+.c51[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c50[aria-disabled='true'] svg > g,
+.c51[aria-disabled='true'] svg > g,
-.c50[aria-disabled='true'] svg path {
+.c51[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c50[aria-disabled='true']:active {
+.c51[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c50[aria-disabled='true']:active .c15 {
+.c51[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c50[aria-disabled='true']:active svg > g,
+.c51[aria-disabled='true']:active svg > g,
-.c50[aria-disabled='true']:active svg path {
+.c51[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c50:hover {
+.c51:hover {
   background-color: #f6f6f9;
 }
 
-.c50:active {
+.c51:active {
   background-color: #eaeaef;
 }
 
-.c50 .c15 {
+.c51 .c15 {
   color: #32324d;
 }
 
-.c50 svg > g,
+.c51 svg > g,
-.c50 svg path {
+.c51 svg path {
   fill: #32324d;
 }
 
-.c35 {
+.c36 {
   width: 100%;
   height: 5.5rem;
 }
@@ -422,7 +422,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c36 {
+.c37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -488,7 +488,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   grid-column: span 4;
 }
 
-.c42 {
+.c27 {
+  padding-top: 4px;
+}
+
+.c43 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -513,14 +517,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   padding-left: 12px;
 }
 
-.c31 {
+.c32 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c43 {
+.c44 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
@@ -559,7 +563,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: flex-start;
 }
 
-.c32 {
+.c33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -577,7 +581,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c40 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -612,20 +616,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
 }
 
-.c27 {
+.c28 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c28 {
+.c29 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c34 {
+.c35 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -633,20 +637,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   text-transform: uppercase;
 }
 
-.c45 {
+.c46 {
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c30 {
+.c31 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c33 {
+.c34 {
   margin-left: 4px;
 }
 
@@ -659,36 +663,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c44 {
+.c45 {
   position: absolute;
   bottom: 4px;
   right: 4px;
 }
 
-.c29 {
+.c30 {
   text-transform: uppercase;
 }
 
-.c46 {
+.c47 {
   text-transform: uppercase;
 }
 
-.c41 canvas,
+.c42 canvas,
-.c41 video {
+.c42 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c39 {
+.c40 {
   text-transform: uppercase;
 }
 
-.c38 svg {
+.c39 svg {
   font-size: 3rem;
 }
 
-.c37 {
+.c38 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -717,7 +721,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           class="c3"
           id="title"
         >
-          Upload assets
+          Add new assets
         </h2>
         <button
           aria-disabled="false"
@@ -755,12 +759,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
             <span
               class="c11"
             >
-              {number, plural, =0 {No asset} one {1 asset} other {# assets}} selected
+              {number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload
             </span>
             <span
               class="c12"
             >
-              Manage the assets before adding them to the Media Library
+              Manage the assets before uploading them to the Media Library
             </span>
           </div>
           <button
@@ -771,7 +775,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
             <span
               class="c15 c16"
             >
-              Upload new asset
+              Add new assets
             </span>
           </button>
         </div>
@@ -814,28 +818,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       <div
                         class="c26"
                       >
-                        <h2
+                        <div
                           class="c27"
+                        >
+                          <h2
+                            class="c28"
                             id="card-1-title"
                           />
+                        </div>
                         <div
-                          class="c28"
+                          class="c29"
                         >
                           <span
-                            class="c29"
+                            class="c30"
                           >
                             jpg
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <div
-                          class="c31 c32 c33"
+                          class="c32 c33 c34"
                         >
                           <span
-                            class="c34"
+                            class="c35"
                           >
                             Image
                           </span>
@@ -861,12 +869,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                     class="c20 c21"
                   >
                     <div
-                      class="c35 c36 c37"
+                      class="c36 c37 c38"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c38"
+                        class="c39"
                       >
                         <svg
                           fill="none"
@@ -898,28 +906,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       <div
                         class="c26"
                       >
-                        <h2
+                        <div
                           class="c27"
+                        >
+                          <h2
+                            class="c28"
                             id="card-2-title"
                           />
+                        </div>
                         <div
-                          class="c28"
+                          class="c29"
                         >
                           <span
-                            class="c39"
+                            class="c40"
                           >
                             pdf
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <div
-                          class="c31 c32 c33"
+                          class="c32 c33 c34"
                         >
                           <span
-                            class="c34"
+                            class="c35"
                           >
                             Doc
                           </span>
@@ -948,10 +960,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       class="c22"
                     >
                       <div
-                        class="c40"
+                        class="c41"
                       >
                         <div
-                          class="c41"
+                          class="c42"
                         >
                           <figure
                             class=""
@@ -965,17 +977,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                               />
                             </video>
                             <figcaption
-                              class="c42"
+                              class="c43"
                             />
                           </figure>
                         </div>
                       </div>
                     </div>
                     <time
-                      class="c43 c44"
+                      class="c44 c45"
                     >
                       <span
-                        class="c45"
+                        class="c46"
                       >
                         ...
                       </span>
@@ -990,28 +1002,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       <div
                         class="c26"
                       >
-                        <h2
+                        <div
                           class="c27"
+                        >
+                          <h2
+                            class="c28"
                             id="card-3-title"
                           />
+                        </div>
                         <div
-                          class="c28"
+                          class="c29"
                         >
                           <span
-                            class="c46"
+                            class="c47"
                           >
                             mp4
                           </span>
                         </div>
                       </div>
                       <div
-                        class="c30"
+                        class="c31"
                       >
                         <div
-                          class="c31 c32 c33"
+                          class="c32 c33 c34"
                         >
                           <span
-                            class="c34"
+                            class="c35"
                           >
                             Video
                           </span>
@@ -1027,17 +1043,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c47"
+      class="c0 c48"
     >
       <div
         class="c2"
       >
         <div
-          class="c48 c49"
+          class="c49 c50"
         >
           <button
             aria-disabled="false"
-            class="c13 c50"
+            class="c13 c51"
             type="button"
           >
             <span
@@ -1046,7 +1062,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           </button>
         </div>
         <div
-          class="c48 c49"
+          class="c49 c50"
         >
           <button
             aria-disabled="false"
@@ -1064,7 +1080,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c51"
+    class="c52"
   >
     <p
       aria-live="polite"

packages/core/upload/admin/src/components/UploadAssetDialog/tests/UploadAssetDialog.test.js

@@ -94,14 +94,14 @@ describe('UploadAssetDialog', () => {
           target: { files: fileList },
         });
 
-        expect(screen.getByText('Upload new asset')).toBeInTheDocument();
+        expect(screen.getAllByText(`Add new assets`).length).toBe(2);
         expect(
           screen.getByText(
-            '{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected'
+            '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
           )
         ).toBeInTheDocument();
         expect(
-          screen.getByText('Manage the assets before adding them to the Media Library')
+          screen.getByText('Manage the assets before uploading them to the Media Library')
         ).toBeInTheDocument();
         expect(screen.getAllByText(`test.${ext}`).length).toBe(number);
         expect(screen.getByText(ext)).toBeInTheDocument();
@@ -193,13 +193,13 @@ describe('UploadAssetDialog', () => {
       await waitFor(() =>
         expect(
           screen.getByText(
-            '{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected'
+            '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
           )
         ).toBeInTheDocument()
       );
-      expect(screen.getByText('Upload new asset')).toBeInTheDocument();
+      expect(screen.getAllByText(`Add new assets`).length).toBe(2);
       expect(
-        screen.getByText('Manage the assets before adding them to the Media Library')
+        screen.getByText('Manage the assets before uploading them to the Media Library')
       ).toBeInTheDocument();
 
       assets.forEach(asset => {

packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap

@@ -598,7 +598,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
                 class="c7"
                 id="title"
               >
-                Upload assets
+                Add new assets
               </h2>
               <button
                 aria-disabled="false"
@@ -1434,7 +1434,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
                 class="c6"
                 id="title"
               >
-                Upload assets
+                Add new assets
               </h2>
               <button
                 aria-disabled="false"

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -89,8 +89,8 @@ export const MediaLibrary = () => {
             canCreate ? (
               <Button startIcon={<Plus />} onClick={toggleUploadAssetDialog}>
                 {formatMessage({
-                  id: getTrad('header.actions.upload-assets'),
+                  id: getTrad('header.actions.add-assets'),
-                  defaultMessage: 'Upload assets',
+                  defaultMessage: 'Add new assets',
                 })}
               </Button>
             ) : (
@@ -157,8 +157,8 @@ export const MediaLibrary = () => {
                     onClick={toggleUploadAssetDialog}
                   >
                     {formatMessage({
-                      id: getTrad('modal.header.browse'),
+                      id: getTrad('header.actions.add-assets'),
-                      defaultMessage: 'Upload assets',
+                      defaultMessage: 'Add new assets',
                     })}
                   </Button>
                 ) : (

packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js

@@ -179,7 +179,7 @@ describe('Media library homepage', () => {
 
         renderML();
 
-        await waitFor(() => expect(screen.queryByText(`Upload assets`)).not.toBeInTheDocument());
+        await waitFor(() => expect(screen.queryByText(`Add new assets`)).not.toBeInTheDocument());
       });
 
       it('shows the "Upload assets" button when the user does have the permissions to', async () => {
@@ -193,7 +193,7 @@ describe('Media library homepage', () => {
 
         renderML();
 
-        await waitFor(() => expect(screen.getByText(`Upload assets`)).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText(`Add new assets`)).toBeInTheDocument());
       });
     });
 

packages/core/upload/admin/src/translations/en.json

@@ -21,6 +21,7 @@
   "form.input.label.file-name": "File name",
   "form.upload-url.error.url.invalid": "One URL is invalid",
   "form.upload-url.error.url.invalids": "{number} URLs are invalids",
+  "header.actions.add-assets": "Add new assets",
   "header.actions.upload-assets": "Upload assets",
   "header.actions.upload-new-asset": "Upload new asset",
   "header.content.assets-empty": "No assets",
@@ -30,7 +31,7 @@
   "input.label": "Drag & Drop here or",
   "input.label-bold": "Drag & drop",
   "input.label-normal": "to upload or",
-  "input.placeholder": "Click to select an asset or drag & drop a file in this area",
+  "input.placeholder": "Click to add an asset or drag & drop a file in this area",
   "input.placeholder.icon": "Drop the asset in this zone",
   "input.url.description": "Separate your URL links by a carriage return.",
   "input.url.label": "URL",
@@ -44,12 +45,12 @@
   "list.assets.loading-asset": "Loading the preview for the media: {path}",
   "list.assets.not-supported-content": "No preview available",
   "list.assets.preview-asset": "Preview for the video at path {path}",
-  "list.assets.selected": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected",
+  "list.assets.selected": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload",
   "list.assets.type-not-allowed": "This type of file is not allowed.",
   "list.assets-empty.search": "No result found",
   "mediaLibraryInput.actions.nextSlide": "Next slide",
   "mediaLibraryInput.actions.previousSlide": "Previous slide",
-  "mediaLibraryInput.placeholder": "Click to select an asset or drag and drop one in this area",
+  "mediaLibraryInput.placeholder": "Click to add an asset or drag and drop one in this area",
   "mediaLibraryInput.slideCount": "{n} of {m} slides",
   "modal.edit.title": "Details",
   "modal.file-details.date": "Date",
@@ -68,7 +69,7 @@
   "modal.selected-list.sub-header-subtitle": "Drag & drop to reorder the assets in the field",
   "modal.upload-list.footer.button.plural": "Upload {number} assets to the library",
   "modal.upload-list.footer.button.singular": "Upload {number} asset to the library",
-  "modal.upload-list.sub-header-subtitle": "Manage the assets before adding them to the Media Library",
+  "modal.upload-list.sub-header-subtitle": "Manage the assets before uploading them to the Media Library",
   "modal.upload-list.sub-header-title.plural": "{number} assets selected",
   "modal.upload-list.sub-header-title.singular": "{number} asset selected",
   "modal.upload-list.sub-header.button": "Add more assets",

yarn.lock

@@ -15246,7 +15246,7 @@ markdown-it-container@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"
   integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==
 
-markdown-it-deflist@^2.0.3:
+markdown-it-deflist@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz#50d7a56b9544cd81252f7623bd785e28a8dcef5c"
   integrity sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
@@ -15256,7 +15256,7 @@ markdown-it-emoji@^2.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.0.tgz#3164ad4c009efd946e98274f7562ad611089a231"
   integrity sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==
 
-markdown-it-footnote@^3.0.2:
+markdown-it-footnote@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz#e0e4c0d67390a4c5f0c75f73be605c7c190ca4d8"
   integrity sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
@@ -15281,7 +15281,7 @@ markdown-it-sup@1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz#cb9c9ff91a5255ac08f3fd3d63286e15df0a1fc3"
   integrity sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=
 
-markdown-it@^12.0.6:
+markdown-it@^12.3.2:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
   integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==