refactor: simplify onClick handlers in dropdowns and improve test assertions for editable states

Author: bra-i-am

src/schedule-and-details/ScheduleAndDetails.test.jsx

@@ -144,7 +144,7 @@ describe('<ScheduleAndDetails />', () => {
     const { getAllByPlaceholderText, getByText } = renderComponent();
     let inputs;
     await waitFor(() => {
-      inputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+      inputs = getAllByPlaceholderText(DATE_FORMAT.toUpperCase());
     });
     // @ts-ignore
     fireEvent.change(inputs[0], { target: { value: '06/16/2023' } });
@@ -234,7 +234,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
     mockPermissions({ canEditSchedule: false });
     const { getAllByPlaceholderText } = renderComponent();
     await waitFor(() => {
-      const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+      const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toUpperCase());
       dateInputs.forEach((input) => expect(input).toBeDisabled());
     });
   });
@@ -249,12 +249,24 @@ describe('<ScheduleAndDetails /> permissions', () => {
     });
   });
 
+  it('keeps schedule inputs editable while disabling details when only canEditSchedule is granted', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    mockPermissions({ canEditDetails: false });
+    const { getAllByPlaceholderText, getAllByRole } = renderComponent();
+    await waitFor(() => {
+      const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toUpperCase());
+      dateInputs.forEach((input) => expect(input).not.toBeDisabled());
+      const radios = getAllByRole('radio');
+      radios.forEach((radio) => expect(radio).toBeDisabled());
+    });
+  });
+
   it('save button cannot be triggered when user has no edit permissions', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
     mockPermissions({ canEditSchedule: false, canEditDetails: false });
     const { getAllByPlaceholderText, queryByText } = renderComponent();
     // Wait for page to load
-    const dateInputs = await waitFor(() => getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase()));
+    const dateInputs = await waitFor(() => getAllByPlaceholderText(DATE_FORMAT.toUpperCase()));
     // All date inputs must be disabled (no edit_schedule permission)
     dateInputs.forEach((input) => expect(input).toBeDisabled());
     // No changes can be made so the save button never appears

src/schedule-and-details/details-section/index.jsx

@@ -34,7 +34,7 @@ const DetailsSection = ({
             {languageOptions.map((option) => (
               <Dropdown.Item
                 key={option[0]}
-                onClick={isEditable ? () => onChange(option[0], 'language') : undefined}
+                onClick={() => onChange(option[0], 'language')}
               >
                 {option[1]}
               </Dropdown.Item>

src/schedule-and-details/introducing-section/index.jsx

@@ -113,6 +113,8 @@ const IntroducingSection = ({
         <>
           <Form.Group className="form-group-custom">
             <Form.Label>{intl.formatMessage(messages.courseOverviewLabel)}</Form.Label>
+            {/* Generic components (WysiwygEditor, CourseUploadImage) use the standard HTML
+                `disabled` prop; domain section components use the semantic `isEditable` prop. */}
             <WysiwygEditor
               initialValue={overview}
               onChange={(value) => onChange(value, 'overview')}

src/schedule-and-details/requirements-section/index.jsx

@@ -40,14 +40,14 @@ const RequirementsSection = ({
         <Dropdown.Menu>
           <Dropdown.Item
             key={intl.formatMessage(messages.dropdownEmptyText)}
-            onClick={isEditable ? () => onChange([], 'preRequisiteCourses') : undefined}
+            onClick={() => onChange([], 'preRequisiteCourses')}
           >
             {intl.formatMessage(messages.dropdownEmptyText)}
           </Dropdown.Item>
           {possiblePreRequisiteCourses.map((course) => (
             <Dropdown.Item
               key={course.courseKey}
-              onClick={isEditable ? () => onChange([course.courseKey], 'preRequisiteCourses') : undefined}
+              onClick={() => onChange([course.courseKey], 'preRequisiteCourses')}
             >
               {course.displayName}
             </Dropdown.Item>

src/schedule-and-details/schedule-section/ScheduleSection.test.jsx

@@ -74,9 +74,10 @@ describe('<ScheduleSection />', () => {
 
   it('sets all date inputs to disabled when isEditable is false', () => {
     const { container } = render(<RootWrapper {...props} isEditable={false} />);
-    // DatepickerControl uses disabled={readonly}, so inputs get the disabled attribute
-    const inputs = container.querySelectorAll('input[disabled]');
-    expect(inputs.length).toBeGreaterThan(0);
+    // DatepickerControl renders disabled={readonly}; verify the specific fields gated by isEditable
+    ['startDate', 'endDate', 'enrollmentStart'].forEach((controlName) => {
+      expect(container.querySelector(`#${controlName}-date`)).toBeDisabled();
+    });
   });
 
   it('date inputs are not readonly when isEditable is true', () => {

src/schedule-and-details/schedule-section/index.jsx

@@ -67,7 +67,6 @@ const ScheduleSection = ({
       availableDateErrorFeedback: errorFields?.certificateAvailableDate,
       certificatesDisplayBehavior,
       displayBehaviorErrorFeedback: errorFields?.certificatesDisplayBehavior,
-      isEditable,
     },
     {
       labels: [