Specify learner field (#147)

* feat: specify learner field

* fix: change axios error, error was persistent, change value passed to query

Author: diana-villalvazo-wgu

src/cohorts/CohortsPage.tsx

@@ -39,7 +39,7 @@ const CohortsPageContent = () => {
   return (
     <>
       <div className="d-inline-flex align-items-center">
-        <h3 className="mb-0 text-gray-700">{intl.formatMessage(messages.cohortsTitle)}</h3>
+        <h3 className="mb-0 text-primary-700">{intl.formatMessage(messages.cohortsTitle)}</h3>
         {isCohorted && (
           <div className="small">
             <IconButton

src/components/SpecifyLearnerField.test.tsx

@@ -3,31 +3,95 @@ import userEvent from '@testing-library/user-event';
 import SpecifyLearnerField from './SpecifyLearnerField';
 import messages from './messages';
 import { renderWithIntl } from '@src/testUtils';
+import { useCourseInfo, useLearner } from '@src/data/apiHook';
+
+jest.mock('@src/data/apiHook', () => ({
+  useCourseInfo: jest.fn(),
+  useLearner: jest.fn(),
+}));
+
+const mockLearnerData = {
+  username: 'testuser',
+  fullName: 'Test User',
+  email: 'test@email.com',
+};
 
 describe('SpecifyLearnerField', () => {
-  it('renders label and input', () => {
-    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
-    expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage)).toBeInTheDocument();
-  });
+  describe('when learner is found', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+      (useCourseInfo as jest.Mock).mockReturnValue({ data: { permissions: { admin: true, dataResearcher: false } } });
+      (useLearner as jest.Mock).mockReturnValue({
+        data: mockLearnerData,
+        refetch: jest.fn(),
+        error: null,
+      });
+    });
+    it('renders label and input', () => {
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
+      expect(screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage)).toBeInTheDocument();
+    });
 
-  it('renders select button', () => {
-    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
-    expect(screen.getByText(messages.select.defaultMessage)).toBeInTheDocument();
-  });
+    it('renders select button', () => {
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      expect(screen.getByText(messages.select.defaultMessage)).toBeInTheDocument();
+    });
 
-  it('calls onChange when input changes', async () => {
-    const handleChange = jest.fn();
-    renderWithIntl(<SpecifyLearnerField onChange={handleChange} />);
-    const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
-    const user = userEvent.setup();
-    await user.type(input, 'testuser');
-    expect(handleChange).toHaveBeenCalled();
+    it('calls onClickSelect when clicking select', async () => {
+      const handleClick = jest.fn();
+      renderWithIntl(<SpecifyLearnerField onClickSelect={handleClick} />);
+      const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+      const user = userEvent.setup();
+      await user.type(input, mockLearnerData.username);
+      const button = screen.getByText(messages.select.defaultMessage);
+      await user.click(button);
+      expect(handleClick).toHaveBeenCalledWith(mockLearnerData.username);
+    });
+
+    it('input has correct name attribute', () => {
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+      expect(input).toHaveAttribute('name', 'emailOrUsername');
+    });
+
+    it('shows learner info and change button after select', async () => {
+      const handleClick = jest.fn();
+      renderWithIntl(<SpecifyLearnerField onClickSelect={handleClick} />);
+      const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+      const user = userEvent.setup();
+      await user.type(input, mockLearnerData.username);
+      const button = screen.getByText(messages.select.defaultMessage);
+      await user.click(button);
+      expect(screen.getByText(mockLearnerData.username)).toBeInTheDocument();
+      expect(screen.getByText(mockLearnerData.fullName)).toBeInTheDocument();
+      expect(screen.getByText(mockLearnerData.email)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: messages.change.defaultMessage })).toBeInTheDocument();
+    });
   });
 
-  it('input has correct name attribute', () => {
-    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
-    const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
-    expect(input).toHaveAttribute('name', 'emailOrUsername');
+  describe('when learner not found', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+      (useCourseInfo as jest.Mock).mockReturnValue({ data: { permissions: { admin: true, dataResearcher: false } } });
+      (useLearner as jest.Mock).mockReturnValue({
+        data: {},
+        refetch: jest.fn(),
+        error: { isAxiosError: true, response: { status: 404 } },
+      });
+    });
+
+    it('shows error message if learner not found', async () => {
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+      const user = userEvent.setup();
+      await user.type(input, mockLearnerData.username);
+      const button = screen.getByText(messages.select.defaultMessage);
+      await user.click(button);
+      const staticPart = messages.learnerNotFound.defaultMessage.split(':')[0];
+      expect(
+        screen.getByText(new RegExp(staticPart + ':'))
+      ).toBeInTheDocument();
+    });
   });
 });

src/components/SpecifyLearnerField.tsx

@@ -1,21 +1,89 @@
-import { Button, FormControl, FormGroup, FormLabel } from '@openedx/paragon';
+import { useState, ChangeEvent } from 'react';
+import { isAxiosError } from 'axios';
+import { useParams } from 'react-router-dom';
+import { Avatar, Button, FormControl, FormGroup, FormLabel, useToggle } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
+import { SpinnerIcon } from '@openedx/paragon/icons';
+import { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';
+import { useCourseInfo, useLearner } from '@src/data/apiHook';
+import { SelectedLearner } from '@src/types';
 import messages from './messages';
 
 interface SpecifyLearnerFieldProps {
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  learner?: SelectedLearner,
+  onClickSelect: (emailOrUsername: string) => void,
 }
 
-const SpecifyLearnerField = ({ onChange }: SpecifyLearnerFieldProps) => {
+const SpecifyLearnerField = ({ learner, onClickSelect }: SpecifyLearnerFieldProps) => {
   const intl = useIntl();
+  const { courseId = '' } = useParams<{ courseId: string }>();
+  const [identifier, setIdentifier] = useState('');
+  const [showLearner, enableShowLearner, disableShowLearner] = useToggle(false);
+  const { data: courseInfo } = useCourseInfo(courseId);
+  const permissions = courseInfo?.permissions || { admin: false, dataResearcher: false };
+  const { inputValue, handleChange } = useDebouncedFilter({
+    filterValue: identifier,
+    setFilter: setIdentifier,
+  });
+  const { data = { email: '', fullName: '', username: '' }, refetch, error } = useLearner(courseId, inputValue);
+
+  const selectedLearner = learner || data;
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleChange(event.target.value);
+
+    if (showLearner) {
+      disableShowLearner();
+    }
+  };
+
+  const handleClickSelect = () => {
+    if (inputValue) {
+      onClickSelect(inputValue);
+      refetch();
+      enableShowLearner();
+    }
+  };
 
   return (
-    <FormGroup size="sm">
-      <FormLabel>{intl.formatMessage(messages.specifyLearner)}</FormLabel>
-      <div className="d-flex">
-        <FormControl className="mr-2" name="emailOrUsername" placeholder={intl.formatMessage(messages.specifyLearnerPlaceholder)} size="md" autoResize onChange={onChange} />
-        <Button>{intl.formatMessage(messages.select)}</Button>
+    <FormGroup className="mb-0" size="sm">
+      <FormLabel className="text-primary-500 d-flex">{intl.formatMessage(messages.specifyLearner)}</FormLabel>
+      <div className="d-flex align-items-center">
+        <FormControl
+          className={`mr-2 ${selectedLearner.username && showLearner ? 'd-none' : ''}`}
+          name="emailOrUsername"
+          placeholder={intl.formatMessage(messages.specifyLearnerPlaceholder)}
+          size="md"
+          autoResize
+          value={inputValue}
+          onChange={handleInputChange}
+        />
+        {selectedLearner.username && showLearner ? (
+          <>
+            <Avatar className="mr-2.5" size="sm" />
+            <div className="d-flex flex-column mr-3 text-primary-500">
+              <p className="mb-0">{selectedLearner.username}</p>
+              {(permissions.admin || permissions.dataResearcher)
+              && (
+                <div className="d-flex x-small">
+                  <p className="mr-3 mb-0">{selectedLearner.fullName}</p>
+                  <p className="mb-0">{selectedLearner.email}</p>
+                </div>
+              )}
+            </div>
+            {!learner && <Button iconBefore={SpinnerIcon} onClick={disableShowLearner}>{intl.formatMessage(messages.change)}</Button>}
+          </>
+        ) : (
+          <Button onClick={handleClickSelect} disabled={!inputValue}>{intl.formatMessage(messages.select)}</Button>
+        )}
       </div>
+      {showLearner && error
+      && isAxiosError(error)
+      && error.response?.status === 404 && (
+        <p className="text-danger-500 mb-0 x-small mt-2">
+          {intl.formatMessage(messages.learnerNotFound, { identifier })}
+        </p>
+      )}
     </FormGroup>
   );
 };

src/components/messages.ts

@@ -105,7 +105,17 @@ const messages = defineMessages({
     id: 'instruct.csvComponent.uploadingFileMessage',
     defaultMessage: 'File chosen: {fileName}',
     description: 'Message displayed when a file is being uploaded, with the file name included'
-  }
+  },
+  change: {
+    id: 'instruct.specifyLearner.change',
+    defaultMessage: 'Change',
+    description: 'Label for change button in specify learner field',
+  },
+  learnerNotFound: {
+    id: 'instruct.specifyLearner.learnerNotFound',
+    defaultMessage: 'Could not find student matching identifier: {identifier}',
+    description: 'Error message displayed when a learner cannot be found based on the provided identifier (email or username)',
+  },
 });
 
 export default messages;

src/courseInfo/types.ts

@@ -21,6 +21,11 @@ export interface CourseInfoResponse {
   gradeCutoffs: string | null,
   staffCount: number,
   learnerCount: number,
+  permissions: {
+    admin: boolean,
+    dataResearcher: boolean,
+    [key: string]: boolean,
+  },
 }
 
 interface EnrollmentCounts extends Record<string, number> {

src/data/api.test.ts

@@ -1,4 +1,4 @@
-import { getCourseInfo } from './api';
+import { getCourseInfo, getLearner } from './api';
 import { camelCaseObject, getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
 import { fetchPendingTasks } from './api';
 
@@ -83,4 +83,35 @@ describe('base api', () => {
       expect(result).toEqual(mockTasks);
     });
   });
+
+  describe('getLearner', () => {
+    const mockHttpClient = {
+      get: jest.fn(),
+    };
+    const mockLearnerData = { username: 'testuser', email: 'test@example.com', full_name: 'Test User' };
+    const mockCamelCaseData = { username: 'testuser', email: 'test@example.com', fullName: 'Test User' };
+
+    beforeEach(() => {
+      mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://test-lms.com' });
+      mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+      mockCamelCaseObject.mockReturnValue(mockCamelCaseData);
+      mockHttpClient.get.mockResolvedValue({ data: mockLearnerData });
+    });
+
+    it('fetches learner info successfully', async () => {
+      const courseId = 'course-v1:Test+Course+2025';
+      const emailOrUsername = 'testuser';
+      const result = await getLearner(courseId, emailOrUsername);
+      expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
+      expect(mockHttpClient.get).toHaveBeenCalledWith('https://test-lms.com/api/instructor/v2/courses/course-v1:Test+Course+2025/learners/testuser');
+      expect(mockCamelCaseObject).toHaveBeenCalledWith(mockLearnerData);
+      expect(result).toBe(mockCamelCaseData);
+    });
+
+    it('throws error when API call fails', async () => {
+      const error = new Error('Network error');
+      mockHttpClient.get.mockRejectedValue(error);
+      await expect(getLearner('course-v1:Test+Course+2025', 'testuser')).rejects.toThrow('Network error');
+    });
+  });
 });

src/data/api.ts

@@ -1,6 +1,7 @@
 import { camelCaseObject, getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
 import { appId } from '@src/constants';
 import { CourseInfoResponse } from '@src/courseInfo/types';
+import { SelectedLearner } from '@src/types';
 
 export const getApiBaseUrl = () => getAppConfig(appId).LMS_BASE_URL;
 
@@ -26,3 +27,15 @@ export const fetchPendingTasks = async (courseId: string) => {
   );
   return response.data?.tasks?.map(camelCaseObject);
 };
+
+/**
+ * Get learner information for a course.
+ * @param {string} courseId
+ * @param {string} emailOrUsername
+ * @returns {Promise<SelectedLearner>}
+ */
+export const getLearner = async (courseId: string, emailOrUsername: string): Promise<SelectedLearner> => {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/learners/${emailOrUsername}`);
+  return camelCaseObject(data);
+};