feat: add individual extension modal

Author: diana-villalvazo-wgu

src/app.ts

@@ -11,7 +11,7 @@ const app: App = {
   slots: [],
   config: {
     NODE_ENV: 'development',
-    LMS_BASE_URL: 'http://localhost:18000'
+    LMS_BASE_URL: 'http://local.openedx.io:8000'
   }
 };
 

src/components/SpecifyLearnerField/SpecifyLearnerField.tsx

@@ -0,0 +1,19 @@
+import { Button, FormControl, FormGroup, FormLabel } from '@openedx/paragon';
+
+interface SpecifyLearnerFieldProps {
+  onChange: (value: string) => void,
+}
+
+const SpecifyLearnerField = ({ onChange }: SpecifyLearnerFieldProps) => {
+  return (
+    <FormGroup size="sm">
+      <FormLabel>Specify Learner:</FormLabel>
+      <div className="d-flex">
+        <FormControl className="mr-2" placeholder="Learner email, address or username" size="md" autoResize onChange={(e) => onChange(e.target.value)} />
+        <Button>Select</Button>
+      </div>
+    </FormGroup>
+  );
+};
+
+export default SpecifyLearnerField;

src/data/api.ts

@@ -34,3 +34,15 @@ export const resetDateExtension = async (courseId, userId) => {
   const { data } = await getAuthenticatedHttpClient().post(`${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/date-extensions/${userId}/reset`);
   return camelCaseObject(data);
 };
+
+interface AddDateExtensionParams {
+  student: string,
+  url: string,
+  due_datetime: string,
+  reason: string,
+}
+
+export const addDateExtension = async (courseId, extensionData: AddDateExtensionParams) => {
+  const { data } = await getAuthenticatedHttpClient().post(`${getApiBaseUrl()}/courses/${courseId}/instructor/api/change_due_date`, extensionData);
+  return camelCaseObject(data);
+};

src/data/apiHook.ts

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { getCourseInfo, getDateExtensions, resetDateExtension, PaginationQueryKeys } from './api';
+import { getCourseInfo, getDateExtensions, resetDateExtension, PaginationQueryKeys, addDateExtension } from './api';
 import { appId } from '../constants';
 
 const COURSE_INFO_QUERY_KEY = ['courseInfo'];
@@ -34,3 +34,14 @@ export const useResetDateExtensionMutation = () => {
     },
   });
 };
+
+export const useAddDateExtensionMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ courseId, extensionData }: { courseId: string, extensionData: any }) =>
+      addDateExtension(courseId, extensionData),
+    onSuccess: ({ courseId }) => {
+      queryClient.invalidateQueries({ queryKey: dateExtensionsQueryKeys.byCourse(courseId) });
+    },
+  });
+};

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -8,6 +8,7 @@ import { useDateExtensions, useResetDateExtensionMutation } from '../data/apiHoo
 jest.mock('../data/apiHook', () => ({
   useDateExtensions: jest.fn(),
   useResetDateExtensionMutation: jest.fn(),
+  useAddDateExtensionMutation: jest.fn(() => ({ mutate: jest.fn() })),
 }));
 
 const mockDateExtensions = [

src/dateExtensions/DateExtensionsPage.tsx

@@ -6,18 +6,21 @@ import messages from './messages';
 import DateExtensionsList from './components/DateExtensionsList';
 import ResetExtensionsModal from './components/ResetExtensionsModal';
 import { LearnerDateExtension } from './types';
-import { useResetDateExtensionMutation } from '../data/apiHook';
+import { useAddDateExtensionMutation, useResetDateExtensionMutation } from '../data/apiHook';
+import AddExtensionModal from './components/AddExtensionModal';
 
 // 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';
 
 const DateExtensionsPage = () => {
   const intl = useIntl();
-  const { courseId } = useParams<{ courseId: string }>();
+  const { courseId = '' } = useParams<{ courseId: string }>();
   const { mutate: resetMutation } = useResetDateExtensionMutation();
+  const { mutate: addExtensionMutation } = useAddDateExtensionMutation();
   const [isResetModalOpen, setIsResetModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
   const [successMessage, setSuccessMessage] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState<string>('');
+  const [isAddExtensionModalOpen, setIsAddExtensionModalOpen] = useState(false);
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
     setIsResetModalOpen(true);
@@ -51,14 +54,36 @@ const DateExtensionsPage = () => {
     }
   };
 
+  const handleOpenAddExtension = () => {
+    setIsAddExtensionModalOpen(true);
+  };
+
+  const handleAddExtension = ({ student, url, due_datetime, reason }) => {
+    addExtensionMutation({ courseId, extensionData: {
+      student,
+      url,
+      due_datetime,
+      reason
+    } }, {
+      onError: handleErrorOnReset,
+      onSuccess: handleSuccessOnReset
+    });
+  };
+
   return (
     <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">
         <p>filters</p>
-        <Button>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
+        <Button onClick={handleOpenAddExtension}>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
       </div>
       <DateExtensionsList onResetExtensions={handleResetExtensions} />
+      <AddExtensionModal
+        isOpen={isAddExtensionModalOpen}
+        title={intl.formatMessage(messages.addIndividualDueDateExtension)}
+        onClose={() => setIsAddExtensionModalOpen(false)}
+        onSubmit={handleAddExtension}
+      />
       <ResetExtensionsModal
         isOpen={isResetModalOpen}
         message={intl.formatMessage(messages.resetConfirmationMessage)}

src/dateExtensions/components/AddExtensionModal.tsx

@@ -0,0 +1,79 @@
+import { ActionRow, Button, FormControl, FormGroup, FormLabel, ModalDialog } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import GradedSubsectionField from './GradedSubsectionField';
+import SpecifyLearnerField from '../../components/SpecifyLearnerField/SpecifyLearnerField';
+import messages from '../messages';
+
+interface AddExtensionModalProps {
+  isOpen: boolean,
+  title: string,
+  onClose: () => void,
+  onSubmit: ({ student, url, due_datetime, reason }: {
+    student: string,
+    url: string,
+    due_datetime: string,
+    reason: string,
+  }) => void,
+}
+
+const AddExtensionModal = ({ isOpen, title, onClose, onSubmit }: AddExtensionModalProps) => {
+  const intl = useIntl();
+
+  const handleSubmit = () => {
+    onSubmit({
+      student: 'dianasalas',
+      url: 'block-v1:DV-edtech+check+2025-05+type@sequential+block@a9500056bbb544ea82fad0d3957c6932',
+      due_datetime: '2025-01-21 00:00:00',
+      reason: 'Personal reasons'
+    });
+  };
+
+  return (
+    <ModalDialog isOpen={isOpen} onClose={onClose} title={title} isOverflowVisible={false} size="xl">
+      <ModalDialog.Header className="p-3 pl-4">
+        <h3>{title}</h3>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="border-bottom border-top">
+        <div className="pt-3">
+          <p>{intl.formatMessage(messages.extensionInstructions)}</p>
+          <FormGroup size="sm">
+            <div className="container-fluid border-bottom mb-4.5 pb-3">
+              <div className="row">
+                <div className="col-sm-12 col-md-6">
+                  <SpecifyLearnerField onChange={() => {}} />
+                </div>
+                <div className="col-sm-12 col-md-4">
+                  <GradedSubsectionField onChange={() => {}} />
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4>{intl.formatMessage(messages.defineExtension)}</h4>
+              <FormLabel>
+                {intl.formatMessage(messages.extensionDate)}:
+              </FormLabel>
+              <div className="d-md-flex w-md-50 align-items-center">
+                <FormControl type="date" size="md" />
+                <FormControl type="time" size="md" className="mt-sm-3 mt-md-0" />
+              </div>
+              <div className="mt-3">
+                <FormLabel>
+                  {intl.formatMessage(messages.reasonForExtension)}:
+                </FormLabel>
+                <FormControl placeholder="Reason for extension" size="md" />
+              </div>
+            </div>
+          </FormGroup>
+        </div>
+      </ModalDialog.Body>
+      <ModalDialog.Footer className="p-4">
+        <ActionRow>
+          <Button variant="tertiary" onClick={onClose}>{intl.formatMessage(messages.cancel)}</Button>
+          <Button onClick={handleSubmit}>{intl.formatMessage(messages.addExtension)}</Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default AddExtensionModal;

src/dateExtensions/components/GradedSubsectionField.tsx

@@ -0,0 +1,29 @@
+import { FormAutosuggest, FormAutosuggestOption, FormGroup, FormLabel } from '@openedx/paragon';
+
+const options = [
+  { label: 'is an example', value: 'example' },
+  { label: 'another example', value: 'another' }
+];
+
+interface GradedSubsectionFieldProps {
+  onChange: (value: string) => void,
+}
+
+const GradedSubsectionField = ({ onChange }: GradedSubsectionFieldProps) => {
+  return (
+    <FormGroup size="sm">
+      <FormLabel>Select Graded Subsection:</FormLabel>
+      <FormAutosuggest placeholder="Select Graded Subsection">
+        {
+          options.map((option) => (
+            <FormAutosuggestOption key={option.value} value={option.value} onChange={onChange}>
+              {option.label}
+            </FormAutosuggestOption>
+          ))
+        }
+      </FormAutosuggest>
+    </FormGroup>
+  );
+};
+
+export default GradedSubsectionField;

src/dateExtensions/messages.ts

@@ -66,6 +66,37 @@ const messages = defineMessages({
     defaultMessage: 'Close',
     description: 'Label for the close button in the reset modal',
   },
+  addIndividualDueDateExtension: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.title',
+    defaultMessage: 'Add Individual Due Date Extension',
+    description: 'Title for the add individual due date extension modal',
+  },
+  addExtension: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.addExtension',
+    defaultMessage: 'Add Extension',
+    description: 'Label for the add extension button',
+  },
+  extensionInstructions: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.extensionInstructions',
+    defaultMessage: 'To grant an extension, select a student, graded subsection, and define the extension due date and time.',
+    description: 'Instructions for adding an individual due date extension',
+  },
+  defineExtension: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.defineExtension',
+    defaultMessage: 'Define Extension',
+    description: 'Label for the define extension section',
+  },
+  extensionDate: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.extensionDate',
+    defaultMessage: 'Extension Date',
+    description: 'Label for the extension date field',
+  },
+  reasonForExtension: {
+    id: 'instruct.dateExtensions.page.addIndividualDueDateExtensionModal.reasonForExtension',
+    defaultMessage: 'Reason for Extension',
+    description: 'Label for the reason for extension field',
+  },
+
 });
 
 export default messages;