back button and folder name for ML modal header

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

@@ -1,20 +1,55 @@
 import React from 'react';
-import { Typography } from '@strapi/design-system/Typography';
+import PropTypes from 'prop-types';
-import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { useIntl } from 'react-intl';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+import { ModalHeader } from '@strapi/design-system/ModalLayout';
+import { Stack } from '@strapi/design-system/Stack';
+import { Icon } from '@strapi/design-system/Icon';
+import ArrowLeft from '@strapi/icons/ArrowLeft';
 import getTrad from '../../utils/getTrad';
+import { findRecursiveFolderMetadatas } from '../../utils';
+import { useFolderStructure } from '../../hooks/useFolderStructure';
 
-export const DialogTitle = () => {
+export const DialogTitle = ({ currentFolder, onChangeFolder }) => {
   const { formatMessage } = useIntl();
 
+  const { data, isLoading } = useFolderStructure();
+
+  const folderMetadatas = !isLoading && findRecursiveFolderMetadatas(data[0], currentFolder);
+  const folderLabel =
+    folderMetadatas?.currentFolderLabel &&
+    (folderMetadatas.currentFolderLabel.length > 60
+      ? `${folderMetadatas.currentFolderLabel.slice(0, 60)}...`
+      : folderMetadatas.currentFolderLabel);
+
   return (
     <ModalHeader>
-      <Typography fontWeight="bold" textColor="neutral800" as="h2" id="asset-dialog-title">
+      <Stack horizontal spacing={4}>
-        {formatMessage({
+        {currentFolder && (
-          id: getTrad('header.actions.add-assets'),
+          <button type="button" onClick={() => onChangeFolder(folderMetadatas?.parentId)}>
-          defaultMessage: 'Add new assets',
+            <Icon color="neutral500" as={ArrowLeft} />
-        })}
+          </button>
-      </Typography>
+        )}
+        <Breadcrumbs label="Category model, name field">
+          <Crumb>
+            {formatMessage({
+              id: getTrad('header.actions.add-assets'),
+              defaultMessage: 'Add new assets',
+            })}
+          </Crumb>
+          {folderLabel && <Crumb>{folderLabel}</Crumb>}
+        </Breadcrumbs>
+      </Stack>
     </ModalHeader>
   );
 };
+
+DialogTitle.defaultProps = {
+  currentFolder: undefined,
+  onChangeFolder: undefined,
+};
+
+DialogTitle.propTypes = {
+  currentFolder: PropTypes.number,
+  onChangeFolder: PropTypes.func,
+};

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

@@ -160,7 +160,7 @@ export const AssetDialog = ({
 
   return (
     <ModalLayout onClose={onClose} labelledBy="asset-dialog-title" aria-busy={isLoading}>
-      <DialogTitle />
+      <DialogTitle currentFolder={queryObject?.folder} onChangeFolder={handleFolderChange} />
 
       <TabGroup
         label={formatMessage({