chore: Rebase to clear branch

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -170,7 +170,6 @@ describe('<LibraryAuthoringPage />', () => {
     expect(queryByText('Recently Modified')).not.toBeInTheDocument();
     expect(queryByText('Collections (0)')).not.toBeInTheDocument();
     expect(queryByText('Components (6)')).not.toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
 
     // Navigate to the collections tab
     fireEvent.click(getByRole('tab', { name: 'Collections' }));
@@ -186,7 +185,6 @@ describe('<LibraryAuthoringPage />', () => {
     expect(getByText('Recently Modified')).toBeInTheDocument();
     expect(getByText('Collections (0)')).toBeInTheDocument();
     expect(getByText('Components (6)')).toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
   });
 
   it('show library without components', async () => {

src/library-authoring/LibraryAuthoringPage.tsx

@@ -103,7 +103,7 @@ const LibraryAuthoringPage = () => {
             element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
           />
           <Route
-            path={TAB_LIST.components}
+            path={TabList.components}
             element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
           />
           <Route

src/library-authoring/components/ComponentCard.jsx → src/library-authoring/components/ComponentCard.tsx

@@ -1,4 +1,3 @@
-// @ts-check
 import React from 'react';
 import {
   ActionRow,
@@ -9,13 +8,20 @@ import {
   Dropdown,
   Stack,
 } from '@openedx/paragon';
-import PropTypes from 'prop-types';
 import { MoreVert } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import TagCount from '../../generic/tag-count';
 import { getItemIcon, getComponentColor } from '../../generic/block-type-utils';
 
+type ComponentCardProps = {
+  title: string,
+  description: string,
+  tagCount: number,
+  blockType: string,
+  blockTypeDisplayName: string,
+};
+
 const ComponentCardMenu = () => (
   <Dropdown>
     <Dropdown.Toggle
@@ -54,18 +60,17 @@ export const ComponentCardLoading = () => (
 );
 
 export const ComponentCard = ({
-  isLoading,
   title,
   description,
   tagCount,
   blockType,
   blockTypeDisplayName,
-}) => {
+}: ComponentCardProps) => {
   const componentIcon = getItemIcon(blockType);
 
   return (
     <Container className="library-component-card">
-      <Card isLoading={isLoading}>
+      <Card>
         <Card.Header
           className={`library-component-header ${getComponentColor(blockType)}`}
           title={
@@ -98,16 +103,3 @@ export const ComponentCard = ({
     </Container>
   );
 };
-
-ComponentCard.defaultProps = {
-  isLoading: false,
-};
-
-ComponentCard.propTypes = {
-  isLoading: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  tagCount: PropTypes.number.isRequired,
-  blockType: PropTypes.string.isRequired,
-  blockTypeDisplayName: PropTypes.string.isRequired,
-};

src/library-authoring/components/LibraryComponents.jsx → src/library-authoring/components/LibraryComponents.tsx

@@ -5,26 +5,26 @@ import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes, useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
 import { ComponentCard, ComponentCardLoading } from './ComponentCard';
 
+type LibraryComponentsProps = {
+  libraryId: string,
+  filter: {
+    searchKeywords: string,
+  },
+  variant: string,
+};
+
 /**
  * Library Components to show components grid
  *
  * Use style to:
  *   - 'full': Show all components with Infinite scroll pagination.
  *   - 'preview': Show first 4 components without pagination.
- *
- * @type {React.FC<{
- *   libraryId: string,
- *   filter: {
- *     searchKeywords: string,
- *   },
- *   variant: 'full'|'preview',
- * }>}
  */
 const LibraryComponents = ({
   libraryId,
   filter: { searchKeywords },
   variant,
-}) => {
+}: LibraryComponentsProps) => {
   const { componentCount } = useLibraryComponentCount(libraryId, searchKeywords);
   const {
     hits,

src/library-authoring/data/api.ts

@@ -6,6 +6,10 @@ const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
  * Get the URL for the content library API.
  */
 export const getContentLibraryApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
+/**
+ * Get the URL for get block types of library.
+ */
+export const getLibraryBlockTypesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/block_types/`;
 
 export interface ContentLibrary {
   id: string;
@@ -25,6 +29,11 @@ export interface ContentLibrary {
   license: string;
 }
 
+export interface LibraryBlockType {
+  blockType: string;
+  displayName: string;
+}
+
 /**
  * Fetch a content library by its ID.
  */
@@ -36,3 +45,15 @@ export async function getContentLibrary(libraryId?: string): Promise<ContentLibr
   const { data } = await getAuthenticatedHttpClient().get(getContentLibraryApiUrl(libraryId));
   return camelCaseObject(data);
 }
+
+/**
+ * Fetch block types of a library
+ */
+export async function getLibraryBlockTypes(libraryId?: string): Promise<LibraryBlockType[]> {
+  if (!libraryId) {
+    throw new Error('libraryId is required');
+  }
+
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockTypesUrl(libraryId));
+  return camelCaseObject(data);
+}