Save user image to database and display if available (#463)

oncokb · Oct 31, 2024 · 8bc7b4c · 8bc7b4c
1 parent 6a146af
commit 8bc7b4c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/main/docker/realm-config/oncokb-curation-realm.json b/src/main/docker/realm-config/oncokb-curation-realm.json
@@ -1339,7 +1339,7 @@
       "linkOnly": false,
       "firstBrokerLoginFlowAlias": "first broker login",
       "config": {
-        "syncMode": "IMPORT",
+        "syncMode": "FORCE",
         "clientSecret": "GOOGLE_CLIENT_SECRET",
         "clientId": "GOOGLE_CLIENT_ID",
         "useJwksUrl": "true"

diff --git a/src/main/webapp/app/components/sidebar/NavigationSidebar.tsx b/src/main/webapp/app/components/sidebar/NavigationSidebar.tsx
@@ -22,16 +22,16 @@ import { Button, NavbarBrand } from 'reactstrap';
 import { FiFileText } from 'react-icons/fi';
 import { GoDatabase } from 'react-icons/go';
 import { BiSearchAlt } from 'react-icons/bi';
-import { FaSignOutAlt, FaUserCircle, FaExclamationTriangle, FaExternalLinkAlt, FaExternalLinkSquareAlt } from 'react-icons/fa';
+import { FaSignOutAlt, FaExclamationTriangle, FaExternalLinkAlt } from 'react-icons/fa';
 import { HiMiniBars3 } from 'react-icons/hi2';
 import { MskccLogo } from 'app/shared/logo/MskccLogo';
 import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_EXPANDED_WIDTH } from 'app/stores/layout.store';
 import _ from 'lodash';
 import classNames from 'classnames';
 import { WHOLE_NUMBER_REGEX } from 'app/config/constants/regex';
 import CustomCursor from '../../../content/images/oncogenic-black.svg';
-import { flow } from 'mobx';
 import { Linkout } from 'app/shared/links/Linkout';
+import { Avatar } from 'app/shared/avatar/Avatar';
 
 const ENTITY_MENU_NAME: { [key in ENTITY_TYPE]?: string } = {
   [ENTITY_TYPE.ALTERATION]: 'Alteration',
@@ -270,7 +270,7 @@ export const NavigationSidebar: React.FunctionComponent<StoreProps> = ({ isNavSi
         </div>
         <MenuDivider />
         <Menu>
-          <SubMenu label={props.account?.firstName} icon={<FaUserCircle size={DEFAULT_NAV_ICON_SIZE} />}>
+          <SubMenu label={props.account?.firstName} icon={<Avatar user={props.account} />}>
             <MenuItem component={<NavLink to={PAGE_ROUTE.ACCOUNT} />}>Account Settings</MenuItem>
             {props.isAdmin && <MenuItem component={<NavLink to={PAGE_ROUTE.USER} />}>User Management</MenuItem>}
           </SubMenu>

diff --git a/src/main/webapp/app/shared/avatar/Avatar.tsx b/src/main/webapp/app/shared/avatar/Avatar.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { IUser } from '../model/user.model';
+import { FaUserCircle } from 'react-icons/fa';
+import { DEFAULT_NAV_ICON_SIZE } from 'app/config/constants/constants';
+
+export interface IAvatar {
+  user: IUser | undefined;
+}
+
+export const Avatar = ({ user }: IAvatar) => {
+  if (!user?.imageUrl) {
+    return <FaUserCircle size={DEFAULT_NAV_ICON_SIZE} />;
+  }
+  return (
+    <div className="d-flex justify-content-center align-items-center">
+      <img className="rounded-circle" src={user.imageUrl} width={DEFAULT_NAV_ICON_SIZE} height={DEFAULT_NAV_ICON_SIZE}></img>
+    </div>
+  );
+};