style: Style nits on card component

src/library-authoring/components/ComponentCard.jsx

@@ -25,17 +25,17 @@ const ComponentCardMenu = () => (
       variant="primary"
     />
     <Dropdown.Menu>
-      <Dropdown.Item>
+      <Dropdown.Item disabled>
         <FormattedMessage
           {...messages.menuEdit}
         />
       </Dropdown.Item>
-      <Dropdown.Item>
+      <Dropdown.Item disabled>
         <FormattedMessage
           {...messages.menuCopyToClipboard}
         />
       </Dropdown.Item>
-      <Dropdown.Item>
+      <Dropdown.Item disabled>
         <FormattedMessage
           {...messages.menuAddToCollection}
         />
@@ -50,6 +50,7 @@ const ComponentCard = ({
   description,
   tagCount,
   blockType,
+  blockTypeDisplayName,
 }) => {
   const componentIcon = getItemIcon(blockType);
 
@@ -70,9 +71,9 @@ const ComponentCard = ({
         <Card.Body>
           <Card.Section>
             <Stack direction="horizontal" className="d-flex justify-content-between">
-              <Stack direction="horizontal">
+              <Stack direction="horizontal" gap="1">
                 <Icon src={componentIcon} size="sm" />
-                <span className="small">{blockType}</span>
+                <span className="small">{blockTypeDisplayName}</span>
               </Stack>
               <TagCount count={tagCount} />
             </Stack>
@@ -99,6 +100,7 @@ ComponentCard.propTypes = {
   description: PropTypes.string.isRequired,
   tagCount: PropTypes.number.isRequired,
   blockType: PropTypes.string.isRequired,
+  blockTypeDisplayName: PropTypes.string.isRequired,
 };
 
 export default ComponentCard;

src/library-authoring/components/ComponentCard.scss

@@ -1,4 +1,8 @@
 .library-component-card {
+  .pgn__card {
+    height: 100%;
+  }
+
   .library-component-header {
     border-top-left-radius: .375rem;
     border-top-right-radius: .375rem;

src/library-authoring/components/LibraryComponents.jsx

@@ -4,7 +4,7 @@ import React, { useEffect, useMemo } from 'react';
 
 import { CardGrid } from '@openedx/paragon';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
-import { useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
+import { useLibraryBlockTypes, useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
 import ComponentCard from './ComponentCard';
 
 /**
@@ -25,6 +25,18 @@ const LibraryComponents = ({ libraryId, filter: { searchKeywords } }) => {
     fetchNextPage,
   } = useLibraryComponents(libraryId, searchKeywords);
 
+  // TODO add this to LibraryContext
+  const { data: blockTypesData } = useLibraryBlockTypes(libraryId);
+  const blockTypes = useMemo(() => {
+    const result = {};
+    if (blockTypesData) {
+      blockTypesData.forEach(blockType => {
+        result[blockType.blockType] = blockType;
+      });
+    }
+    return result;
+  }, [blockTypesData]);
+
   const { showLoading, showContent } = useMemo(() => {
     let resultShowLoading = false;
     let resultShowContent = false;
@@ -80,7 +92,7 @@ const LibraryComponents = ({ libraryId, filter: { searchKeywords } }) => {
       }}
       hasEqualColumnHeights
     >
-      { showContent && hits.map((component) => {
+      { showContent ? hits.map((component) => {
         let tagCount = 0;
         if (component.tags) {
           tagCount = component.tags.implicitCount || 0;
@@ -92,9 +104,10 @@ const LibraryComponents = ({ libraryId, filter: { searchKeywords } }) => {
             description={component.formatted.content?.htmlContent ?? ''}
             tagCount={tagCount}
             blockType={component.blockType}
+            blockTypeDisplayName={blockTypes[component.blockType]?.displayName ?? ''}
           />
         );
-      })}
+      }) : <ComponentCard isLoading />}
       { showLoading && <ComponentCard isLoading /> }
     </CardGrid>
   );

src/library-authoring/data/api.js

@@ -8,7 +8,11 @@ const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
  * @param {string} libraryId - The ID of the library to fetch.
  */
 export const getContentLibraryApiUrl = (libraryId) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
-// export const getLibraryBlocks = (libraryId) => `${getApiBaseUrl()}/`
+/**
+ * Get the URL for get block types of library.
+ * @param {string} libraryId - The ID of the library to fetch.
+ */
+export const getLibraryBlockTypesUrl = (libraryId) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/block_types/`;
 
 /**
  * Fetch a content library by its ID.
@@ -23,3 +27,12 @@ export async function getContentLibrary(libraryId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentLibraryApiUrl(libraryId));
   return camelCaseObject(data);
 }
+
+export async function getLibraryBlockTypes(libraryId) {
+  if (!libraryId) {
+    throw new Error('libraryId is required');
+  }
+
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockTypesUrl(libraryId));
+  return camelCaseObject(data);
+}

src/library-authoring/data/apiHook.js

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { MeiliSearch } from 'meilisearch';
 
 import { useContentSearchConnection, useContentSearchResults } from '../../search-modal';
-import { getContentLibrary } from './api';
+import { getContentLibrary, getLibraryBlockTypes } from './api';
 
 /**
  * Hook to fetch a content library by its ID.
@@ -17,6 +17,17 @@ export const useContentLibrary = (libraryId) => (
   })
 );
 
+/**
+ * Hook to fetch a content library by its ID.
+ * @param {string} [libraryId] - The ID of the library to fetch.
+ */
+export const useLibraryBlockTypes = (libraryId) => (
+  useQuery({
+    queryKey: ['contentLibrary', 'libraryBlockTypes', libraryId],
+    queryFn: () => getLibraryBlockTypes(libraryId),
+  })
+);
+
 /**
  * Hook to fetch components in a library.
  * @param {string} libraryId - The ID of the library to fetch.