feat: arbitrary asset upload/deletion for Library Components [FC-0062] (#1430)

Allow users to upload and delete assets associated with Content Library
components via the sidebar panel, under the "Advanced Details" section
of the "Details" tab. This is intended as a debug tool and power-user
feature, similar to the OLX editor provided there. It's also serving as
our interim image-upload solution, because it was easier to implement
than the full modal that integrates with TinyMCE.

---------

Co-authored-by: XnpioChV <xnpiochv@gmail.com>

src/library-authoring/data/api.ts

@@ -444,6 +444,14 @@ export async function getXBlockAssets(usageKey: string): Promise<{ path: string;
   return data.files;
 }
 
+/**
+ * Delete a single asset file
+ */
+// istanbul ignore next
+export async function deleteXBlockAsset(usageKey: string, path: string): Promise<void> {
+  await getAuthenticatedHttpClient().delete(getXBlockAssetsApiUrl(usageKey) + encodeURIComponent(path));
+}
+
 /**
  * Get the collection metadata.
  */

src/library-authoring/data/apiHooks.ts

@@ -6,6 +6,7 @@ import {
   type Query,
   type QueryClient,
 } from '@tanstack/react-query';
+import { useCallback } from 'react';
 
 import { getLibraryId } from '../../generic/key-utils';
 import {
@@ -42,6 +43,7 @@ import {
   updateComponentCollections,
   removeComponentsFromCollection,
   publishXBlock,
+  deleteXBlockAsset,
 } from './api';
 
 export const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -397,6 +399,27 @@ export const useXBlockAssets = (usageKey: string) => (
   })
 );
 
+/** Refresh the list of assets (static files) attached to a library component */
+export const useInvalidateXBlockAssets = (usageKey: string) => {
+  const client = useQueryClient();
+  return useCallback(() => {
+    client.invalidateQueries({ queryKey: xblockQueryKeys.xblockAssets(usageKey) });
+  }, [usageKey]);
+};
+
+/**
+ * Use this mutation to delete an asset file from a library
+ */
+export const useDeleteXBlockAsset = (usageKey: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (path: string) => deleteXBlockAsset(usageKey, path),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: xblockQueryKeys.xblockAssets(usageKey) });
+    },
+  });
+};
+
 /**
  * Get the metadata for a collection in a library
  */