Lockdown mentor UI (#308)

* can lock/unlock mentor in users page

* fix carouself overflow, fix setup not recognizing finished idle upload

client/src/api.ts

@@ -340,6 +340,23 @@ export async function fetchUsers(
                 isAdvanced
                 isPublicApproved
                 lastTrainStatus
+                lockedToConfig
+                mentorConfig{
+                  configId
+                  subjects
+                  publiclyVisible
+                  mentorType
+                  orgPermissions{
+                    org
+                    viewPermission
+                    editPermission
+                  }
+                  loginHeaderText
+                  welcomeSlideHeader
+                  welcomeSlideText
+                  disableMyGoalSlide
+                  disableFollowups
+                }
                 orgPermissions {
                   orgId
                   viewPermission
@@ -1039,6 +1056,7 @@ export async function fetchMentorById(
           hasVirtualBackground
           virtualBackgroundUrl
           lastTrainStatus
+          lockedToConfig
           mentorConfig{
             configId
             subjects
@@ -2019,6 +2037,27 @@ export async function fetchUploadTasks(
   return gql.map((u) => convertUploadTaskGQL(u));
 }
 
+export async function setMentorConfigLock(
+  mentorId: string,
+  accessToken: string,
+  lockedToConfig: boolean
+): Promise<boolean> {
+  return await execGql<boolean>(
+    {
+      query: `
+      mutation SetMentorConfigLock($mentorId: ID!, $lockedToConfig: Boolean!) {
+        me {
+          setMentorConfigLock(mentorId: $mentorId, lockedToConfig: $lockedToConfig){
+            lockedToConfig
+          }
+        }
+      }`,
+      variables: { mentorId, lockedToConfig },
+    },
+    { accessToken, dataPath: ["me", "setMentorConfigLock", "lockedToConfig"] }
+  );
+}
+
 //Fetches the record queue for the mentor that is logged in (using the accessToken to know which mentor to fetch from)
 export async function fetchMentorRecordQueue(
   accessToken: string

client/src/hooks/graphql/use-with-setup.tsx

@@ -139,11 +139,13 @@ export function useWithSetup(
       mentor.mentorType === MentorType.VIDEO && idleAnswer
         ? {
             idle: idleAnswer,
-            complete: isAnswerComplete(
-              idleAnswer,
-              UtteranceName.IDLE,
-              mentor.mentorType
-            ),
+            complete:
+              isAnswerComplete(
+                idleAnswer,
+                UtteranceName.IDLE,
+                mentor.mentorType
+              ) ||
+              Boolean(uploads.find((u) => u.question == idleAnswer.question)),
           }
         : undefined;
     const requiredSubjects = mentor.subjects
@@ -192,14 +194,6 @@ export function useWithSetup(
       requiredSubjects,
       isSetupComplete,
     });
-    console.log({
-      isMentorInfoDone,
-      isMentorTypeChosen,
-      isMentorGoalDone,
-      idle,
-      requiredSubjects,
-      isSetupComplete,
-    });
     const mentorSubjectsLocked = mentor.mentorConfig?.subjects.length;
     const mentorPrivacyLocked =
       mentor.mentorConfig?.publiclyVisible !== undefined ||

client/src/hooks/graphql/use-with-users.tsx

@@ -7,6 +7,7 @@ The full terms of this copyright and license should always be found in the root
 import {
   archiveMentorDetails,
   fetchUsers,
+  setMentorConfigLock,
   updateMentorAdvanced,
   updateMentorPrivacy,
   updateMentorPublicApproval,
@@ -29,6 +30,7 @@ export interface UseUserData extends UseStaticDataConnection<User> {
   onUpdateMentorPrivacy: (mentorId: string, isPrivate: boolean) => void;
   onUpdateMentorAdvanced: (mentorId: string, isAdvanced: boolean) => void;
   onArchiveMentor: (mentorId: string, isArchived: boolean) => void;
+  onSetMentorLock: (mentorId: string, locked: boolean) => void;
 }
 
 export function useWithUsers(accessToken: string): UseUserData {
@@ -85,6 +87,19 @@ export function useWithUsers(accessToken: string): UseUserData {
       });
   }
 
+  function onSetMentorLock(mentorId: string, locked: boolean): void {
+    setMentorConfigLock(mentorId, accessToken, locked)
+      .then(() => {
+        reloadData();
+      })
+      .catch((err) => {
+        setUserDataError({
+          message: "Failed to lock mentor",
+          error: `${err}`,
+        });
+      });
+  }
+
   function onUpdateMentorPublicApproved(
     mentorId: string,
     isPublicApproved: boolean
@@ -164,5 +179,6 @@ export function useWithUsers(accessToken: string): UseUserData {
     onUpdateUserDisabled,
     onUpdateMentorPublicApproved,
     onArchiveMentor,
+    onSetMentorLock,
   };
 }

client/src/pages/setup.tsx

@@ -68,7 +68,7 @@ const useStyles = makeStyles({ name: { SetupPage } })(() => ({
     alignContent: "center",
     height: "700px",
     width: "100%",
-    overflow: "visible",
+    overflow: "hidden",
   },
   card: {
     minHeight: 450,

client/src/pages/users.tsx

@@ -178,6 +178,14 @@ function getTableColumns(
       align: "left",
       sortable: true,
     },
+    {
+      id: "defaultMentor",
+      subField: ["lockedToConfig"],
+      label: "Locked",
+      minWidth: 0,
+      align: "left",
+      sortable: true,
+    },
     {
       id: "defaultMentor",
       subField: ["updatedAt"],
@@ -364,9 +372,14 @@ function UserItem(props: {
     props.userPagin.onUpdateMentorAdvanced(mentor, isAdvanced);
   }
 
+  function handleSetMentorLock(mentor: string, locked: boolean): void {
+    props.userPagin.onSetMentorLock(mentor, locked);
+  }
+
   function handleArchiveChange(mentor: string, isArchived: boolean): void {
     props.userPagin.onArchiveMentor(mentor, isArchived);
   }
+
   return (
     <TableRow data-cy={`user-${i}`} hover role="checkbox" tabIndex={-1}>
       <TableCell data-cy="publicApproved" align="center" key={mentor._id}>
@@ -550,6 +563,22 @@ function UserItem(props: {
           />
         </TableCell>
       ) : undefined}
+      {isAdmin ? (
+        <TableCell data-cy="set-mentor-lock" align="left">
+          <Checkbox
+            checked={Boolean(mentor.lockedToConfig)}
+            disabled={
+              !mentor.mentorConfig ||
+              (props.user.userRole !== UserRole.ADMIN &&
+                props.user.userRole !== UserRole.SUPER_ADMIN)
+            }
+            color="secondary"
+            onClick={() =>
+              handleSetMentorLock(mentor._id, !mentor.lockedToConfig)
+            }
+          />
+        </TableCell>
+      ) : undefined}
       {props.viewArchivedMentors ? (
         <TableCell data-cy="archived" align="left">
           <Checkbox
@@ -561,17 +590,28 @@ function UserItem(props: {
         </TableCell>
       ) : undefined}
       <TableCell data-cy="updatedAt" align="left">
-        {mentor.updatedAt ? new Date(mentor.updatedAt).toLocaleString() : "N/A"}
+        {mentor.updatedAt ? (
+          <>
+            {new Date(mentor.updatedAt)
+              .toLocaleString()
+              .split(",")
+              .map((s) => {
+                return <div key={mentor.updatedAt}>{s}</div>;
+              })}
+          </>
+        ) : (
+          "N/A"
+        )}
       </TableCell>
-      <TableCell data-cy="actions" align="right">
+      <TableCell data-cy="actions" align="right" style={{ padding: 0 }}>
         <TrainDirtyMentorButton
           mentor={mentor}
           accessToken={props.accessToken}
           mentorTrainStatusDict={mentorTrainStatusDict}
           addMentorToPoll={addMentorToPoll}
         />
 
-        <Tooltip style={{ margin: 10 }} title="Launch Mentor" arrow>
+        <Tooltip style={{ margin: 0 }} title="Launch Mentor" arrow>
           <IconButton
             data-cy="launch-default-mentor"
             onClick={() => {
@@ -583,7 +623,7 @@ function UserItem(props: {
             <LaunchIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip style={{ margin: 10 }} title="Import" arrow>
+        <Tooltip style={{ margin: 0 }} title="Import" arrow>
           <IconButton
             data-cy="import-button"
             onClick={() => {
@@ -597,7 +637,7 @@ function UserItem(props: {
             <ImportExport />
           </IconButton>
         </Tooltip>
-        <Tooltip style={{ margin: 10 }} title="Export Mentor" arrow>
+        <Tooltip style={{ margin: 0 }} title="Export Mentor" arrow>
           <IconButton
             data-cy="export-button"
             onClick={() => exportMentor(mentor._id, props.accessToken)}
@@ -608,7 +648,7 @@ function UserItem(props: {
             <GetAppIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip style={{ margin: 10 }} title="Edit Mentor" arrow>
+        <Tooltip style={{ margin: 0 }} title="Edit Mentor" arrow>
           <IconButton
             data-cy="edit-button"
             onClick={() => {

client/src/types-gql.ts

@@ -87,6 +87,7 @@ export interface MentorGQL {
   isArchived: boolean;
   isAdvanced: boolean;
   mentorConfig?: MentorConfig;
+  lockedToConfig?: boolean;
   orgPermissions: OrgPermission[];
   defaultSubject?: SubjectGQL;
   subjects: SubjectGQL[];

client/src/types.ts

@@ -197,6 +197,7 @@ export interface Mentor {
   isPrivate: boolean;
   isArchived: boolean;
   isAdvanced: boolean;
+  lockedToConfig?: boolean;
   mentorConfig?: MentorConfig;
   orgPermissions: OrgPermission[];
   defaultSubject?: Subject;