fix: specify learner, warning message on grant beta tester role, ordering in special exams (#196)

* feat: add course info slot to header

* fix: ordering special exams tables

* feat: add warning message when grant beta tester

* fix: error message on specify learner

* test: update related tests

Author: diana-villalvazo-wgu

src/components/SpecifyLearnerField.test.tsx

@@ -214,7 +214,7 @@ describe('SpecifyLearnerField', () => {
       (useCourseInfo as jest.Mock).mockReturnValue({ data: { permissions: { admin: true, dataResearcher: false } } });
       (useLearner as jest.Mock).mockReturnValue({
         data: {},
-        refetch: jest.fn().mockResolvedValue({ data: {} }),
+        refetch: jest.fn().mockResolvedValue({ data: {}, error: { isAxiosError: true, response: { status: 404 } } }),
         error: { isAxiosError: true, response: { status: 404 } },
       });
     });

src/components/SpecifyLearnerField.tsx

@@ -18,6 +18,24 @@ interface SpecifyLearnerFieldRef {
   reset: () => void,
 }
 
+type ErrorState = 'not_enrolled' | 'not_found' | 'generic_error' | null;
+
+const errorMessages = {
+  not_found: messages.learnerNotFound,
+  generic_error: messages.learnerGenericError,
+  not_enrolled: messages.learnerNotEnrolled,
+};
+
+const getErrorState = (error: Error | null, data?: SelectedLearner): ErrorState => {
+  const isNotFoundError = isAxiosError(error)
+    && (error.response?.status === 404 || error.response?.status === 400);
+
+  if (isNotFoundError) return 'not_found';
+  if (data && !data.isEnrolled) return 'not_enrolled';
+  if (error && !isNotFoundError) return 'generic_error';
+  return null;
+};
+
 const initialLearnerState = {
   username: '',
   fullName: '',
@@ -30,18 +48,20 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
   const { courseId = '' } = useParams<{ courseId: string }>();
   const [identifier, setIdentifier] = useState('');
   const [showLearner, enableShowLearner, disableShowLearner] = useToggle(!!learner);
+  const [errorState, setErrorState] = useState<ErrorState>(null);
   const { data: courseInfo } = useCourseInfo(courseId);
   const permissions = courseInfo?.permissions || { admin: false, dataResearcher: false };
   const { inputValue, handleChange, resetFilter } = useDebouncedFilter({
     filterValue: identifier,
     setFilter: setIdentifier,
   });
-  const { data, refetch, error } = useLearner(courseId, inputValue);
+  const { data, refetch } = useLearner(courseId, inputValue);
 
   const resetState = () => {
     resetFilter();
     onClickSelect('');
     disableShowLearner();
+    setErrorState(null);
   };
 
   useImperativeHandle(ref, () => ({
@@ -53,6 +73,10 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     handleChange(event.target.value);
 
+    if (errorState) {
+      setErrorState(null);
+    }
+
     if (showLearner) {
       disableShowLearner();
     }
@@ -64,6 +88,8 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
         // Need to pass empty value if learner is not valid to clear out any previously selected learner
         // We could have other conditions/fields depending on valid learner
         const formValue = !result.error && result.data?.isEnrolled ? inputValue : '';
+
+        setErrorState(getErrorState(result.error, result?.data));
         onClickSelect(formValue);
         enableShowLearner();
       });
@@ -102,20 +128,11 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
           <Button onClick={handleClickSelect} disabled={!inputValue}>{intl.formatMessage(messages.select)}</Button>
         )}
       </div>
-      {showLearner && error
-      && isAxiosError(error)
-      && error.response?.status === 404 && (
+      {showLearner && errorState && (
         <p className="text-danger-500 mb-0 x-small mt-2">
-          {intl.formatMessage(messages.learnerNotFound, { identifier })}
+          {intl.formatMessage(errorMessages[errorState], { identifier: inputValue })}
         </p>
       )}
-      {
-        showLearner && !error && !selectedLearner?.isEnrolled && (
-          <p className="text-danger-500 mb-0 x-small mt-2">
-            {intl.formatMessage(messages.learnerNotEnrolled, { identifier })}
-          </p>
-        )
-      }
     </FormGroup>
   );
 });

src/components/SpecifyProblemField.tsx

@@ -127,7 +127,7 @@ const SpecifyProblemField = forwardRef<SpecifyProblemFieldRef, SpecifyProblemFie
       </div>
       {showSelectedLocation && error
       && isAxiosError(error)
-      && (error.response?.status === 400) && (
+      && ((error.response?.status === 400) || (error.response?.status === 404)) && (
         <p className="text-danger-500 mb-0 x-small mt-2">
           {intl.formatMessage(messages.problemNotFound, { identifier: inputValue })}
         </p>

src/components/messages.ts

@@ -156,6 +156,11 @@ const messages = defineMessages({
     defaultMessage: 'Selected Learner:',
     description: 'Label for specify learner field when a learner has been selected',
   },
+  learnerGenericError: {
+    id: 'instruct.specifyLearner.learnerGenericError',
+    defaultMessage: 'An error occurred while looking up {identifier}. Please try again.',
+    description: 'Generic error message displayed when there is an error looking up a learner based on the provided identifier (email or username)',
+  }
 });
 
 export default messages;

src/enrollments/components/UpdateBetaTesterModal.test.tsx

@@ -181,8 +181,8 @@ describe('UpdateBetaTesterModal', () => {
     it('shows alert with failed usernames when some users fail (remove action)', async () => {
       const mockSuccessData = {
         results: [
-          { identifier: 'failed-user', userDoesNotExist: true },
-          { identifier: 'jane.doe', userDoesNotExist: false },
+          { identifier: 'failed-user', userDoesNotExist: true, isActive: true },
+          { identifier: 'jane.doe', userDoesNotExist: false, isActive: true },
         ]
       };
 
@@ -206,7 +206,7 @@ describe('UpdateBetaTesterModal', () => {
     it('shows alert with failed usernames when some users fail (add action)', async () => {
       const mockSuccessData = {
         results: [
-          { identifier: 'failed-user', userDoesNotExist: true },
+          { identifier: 'failed-user', userDoesNotExist: true, isActive: null },
         ]
       };
 
@@ -231,10 +231,39 @@ describe('UpdateBetaTesterModal', () => {
       });
     });
 
+    it('shows alert with inactive usernames when some users are inactive', async () => {
+      const mockSuccessData = {
+        results: [
+          { identifier: 'inactive-user', userDoesNotExist: false, isActive: false },
+          { identifier: 'jane.doe', userDoesNotExist: false, isActive: true },
+        ]
+      };
+
+      const mutateWithSuccess = (_params: UpdateBetaTestersParams, callbacks: any) => {
+        callbacks.onSuccess(mockSuccessData);
+      };
+      mutateMock.mockImplementation(mutateWithSuccess);
+
+      const nonBetaTesterProps = {
+        ...defaultProps,
+        learner: learnerNonBetaTester,
+      };
+
+      renderWithAlertAndIntl(
+        <UpdateBetaTesterModal {...nonBetaTesterProps} />
+      );
+
+      expect(mockAddAlert).toHaveBeenCalledWith({
+        type: 'warning',
+        message: messages.inactiveUsers.defaultMessage,
+        extraContent: expect.any(Array),
+      });
+    });
+
     it('does not show alert when all users succeed', async () => {
       const mockSuccessData = {
         results: [
-          { identifier: 'jane.doe', userDoesNotExist: false },
+          { identifier: 'jane.doe', userDoesNotExist: false, isActive: true },
         ]
       };
 

src/enrollments/components/UpdateBetaTesterModal.tsx

@@ -26,6 +26,7 @@ const UpdateBetaTesterModal = ({ learner, isOpen, onClose }: UpdateBetaTesterMod
     }, {
       onSuccess: (data) => {
         const failedUsernames = data.results?.filter(user => user.userDoesNotExist).map(user => user.identifier) || [];
+        const inactiveUsernames = data.results?.filter(user => !user.isActive && user.isActive !== null && !user.userDoesNotExist).map(user => user.identifier) || [];
         if (failedUsernames.length > 0) {
           addAlert({
             type: 'danger',
@@ -37,6 +38,17 @@ const UpdateBetaTesterModal = ({ learner, isOpen, onClose }: UpdateBetaTesterMod
             )
           });
         }
+        if (inactiveUsernames.length > 0) {
+          addAlert({
+            type: 'warning',
+            message: intl.formatMessage(messages.inactiveUsers),
+            extraContent: (
+              inactiveUsernames.map((learner: string) => (
+                <p key={learner} className="mb-0">• {intl.formatMessage(messages.inactiveLearner, { learner })}</p>
+              ))
+            )
+          });
+        }
       },
       onError: () => {
         showModal({

src/grading/components/GradingLearnerContent.tsx

@@ -165,6 +165,9 @@ const GradingLearnerContent = ({ toolType, onShowTasks }: GradingLearnerContentP
 
   const handleLearnerChange = (usernameOrEmail: string): void => {
     setUsernameOrEmail(usernameOrEmail);
+    // Reset problem field when learner changes due to progress and attempts change for every learner
+    setBlockId('');
+    problemFieldRef.current?.reset();
   };
 
   return (

src/slots.tsx

@@ -1,9 +1,15 @@
-import { helpButtonSlotOperation, SlotOperation } from '@openedx/frontend-base';
-
-import { appId, instructorDashboardRole } from './constants';
+import { helpButtonSlotOperation, SlotOperation, WidgetOperationTypes } from '@openedx/frontend-base';
+import CourseInfoSlot from '@src/slots/CourseInfoSlot/CourseInfoSlot';
+import { appId, instructorDashboardRole } from '@src/constants';
 
 const slots: SlotOperation[] = [
   helpButtonSlotOperation({ appId, role: instructorDashboardRole }),
+  {
+    slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+    id: 'org.openedx.frontend.widget.slotShowcase.headerLink',
+    op: WidgetOperationTypes.APPEND,
+    element: <CourseInfoSlot />,
+  },
 ];
 
 export default slots;

src/slots/CourseInfoSlot/CourseInfoSlot.test.tsx

@@ -0,0 +1,27 @@
+import { screen } from '@testing-library/react';
+import CourseInfoSlot from '@src/slots/CourseInfoSlot/CourseInfoSlot';
+import { renderWithQueryClient } from '@src/testUtils';
+
+jest.mock('@src/data/apiHook', () => ({
+  useCourseInfo: () => ({
+    data: {
+      displayName: 'My Test Course',
+      org: 'edX',
+      courseNumber: '40-800',
+    },
+  }),
+}));
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    courseId: 'course-v1:edX+Test+2023',
+  }),
+}));
+
+describe('CourseInfoSlot', () => {
+  it('renders org and course name', () => {
+    renderWithQueryClient(<CourseInfoSlot />);
+    expect(screen.getByText('My Test Course')).toBeInTheDocument();
+    expect(screen.getByText('edX 40-800')).toBeInTheDocument();
+  });
+});

src/slots/CourseInfoSlot/CourseInfoSlot.tsx

@@ -0,0 +1,22 @@
+import { useParams } from 'react-router-dom';
+import { useCourseInfo } from '@src/data/apiHook';
+
+const CourseInfoSlot = () => {
+  const { courseId = '' } = useParams();
+  const { data } = useCourseInfo(courseId);
+
+  if (!data) {
+    return null;
+  }
+
+  const { org = '', courseNumber = '', displayName = '' } = data;
+
+  return (
+    <div style={{ minWidth: 0, lineHeight: '1' }}>
+      <span className="d-block small m-0">{org} {courseNumber}</span>
+      <span className="d-block m-0 font-weight-bold course-title">{displayName}</span>
+    </div>
+  );
+};
+
+export default CourseInfoSlot;