username selection changed from user details

Author: shuhaib-aot

forms-flow-nav/src/constants/constants.js

@@ -187,20 +187,22 @@ export const OPERATIONS = {
 export const PageSizes = [5, 10, 25, 50, 100, "all"];
 
 // draft config
-const DRAFT_POLLING_RATE_FROM_ENV =
-  (window._env_ && window._env_.REACT_APP_DRAFT_POLLING_RATE)
+const DRAFT_POLLING_RATE_FROM_ENV = window._env_?.REACT_APP_DRAFT_POLLING_RATE;
 
 export const DRAFT_POLLING_RATE = DRAFT_POLLING_RATE_FROM_ENV
   ? Number(DRAFT_POLLING_RATE_FROM_ENV)
   : null;
-const DRAFT_ENABLED_VARIABLE =
-  (window._env_ && window._env_.REACT_APP_DRAFT_ENABLED) ||
-  false;
+const DRAFT_ENABLED_VARIABLE = window._env_?.REACT_APP_DRAFT_ENABLED ||false;
 export const DRAFT_ENABLED =
   DRAFT_ENABLED_VARIABLE === "true" || DRAFT_ENABLED_VARIABLE === true
     ? true
     : false;
 
 // This is to check if the application is running in enterprise mode or not
-export const IS_ENTERPRISE =
-  (window._env_ && window._env_.REACT_APP_IS_ENTERPRISE) || false;
+export const IS_ENTERPRISE = window._env_?.REACT_APP_IS_ENTERPRISE || false;
+
+
+export const USER_NAME_DISPLAY_CLAIM =
+   window._env_?.REACT_APP_USER_NAME_DISPLAY_CLAIM ||
+  process.env.REACT_APP_USER_NAME_DISPLAY_CLAIM ||
+  "preferred_username";

forms-flow-nav/src/sidenav/Sidebar.jsx

@@ -1,6 +1,6 @@
 import "./Sidebar.scss";
 import Accordion from "react-bootstrap/Accordion";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useHistory ,useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -12,7 +12,8 @@ import {
   ENABLE_APPLICATIONS_MODULE,
   ENABLE_TASKS_MODULE,
   ENABLE_INTEGRATION_PREMIUM,
-  IS_ENTERPRISE
+  IS_ENTERPRISE,
+  USER_NAME_DISPLAY_CLAIM
 } from "../constants/constants";
 import { StorageService } from "@formsflow/service";
 import i18n from "../resourceBundles/i18n";
@@ -79,7 +80,16 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
     return initials.substring(0, 2).toUpperCase(); // Get the first two initials
   };
 
-  const userName = userDetail?.name || userDetail?.preferred_username || "";
+ 
+  // fetch the username form the user details
+  const userName = useMemo(()=>{
+    const value = userDetail[USER_NAME_DISPLAY_CLAIM] || userDetail?.name || userDetail?.preferred_username || "";
+    if(Array.isArray(value)){
+      return value.length > 0 ? value[0] : "";
+    }
+    return value;
+  },[userDetail]);
+
   const initials = getInitials(userName);
 
   React.useEffect(() => {