Merge branch 'master' into rpenido/fal-3764-library-home-filter-by-co…

…ntent-type

package.json

@@ -75,7 +75,7 @@
     "formik": "2.4.6",
     "jszip": "^3.10.1",
     "lodash": "4.17.21",
-    "meilisearch": "^0.38.0",
+    "meilisearch": "^0.41.0",
     "moment": "2.30.1",
     "npm": "^10.8.1",
     "prop-types": "^15.8.1",

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -74,7 +74,7 @@ const CustomMenu = (props) => {
         <div className="d-flex flex-row justify-content-end">
           <div className="d-inline">
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectCancelRef}
               variant="tertiary"
               className="tags-drawer-cancel-button"
@@ -83,7 +83,7 @@ const CustomMenu = (props) => {
               { intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText) }
             </Button>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectAddRef}
               variant="tertiary"
               className="text-info-500 add-tags-button"
@@ -139,7 +139,7 @@ const CustomIndicatorsContainer = (props) => {
             onClick={handleCommitStagedTags}
             onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }}
             ref={selectInlineAddRef}
-            tabIndex="0"
+            tabIndex={0}
             onKeyDown={disableActionKeys} // To prevent navigating staged tags when button focused
           >
             { intl.formatMessage(messages.collapsibleInlineAddStagedTagsButtonText) }
@@ -240,7 +240,7 @@ const ContentTagsCollapsible = ({
   const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
-  const selectInlineEditModeRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectInlineEditModeRef = React.useRef(/** @type {HTMLButtonElement | null} */(null));
   const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
 
   const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
@@ -393,7 +393,7 @@ const ContentTagsCollapsible = ({
               <div className="mb-3" key={taxonomyId}>
                 <p className="text-gray-500">{intl.formatMessage(messages.collapsibleNoTagsAddedText)}
                   <Button
-                    tabIndex="0"
+                    tabIndex={0}
                     size="inline"
                     ref={selectInlineEditModeRef}
                     variant="link"

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -53,7 +53,7 @@ const TaxonomyList = ({ contentId }) => {
         values={{
           link: (
             <Button
-              tabIndex="0"
+              tabIndex={0}
               size="inline"
               variant="link"
               className="text-info-500 p-0 enable-taxonomies-button"

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -309,7 +309,7 @@ const ContentTagsDropDownSelector = ({
         ? (
           <div>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               variant="tertiary"
               iconBefore={Add}
               onClick={loadMoreTags}

src/files-and-videos/videos-page/VideoThumbnail.jsx

@@ -69,7 +69,7 @@ const VideoThumbnail = ({
               variant="primary"
               size="sm"
               onClick={fileInputControl.click}
-              tabIndex="0"
+              tabIndex={0}
             >
               {addThumbnailMessage}
             </Button>

src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx

@@ -34,7 +34,7 @@ const WhatsInClipboard = ({
       />
       <p
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex="0"
+        tabIndex={0}
         role="presentation"
         ref={triggerElementRef}
         className="whats-in-clipboard-text m-0"

src/generic/clipboard/paste-component/index.jsx

@@ -14,7 +14,7 @@ const PasteComponent = ({
   const handlePopoverToggle = (isOpen) => togglePopover(isOpen);
 
   const renderPopover = (props) => (
-    <div role="link" ref={popoverElementRef} tabIndex="0">
+    <div role="link" ref={popoverElementRef} tabIndex={0}>
       <Popover
         className="clipboard-popover"
         id="popover-positioned"

src/library/data/api.ts

@@ -0,0 +1,66 @@
+import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export interface LibraryV2 {
+  id: string,
+  type: string,
+  org: string,
+  slug: string,
+  title: string,
+  description: string,
+  numBlocks: number,
+  version: number,
+  lastPublished: string | null,
+  allowLti: boolean,
+  allowPublicLearning: boolean,
+  allowPublicRead: boolean,
+  hasUnpublishedChanges: boolean,
+  hasUnpublishedDeletes: boolean,
+  license: string,
+}
+
+export interface LibrariesV2Response {
+  next: string | null,
+  previous: string | null,
+  count: number,
+  numPages: number,
+  currentPage: number,
+  start: number,
+  results: LibraryV2[],
+}
+
+/* Additional custom parameters for the API request. */
+export interface GetLibrariesV2CustomParams {
+  /* (optional) Library type, default `complex` */
+  type?: string,
+  /* (optional) Page number of results */
+  page?: number,
+  /* (optional) The number of results on each page, default `50` */
+  pageSize?: number,
+  /* (optional) Whether pagination is supported, default `true` */
+  pagination?: boolean,
+  /* (optional) Library field to order results by. Prefix with '-' for descending */
+  order?: string,
+  /* (optional) Search query to filter v2 Libraries by */
+  search?: string,
+}
+
+/**
+ * Get's studio home v2 Libraries.
+ */
+export async function getStudioHomeLibrariesV2(customParams: GetLibrariesV2CustomParams): Promise<LibrariesV2Response> {
+  // Set default params if not passed in
+  const customParamsDefaults = {
+    type: customParams.type || 'complex',
+    page: customParams.page || 1,
+    pageSize: customParams.pageSize || 50,
+    pagination: customParams.pagination !== undefined ? customParams.pagination : true,
+    order: customParams.order || 'title',
+    textSearch: customParams.search,
+  };
+  const customParamsFormat = snakeCaseObject(customParamsDefaults);
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/libraries/v2/`, { params: customParamsFormat });
+  return camelCaseObject(data);
+}

src/search-manager/SearchFilterWidget.tsx

@@ -30,7 +30,7 @@ const SearchFilterWidget: React.FC<{
 }> = ({ appliedFilters, ...props }) => {
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = React.useState(null);
+  const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
   const clearAndClose = React.useCallback(() => {
     props.clearFilter();

src/studio-home/data/api.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -8,7 +9,6 @@ export const getCourseNotificationUrl = (url) => new URL(url, getApiBaseUrl()).h
 
 /**
  * Get's studio home data.
- * @param {string} search
  * @returns {Promise<Object>}
  */
 export async function getStudioHomeData() {
@@ -40,28 +40,6 @@ export async function getStudioHomeLibraries() {
   return camelCaseObject(data);
 }
 
-/**
- * Get's studio home v2 Libraries.
- * @param {object} customParams - Additional custom paramaters for the API request.
- * @param {string} [customParams.type] - (optional) Library type, default `complex`
- * @param {number} [customParams.page] - (optional) Page number of results
- * @param {number} [customParams.pageSize] - (optional) The number of results on each page, default `50`
- * @param {boolean} [customParams.pagination] - (optional) Whether pagination is supported, default `true`
- * @returns {Promise<Object>} - A Promise that resolves to the response data container the studio home v2 libraries.
- */
-export async function getStudioHomeLibrariesV2(customParams) {
-  // Set default params if not passed in
-  const customParamsDefaults = {
-    type: customParams.type || 'complex',
-    page: customParams.page || 1,
-    pageSize: customParams.pageSize || 50,
-    pagination: customParams.pagination !== undefined ? customParams.pagination : true,
-  };
-  const customParamsFormat = snakeCaseObject(customParamsDefaults);
-  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/libraries/v2/`, { params: customParamsFormat });
-  return camelCaseObject(data);
-}
-
 /**
  * Handle course notification requests.
  * @param {string} url

src/studio-home/data/api.test.js

@@ -13,8 +13,8 @@ import {
   getStudioHomeCourses,
   getStudioHomeCoursesV2,
   getStudioHomeLibraries,
-  getStudioHomeLibrariesV2,
 } from './api';
+import { getStudioHomeLibrariesV2 } from '../../library/data/api';
 import {
   generateGetStudioCoursesApiResponse,
   generateGetStudioHomeDataApiResponse,

src/studio-home/data/apiHooks.js → src/studio-home/data/apiHooks.ts

@@ -1,14 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { getStudioHomeLibrariesV2 } from './api';
+import { GetLibrariesV2CustomParams, getStudioHomeLibrariesV2 } from '../../library/data/api';
 
 /**
  * Builds the query to fetch list of V2 Libraries
  */
-const useListStudioHomeV2Libraries = (customParams) => (
+const useListStudioHomeV2Libraries = (customParams: GetLibrariesV2CustomParams) => (
   useQuery({
     queryKey: ['listV2Libraries', customParams],
     queryFn: () => getStudioHomeLibrariesV2(customParams),
+    keepPreviousData: true,
   })
 );