Add dynamic tooltip on user roles, bios link to separate page, and other small fixes from PR comments

Author: edwardneo

csm_web/frontend/src/components/App.tsx

@@ -82,7 +82,7 @@ function Header(): React.ReactElement {
   };
 
   /**
-   * Helper function to determine class name for the home NavLnk component;
+   * Helper function to determine class name for the home NavLink component;
    * is always active unless we're in another tab.
    */
   const homeNavlinkClass = () => {

csm_web/frontend/src/components/UserProfile.tsx

@@ -195,9 +195,22 @@ const UserProfileContent: React.FC = () => {
             className="user-profile-tooltip"
           >
             <div>
-              Edit your profile so others can learn about you. <br /> <br />
-              Students: visible to your mentors and coordinators. <br />
-              Mentors: visible to everyone.
+              Edit your profile so others can learn about you.
+              {requestedData.roles.includes("mentor") ? (
+                <>
+                  <br />
+                  <br />
+                  This profile is visible to everyone.
+                </>
+              ) : requestedData.roles.includes("student") ? (
+                <>
+                  <br />
+                  <br />
+                  This profile is visible to your mentors and coordinators.
+                </>
+              ) : (
+                ""
+              )}
             </div>
           </Tooltip>
         )}
@@ -307,7 +320,7 @@ const UserProfileContent: React.FC = () => {
                   <div>
                     A blank name field will default to
                     <br />
-                    the user&apos;s first and last name.
+                    your first and last name.
                   </div>
                 </Tooltip>
               </div>

csm_web/frontend/src/components/course/Course.tsx

@@ -1,6 +1,6 @@
 import { DateTime } from "luxon";
 import React, { useState } from "react";
-import { useParams } from "react-router-dom";
+import { Routes, Route, Link, useParams } from "react-router-dom";
 import { DEFAULT_LONG_LOCALE_OPTIONS } from "../../utils/datetime";
 import { useCourseSections } from "../../utils/queries/courses";
 import { Course as CourseType } from "../../utils/types";
@@ -31,7 +31,12 @@ export interface CourseProps {
   priorityEnrollment: DateTime | undefined;
 }
 
-const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps) => {
+const CourseHeader = ({
+  courses,
+  priorityEnrollment,
+  enrollmentTimes,
+  display
+}: CourseProps & { display: "sections" | "bios" }) => {
   /**
    * Course id from the URL.
    */
@@ -47,8 +52,6 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps) =
     refetch: reloadSections
   } = useCourseSections(courseId ? parseInt(courseId) : undefined);
 
-  const [display, setDisplay] = useState<"sections" | "bios">("sections");
-
   if (courses === null) {
     // if courses not loaded, parent component deals with loading spinner
     return null;
@@ -75,9 +78,9 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps) =
     <div id="course-section-selector">
       <div id="course-header">
         <h2 className="course-title">{course.name}</h2>
-        <button className="primary-outline-btn" onClick={() => setDisplay(display == "sections" ? "bios" : "sections")}>
+        <Link className="primary-outline-btn" to={`/courses/${courseId}${display == "sections" ? "/bios" : ""}`}>
           View {display == "sections" ? "Bios" : "Sections"}
-        </button>
+        </Link>
       </div>
       {display == "sections" ? (
         <CourseSections
@@ -94,4 +97,13 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps) =
     </div>
   );
 };
+
+const Course = (props: CourseProps) => {
+  return (
+    <Routes>
+      <Route path="/bios" element={<CourseHeader {...props} display="bios" />} />
+      <Route index element={<CourseHeader {...props} display="sections" />} />
+    </Routes>
+  );
+};
 export default Course;

csm_web/frontend/src/css/base/base.scss

@@ -91,8 +91,11 @@ h6 {
 
   &:link,
   &:visited,
-  &:hover,
   &:active {
     color: $csm-link-blue;
   }
+
+  &:hover {
+    color: $csm-link-hover;
+  }
 }

csm_web/frontend/src/utils/types.tsx

@@ -39,6 +39,7 @@ export interface UserInfo {
   pronouns: string;
   pronunciation: string;
   email: string;
+  roles: ("student" | "mentor" | "coordinator")[];
   priorityEnrollment?: DateTime;
   isEditable: boolean;
   profileImage?: string;

csm_web/scheduler/urls.py

@@ -18,7 +18,6 @@
     path("user/", views.user_info, name="user"),
     path("user/<int:pk>/", views.user_retrieve, name="user_retrieve"),
     path("user/<int:pk>/update/", views.user_update, name="user_update"),
-    # path("user/upload_image/", views.upload_image, name="upload_image"),
     path("matcher/active/", views.matcher.active),
     path("matcher/<int:pk>/slots/", views.matcher.slots),
     path("matcher/<int:pk>/preferences/", views.matcher.preferences),

csm_web/scheduler/views/user.py

@@ -34,6 +34,18 @@ def list(self, request):
         return Response(self.queryset.order_by("email").values_list("email", flat=True))
 
 
+@api_view(["GET"])
+def user_info(request):
+    """
+    Get user info for request user
+    """
+    serializer = UserSerializer(request.user)
+    return Response(
+        {**serializer.data, "roles": user_roles(request.user)},
+        status=status.HTTP_200_OK,
+    )
+
+
 @api_view(["GET"])
 def user_retrieve(request, pk):
     """
@@ -49,7 +61,11 @@ def user_retrieve(request, pk):
 
     serializer = UserSerializer(user)
     return Response(
-        {**serializer.data, "isEditable": user_editable(request.user, user)}
+        {
+            **serializer.data,
+            "roles": user_roles(user),
+            "isEditable": user_editable(request.user, user),
+        }
     )
 
 
@@ -110,13 +126,17 @@ def user_update(request, pk):
     return Response(serializer.data, status=status.HTTP_200_OK)
 
 
-@api_view(["GET"])
-def user_info(request):
-    """
-    Get user info for request user
-    """
-    serializer = UserSerializer(request.user)
-    return Response(serializer.data, status=status.HTTP_200_OK)
+def user_roles(user):
+    """Get list of user roles"""
+    roles = []
+    if Student.objects.filter(user=user, active=True).exists():
+        roles.append("student")
+    if Mentor.objects.filter(user=user, section__isnull=False).exists():
+        roles.append("mentor")
+    if Coordinator.objects.filter(user=user).exists():
+        roles.append("coordinator")
+
+    return roles
 
 
 def user_editable(request_user, target_user):