feat: publish single library component (#1407)

src/library-authoring/data/api.mocks.ts

@@ -315,6 +315,7 @@ export async function mockLibraryBlockMetadata(usageKey: string): Promise<api.Li
     case thisMock.usageKeyNeverPublished: return thisMock.dataNeverPublished;
     case thisMock.usageKeyPublished: return thisMock.dataPublished;
     case thisMock.usageKeyWithCollections: return thisMock.dataWithCollections;
+    case thisMock.usageKeyPublishDisabled: return thisMock.dataPublishDisabled;
     case thisMock.usageKeyThirdPartyXBlock: return thisMock.dataThirdPartyXBlock;
     case thisMock.usageKeyForTags: return thisMock.dataPublished;
     default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
@@ -354,6 +355,12 @@ mockLibraryBlockMetadata.dataPublished = {
   tagsCount: 0,
   collections: [],
 } satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.usageKeyPublishDisabled = 'lb:Axim:TEST2-disabled:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+mockLibraryBlockMetadata.dataPublishDisabled = {
+  ...mockLibraryBlockMetadata.dataPublished,
+  id: mockLibraryBlockMetadata.usageKeyPublishDisabled,
+  modified: '2024-06-11T13:54:21Z',
+} satisfies api.LibraryBlockMetadata;
 mockLibraryBlockMetadata.usageKeyThirdPartyXBlock = mockXBlockFields.usageKeyThirdParty;
 mockLibraryBlockMetadata.dataThirdPartyXBlock = {
   ...mockLibraryBlockMetadata.dataPublished,

src/library-authoring/data/api.ts

@@ -56,6 +56,10 @@ export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/a
   * Get the URL for the xblock OLX API
   */
 export const getXBlockOLXApiUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}olx/`;
+/**
+ * Get the URL for the xblock Publish API
+ */
+export const getXBlockPublishApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/publish/`;
 /**
   * Get the URL for the xblock Assets List API
   */
@@ -198,12 +202,12 @@ export interface LibraryBlockMetadata {
   defKey: string | null;
   displayName: string;
   lastPublished: string | null;
-  publishedBy: string | null,
-  lastDraftCreated: string | null,
+  publishedBy: string | null;
+  lastDraftCreated: string | null;
   lastDraftCreatedBy: string | null,
   hasUnpublishedChanges: boolean;
-  created: string | null,
-  modified: string | null,
+  created: string | null;
+  modified: string | null;
   tagsCount: number;
   collections: CollectionMetadata[];
 }
@@ -421,6 +425,14 @@ export async function setXBlockOLX(usageKey: string, newOLX: string): Promise<st
   return data.olx;
 }
 
+/**
+ * Publish the given XBlock.
+ */
+export async function publishXBlock(usageKey: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getXBlockPublishApiUrl(usageKey));
+}
+
 /**
  * Fetch the asset (static file) list for the given XBlock.
  */

src/library-authoring/data/apiHooks.ts

@@ -41,6 +41,7 @@ import {
   getXBlockAssets,
   updateComponentCollections,
   removeComponentsFromCollection,
+  publishXBlock,
 } from './api';
 
 export const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -373,6 +374,20 @@ export const useUpdateXBlockOLX = (usageKey: string) => {
   });
 };
 
+/**
+ * Publish changes to a library component
+ */
+export const usePublishComponent = (usageKey: string) => {
+  const queryClient = useQueryClient();
+  const contentLibraryId = getLibraryId(usageKey);
+  return useMutation({
+    mutationFn: () => publishXBlock(usageKey),
+    onSettled: () => {
+      invalidateComponentData(queryClient, contentLibraryId, usageKey);
+    },
+  });
+};
+
 /** Get the list of assets (static files) attached to a library component */
 export const useXBlockAssets = (usageKey: string) => (
   useQuery({