feat: home studio search filters

src/hooks.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { history } from '@edx/frontend-platform';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -32,3 +32,26 @@ export const useEscapeClick = ({ onEscape, dependency }) => {
     };
   }, [dependency]);
 };
+
+/**
+ * Custom hook to debounce a string value.
+ *
+ * @param {string} value - The string value to be debounced.
+ * @param {number} [delay=500] - The delay in milliseconds before updating the debounced value.
+ * @returns {string} The debounced string value.
+ */
+export const useDebounce = (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

src/studio-home/StudioHome.jsx

@@ -37,6 +37,7 @@ const StudioHome = ({ intl }) => {
     showNewCourseContainer,
     isShowOrganizationDropdown,
     hasAbilityToCreateNewCourse,
+    isFiltered,
     setShowNewCourseContainer,
     dispatch,
   } = useStudioHome();
@@ -98,7 +99,7 @@ const StudioHome = ({ intl }) => {
   }
 
   const headerButtons = userIsActive ? getHeaderButtons() : [];
-  if (isLoadingPage) {
+  if (isLoadingPage && !isFiltered) {
     return (<Loading />);
   }
 
@@ -137,7 +138,7 @@ const StudioHome = ({ intl }) => {
               tabsData={studioHomeData}
               showNewCourseContainer={showNewCourseContainer}
               onClickNewCourse={() => setShowNewCourseContainer(true)}
-              isShowProcessing={isShowProcessing}
+              isShowProcessing={isShowProcessing && !isFiltered}
               dispatch={dispatch}
             />
           </section>

src/studio-home/__mocks__/studioHomeMock.js

@@ -12,6 +12,7 @@ module.exports = {
       rerunLink: '/course_rerun/course-v1:MachineLearning+123+2023',
       run: '2023',
       url: '/course/course-v1:MachineLearning+123+2023',
+      cmsLink: '//localhost:18010/courses/course-v1:MachineLearning+123+2023',
     },
     {
       courseKey: 'course-v1:Design+123+e.g.2025',
@@ -22,6 +23,7 @@ module.exports = {
       rerunLink: '/course_rerun/course-v1:Design+123+e.g.2025',
       run: 'e.g.2025',
       url: '/course/course-v1:Design+123+e.g.2025',
+      cmsLink: '//localhost:18010/courses/course-v1:Design+123+e.g.2025',
     },
   ],
   canCreateOrganizations: true,

src/studio-home/card-item/CardItem.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, getConfig } from '@edx/frontend-platform';
@@ -45,13 +45,17 @@ describe('<CardItem />', () => {
   });
   it('should render correct links for non-library course', () => {
     const props = studioHomeMock.archivedCourses[0];
-    const { getByText } = render(<RootWrapper {...props} />);
+    const { getByText, getByTestId } = render(<RootWrapper {...props} />);
     const courseTitleLink = getByText(props.displayName);
     expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    const dropDownMenu = getByTestId('toggle-dropdown');
+    fireEvent.click(dropDownMenu);
     const btnReRunCourse = getByText(messages.btnReRunText.defaultMessage);
     expect(btnReRunCourse).toHaveAttribute('href', props.rerunLink);
     const viewLiveLink = getByText(messages.viewLiveBtnText.defaultMessage);
     expect(viewLiveLink).toHaveAttribute('href', props.lmsLink);
+    const editInStudioLink = getByText(messages.editStudioBtnText.defaultMessage);
+    expect(editInStudioLink).toHaveAttribute('href', props.cmsLink);
   });
   it('should render course details for library course', () => {
     const props = { ...studioHomeMock.archivedCourses[0], isLibraries: true };

src/studio-home/card-item/index.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { ActionRow, Card, Hyperlink } from '@openedx/paragon';
+import {
+  Card,
+  Hyperlink,
+  Dropdown,
+  IconButton,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -10,7 +16,16 @@ import { getStudioHomeData } from '../data/selectors';
 import messages from '../messages';
 
 const CardItem = ({
-  intl, displayName, lmsLink, rerunLink, org, number, run, isLibraries, url,
+  intl,
+  displayName,
+  lmsLink,
+  rerunLink,
+  org,
+  number,
+  run,
+  isLibraries,
+  url,
+  cmsLink,
 }) => {
   const {
     allowCourseReruns,
@@ -41,16 +56,28 @@ const CardItem = ({
         )}
         subtitle={subtitle}
         actions={showActions && (
-          <ActionRow>
-            {isShowRerunLink && (
-              <Hyperlink className="small" destination={rerunLink}>
-                {intl.formatMessage(messages.btnReRunText)}
-              </Hyperlink>
-            )}
-            <Hyperlink className="small ml-3" destination={lmsLink}>
-              {intl.formatMessage(messages.viewLiveBtnText)}
-            </Hyperlink>
-          </ActionRow>
+          <Dropdown>
+            <Dropdown.Toggle
+              as={IconButton}
+              iconAs={MoreHoriz}
+              variant="primary"
+              data-testid="toggle-dropdown"
+            />
+            <Dropdown.Menu>
+              {isShowRerunLink && (
+                <Dropdown.Item href={rerunLink}>
+                  {messages.btnReRunText.defaultMessage}
+                </Dropdown.Item>
+              )}
+              <Dropdown.Item href={lmsLink}>
+                {intl.formatMessage(messages.viewLiveBtnText)}
+              </Dropdown.Item>
+              <Dropdown.Item href={cmsLink}>
+                {intl.formatMessage(messages.editStudioBtnText)}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+
         )}
       />
     </Card>
@@ -62,12 +89,14 @@ CardItem.defaultProps = {
   rerunLink: '',
   lmsLink: '',
   run: '',
+  cmsLink: '',
 };
 
 CardItem.propTypes = {
   intl: intlShape.isRequired,
   displayName: PropTypes.string.isRequired,
   lmsLink: PropTypes.string,
+  cmsLink: PropTypes.string,
   rerunLink: PropTypes.string,
   org: PropTypes.string.isRequired,
   run: PropTypes.string,

src/studio-home/data/api.js

@@ -1,4 +1,4 @@
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
@@ -16,8 +16,18 @@ export async function getStudioHomeData() {
   return camelCaseObject(data);
 }
 
-export async function getStudioHomeCourses(search) {
-  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v1/home/courses${search}`);
+/**
+ * Get's studio home courses.
+ * @param {string} search - Query string parameters for filtering the courses.
+ * @param {object} customParams - Additional custom parameters for the API request.
+ * @returns {Promise<Object>} - A Promise that resolves to the response data containing the studio home courses.
+ * Note: We are changing /api/contentstore/v1 to /api/contentstore/v2 due to upcoming breaking changes.
+ * Features such as pagination, filtering, and ordering are better handled in the new version.
+ * Please refer to this PR for further details: https://github.com/openedx/edx-platform/pull/34173
+ */
+export async function getStudioHomeCourses(search, customParams) {
+  const customParamsFormat = snakeCaseObject(customParams);
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v2/home/courses${search}`, { params: customParamsFormat });
   return camelCaseObject(data);
 }
 

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

@@ -44,7 +44,7 @@ describe('studio-home api calls', () => {
   });
 
   fit('should get studio courses data', async () => {
-    const apiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/courses`;
+    const apiLink = `${getApiBaseUrl()}/api/contentstore/v2/home/courses`;
     axiosMock.onGet(apiLink).reply(200, generateGetStudioCoursesApiResponse());
     const result = await getStudioHomeCourses('');
     const expected = generateGetStudioCoursesApiResponse();

src/studio-home/data/selectors.js

@@ -1,3 +1,4 @@
 export const getStudioHomeData = state => state.studioHome.studioHomeData;
 export const getLoadingStatuses = (state) => state.studioHome.loadingStatuses;
 export const getSavingStatuses = (state) => state.studioHome.savingStatuses;
+export const getStudioHomeCoursesParams = (state) => state.studioHome.studioHomeCoursesCustomParams;

src/studio-home/data/slice.js

@@ -17,6 +17,15 @@ const slice = createSlice({
       deleteNotificationSavingStatus: '',
     },
     studioHomeData: {},
+    studioHomeCoursesCustomParams: {
+      currentPage: 1,
+      search: undefined,
+      order: 'display_name',
+      archivedOnly: undefined,
+      activeOnly: undefined,
+      isFiltered: false,
+      cleanFilters: false,
+    },
   },
   reducers: {
     updateLoadingStatuses: (state, { payload }) => {
@@ -29,15 +38,21 @@ const slice = createSlice({
       Object.assign(state.studioHomeData, payload);
     },
     fetchCourseDataSuccess: (state, { payload }) => {
-      const { courses, archivedCourses, inProcessCourseActions } = payload;
+      const { courses, archivedCourses = [], inProcessCourseActions } = payload.results;
+      const { numPages, count } = payload;
       state.studioHomeData.courses = courses;
       state.studioHomeData.archivedCourses = archivedCourses;
       state.studioHomeData.inProcessCourseActions = inProcessCourseActions;
+      state.studioHomeData.numPages = numPages;
+      state.studioHomeData.coursesCount = count;
     },
     fetchLibraryDataSuccess: (state, { payload }) => {
       const { libraries } = payload;
       state.studioHomeData.libraries = libraries;
     },
+    updateStudioHomeCoursesCustomParams: (state, { payload }) => {
+      state.studioHomeCoursesCustomParams = { ...payload };
+    },
   },
 });
 
@@ -47,6 +62,7 @@ export const {
   fetchStudioHomeDataSuccess,
   fetchCourseDataSuccess,
   fetchLibraryDataSuccess,
+  updateStudioHomeCoursesCustomParams,
 } = slice.actions;
 
 export const {

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

@@ -0,0 +1,61 @@
+import { reducer, updateStudioHomeCoursesCustomParams } from './slice';
+
+import { RequestStatus } from '../../data/constants';
+
+describe('updateStudioHomeCoursesCustomParams action', () => {
+  const initialState = {
+    loadingStatuses: {
+      studioHomeLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseNotificationLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLoadingStatus: RequestStatus.IN_PROGRESS,
+      libraryLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatuses: {
+      courseCreatorSavingStatus: '',
+      deleteNotificationSavingStatus: '',
+    },
+    studioHomeData: {},
+    studioHomeCoursesCustomParams: {
+      currentPage: 1,
+      search: undefined,
+      order: 'display_name',
+      archivedOnly: undefined,
+      activeOnly: undefined,
+      isFiltered: false,
+      cleanFilters: false,
+    },
+  };
+
+  it('should return the initial state', () => {
+    const result = reducer(undefined, { type: undefined });
+    expect(result).toEqual(initialState);
+  });
+
+  it('should update the payload passed in studioHomeCoursesCustomParams', () => {
+    const newState = {
+      ...initialState,
+      studioHomeCoursesCustomParams: {
+        currentPage: 2,
+        search: 'test',
+        order: 'display_name',
+        archivedOnly: true,
+        activeOnly: true,
+        isFiltered: true,
+        cleanFilters: true,
+      },
+    };
+
+    const payload = {
+      currentPage: 2,
+      search: 'test',
+      order: 'display_name',
+      archivedOnly: true,
+      activeOnly: true,
+      isFiltered: true,
+      cleanFilters: true,
+    };
+
+    const result = reducer(initialState, updateStudioHomeCoursesCustomParams(payload));
+    expect(result).toEqual(newState);
+  });
+});

src/studio-home/data/thunks.js

@@ -14,7 +14,7 @@ import {
   fetchLibraryDataSuccess,
 } from './slice';
 
-function fetchStudioHomeData(search, hasHomeData) {
+function fetchStudioHomeData(search, hasHomeData, customParams = {}) {
   return async (dispatch) => {
     dispatch(updateLoadingStatuses({ studioHomeLoadingStatus: RequestStatus.IN_PROGRESS }));
     dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.IN_PROGRESS }));
@@ -30,7 +30,7 @@ function fetchStudioHomeData(search, hasHomeData) {
       }
     }
     try {
-      const coursesData = await getStudioHomeCourses(search || '');
+      const coursesData = await getStudioHomeCourses(search || '', customParams);
       dispatch(fetchCourseDataSuccess(coursesData));
       dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.SUCCESSFUL }));
     } catch (error) {