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.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.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,7 +103,7 @@ export interface CreateBlockDataRequest {
   definitionId: string;
 }
 
-export interface CreateBlockDataResponse {
+export interface LibraryBlockMetadata {
   id: string;
   blockType: string;
   defKey: string | null;
@@ -147,7 +154,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 +217,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 +228,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;
   }
 }
+