From 4ccf0c7580e456449cdeed852e1d4d98ca2fd058 Mon Sep 17 00:00:00 2001
From: Sergio Valero <sergio.valero@edunext.co>
Date: Wed, 2 Oct 2024 22:57:14 -0400
Subject: [PATCH] fix: Re-order options in dropdown menu (Classes table)

---
 .../Classes/Class/ClassPage/Actions.jsx       | 12 ++-
 .../ClassesTable/_test_/columns.test.jsx      | 10 ++-
 src/features/Classes/ClassesTable/columns.jsx | 83 +++++++++++++++++--
 src/features/Courses/AddClass/index.jsx       | 27 ++----
 .../Courses/CourseDetailTable/columns.jsx     |  8 +-
 .../Courses/CoursesDetailPage/index.jsx       |  8 +-
 src/features/Courses/CoursesTable/columns.jsx | 13 ++-
 src/features/Courses/data/thunks.js           |  2 +-
 8 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/src/features/Classes/Class/ClassPage/Actions.jsx b/src/features/Classes/Class/ClassPage/Actions.jsx
index ac68d0d..4f2d6c2 100644
--- a/src/features/Classes/Class/ClassPage/Actions.jsx
+++ b/src/features/Classes/Class/ClassPage/Actions.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { useParams, useHistory } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -15,12 +15,16 @@ import { useInstitutionIdQueryParam } from 'hooks';
 
 import AddClass from 'features/Courses/AddClass';
 import EnrollStudent from 'features/Classes/EnrollStudent';
+import { fetchAllClassesData } from 'features/Classes/data/thunks';
 
 const Actions = ({ previousPage }) => {
+  const dispatch = useDispatch();
   const history = useHistory();
   const { courseId, classId } = useParams();
+  const courseIdDecoded = decodeURIComponent(courseId);
   const classIdDecoded = decodeURIComponent(classId);
   const classes = useSelector((state) => state.classes.allClasses.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
 
   const classLink = `${getConfig().LEARNING_MICROFRONTEND_URL}/course/${classIdDecoded}/home`;
 
@@ -38,6 +42,10 @@ const Actions = ({ previousPage }) => {
     history.push(addQueryParam(`/manage-instructors/${courseId}/${classId}?previous=${previousPage}`));
   };
 
+  const finalCall = () => {
+    dispatch(fetchAllClassesData(selectedInstitution.id, courseIdDecoded));
+  };
+
   return (
     <>
       <Button
@@ -89,7 +97,7 @@ const Actions = ({ previousPage }) => {
           maxStudents: classInfo?.maxStudents,
         }}
         isEditing
-        isDetailClassPage
+        finalCall={finalCall}
       />
       <EnrollStudent isOpen={isEnrollModalOpen} onClose={handleEnrollStudentModal} />
     </>
diff --git a/src/features/Classes/ClassesTable/_test_/columns.test.jsx b/src/features/Classes/ClassesTable/_test_/columns.test.jsx
index f71d7c3..daba135 100644
--- a/src/features/Classes/ClassesTable/_test_/columns.test.jsx
+++ b/src/features/Classes/ClassesTable/_test_/columns.test.jsx
@@ -81,7 +81,7 @@ describe('columns', () => {
     };
 
     const {
-      getByText, getByTestId, getAllByRole, getAllByText,
+      getByText, getByTestId, getAllByRole,
     } = renderWithProviders(
       <MemoryRouter initialEntries={['/classes/']}>
         <Route path="/classes/">
@@ -93,10 +93,12 @@ describe('columns', () => {
 
     const button = getByTestId('droprown-action');
     fireEvent.click(button);
-    const editButton = getAllByRole('button')[1];
+    const editButton = getAllByRole('button')[2];
     expect(editButton).toBeInTheDocument();
     fireEvent.click(editButton);
-    expect(getAllByText('Edit Class')).toHaveLength(2);
-    expect(getByText('course example')).toBeInTheDocument();
+    expect(getByText('View class content')).toBeInTheDocument();
+    expect(getByText('Manage Instructors')).toBeInTheDocument();
+    expect(getByText('Edit Class')).toBeInTheDocument();
+    expect(getByText('Delete Class')).toBeInTheDocument();
   });
 });
diff --git a/src/features/Classes/ClassesTable/columns.jsx b/src/features/Classes/ClassesTable/columns.jsx
index 2dacc97..007ff46 100644
--- a/src/features/Classes/ClassesTable/columns.jsx
+++ b/src/features/Classes/ClassesTable/columns.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import {
   Dropdown,
@@ -10,11 +11,19 @@ import {
 import { Badge } from 'react-paragon-topaz';
 import { MoreHoriz } from '@edx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
+import { logError } from '@edx/frontend-platform/logging';
 
 import AddClass from 'features/Courses/AddClass';
+import DeleteModal from 'features/Common/DeleteModal';
 import LinkWithQuery from 'features/Main/LinkWithQuery';
 
+import { RequestStatus, initialPage } from 'features/constants';
+
+import { deleteClass } from 'features/Courses/data/thunks';
+import { fetchClassesData } from 'features/Classes/data/thunks';
+
 import { formatUTCDate, setAssignStaffRole } from 'helpers';
+import { resetClassState } from 'features/Courses/data/slice';
 
 const columns = [
   {
@@ -99,7 +108,51 @@ const columns = [
         minStudentsAllowed,
         maxStudents,
       } = row.original;
+
+      const initialDeletionClassState = {
+        isModalOpen: false,
+        isRequestComplete: false,
+      };
+
+      const dispatch = useDispatch();
+      const institution = useSelector((state) => state.main.selectedInstitution);
+      const deletionState = useSelector((state) => state.courses.newClass.status);
       const [isOpenModal, openModal, closeModal] = useToggle(false);
+      const [deletionClassState, setDeletionState] = useState(initialDeletionClassState);
+
+      const handleResetDeletion = () => {
+        setDeletionState(initialDeletionClassState);
+        dispatch(resetClassState());
+      };
+      const handleOpenDeleteModal = () => {
+        dispatch(resetClassState());
+        setDeletionState({ isModalOpen: true, isRequestComplete: false });
+      };
+
+      const handleDeleteClass = async (rowClassId) => {
+        try {
+          await dispatch(deleteClass(rowClassId));
+
+          setDeletionState({
+            isModalOpen: false,
+            isRequestComplete: true,
+          });
+
+          await dispatch(fetchClassesData(institution.id, initialPage));
+        } catch (error) {
+          logError(error);
+        } finally {
+          setDeletionState((prevState) => ({
+            ...prevState,
+            isRequestComplete: true,
+          }));
+        }
+      };
+
+      const finalCall = () => {
+        dispatch(fetchClassesData(institution.id, initialPage));
+      };
+
       return (
         <Dropdown className="dropdowntpz">
           <Dropdown.Toggle
@@ -112,26 +165,32 @@ const columns = [
             alt="menu for actions"
           />
           <Dropdown.Menu>
-            <Dropdown.Item onClick={openModal}>
-              <i className="fa-regular fa-pen-to-square mr-2 mb-1" />
-              Edit Class
-            </Dropdown.Item>
             <Dropdown.Item
+              target="_blank"
+              rel="noreferrer"
               onClick={() => setAssignStaffRole(`${getConfig().LEARNING_MICROFRONTEND_URL}/course/${classId}/home`, classId)}
               className="text-truncate text-decoration-none custom-text-black"
             >
-              <i className="fa-solid fa-arrow-up-right-from-square mr-2 mb-1" />
+              <i className="fa-regular fa-eye mr-2 mb-1" />
               View class content
             </Dropdown.Item>
             <Dropdown.Item>
               <LinkWithQuery
-                to={`/manage-instructors/${encodeURIComponent(masterCourseId)}/${encodeURIComponent(classId)}?previous=classes`}
+                to={`/manage-instructors/${encodeURIComponent(masterCourseId)}/${encodeURIComponent(classId)}`}
                 className="text-truncate text-decoration-none custom-text-black"
               >
                 <i className="fa-regular fa-chalkboard-user mr-2 mb-1" />
                 Manage Instructors
               </LinkWithQuery>
             </Dropdown.Item>
+            <Dropdown.Item onClick={openModal}>
+              <i className="fa-solid fa-pencil mr-2 mb-1" />
+              Edit Class
+            </Dropdown.Item>
+            <Dropdown.Item onClick={handleOpenDeleteModal} className="text-danger">
+              <i className="fa-regular fa-trash mr-2 mb-1" />
+              Delete Class
+            </Dropdown.Item>
             <AddClass
               isOpen={isOpenModal}
               onClose={closeModal}
@@ -145,8 +204,16 @@ const columns = [
                 minStudents: minStudentsAllowed,
                 maxStudents,
               }}
-              isCoursePage
               isEditing
+              finalCall={finalCall}
+            />
+            <DeleteModal
+              isLoading={deletionState === RequestStatus.LOADING}
+              isOpen={deletionClassState.isModalOpen}
+              onClose={handleResetDeletion}
+              handleDelete={() => { handleDeleteClass(classId); }}
+              title="Delete this class"
+              textModal="This action will permanently delete this class and cannot be undone. Booked seat in this class will not be affected by this action."
             />
           </Dropdown.Menu>
         </Dropdown>
diff --git a/src/features/Courses/AddClass/index.jsx b/src/features/Courses/AddClass/index.jsx
index c0c5487..e678a31 100644
--- a/src/features/Courses/AddClass/index.jsx
+++ b/src/features/Courses/AddClass/index.jsx
@@ -8,11 +8,8 @@ import {
 import { Button, Select } from 'react-paragon-topaz';
 import { logError } from '@edx/frontend-platform/logging';
 
-import { addClass, fetchCoursesData, editClass } from 'features/Courses/data';
+import { addClass, editClass } from 'features/Courses/data';
 import { fetchInstructorsOptionsData } from 'features/Instructors/data/thunks';
-import { fetchClassesData, fetchAllClassesData } from 'features/Classes/data/thunks';
-import { updateCurrentPage as updateCoursesCurrentPage } from 'features/Courses/data/slice';
-import { updateCurrentPage as updateClassesCurrentPage } from 'features/Classes/data/slice';
 
 import { initialPage } from 'features/constants';
 import { formatUTCDate } from 'helpers';
@@ -20,7 +17,7 @@ import { formatUTCDate } from 'helpers';
 import 'features/Courses/AddClass/index.scss';
 
 const AddClass = ({
-  isOpen, onClose, courseInfo, isCoursePage, isEditing, isDetailClassPage,
+  isOpen, onClose, courseInfo, isEditing, finalCall,
 }) => {
   const dispatch = useDispatch();
   const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
@@ -56,12 +53,7 @@ const AddClass = ({
       } catch (error) {
         logError(error);
       } finally {
-        if (isDetailClassPage) {
-          dispatch(fetchAllClassesData(selectedInstitution.id, courseInfo.masterCourseId));
-        } else {
-          dispatch(fetchClassesData(selectedInstitution.id, initialPage, courseInfo.masterCourseId));
-          dispatch(updateClassesCurrentPage(initialPage));
-        }
+        finalCall();
       }
     } else {
       try {
@@ -79,13 +71,7 @@ const AddClass = ({
       } catch (error) {
         logError(error);
       } finally {
-        if (isCoursePage) {
-          dispatch(fetchCoursesData(selectedInstitution.id, initialPage));
-          dispatch(updateCoursesCurrentPage(initialPage));
-        } else {
-          dispatch(fetchClassesData(selectedInstitution.id, initialPage, courseInfo.masterCourseId));
-          dispatch(updateClassesCurrentPage(initialPage));
-        }
+        finalCall();
       }
     }
 
@@ -269,15 +255,12 @@ AddClass.propTypes = {
     minStudents: PropTypes.number,
     maxStudents: PropTypes.number,
   }).isRequired,
-  isCoursePage: PropTypes.bool,
   isEditing: PropTypes.bool,
-  isDetailClassPage: PropTypes.bool,
+  finalCall: PropTypes.func.isRequired,
 };
 
 AddClass.defaultProps = {
-  isCoursePage: false,
   isEditing: false,
-  isDetailClassPage: false,
 };
 
 export default AddClass;
diff --git a/src/features/Courses/CourseDetailTable/columns.jsx b/src/features/Courses/CourseDetailTable/columns.jsx
index d6cdb61..160128c 100644
--- a/src/features/Courses/CourseDetailTable/columns.jsx
+++ b/src/features/Courses/CourseDetailTable/columns.jsx
@@ -24,6 +24,7 @@ import { RequestStatus, initialPage } from 'features/constants';
 
 import { deleteClass } from 'features/Courses/data/thunks';
 import { fetchClassesData } from 'features/Classes/data/thunks';
+import { updateCurrentPage as updateClassesCurrentPage } from 'features/Classes/data/slice';
 
 import { resetClassState } from 'features/Courses/data/slice';
 
@@ -165,6 +166,11 @@ const columns = [
         }
       };
 
+      const finalCall = () => {
+        dispatch(fetchClassesData(institution.id, initialPage, masterCourseId));
+        dispatch(updateClassesCurrentPage(initialPage));
+      };
+
       return (
         <>
           <Dropdown className="dropdowntpz">
@@ -217,8 +223,8 @@ const columns = [
                   minStudents: minStudentsAllowed,
                   maxStudents,
                 }}
-                isCoursePage
                 isEditing
+                finalCall={finalCall}
               />
               <DeleteModal
                 isLoading={deletionState === RequestStatus.LOADING}
diff --git a/src/features/Courses/CoursesDetailPage/index.jsx b/src/features/Courses/CoursesDetailPage/index.jsx
index 88cd81d..3112ae7 100644
--- a/src/features/Courses/CoursesDetailPage/index.jsx
+++ b/src/features/Courses/CoursesDetailPage/index.jsx
@@ -13,7 +13,7 @@ import CourseDetailTable from 'features/Courses/CourseDetailTable';
 
 import { fetchClassesData } from 'features/Classes/data/thunks';
 import { fetchCoursesData } from 'features/Courses/data/thunks';
-import { fetchClassesDataSuccess } from 'features/Classes/data/slice';
+import { fetchClassesDataSuccess, updateCurrentPage as updateClassesCurrentPage } from 'features/Classes/data/slice';
 import { fetchCoursesDataSuccess, updateCurrentPage } from 'features/Courses/data/slice';
 
 import { initialPage } from 'features/constants';
@@ -93,6 +93,11 @@ const CoursesDetailPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [institution, history]);
 
+  const finalCall = () => {
+    dispatch(fetchClassesData(institution.id, initialPage, courseIdDecoded));
+    dispatch(updateClassesCurrentPage(initialPage));
+  };
+
   return (
     <Container size="xl" className="px-4 mt-3">
       <div className="d-flex justify-content-between mb-3 flex-column flex-sm-row">
@@ -137,6 +142,7 @@ const CoursesDetailPage = () => {
           isOpen={isOpenModal}
           onClose={closeModal}
           courseInfo={nextCourseInfo}
+          finalCall={finalCall}
         />
       </div>
       <CourseDetailTable count={classes.count} data={classes.data} />
diff --git a/src/features/Courses/CoursesTable/columns.jsx b/src/features/Courses/CoursesTable/columns.jsx
index 0794b15..8a87dd6 100644
--- a/src/features/Courses/CoursesTable/columns.jsx
+++ b/src/features/Courses/CoursesTable/columns.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types, no-nested-ternary */
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Badge } from 'react-paragon-topaz';
 import {
@@ -10,6 +11,9 @@ import { MoreHoriz } from '@edx/paragon/icons';
 
 import AddClass from 'features/Courses/AddClass';
 import LinkWithQuery from 'features/Main/LinkWithQuery';
+import { updateCurrentPage as updateCoursesCurrentPage } from 'features/Courses/data/slice';
+import { fetchCoursesData } from 'features/Courses/data/thunks';
+import { initialPage } from 'features/constants';
 
 const columns = [
   {
@@ -44,8 +48,15 @@ const columns = [
     cellClassName: 'dropdownColumn',
     disableSortBy: true,
     Cell: ({ row }) => {
+      const dispatch = useDispatch();
+      const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
       const [isOpenModal, openModal, closeModal] = useToggle(false);
       const courseDetailsLink = `${getConfig().LEARNING_MICROFRONTEND_URL}/course/${row.original.masterCourseId}/home`;
+      const finalCall = () => {
+        dispatch(fetchCoursesData(selectedInstitution.id, initialPage));
+        dispatch(updateCoursesCurrentPage(initialPage));
+      };
+
       return (
         <Dropdown className="dropdowntpz">
           <Dropdown.Toggle
@@ -73,7 +84,7 @@ const columns = [
                 masterCourseName: row.original.masterCourseName,
                 masterCourseId: row.original.masterCourseId,
               }}
-              isCoursePage
+              finalCall={finalCall}
             />
           </Dropdown.Menu>
         </Dropdown>
diff --git a/src/features/Courses/data/thunks.js b/src/features/Courses/data/thunks.js
index 11e1777..728caec 100644
--- a/src/features/Courses/data/thunks.js
+++ b/src/features/Courses/data/thunks.js
@@ -53,7 +53,7 @@ function addClass(classData, instructorData) {
         instructorData.append('class_id', response.data.class_id);
         await dispatch(assignInstructors(instructorData));
       }
-      dispatch(updateNotificationMsg(`${response.data.name} has been added successfullly!`));
+      dispatch(updateNotificationMsg(`${response.data.name} has been added successfully!`));
     } catch (error) {
       dispatch(newClassFailed());
       logError(error);