feat: Change students table according to new wireframe

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/stylesMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -9,4 +9,9 @@ module.exports = createConfig('jest', {
     'src/setupTest.js',
     'src/i18n',
   ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+  },
 });

package.json

@@ -45,6 +45,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-intl": "^5.25.1",
+    "react-paragon-topaz": "^1.0.2",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
     "regenerator-runtime": "0.13.11"

src/features/Instructors/AddInstructors/_test_/index.test.jsx

@@ -41,5 +41,11 @@ describe('Add instructor component', () => {
     const ccxSelect = getByText('Select Class Name');
     expect(instructorInfoInput).toBeInTheDocument();
     expect(ccxSelect).toBeInTheDocument();
+
+    fireEvent.change(instructorInfoInput, { target: { value: 'Name' } });
+    const submitButton = getByText('Add');
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
   });
 });

src/features/Instructors/AddInstructors/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useReducer, useEffect } from 'react';
 import {
   Button, FormGroup, ModalDialog, useToggle, Form,
 } from '@edx/paragon';
-import { getCCXList } from 'features/Instructors/data/api';
+import { getCCXList, handleInstructorsEnrollment } from 'features/Instructors/data/api';
 import reducer from 'features/Instructors/AddInstructors/reducer';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject } from '@edx/frontend-platform';
@@ -16,16 +16,11 @@ const initialState = {
   error: null,
 };
 
-const addInstructorState = {
-  instructorInfo: '',
-  ccxId: '',
-  ccxName: '',
-};
-
 const AddInstructors = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const [isOpen, open, close] = useToggle(false);
-  const [addInstructorInfo, setAddInstructorInfo] = useState(addInstructorState);
+  const [isNoUser, setIsNoUser] = useState(false);
+  const enrollmentData = new FormData();
 
   const fetchData = async () => {
     dispatch({ type: FETCH_CCX_LIST_REQUEST });
@@ -39,20 +34,26 @@ const AddInstructors = () => {
     }
   };
 
-  const handleInstructorInput = (e) => {
-    setAddInstructorInfo({
-      ...addInstructorInfo,
-      instructorInfo: e.target.value.trim(),
-    });
-  };
-
-  const handleCcxSelect = (e) => {
-    const select = e.target;
-    setAddInstructorInfo({
-      ...addInstructorInfo,
-      ccxId: select.value,
-      ccxName: select.options[select.selectedIndex].text,
-    });
+  const handleAddInstructors = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const formJson = Object.fromEntries(formData.entries());
+    try {
+      enrollmentData.append('unique_student_identifier', formJson.instructorInfo);
+      enrollmentData.append('rolename', 'staff');
+      enrollmentData.append('action', 'allow');
+      const response = await handleInstructorsEnrollment(enrollmentData, formJson.ccxId);
+      if (response.data?.userDoesNotExist) {
+        setIsNoUser(true);
+      } else {
+        fetchData();
+        close();
+        setIsNoUser(false);
+      }
+    } catch (error) {
+      logError(error);
+    }
   };
 
   useEffect(() => {
@@ -76,28 +77,37 @@ const AddInstructors = () => {
           </ModalDialog.Title>
         </ModalDialog.Header>
         <ModalDialog.Body>
-          <FormGroup>
-            <Form.Control
-              as="select"
-              floatingLabel="Select Class Name"
-              className="my-4 mr-0"
-              onChange={handleCcxSelect}
-              id="selectCcx"
-            >
-              {state.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
-            </Form.Control>
-            <Form.Control
-              type="text"
-              placeholder="Enter Username or Email of the instructor"
-              floatingLabel="Username or Email"
-              value={addInstructorInfo.instructorInfo}
-              onChange={handleInstructorInput}
-              className="my-4 mr-0"
-            />
+          <Form onSubmit={handleAddInstructors}>
+            <FormGroup controlId="ccxId">
+              <Form.Control
+                as="select"
+                floatingLabel="Select Class Name"
+                className="my-4 mr-0"
+                name="ccxId"
+              >
+                <option disabled value="null">Select an Option</option>
+                {state.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
+              </Form.Control>
+            </FormGroup>
+            <FormGroup controlId="instructorInfo">
+              <Form.Control
+                type="text"
+                placeholder="Enter Username or Email of the instructor"
+                floatingLabel="Username or Email"
+                className="my-4 mr-0"
+                name="instructorInfo"
+              />
+              {isNoUser && (
+                <Form.Control.Feedback type="invalid">
+                  User does not exist
+                </Form.Control.Feedback>
+              )}
+            </FormGroup>
             <div className="d-flex justify-content-end">
-              <Button>Add</Button>
+              <Button type="submit">Add</Button>
             </div>
-          </FormGroup>
+          </Form>
+
         </ModalDialog.Body>
       </ModalDialog>
     </>

src/features/Instructors/data/_test_/api.test.js

@@ -1,5 +1,5 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { getInstructorData } from 'features/Instructors/data/api';
+import { getInstructorData, handleInstructorsEnrollment } from 'features/Instructors/data/api';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedHttpClient: jest.fn(),
@@ -34,3 +34,27 @@ describe('getInstructorData', () => {
     );
   });
 });
+
+describe('handleInstructorsEnrollment', () => {
+  test('should call getAuthenticatedHttpClient with the correct parameters', () => {
+    const httpClientMock = {
+      post: jest.fn(),
+    };
+
+    const courseId = 'course123';
+    const data = new FormData();
+
+    getAuthenticatedHttpClient.mockReturnValue(httpClientMock);
+
+    handleInstructorsEnrollment(data, courseId);
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledTimes(2);
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledWith();
+
+    expect(httpClientMock.post).toHaveBeenCalledTimes(1);
+    expect(httpClientMock.post).toHaveBeenCalledWith(
+      'http://localhost:18000/courses/course123/instructor/api/modify_access',
+      data,
+    );
+  });
+});

src/features/Instructors/data/api.js

@@ -17,11 +17,22 @@ function getInstructorData(page, filters) {
 function getCCXList() {
   const apiV2BaseUrl = getConfig().COURSE_OPERATIONS_API_V2_BASE_URL;
   return getAuthenticatedHttpClient().get(
-    `${apiV2BaseUrl}/classes?limit=false`,
+    `${apiV2BaseUrl}/classes/?limit=false`,
+  );
+}
+
+function handleInstructorsEnrollment(data, courseId) {
+  const INSTRUCTOR_API_URL = `${getConfig().LMS_BASE_URL}/courses/course_id/instructor/api`;
+  const courseIdSearchPattern = /course_id/;
+
+  return getAuthenticatedHttpClient().post(
+    `${INSTRUCTOR_API_URL.replace(courseIdSearchPattern, courseId)}/modify_access`,
+    data,
   );
 }
 
 export {
   getInstructorData,
   getCCXList,
+  handleInstructorsEnrollment,
 };

src/features/Students/StudentsPage/_test_/index.test.jsx

@@ -3,8 +3,6 @@ import axios from 'axios';
 import StudentsPage from 'features/Students/StudentsPage';
 import {
   render,
-  screen,
-  fireEvent,
   waitFor,
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -21,16 +19,30 @@ const mockResponse = {
       {
         learnerName: 'Student 1',
         learnerEmail: '[email protected]',
-        ccxName: 'CCX 1',
+        courseId: '1',
+        courseName: 'course 1',
+        classId: '1',
+        className: 'class 1',
         instructors: ['Instructor 1'],
         created: 'Fri, 25 Aug 2023 19:01:22 GMT',
+        firstAccess: 'Fri, 25 Aug 2023 19:01:23 GMT',
+        lastAccess: 'Fri, 25 Aug 2023 20:20:22 GMT',
+        status: 'Active',
+        examReady: 'yes',
       },
       {
         learnerName: 'Student 2',
         learnerEmail: '[email protected]',
-        ccxName: 'CCX 2',
+        courseId: '2',
+        courseName: 'course 2',
+        classId: '2',
+        className: 'class 2',
         instructors: ['Instructor 2'],
         created: 'Sat, 26 Aug 2023 19:01:22 GMT',
+        firstAccess: 'Sat, 26 Aug 2023 19:01:24 GMT',
+        lastAccess: 'Sat, 26 Aug 2023 21:22:22 GMT',
+        status: 'Pending',
+        examReady: 'no',
       },
     ],
     count: 2,
@@ -48,34 +60,14 @@ describe('StudentsPage', () => {
     waitFor(() => {
       expect(component.container).toHaveTextContent('Student 1');
       expect(component.container).toHaveTextContent('Student 2');
-      expect(component.container).toHaveTextContent('[email protected]');
-      expect(component.container).toHaveTextContent('[email protected]');
-      expect(component.container).toHaveTextContent('CCX 1');
-      expect(component.container).toHaveTextContent('CCX 2');
+      expect(component.container).toHaveTextContent('course 1');
+      expect(component.container).toHaveTextContent('course 2');
+      expect(component.container).toHaveTextContent('class 1');
+      expect(component.container).toHaveTextContent('class 2');
       expect(component.container).toHaveTextContent('Instructor 1');
       expect(component.container).toHaveTextContent('Instructor 2');
-      expect(component.container).toHaveTextContent('Fri, 25 Aug 2023 19:01:22 GMT');
-      expect(component.container).toHaveTextContent('Sat, 26 Aug 2023 19:01:22 GMT');
-    });
-  });
-
-  it('filters students data', async () => {
-    axios.get.mockResolvedValue(mockResponse);
-
-    const component = render(<StudentsPage />);
-
-    fireEvent.click(screen.getByRole('button', { name: /Filters/i }));
-
-    const nameInput = screen.getByPlaceholderText('Enter Student Name');
-    const emailInput = screen.getByPlaceholderText('Enter Student Email');
-    fireEvent.change(nameInput, { target: { value: 'Student 1' } });
-    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
-
-    fireEvent.click(screen.getByText('Apply Filters'));
-
-    waitFor(() => {
-      expect(component.container).toHaveTextContent('Student 1');
-      expect(screen.queryByText('Student 2')).toBeNull();
+      expect(component.container).toHaveTextContent('active');
+      expect(component.container).toHaveTextContent('pending');
     });
   });
 });