FWF-4550:[Feature] - Updated keycloak set up in mf and pr agent fixes.

Author: Josephalexantony-aot

forms-flow-nav/src/Navbar.jsx

@@ -438,7 +438,7 @@ const isUserManager = userRoles?.includes("manage_users");
             className={`nav-menu-item py-md-3 px-0 mx-2 ${
               pathname.match(createURLPathMatchExp("metrics", baseUrl)) ||
               pathname.match(createURLPathMatchExp("insights", baseUrl)) ||
-              pathname.match(createURLPathMatchExp("submisssions", baseUrl))
+              pathname.match(createURLPathMatchExp("submissions", baseUrl))
                 ? "active"
                 : ""
             }`}

forms-flow-submissions/src/Routes/SubmissionListing.tsx

@@ -7,7 +7,7 @@ import { push } from "connected-react-router";
 import { getSubmissionList } from "../api/queryServices/analyzeSubmissionServices";
 import { formatDate } from "../helper/helper";
 import {
-  setAnalizeSubmissionSort,
+  setAnalyzeSubmissionSort,
   setAnalyzeSubmissionPage,
 } from "../actions/analyzeSubmissionActions";
 import {
@@ -97,7 +97,7 @@ const TaskSubmissionList: React.FC = () => {
           { sortOrder: k === key ? newOrder : "asc" },
         ])
       );
-      dispatch(setAnalizeSubmissionSort({ ...updatedSort, activeKey: key }));
+      dispatch(setAnalyzeSubmissionSort({ ...updatedSort, activeKey: key }));
     },
     [dispatch, sortParams]
   );

forms-flow-submissions/src/actions/analyzeSubmissionActions.ts

@@ -1,6 +1,6 @@
 import ACTION_CONSTANTS from "../constants/actionConstants";
 
-export const setAnalizeSubmissionSort = (data) => (dispatch) => {
+export const setAnalyzeSubmissionSort = (data) => (dispatch) => {
     dispatch({
       type: ACTION_CONSTANTS.UPDATE_SUBMISSION_SORT_PARAMS,
       payload: data,

forms-flow-submissions/src/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { Route, Switch, Redirect, useParams } from "react-router-dom";
 import { KeycloakService, StorageService } from "@formsflow/service";
 import {
   KEYCLOAK_URL_AUTH,
   KEYCLOAK_URL_REALM,
   KEYCLOAK_CLIENT,
-} from "./endpoints/config"; 
+} from "./endpoints/config";
 import { BASE_ROUTE, MULTITENANCY_ENABLED } from "./constants";
 import i18n from "./config/i18n";
 import "./index.scss";
@@ -16,14 +16,18 @@ const authorizedRoles = new Set(["create_submissions", "view_submissions"]);
 
 interface SubmissionsProps {
   publish?: (event: string, data?: any) => void;
-  subscribe?: (event: string, callback: (msg: string, data: any) => void) => void;
+  subscribe?: (
+    event: string,
+    callback: (msg: string, data: any) => void
+  ) => void;
   getKcInstance: () => any;
 }
 
 const Submissions: React.FC<SubmissionsProps> = React.memo((props) => {
   const { publish = () => {}, subscribe = () => {} } = props;
   const { tenantId } = useParams<{ tenantId?: string }>();
-  const [isAuth, setIsAuth] = useState(false);
+  const instance = useMemo(() => props.getKcInstance(), []);
+  const [isAuth, setIsAuth] = useState(instance?.isAuthenticated());
   const [isClient, setIsClient] = useState(false);
 
   const baseUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantId}/` : "/";
@@ -40,23 +44,26 @@ const Submissions: React.FC<SubmissionsProps> = React.memo((props) => {
   }, [tenantId]);
 
   useEffect(() => {
-    const kcInstance = KeycloakService.getInstance(
-      KEYCLOAK_URL_AUTH,
-      KEYCLOAK_URL_REALM,
-      KEYCLOAK_CLIENT,
-      tenantId
-    );
-
-    kcInstance.initKeycloak(() => {
-      setIsAuth(kcInstance.isAuthenticated());
-      publish("FF_AUTH", kcInstance);
-    });
+    if (!isAuth) {
+      const kcInstance = KeycloakService.getInstance(
+        KEYCLOAK_URL_AUTH,
+        KEYCLOAK_URL_REALM,
+        KEYCLOAK_CLIENT,
+        tenantId
+      );
+      kcInstance.initKeycloak(() => {
+        setIsAuth(kcInstance.isAuthenticated());
+        publish("FF_AUTH", kcInstance);
+      });
+    }
   }, []);
 
   useEffect(() => {
     if (!isAuth) return;
 
-    const roles = JSON.parse(StorageService.get(StorageService.User.USER_ROLE) ?? "[]");
+    const roles = JSON.parse(
+      StorageService.get(StorageService.User.USER_ROLE) ?? "[]"
+    );
     if (roles.some((role: any) => authorizedRoles.has(role))) {
       setIsClient(true);
     }