chore(PermissionForms): final code cleanup, fixed types and small lay…

…out issues [PT-187613639]

rails/react-components/src/library/components/permission-forms/common/types.ts

@@ -1,6 +1,7 @@
 export type CurrentSelectedProject = number | null;
+
 export interface IPermissionForm {
-  id: string;
+  id: number;
   name: string;
   is_archived: boolean;
   can_delete: boolean;
@@ -9,7 +10,7 @@ export interface IPermissionForm {
 }
 
 export interface IProject {
-  id: string;
+  id: number;
   name: string;
 }
 

rails/react-components/src/library/components/permission-forms/index.scss

@@ -1,7 +1,7 @@
 @import "../../../shared/styles/variables/variables";
 
 .permissionForms {
-  margin-bottom: 200px; // for dropdown menu
+  margin-bottom: 180px; // for dropdown menu
 
   .tabArea {
     .tabs {

rails/react-components/src/library/components/permission-forms/manage-forms-tab/create-edit-permission-form.scss

@@ -4,13 +4,14 @@
   width: 600px;
 
   .formTop {
-    display: flex;
-    align-content: center;
     background-color: $col-link;
     color: white;
     font-weight: bold;
     padding: 10px;
     margin-bottom:10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .formRow {

rails/react-components/src/library/components/permission-forms/manage-forms-tab/manage-forms-tab.tsx

@@ -25,7 +25,7 @@ const editPermissionForm = async (formData: IPermissionFormFormData): Promise<IP
     body: JSON.stringify({ permission_form: { ...formData } })
   });
 
-const deletePermissionForm = async (permissionFormId: string) =>
+const deletePermissionForm = async (permissionFormId: number) =>
   request({
     url: `${Portal.API_V1.PERMISSION_FORMS}/${permissionFormId}`,
     method: "DELETE"
@@ -78,7 +78,7 @@ export default function ManageFormsTab() {
     }
   };
 
-  const handleDeleteClick = async (permissionFormId: string) => {
+  const handleDeleteClick = async (permissionFormId: number) => {
     await deletePermissionForm(permissionFormId);
     refetchPermissions();
   };

rails/react-components/src/library/components/permission-forms/manage-forms-tab/permission-form-row.tsx

@@ -8,7 +8,7 @@ interface PermissionFormRowProps {
   permissionForm: IPermissionForm;
   onEditModalToggle: (permissionForm: IPermissionForm) => void;
   onEdit: (permissionForm: IPermissionForm) => void;
-  onDelete: (permissionFormId: string) => void;
+  onDelete: (permissionFormId: number) => void;
 }
 
 function ensureUrlProtocol(url: string): string {

rails/react-components/src/library/components/permission-forms/students-tab/classes-table.tsx

@@ -8,13 +8,13 @@ import { CurrentSelectedProject, IClassBasicInfo } from "./types";
 import css from "./classes-table.scss";
 
 interface IProps {
-  teacherId: string;
+  teacherId: number;
   currentSelectedProject: CurrentSelectedProject;
 }
 
 export const ClassesTable = ({ teacherId, currentSelectedProject }: IProps) => {
   const { data: classesData, isLoading } = useFetch<IClassBasicInfo[]>(Portal.API_V1.teacherClasses(teacherId), []);
-  const [selectedClassId, setSelectedClassId] = useState<string | null>(null);
+  const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
 
   if (isLoading) {
     return (<div>Loading...</div>);
@@ -23,8 +23,8 @@ export const ClassesTable = ({ teacherId, currentSelectedProject }: IProps) => {
     return (<div>No classes found</div>);
   }
 
-  const handleViewStudentsClick = (classId: string) => {
-    setSelectedClassId((prevSelectedClass: string | null) => prevSelectedClass === classId ? null : classId);
+  const handleViewStudentsClick = (classId: number) => {
+    setSelectedClassId((prevSelectedClass: number | null) => prevSelectedClass === classId ? null : classId);
   };
 
   return (

rails/react-components/src/library/components/permission-forms/students-tab/edit-student-permissions-form.scss

@@ -1,6 +1,6 @@
 @import "../../../../shared/styles/variables/variables";
 
-.editStudentPerimissionsForm {
+.editStudentPermissionsForm {
   width: 540px;
 
   .formTop {
@@ -10,7 +10,7 @@
     background-color: $blue;
     color: white;
     font-weight: bold;
-    padding: 10px;
+    padding: 8px 10px;
 
     .studentName {
       align-content: center;
@@ -22,28 +22,28 @@
     .closeButton button {
       padding: 0px;
       border: none;
-      width: 40px;
-      height: 40px;
+      width: 27px;
+      height: 27px;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50px;
+      border-radius: 50%;
       background-color: white;
       &:hover {
         background-color: darken(white, 10%);
       }
       i {
         color: $blue;
         margin: 0 auto;
-        font-size: 16px;
+        font-size: 15px;
       }
     }
   }
 
   .scrollableWrapper {
     max-height: 300px;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .formRow {

rails/react-components/src/library/components/permission-forms/students-tab/edit-student-permissions-form.tsx

@@ -1,18 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { IPermissionForm, IStudent } from "./types";
-import { bulkUpdatePermissionForms } from "./students-table";
 
 import css from "./edit-student-permissions-form.scss";
 
 interface CreateEditPermissionFormProps {
   student: IStudent;
   permissionForms: IPermissionForm[];
   onFormCancel: () => void;
-  onFormSave: () => void;
-  classId: string;
+  onFormSave: ({ studentId, idsToAdd, idsToRemove }: { studentId: number; idsToAdd: number[]; idsToRemove: number[] }) => void;
 }
 
-export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCancel, onFormSave, classId }: CreateEditPermissionFormProps) => {
+export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCancel, onFormSave }: CreateEditPermissionFormProps) => {
   const [localPermissions, setLocalPermissions] = useState(student.permission_forms || []);
 
   useEffect(() => {
@@ -21,7 +19,7 @@ export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCan
 
   // whenever a permission checkbox changes we figure out if it represents an add or a remove
   // we update the form state and the idsToAdd and idsToRemove arrays accordingly
-  const handlePermissionChange = (changedPermissionId: string) => {
+  const handlePermissionChange = (changedPermissionId: number) => {
     const shouldAddPermission = !localPermissions.some(lp => lp.id === changedPermissionId);
     const shouldRemovePermission = localPermissions.some(lp => lp.id === changedPermissionId);
 
@@ -43,18 +41,8 @@ export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCan
   const handleFormSave = async () => {
     const idsToAdd = localPermissions.filter(lp => !student.permission_forms.some(pf => pf.id === lp.id)).map(lp => lp.id);
     const idsToRemove = student.permission_forms.filter(pf => !localPermissions.some(lp => lp.id === pf.id)).map(pf => pf.id);
-    const response = await bulkUpdatePermissionForms({
-      classId,
-      selectedStudentIds: [student.id.toString()],
-      addFormIds: idsToAdd,
-      removeFormIds: idsToRemove
-    });
 
-    if (response) {
-      onFormSave();
-    } else {
-      alert("Failed to update permission forms");
-    }
+    onFormSave({ studentId: student.id, idsToAdd, idsToRemove });
   };
 
   // Check if there are any changes to the permissions so we know whether to enable the save button
@@ -64,10 +52,10 @@ export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCan
   const sortedPermissions = permissionForms.sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div className={css.editStudentPerimissionsForm}>
+    <div className={css.editStudentPermissionsForm}>
       <div className={css.formTop}>
         <div className={css.studentName}>
-        { `EDIT Permission Forms for: ${student.name}` }
+          { `EDIT Permission Forms for: ${student.name}` }
         </div>
         <div className={css.closeButton}>
           <button onClick={onFormCancel}>

rails/react-components/src/library/components/permission-forms/students-tab/students-tab.tsx

@@ -28,7 +28,7 @@ export default function StudentsTab() {
   // `null` means no search has been done yet, while an empty array means no results were found.
   const [teachers, setTeachers] = useState<ITeacher[] | null>(null);
   const [teachersLimitApplied, setTeachersLimitApplied] = useState<boolean>(false);
-  const [selectedTeacherId, setSelectedTeacherId] = useState<string | null>(null);
+  const [selectedTeacherId, setSelectedTeacherId] = useState<number | null>(null);
   const[teacherName, setTeacherName] = useState<string>("");
 
   // State for UI
@@ -42,23 +42,29 @@ export default function StudentsTab() {
     setTeacherName(e.target.value);
   };
 
+  const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearchClick();
+    }
+  };
+
   const handleSearchClick = async () => {
     setSelectedTeacherId(null);
     const { teachers: foundTeachers, limit_applied } = await searchTeachers(teacherName);
     setTeachers(foundTeachers);
     setTeachersLimitApplied(limit_applied);
   };
 
-  const handleViewClassesClick = (teacherId: string) => {
-    setSelectedTeacherId((prevSelectedTeacher: string | null) => prevSelectedTeacher === teacherId ? null : teacherId);
+  const handleViewClassesClick = (teacherId: number) => {
+    setSelectedTeacherId((prevSelectedTeacher: number | null) => prevSelectedTeacher === teacherId ? null : teacherId);
   };
 
   return (
     <div className={css.studentsTabContent}>
       <div className={css.controlsArea}>
         <div className={css.leftSide}>
           <div className={css.leftSideFirstRow}>
-            <input type="text" value={teacherName} onChange={handleTeacherNameChange} />
+            <input type="text" value={teacherName} onChange={handleTeacherNameChange} onKeyDown={handleEnterKey} />
             <button onClick={handleSearchClick}>Search</button>
           </div>
           <div>

rails/react-components/src/library/components/permission-forms/students-tab/students-table.scss

@@ -21,9 +21,7 @@ table.studentsTable {
 
   &.expandedPermissions {
     td.permissionFormsColumn {
-      overflow: visible;
       white-space: normal;
-      text-overflow: none;
     }
   }
 
@@ -32,10 +30,21 @@ table.studentsTable {
     text-overflow: ellipsis;
   }
 
+  .permissionFormSelectMenuList {
+    max-height: 250px;
+  }
+
   .checkboxColumn {
     width: 35px;
   }
 
+  th.permissionFormsColumn {
+    cursor: pointer;
+    &:hover {
+      background-color: lighten($permission-gold, 5%);
+    }
+  }
+
   .permissionFormsColumn {
     width: 320px;
   }