feat: List XBlock assets (static files) in the component details tab too

src/library-authoring/component-info/ComponentAdvancedInfo.tsx

@@ -7,11 +7,11 @@ import {
   OverlayTrigger,
   Tooltip,
 } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, FormattedNumber, useIntl } from '@edx/frontend-platform/i18n';
 
 import { LoadingSpinner } from '../../generic/Loading';
 import { CodeEditor, EditorAccessor } from '../../generic/CodeEditor';
-import { useUpdateXBlockOLX, useXBlockOLX } from '../data/apiHooks';
+import { useUpdateXBlockOLX, useXBlockAssets, useXBlockOLX } from '../data/apiHooks';
 import messages from './messages';
 
 interface Props {
@@ -22,6 +22,7 @@ export const ComponentAdvancedInfo: React.FC<Props> = ({ usageKey }) => {
   const intl = useIntl();
   // TODO: hide the "Edit" button if the library is read only
   const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(usageKey);
+  const { data: assets, isLoading: areAssetsLoading } = useXBlockAssets(usageKey);
   const editorRef = React.useRef<EditorAccessor | undefined>(undefined);
   const [isEditingOLX, setEditingOLX] = React.useState(false);
   const olxUpdater = useUpdateXBlockOLX(usageKey);
@@ -88,6 +89,15 @@ export const ComponentAdvancedInfo: React.FC<Props> = ({ usageKey }) => {
           );
         })()}
         </dd>
+        <dt><FormattedMessage {...messages.advancedDetailsAssets} /></dt>
+        <dd>
+          <ul>
+            { areAssetsLoading ? <li><LoadingSpinner /></li> : null }
+            { assets?.map(a => (
+              <li key={a.path}><a href={a.url}>{a.path}</a> (<FormattedNumber value={a.size} notation="compact" unit="byte" unitDisplay="narrow" />)</li>
+            )) }
+          </ul>
+        </dd>
       </dl>
     </Collapsible>
   );

src/library-authoring/component-info/messages.ts

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'Advanced details',
     description: 'Heading for the advanced technical details of a component',
   },
+  advancedDetailsAssets: {
+    id: 'course-authoring.library-authoring.component.advanced.assets',
+    defaultMessage: 'Assets (Files)',
+    description: 'Heading for files attached to the component',
+  },
   advancedDetailsOLX: {
     id: 'course-authoring.library-authoring.component.advanced.olx',
     defaultMessage: 'OLX Source',

src/library-authoring/data/api.ts

@@ -46,6 +46,10 @@ export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/a
   * Get the URL for the xblock OLX API
   */
 export const getXBlockOLXApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/olx/`;
+/**
+  * Get the URL for the xblock Assets List API
+  */
+export const getXBlockAssetsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/assets/`;
 /**
  * Get the URL for the Library Collections API.
  */
@@ -327,6 +331,14 @@ export async function setXBlockOLX(usageKey: string, newOLX: string): Promise<st
   return data.olx;
 }
 
+/**
+ * Fetch the asset (static file) list for the given XBlock.
+ */
+export async function getXBlockAssets(usageKey: string): Promise<{ path: string; url: string; size: number }[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockAssetsApiUrl(usageKey));
+  return data.files;
+}
+
 /**
  * Get the collection metadata.
  */

src/library-authoring/data/apiHooks.ts

@@ -32,6 +32,7 @@ import {
   type CreateLibraryCollectionDataRequest,
   getCollectionMetadata,
   setXBlockOLX,
+  getXBlockAssets,
 } from './api';
 
 export const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -83,6 +84,8 @@ export const xblockQueryKeys = {
   xblockFields: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'fields'],
   /** OLX (XML representation of the fields/content) */
   xblockOLX: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'OLX'],
+  /** assets (static files) */
+  xblockAssets: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'assets'],
   componentMetadata: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'componentMetadata'],
 };
 
@@ -301,6 +304,15 @@ export const useUpdateXBlockOLX = (usageKey: string) => {
   });
 };
 
+/** Get the list of assets (static files) attached to a library component */
+export const useXBlockAssets = (usageKey: string) => (
+  useQuery({
+    queryKey: xblockQueryKeys.xblockAssets(usageKey),
+    queryFn: () => getXBlockAssets(usageKey),
+    enabled: !!usageKey,
+  })
+);
+
 /**
  * Get the metadata for a collection in a library
  */