feat: add component sidebar manage tab

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

@@ -8,6 +8,7 @@ import {
 } from '@openedx/paragon';
 
 import { ComponentMenu } from '../components';
+import ComponentManagement from './ComponentManagement';
 import messages from './messages';
 
 interface ComponentInfoProps {
@@ -37,7 +38,7 @@ const ComponentInfo = ({ usageKey } : ComponentInfoProps) => {
           Preview tab placeholder
         </Tab>
         <Tab eventKey="manage" title={intl.formatMessage(messages.manageTabTitle)}>
-          Manage tab placeholder
+          <ComponentManagement usageKey={usageKey} />
         </Tab>
         <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
           Details tab placeholder

src/library-authoring/component-info/ComponentInfoHeader.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';

src/library-authoring/component-info/ComponentManagement.test.tsx

@@ -0,0 +1,18 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+} from '../../testUtils';
+import { mockLibraryBlockMetadata } from '../data/api.mocks';
+import ComponentManagement from './ComponentManagement';
+
+describe('<ComponentManagement />', () => {
+  it('should render draft status', async () => {
+    initializeMocks();
+    mockLibraryBlockMetadata.applyMock();
+    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+    expect(await screen.findByText('Draft')).toBeInTheDocument();
+    expect(screen.queryByText('Draft(Never Published)')).not.toBeInTheDocument();
+    expect(screen.queryByText('Draft saved on June 20, 2024 at 13:54 UTC.)')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible, Icon, Stack } from '@openedx/paragon';
+import { Tag } from '@openedx/paragon/icons';
+
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+import StatusWidget from '../generic/status-widget';
+import messages from './messages';
+
+interface ComponentManagementProps {
+  usageKey: string;
+}
+const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
+  const intl = useIntl();
+  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+
+  if (!componentMetadata) {
+    return null;
+  }
+
+  return (
+    <Stack gap={3}>
+      <StatusWidget
+        {...componentMetadata}
+      />
+      {[true, 'true'].includes(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES)
+        && (
+        <Collapsible
+          defaultOpen
+          title={(
+            <Stack gap={1} direction="horizontal">
+              <Icon src={Tag} />
+              {intl.formatMessage(messages.manageTabTagsTitle)}
+            </Stack>
+          )}
+          className="border-0"
+        >
+          Tags placeholder
+        </Collapsible>
+        )}
+      <Collapsible
+        defaultOpen
+        title={(
+          <Stack gap={1} direction="horizontal">
+            <Icon src={Tag} />
+            {intl.formatMessage(messages.manageTabCollectionsTitle)}
+          </Stack>
+        )}
+        className="border-0"
+      >
+        Collections placeholder
+      </Collapsible>
+    </Stack>
+  );
+};
+
+export default ComponentManagement;

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

@@ -36,6 +36,16 @@ const messages = defineMessages({
     defaultMessage: 'Manage',
     description: 'Title for manage tab',
   },
+  manageTabTagsTitle: {
+    id: 'course-authoring.library-authoring.component.manage-tab.tags-title',
+    defaultMessage: 'Tags',
+    description: 'Title for the Tags container in the management tab',
+  },
+  manageTabCollectionsTitle: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections-title',
+    defaultMessage: 'Collections',
+    description: 'Title for the Collections container in the management tab',
+  },
   detailsTabTitle: {
     id: 'course-authoring.library-authoring.component.details-tab.title',
     defaultMessage: 'Details',

src/library-authoring/components/LibraryComponents.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

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

@@ -127,3 +127,33 @@ mockXBlockFields.dataHtml = {
   metadata: { displayName: 'Introduction to Testing' },
 } satisfies api.XBlockFields;
 mockXBlockFields.applyMock = () => { jest.spyOn(api, 'getXBlockFields').mockImplementation(mockXBlockFields); };
+
+/**
+ * Mock for `getLibraryBlockMetadata()`
+ *
+ * This mock returns different data/responses depending on the ID of the block
+ * that you request. Use `mockLibraryBlockMetadata.applyMock()` to apply it to the whole
+ * test suite.
+ */
+export async function mockLibraryBlockMetadata(usageKey: string): Promise<api.LibraryBlockMetadata> {
+  const thisMock = mockLibraryBlockMetadata;
+  switch (usageKey) {
+    case thisMock.usageKeyNeverPublished: return thisMock.dataNeverPublished;
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+mockLibraryBlockMetadata.usageKeyNeverPublished = 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd';
+mockLibraryBlockMetadata.dataNeverPublished = {
+  id: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+  defKey: null,
+  blockType: 'html',
+  displayName: 'Introduction to Testing',
+  lastPublished: null,
+  publishedBy: null,
+  lastDraftCreated: null,
+  lastDraftCreatedBy: null,
+  hasUnpublishedChanges: false,
+  created: '2024-06-20T13:54:21Z',
+  tagsCount: 0,
+} satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.applyMock = () => { jest.spyOn(api, 'getLibraryBlockMetadata').mockImplementation(mockLibraryBlockMetadata); };

src/library-authoring/data/api.ts

@@ -15,6 +15,13 @@ export const getLibraryBlockTypesUrl = (libraryId: string) => `${getApiBaseUrl()
  * Get the URL for create content in library.
  */
 export const getCreateLibraryBlockUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/blocks/`;
+/**
+ * Get the URL for library block metadata.
+ */
+export const getLibraryBlockMetadataUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/`;
+/**
+ * Get the URL for content library list API.
+ */
 export const getContentLibraryV2ListApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
 /**
  * Get the URL for commit/revert changes in library.
@@ -96,12 +103,17 @@ export interface CreateBlockDataRequest {
   definitionId: string;
 }
 
-export interface CreateBlockDataResponse {
+export interface LibraryBlockMetadata {
   id: string;
   blockType: string;
   defKey: string | null;
   displayName: string;
+  lastPublished: string | null;
+  publishedBy: null,
+  lastDraftCreated: null,
+  lastDraftCreatedBy: null,
   hasUnpublishedChanges: boolean;
+  created: '2024-06-20T13:54:21Z',
   tagsCount: number;
 }
 
@@ -147,7 +159,7 @@ export async function createLibraryBlock({
   libraryId,
   blockType,
   definitionId,
-}: CreateBlockDataRequest): Promise<CreateBlockDataResponse> {
+}: CreateBlockDataRequest): Promise<LibraryBlockMetadata> {
   const client = getAuthenticatedHttpClient();
   const { data } = await client.post(
     getCreateLibraryBlockUrl(libraryId),
@@ -210,7 +222,7 @@ export async function revertLibraryChanges(libraryId: string) {
 export async function libraryPasteClipboard({
   libraryId,
   blockId,
-}: LibraryPasteClipboardRequest): Promise<CreateBlockDataResponse> {
+}: LibraryPasteClipboardRequest): Promise<LibraryBlockMetadata> {
   const client = getAuthenticatedHttpClient();
   const { data } = await client.post(
     getLibraryPasteClipboardUrl(libraryId),
@@ -221,6 +233,14 @@ export async function libraryPasteClipboard({
   return data;
 }
 
+/**
+ * Fetch library block metadata.
+ */
+export async function getLibraryBlockMetadata(usageKey: string): Promise<LibraryBlockMetadata> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockMetadataUrl(usageKey));
+  return camelCaseObject(data);
+}
+
 /**
  * Fetch xblock fields.
  */

src/library-authoring/data/apiHooks.ts

@@ -16,6 +16,7 @@ import {
   revertLibraryChanges,
   updateLibraryMetadata,
   libraryPasteClipboard,
+  getLibraryBlockMetadata,
   getXBlockFields,
   updateXBlockFields,
 } from './api';
@@ -52,6 +53,14 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
+  // FixMe: Move this to another key map
+  componentMetadata: (usageKey: string) => [
+    ...libraryAuthoringQueryKeys.all,
+    ...libraryAuthoringQueryKeys.contentLibrary('lib'),
+    'content',
+    usageKey,
+    'componentMetadata',
+  ],
   xblockFields: (contentLibraryId: string, usageKey: string) => [
     ...libraryAuthoringQueryKeys.all,
     ...libraryAuthoringQueryKeys.contentLibrary(contentLibraryId),
@@ -168,6 +177,13 @@ export const useLibraryPasteClipboard = () => {
   });
 };
 
+export const useLibraryBlockMetadata = (usageId: string) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.componentMetadata(usageId),
+    queryFn: () => getLibraryBlockMetadata(usageId),
+  })
+);
+
 export const useXBlockFields = (contentLibrayId: string, usageKey: string) => (
   useQuery({
     queryKey: libraryAuthoringQueryKeys.xblockFields(contentLibrayId, usageKey),

src/library-authoring/generic/index.scss

@@ -0,0 +1 @@
+@import "./status-widget/StatusWidget";

src/library-authoring/library-info/LibraryPublishStatus.scss → src/library-authoring/generic/status-widget/StatusWidget.scss

@@ -1,4 +1,4 @@
-.library-publish-status {
+.status-widget {
   &.draft-status {
     background-color: #FDF3E9;
     border-top: 4px solid #F4B57B;
@@ -9,3 +9,4 @@
     border-top: 4px solid $info-400;
   }
 }
+