Asset Support (WIP)

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js

@@ -38,7 +38,7 @@ export const searchAndSortHooks = () => {
 };
 
 export const filteredList = ({ searchString, imageList }) => (
-  imageList.filter(({ displayName }) => displayName?.toLowerCase().includes(searchString?.toLowerCase()))
+  imageList.filter(({ expandedPath }) => expandedPath?.toLowerCase().includes(searchString?.toLowerCase()))
 );
 
 export const displayList = ({ sortBy, searchString, images }) => (

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -4,7 +4,7 @@
 import {
   Badge,
   Image,
   Truncate,
 } from '@openedx/paragon';
 import { FormattedMessage, FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
 
@@ -65,8 +65,12 @@
           )}
         </div>
         <div className="card-text px-3 py-2" style={{ marginTop: '10px' }}>
-          <h3 className="text-primary-500">
-            <Truncate>{asset.displayName}</Truncate>
+          <h3 className="text-primary-500" style={{ wordBreak: "break-word"}}>
+          {/* We use "break-word" above and avoid <Truncate> because sometimes
+              we're displaying an entire path and not just the file name, and we
+              don't want to cut out the last part of the path that has the
+              actual file name). */}
+            {asset.expandedPath}
           </h3>
           { asset.transcripts && (
             <div style={{ margin: '0 0 5px 0' }}>
@@ -97,6 +101,7 @@
   asset: PropTypes.shape({
     contentType: PropTypes.string,
     displayName: PropTypes.string,
+    expandedPath: PropTypes.string,
     externalUrl: PropTypes.string,
     id: PropTypes.string,
     dateAdded: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -100,19 +100,27 @@
       const isCorrectAssetFormat = assetSrc.startsWith('/asset') && assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
       // assets in expandable text areas so not support relative urls so all assets must have the lms
       // endpoint prepended to the relative url
-      if (editorType === 'expandable') {
-        if (isCorrectAssetFormat) {
-          staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
-        } else {
-          staticFullUrl = `${lmsEndpointUrl}${getRelativeUrl({ courseId: learningContextId, displayName })}`;
-        }
-      } else if (!isCorrectAssetFormat) {
-        staticFullUrl = getRelativeUrl({ courseId: learningContextId, displayName });
+      if (learningContextId.startsWith('lib:')) {
+        // We're basically disabling this whole substitution path when the Learning Context is a Library,
+        // because the code currently just doesn't handle it correctly. Libraries don't mangle the path
+        // into an asset key–it might be sufficient to remove the initial "/" in a "/static/images/foo.png"
+        // link, and then set the base URL to the correct ComponentVersion base.
       }
-      if (staticFullUrl) {
-        const currentSrc = src.substring(0, src.indexOf('"'));
-        content = currentContent.replace(currentSrc, staticFullUrl);
-        hasChanges = true;
+      else {
+        if (editorType === 'expandable') {
+          if (isCorrectAssetFormat) {
+            staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
+          } else {
+            staticFullUrl = `${lmsEndpointUrl}${getRelativeUrl({ courseId: learningContextId, displayName })}`;
+          }
+        } else if (!isCorrectAssetFormat) {
+          staticFullUrl = getRelativeUrl({ courseId: learningContextId, displayName });
+        }
+        if (staticFullUrl) {
+          const currentSrc = src.substring(0, src.indexOf('"'));
+          content = currentContent.replace(currentSrc, staticFullUrl);
+          hasChanges = true;
+        }
       }
     });
     if (hasChanges) { return content; }

src/files-and-videos/files-page/FilesPage.jsx

@@ -133,8 +133,8 @@ const FilesPage = ({
   const tableColumns = [
     { ...thumbnailColumn },
     {
-      Header: 'File name',
-      accessor: 'displayName',
+      Header: 'File path',
+      accessor: 'expandedPath',
     },
     { ...fileSizeColumn },
     {

src/files-and-videos/generic/DeleteConfirmationModal.jsx

@@ -8,7 +8,7 @@
   Button,
   Collapsible,
   Hyperlink,
   Truncate,
 } from '@openedx/paragon';
 
 import messages from './messages';
@@ -35,9 +35,7 @@
         styling="basic"
         title={(
           <h3 className="h5 m-n2">
-            <Truncate lines={1}>
-              {original.displayName}
-            </Truncate>
+            {original.expandedPath}
           </h3>
         )}
         data-testid={`collapsible-${original.id}`}
@@ -61,7 +59,7 @@
       title={intl.formatMessage(
         messages.deleteConfirmationTitle,
         {
-          fileName: firstSelectedRow?.displayName,
+          fileName: firstSelectedRow?.expandedPath,
           fileNumber: selectedRows.length,
           fileType,
         },
@@ -82,7 +80,7 @@
       {intl.formatMessage(
         messages.deleteConfirmationMessage,
         {
-          fileName: firstSelectedRow?.displayName,
+          fileName: firstSelectedRow?.expandedPath,
           fileNumber: selectedRows.length,
           fileType,
         },

src/files-and-videos/generic/InfoModal.jsx

@@ -37,7 +37,7 @@
 
   return (
     <ModalDialog
-      title={file?.displayName}
+      title={file?.expandedPath}
       isOpen={isOpen}
       onClose={onClose}
       size="lg"
@@ -49,7 +49,7 @@
         <ModalDialog.Title>
           <div style={{ wordBreak: 'break-word' }}>
             <Truncate lines={2} className="font-weight-bold small mt-3">
-              {file?.displayName}
+              {file?.expandedPath}
             </Truncate>
           </div>
         </ModalDialog.Title>

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -20,7 +20,7 @@ interface LibraryBlockProps {
 const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(600);
-  const lmsBaseUrl = getConfig().LMS_BASE_URL;
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
 
   const intl = useIntl();
 
@@ -74,7 +74,7 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
       <iframe
         ref={iframeRef}
         title={intl.formatMessage(messages.iframeTitle)}
-        src={`${lmsBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
+        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
         data-testid="block-preview"
         style={{
           width: '100%',