feat: search field

Author: diana-villalvazo-wgu

src/data/api.ts

@@ -9,6 +9,11 @@ export interface PaginationQueryKeys {
   pageSize: number,
 }
 
+export interface DateExtensionQueryParams extends PaginationQueryKeys {
+  search?: string,
+  gradedSubsection?: string,
+}
+
 /**
  * Get course settings.
  * @param {string} courseId
@@ -22,10 +27,25 @@ export const getCourseInfo = async (courseId) => {
 
 export const getDateExtensions = async (
   courseId: string,
-  pagination: PaginationQueryKeys
+  params: DateExtensionQueryParams
 ): Promise<DateExtensionsResponse> => {
+  const queryParams = new URLSearchParams({
+    page: params.page.toString(),
+    page_size: params.pageSize.toString(),
+  });
+
+  // Add optional search parameter
+  if (params.search) {
+    queryParams.append('search', params.search);
+  }
+
+  // Add optional graded subsection filter
+  if (params.gradedSubsection) {
+    queryParams.append('graded_subsection', params.gradedSubsection);
+  }
+
   const { data } = await getAuthenticatedHttpClient().get(
-    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/unit_extensions/?page=${pagination.page}&page_size=${pagination.pageSize}`
+    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/unit_extensions/?${queryParams.toString()}`
   );
   return camelCaseObject(data);
 };

src/data/apiHook.ts

@@ -1,13 +1,18 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { getCourseInfo, getDateExtensions, resetDateExtension, PaginationQueryKeys, addDateExtension, getGradedSubsections } from './api';
+import { getCourseInfo, getDateExtensions, resetDateExtension, DateExtensionQueryParams, addDateExtension, getGradedSubsections } from './api';
 import { appId } from '../constants';
 
 const COURSE_INFO_QUERY_KEY = ['courseInfo'];
 
 const dateExtensionsQueryKeys = {
   all: [appId, 'dateExtensions'] as const,
   byCourse: (courseId: string) => [...dateExtensionsQueryKeys.all, courseId] as const,
-  byCoursePaginated: (courseId: string, pagination: PaginationQueryKeys) => [...dateExtensionsQueryKeys.byCourse(courseId), pagination.page] as const,
+  byCoursePaginated: (courseId: string, params: DateExtensionQueryParams) => [
+    ...dateExtensionsQueryKeys.byCourse(courseId),
+    params.page,
+    params.search ?? '',
+    params.gradedSubsection ?? ''
+  ] as const,
 };
 
 const gradedSubsectionsQueryKeys = {
@@ -22,10 +27,11 @@ export const useCourseInfo = (courseId: string) => (
   })
 );
 
-export const useDateExtensions = (courseId: string, pagination: PaginationQueryKeys) => (
+export const useDateExtensions = (courseId: string, params: DateExtensionQueryParams) => (
   useQuery({
-    queryKey: dateExtensionsQueryKeys.byCoursePaginated(courseId, pagination),
-    queryFn: () => getDateExtensions(courseId, pagination),
+    queryKey: dateExtensionsQueryKeys.byCoursePaginated(courseId, params),
+    queryFn: () => getDateExtensions(courseId, params),
+    enabled: !!courseId, // Only run when courseId is available
   })
 );
 

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -3,12 +3,13 @@ import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@openedx/frontend-base';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import DateExtensionsPage from './DateExtensionsPage';
-import { useDateExtensions, useResetDateExtensionMutation } from '../data/apiHook';
+import { useDateExtensions, useGradedSubsections, useResetDateExtensionMutation } from '../data/apiHook';
 
 jest.mock('../data/apiHook', () => ({
   useDateExtensions: jest.fn(),
   useResetDateExtensionMutation: jest.fn(),
   useAddDateExtensionMutation: jest.fn(() => ({ mutate: jest.fn() })),
+  useGradedSubsections: jest.fn(),
 }));
 
 const mockDateExtensions = [
@@ -22,6 +23,13 @@ const mockDateExtensions = [
   },
 ];
 
+const mockGradedSubsections = [
+  {
+    subsectionId: 'subsection-1block-v1:edX+DemoX+2015+type@problem+block@618c5933b8b544e4a4cc103d3e508378',
+    displayName: 'Three body diagrams'
+  }
+];
+
 const mutateMock = jest.fn();
 
 describe('DateExtensionsPage', () => {
@@ -33,6 +41,10 @@ describe('DateExtensionsPage', () => {
     (useResetDateExtensionMutation as jest.Mock).mockReturnValue({
       mutate: mutateMock,
     });
+    (useGradedSubsections as jest.Mock).mockReturnValue({
+      data: { items: mockGradedSubsections },
+      isLoading: false,
+    });
   });
 
   const RenderWithRouter = () => (
@@ -58,7 +70,7 @@ describe('DateExtensionsPage', () => {
   it('renders date extensions list', () => {
     render(<RenderWithRouter />);
     expect(screen.getByText('Ed Byun')).toBeInTheDocument();
-    expect(screen.getByText('Three body diagrams')).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: 'Three body diagrams' })).toBeInTheDocument();
   });
 
   it('shows loading state on table when fetching data', () => {

src/dateExtensions/DateExtensionsPage.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@openedx/frontend-base';
-import { AlertModal, Button, Container, Toast } from '@openedx/paragon';
+import { AlertModal, Button, Container, FormControl, Icon, Toast } from '@openedx/paragon';
 import messages from './messages';
 import DateExtensionsList from './components/DateExtensionsList';
 import ResetExtensionsModal from './components/ResetExtensionsModal';
 import { LearnerDateExtension } from './types';
 import { useAddDateExtensionMutation, useResetDateExtensionMutation } from '../data/apiHook';
 import AddExtensionModal from './components/AddExtensionModal';
 import SelectGradedSubsection from './components/SelectGradedSubsection';
+import { Search } from '@openedx/paragon/icons';
 
 // const successMessage = 'Successfully reset due date for student Phu Nguyen for A subsection with two units (block-v1:SchemaAximWGU+WGU101+1+type@sequential+block@3984030755104708a86592cf23fb1ae4) to 2025-08-21 00:00';
 
@@ -22,6 +23,8 @@ const DateExtensionsPage = () => {
   const [successMessage, setSuccessMessage] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [isAddExtensionModalOpen, setIsAddExtensionModalOpen] = useState(false);
+  const [searchedLearner, setSearchedLearner] = useState<string>('');
+  const [gradedSubsectionFilter, setGradedSubsectionFilter] = useState<string>('');
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
     setIsResetModalOpen(true);
@@ -75,15 +78,26 @@ const DateExtensionsPage = () => {
     <Container className="mt-4.5 mb-4 mx-4" fluid="xl">
       <h3>{intl.formatMessage(messages.dateExtensionsTitle)}</h3>
       <div className="d-flex align-items-center justify-content-between mb-3.5">
-        <div>
+        <div className="d-flex">
+          <FormControl
+            onChange={(e) => setSearchedLearner(e.target.value)}
+            placeholder={intl.formatMessage(messages.searchLearnerPlaceholder)}
+            trailingElement={<Icon src={Search} />}
+            value={searchedLearner}
+          />
           <SelectGradedSubsection
             placeholder={intl.formatMessage(messages.allGradedSubsections)}
-            onChange={() => {}}
+            onChange={(e) => setGradedSubsectionFilter(e.target.value)}
+            value={gradedSubsectionFilter}
           />
         </div>
         <Button onClick={handleOpenAddExtension}>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
       </div>
-      <DateExtensionsList onResetExtensions={handleResetExtensions} />
+      <DateExtensionsList
+        searchedLearner={searchedLearner}
+        gradedSubsectionFilter={gradedSubsectionFilter}
+        onResetExtensions={handleResetExtensions}
+      />
       <AddExtensionModal
         isOpen={isAddExtensionModalOpen}
         title={intl.formatMessage(messages.addIndividualDueDateExtension)}

src/dateExtensions/components/DateExtensionsList.tsx

@@ -16,6 +16,8 @@ const DATE_EXTENSIONS_PAGE_SIZE = 25;
 
 export interface DateExtensionListProps {
   onResetExtensions?: (user: LearnerDateExtension) => void,
+  searchedLearner?: string,
+  gradedSubsectionFilter?: string,
 }
 
 interface DataTableFetchDataProps {
@@ -24,13 +26,17 @@ interface DataTableFetchDataProps {
 
 const DateExtensionsList = ({
   onResetExtensions = () => {},
+  searchedLearner = '',
+  gradedSubsectionFilter = '',
 }: DateExtensionListProps) => {
   const intl = useIntl();
   const { courseId } = useParams();
   const [page, setPage] = useState(0);
   const { data = { count: 0, results: [] }, isLoading } = useDateExtensions(courseId ?? '', {
     page,
-    pageSize: DATE_EXTENSIONS_PAGE_SIZE
+    pageSize: DATE_EXTENSIONS_PAGE_SIZE,
+    search: searchedLearner,
+    gradedSubsection: gradedSubsectionFilter
   });
 
   const pageCount = Math.ceil(data.count / DATE_EXTENSIONS_PAGE_SIZE);

src/dateExtensions/components/SelectGradedSubsection.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router';
 interface SelectGradedSubsectionProps {
   label?: string,
   placeholder: string,
+  value?: string,
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void,
 }
 
@@ -14,18 +15,26 @@ interface SelectGradedSubsectionProps {
 //   { displayName: 'another example', subsectionId: 'another' }
 // ];
 
-const SelectGradedSubsection = ({ label, placeholder, onChange }: SelectGradedSubsectionProps) => {
+const SelectGradedSubsection = ({ label, placeholder, value, onChange }: SelectGradedSubsectionProps) => {
   const { courseId = '' } = useParams<{ courseId: string }>();
-  const { data = { results: [] } } = useGradedSubsections(courseId);
-  const selectOptions = [{ displayName: placeholder, subsectionId: '' }, ...data.results];
+  const { data = { items: [] } } = useGradedSubsections(courseId);
+  const selectOptions = [{ displayName: placeholder, subsectionId: '' }, ...data.items];
+
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange(event);
   };
 
   return (
     <FormGroup size="sm">
       {label && <FormLabel>{label}</FormLabel>}
-      <FormControl placeholder={placeholder} name="block_id" as="select" onChange={handleChange} size="md">
+      <FormControl
+        as="select"
+        name="block_id"
+        placeholder={placeholder}
+        size="md"
+        value={value}
+        onChange={handleChange}
+      >
         {
           selectOptions.map((option) => (
             <option key={option.subsectionId} value={option.subsectionId}>

src/dateExtensions/messages.ts

@@ -106,6 +106,11 @@ const messages = defineMessages({
     defaultMessage: 'All Graded Subsections',
     description: 'Label for the all graded subsections option in filters',
   },
+  searchLearnerPlaceholder: {
+    id: 'instruct.dateExtensions.page.filters.searchLearnerPlaceholder',
+    defaultMessage: 'Search for a Learner',
+    description: 'Placeholder text for the search learner input field',
+  }
 });
 
 export default messages;