enable edit profile support

Author: devksingh4

src/common/types/msGraphApi.ts

@@ -0,0 +1,13 @@
+export interface UserProfileData {
+  id?: string;
+  userPrincipalName: string;
+  displayName?: string;
+  givenName?: string;
+  surname?: string;
+  mail?: string;
+  jobTitle?: string;
+  mobilePhone?: string;
+  officeLocation?: string;
+  preferredLanguage?: string;
+  businessPhones?: string[];
+}

src/ui/Router.tsx

@@ -17,6 +17,7 @@ import { ScanTicketsPage } from './pages/tickets/ScanTickets.page';
 import { SelectTicketsPage } from './pages/tickets/SelectEventId.page';
 import { ViewTicketsPage } from './pages/tickets/ViewTickets.page';
 import { ManageIamPage } from './pages/iam/ManageIam.page';
+import { ManageProfilePage } from './pages/profile/ManageProfile.page';
 
 // Component to handle redirects to login with return path
 const LoginRedirect: React.FC = () => {
@@ -87,6 +88,10 @@ const authenticatedRouter = createBrowserRouter([
     path: '/logout',
     element: <LogoutPage />,
   },
+  {
+    path: '/profile',
+    element: <ManageProfilePage />,
+  },
   {
     path: '/home',
     element: <HomePage />,

src/ui/components/AppShell/index.tsx

@@ -25,7 +25,7 @@ import { HeaderNavbar } from '../Navbar/index.js';
 import { AuthenticatedProfileDropdown } from '../ProfileDropdown/index.js';
 import { getCurrentRevision } from '@ui/util/revision.js';
 
-interface AcmAppShellProps {
+export interface AcmAppShellProps {
   children: ReactNode;
   active?: string;
   showLoader?: boolean;
@@ -164,7 +164,7 @@ const AcmAppShell: React.FC<AcmAppShellProps> = ({
       padding="md"
       header={{ height: 60 }}
       navbar={{
-        width: 200,
+        width: showSidebar ? 200 : 0,
         breakpoint: 'sm',
         collapsed: { mobile: !opened },
       }}

src/ui/components/AuthGuard/index.tsx

@@ -1,7 +1,7 @@
 import { Card, Text, Title } from '@mantine/core';
 import React, { ReactNode, useEffect, useState } from 'react';
 
-import { AcmAppShell } from '@ui/components/AppShell';
+import { AcmAppShell, AcmAppShellProps } from '@ui/components/AppShell';
 import FullScreenLoader from '@ui/components/AuthContext/LoadingScreen';
 import { getRunEnvironmentConfig, ValidService } from '@ui/config';
 import { useApi } from '@ui/util/api';
@@ -60,11 +60,13 @@ export const clearAuthCache = () => {
   }
 };
 
-export const AuthGuard: React.FC<{
-  resourceDef: ResourceDefinition;
-  children: ReactNode;
-  isAppShell?: boolean;
-}> = ({ resourceDef, children, isAppShell = true }) => {
+export const AuthGuard: React.FC<
+  {
+    resourceDef: ResourceDefinition;
+    children: ReactNode;
+    isAppShell?: boolean;
+  } & AcmAppShellProps
+> = ({ resourceDef, children, isAppShell = true, ...appShellProps }) => {
   const { service, validRoles } = resourceDef;
   const { baseEndpoint, authCheckRoute, friendlyName } =
     getRunEnvironmentConfig().ServiceConfiguration[service];
@@ -163,12 +165,7 @@ export const AuthGuard: React.FC<{
   }
 
   if (isAppShell) {
-    return (
-      <AcmAppShell>
-        <Title order={1}>{friendlyName}</Title>
-        {children}
-      </AcmAppShell>
-    );
+    return <AcmAppShell {...appShellProps}>{children}</AcmAppShell>;
   }
 
   return <>{children}</>;

src/ui/components/ProfileDropdown/index.tsx

@@ -18,6 +18,7 @@ import { useState } from 'react';
 
 import { AuthContextData, useAuth } from '../AuthContext/index.js';
 import classes from '../Navbar/index.module.css';
+import { useNavigate } from 'react-router-dom';
 
 interface ProfileDropdownProps {
   userData?: AuthContextData;
@@ -26,6 +27,7 @@ interface ProfileDropdownProps {
 const AuthenticatedProfileDropdown: React.FC<ProfileDropdownProps> = ({ userData }) => {
   const [opened, setOpened] = useState(false);
   const theme = useMantineTheme();
+  const navigate = useNavigate();
   const { logout } = useAuth();
   if (!userData) {
     return null;
@@ -111,6 +113,16 @@ const AuthenticatedProfileDropdown: React.FC<ProfileDropdownProps> = ({ userData
             </Group>
           </UnstyledButton>
           <Divider my="sm" />
+          <Button
+            variant="primary"
+            mb="sm"
+            fullWidth
+            onClick={() => {
+              navigate('/profile');
+            }}
+          >
+            Edit Profile
+          </Button>
           <Button
             variant="outline"
             fullWidth

src/ui/config.ts

@@ -3,7 +3,7 @@ import { execCouncilGroupId, execCouncilTestingGroupId } from '@common/config';
 export const runEnvironments = ['dev', 'prod', 'local-dev'] as const;
 // local dev should be used when you want to test against a local instance of the API
 
-export const services = ['core', 'tickets', 'merch'] as const;
+export const services = ['core', 'tickets', 'merch', 'msGraphApi'] as const;
 export type RunEnvironment = (typeof runEnvironments)[number];
 export type ValidServices = (typeof services)[number];
 export type ValidService = ValidServices;
@@ -49,6 +49,12 @@ const environmentConfig: EnvironmentConfigType = {
         friendlyName: 'Merch Sales Service (Prod)',
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
+      msGraphApi: {
+        friendlyName: 'Microsoft Graph API',
+        baseEndpoint: 'https://graph.microsoft.com',
+        loginScope: 'https://graph.microsoft.com/.default',
+        apiId: 'https://graph.microsoft.com',
+      },
     },
     KnownGroupMappings: {
       Exec: execCouncilTestingGroupId,
@@ -72,6 +78,12 @@ const environmentConfig: EnvironmentConfigType = {
         friendlyName: 'Merch Sales Service (Prod)',
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
+      msGraphApi: {
+        friendlyName: 'Microsoft Graph API',
+        baseEndpoint: 'https://graph.microsoft.com',
+        loginScope: 'https://graph.microsoft.com/.default',
+        apiId: 'https://graph.microsoft.com',
+      },
     },
     KnownGroupMappings: {
       Exec: execCouncilTestingGroupId,
@@ -95,6 +107,12 @@ const environmentConfig: EnvironmentConfigType = {
         friendlyName: 'Merch Sales Service',
         baseEndpoint: 'https://merchapi.acm.illinois.edu',
       },
+      msGraphApi: {
+        friendlyName: 'Microsoft Graph API',
+        baseEndpoint: 'https://graph.microsoft.com',
+        loginScope: 'https://graph.microsoft.com/.default',
+        apiId: 'https://graph.microsoft.com',
+      },
     },
     KnownGroupMappings: {
       Exec: execCouncilGroupId,

src/ui/pages/events/ViewEvents.page.tsx

@@ -1,4 +1,4 @@
-import { Text, Button, Table, Modal, Group, Transition, ButtonGroup } from '@mantine/core';
+import { Text, Button, Table, Modal, Group, Transition, ButtonGroup, Title } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
@@ -131,6 +131,9 @@ export const ViewEventsPage: React.FC = () => {
 
   return (
     <AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.EVENTS_MANAGER] }}>
+      <Title order={1} mb={'md'}>
+        Event Management
+      </Title>
       {deleteCandidate && (
         <Modal
           opened={opened}

src/ui/pages/profile/ManageProfile.page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Title } from '@mantine/core';
+import { AuthGuard } from '@ui/components/AuthGuard';
+import { useApi } from '@ui/util/api';
+import { UserProfileData } from '@common/types/msGraphApi';
+import { ManageProfileComponent } from './ManageProfileComponent';
+
+export const ManageProfilePage: React.FC = () => {
+  const api = useApi('msGraphApi');
+
+  const getProfile = async () => {
+    return (await api.get('/v1.0/me')).data as UserProfileData;
+  };
+
+  const setProfile = async (data: UserProfileData) => {
+    return (await api.patch('/v1.0/me', data)).data;
+  };
+
+  return (
+    <AuthGuard resourceDef={{ service: 'msGraphApi', validRoles: [] }} showSidebar={true}>
+      <Title>Edit Profile</Title>
+      <ManageProfileComponent getProfile={getProfile} setProfile={setProfile} />
+    </AuthGuard>
+  );
+};

src/ui/pages/profile/ManageProfileComponent.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Title, SimpleGrid, Container } from '@mantine/core';
+import { AuthGuard } from '@ui/components/AuthGuard';
+import { useApi } from '@ui/util/api';
+import { AppRoles } from '@common/roles';
+import { getRunEnvironmentConfig } from '@ui/config';
+import { UserProfileData } from '@common/types/msGraphApi';
+
+interface ManageProfileComponentProps {
+  getProfile: () => Promise<UserProfileData>;
+  setProfile: (data: UserProfileData) => Promise<any>;
+}
+
+export const ManageProfileComponent: React.FC<ManageProfileComponentProps> = ({
+  getProfile,
+  setProfile,
+}) => {
+  const [userProfile, setUserProfile] = useState<undefined | null | UserProfileData>(undefined);
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        setUserProfile(await getProfile());
+      } catch (e) {
+        console.error(e);
+        setUserProfile(null);
+      }
+    };
+    fetchProfile();
+  }, [getProfile]);
+  return null;
+};