Merge pull request #634 from shuhaib-aot/main-7.0.1-to-develop

Main 7.0.1 to develop

Author: arun-s-aot

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

@@ -187,20 +187,20 @@ 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;

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, StyleServices } from "@formsflow/service";
 import i18n from "../resourceBundles/i18n";
@@ -81,7 +82,6 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
   const tenantKey = tenant?.tenantId;
   const formTenant = form?.tenantKey;
   const [showProfile, setShowProfile] = useState(false);
-  const hideLogo =  StyleServices?.getCSSVariable("--hide-formsflow-logo")?.toLowerCase();
   const { t } = useTranslation();
   const currentLocation = useLocation();
 
@@ -127,6 +127,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
   const isAuthenticated = instance?.isAuthenticated();
   const showApplications = setShowApplications(userDetail?.groups);
   const [activeKey,setActiveKey] = useState(0);
+  const hideLogo =  StyleServices?.getCSSVariable("--hide-formsflow-logo")?.toLowerCase();
 
   const getInitials = (name) => {
     if (!name) return "";
@@ -135,7 +136,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(() => {

forms-flow-service/src/keycloak/KeycloakService.ts

@@ -167,6 +167,7 @@ class KeycloakService {
               });
               this.refreshToken();
             }
+ 
           } else {
             this.logout();
           }

forms-flow-service/src/request/requestService.ts

@@ -21,7 +21,6 @@ class RequestService {
 
     instance.interceptors.response.use(
       (response: AxiosResponse) => {
-        console.log(response);
         return response;
       },
       async (error: AxiosError) => { 

forms-flow-theme/scss/_forms.scss

@@ -447,6 +447,8 @@ select option:hover {
   }
 }
 
+
+
 .valiation-astrisk {
   color: $primary;
 }
@@ -750,4 +752,4 @@ span.text-danger,
     display: flex;
     align-items: center;
   }
-}
+}