FWF-3882 [Feature] : Changes and optimisations for existing screens .…

… Navbar fixes for permission matrix and route changes
AOT-Technologies · Nov 20, 2024 · ee2f9cd · ee2f9cd
1 parent 8089820
commit ee2f9cd
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 65 deletions.
diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
@@ -398,7 +398,7 @@ const Roles = React.memo((props: any) => {
 
   const showCreateModal = () => (
     <div data-testid="create-role-modal">
-      <Modal show={showRoleModal} onHide={handleCloseRoleModal}>
+      <Modal show={showRoleModal} onHide={handleCloseRoleModal} centered={true}>
         <Modal.Header closeButton>
           <Modal.Title>{t("Create Role")}</Modal.Title>
         </Modal.Header>
@@ -488,7 +488,7 @@ const Roles = React.memo((props: any) => {
   );
   const showEditModal = () => (
     <div data-testid="edit-role-modal">
-      <Modal show={showEditRoleModal} onHide={handleCloseEditRoleModal}>
+      <Modal show={showEditRoleModal} onHide={handleCloseEditRoleModal} centered={true}>
         <Modal.Header closeButton>
           <Modal.Title>{t("Edit Role")}</Modal.Title>
         </Modal.Header>

diff --git a/forms-flow-admin/src/index.tsx b/forms-flow-admin/src/index.tsx
@@ -13,7 +13,6 @@ import { BASE_ROUTE, MULTITENANCY_ENABLED } from "./constants";
 import AdminDashboard from "./components/dashboard";
 import RoleManagement from "./components/roles";
 import UserManagement from "./components/users";
-import Head from "./containers/head";
 import i18n from "./resourceBundles/i18n";
 import "./index.scss";
 import Accessdenied from "./components/AccessDenied";
@@ -68,30 +67,6 @@ const Admin = React.memo(({ props }: any) => {
     const locale = localStorage.getItem("i18nextLng")
     if(locale) i18n.changeLanguage(locale);
   },[isAuth])
-
-  const headerList = () => {
-    const headers =[];
-    if(isDashboardManager){
-      headers.push({
-        name: "Dashboard",
-        count: dashboardCount,
-        // icon: "user-circle-o",
-        onClick: () => history.push(`${baseUrl}admin/dashboard`)
-    })}  if (isRoleManager){
-      headers.push({
-        name: "Roles",
-        count: roleCount,
-        // icon: "user-circle-o",
-        onClick: () => history.push(`${baseUrl}admin/roles`),
-    })}  if(isUserManager){ 
-      headers.push({
-        name: "Users",
-        count: userCount,
-        // icon: "user-circle-o",
-        onClick: () => history.push(`${baseUrl}admin/users`)
-    })}
-    return headers ;
-  };
 
   React.useEffect(()=>{
     const restricted = 
@@ -108,7 +83,6 @@ const Admin = React.memo(({ props }: any) => {
         <div className="container mt-5">
         {!isAccessRestricted ?(
           <div className="min-container-height ps-md-3">
-          <Head items={headerList()} page={page} />
           <ToastContainer theme="colored" />
           <Switch>
             { isDashboardManager && (

diff --git a/forms-flow-nav/src/constants/constants.js b/forms-flow-nav/src/constants/constants.js
@@ -200,3 +200,7 @@ 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;
diff --git a/forms-flow-nav/src/sidenav/MenuComponent.jsx b/forms-flow-nav/src/sidenav/MenuComponent.jsx
@@ -36,13 +36,13 @@ const MenuComponent = ({
 
   const handleHeaderClick = () => {
     if (noOptionsMenu) {
-      subMenu.map((item, index) => {
+      subMenu?.map((item, index) => {
         history.push(`${baseUrl}${item.path}`);
       });
     }
   };
 
-  const isActive = subMenu.some(
+  const isActive = subMenu?.some(
     (menu) =>
       menu.matchExps &&
       menu.matchExps.some((exp) => exp.test(location.pathname))
@@ -72,7 +72,7 @@ const MenuComponent = ({
       </Accordion.Header>
       {!noOptionsMenu && (
         <Accordion.Body>
-          {subMenu.map((menu, index) => (
+          {subMenu?.map((menu, index) => (
             <Link
               key={index}
               to={`${baseUrl}${menu.path}`}

diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx
@@ -21,6 +21,7 @@ import {
   ENABLE_APPLICATIONS_MODULE,
   ENABLE_TASKS_MODULE,
   ENABLE_INTEGRATION_PREMIUM,
+  IS_ENTERPRISE
 } from "../constants/constants";
 import { StorageService } from "@formsflow/service";
 import { fetchSelectLanguages, updateUserlang } from "../services/language";
@@ -43,8 +44,10 @@ const Sidebar = React.memo(({ props }) => {
   const [tenant, setTenant] = React.useState({});
   const [location, setLocation] = React.useState({ pathname: "/" });
   const [integrationEnabled, setIntegrationEnabled] = React.useState(false);
+  const [form, setForm] = React.useState({});
   const history = useHistory();
   const tenantKey = tenant?.tenantId;
+  const formTenant = form?.tenantKey;
   const { t } = useTranslation();
 
   // const [activeLink, setActiveLink] = useState("");
@@ -143,11 +146,41 @@ const Sidebar = React.memo(({ props }) => {
     }
   }, [tenant]);
 
+  useEffect(() => {
+    if (!isAuthenticated && formTenant && MULTITENANCY_ENABLED) {
+      setLoginUrl(`/tenant/${formTenant}/`);
+    }
+  }, [isAuthenticated, formTenant]);
+
   const logout = () => {
     history.push(baseUrl);
     instance.userLogout();
   };
 
+  const manageOptions = () => {
+    return (
+      [
+        {
+          name: "Dashboards",
+          path: DASHBOARD_ROUTE,
+          matchExps: [
+            createURLPathMatchExp("admin/dashboard", baseUrl),
+          ],
+        },
+        {
+          name: "Roles",
+          path: ROLE_ROUTE,
+          matchExps: [createURLPathMatchExp("admin/roles", baseUrl)],
+        },
+        {
+          name: "Users",
+          path: USER_ROUTE,
+          matchExps: [createURLPathMatchExp("admin/users", baseUrl)],
+        },
+      ]
+    )
+  }
+
   return (
       <div className="sidenav">
         <div className="logo-container">
@@ -162,28 +195,32 @@ const Sidebar = React.memo(({ props }) => {
         <div className="options-container" data-testid="options-container">
           <Accordion defaultActiveKey="">
             {ENABLE_FORMS_MODULE &&
-              (isCreateSubmissions || isCreateDesigns || isViewDesigns) && (
+              (isCreateDesigns || isViewDesigns) && (
                 <MenuComponent
                   eventKey="0"
                   optionsCount="5"
                   mainMenu="Design"
                   subMenu={[
                     {
                       name: "Forms",
-                      path: "form",
+                      path: "formflow",
                       matchExps: [
-                        createURLPathMatchExp("form", baseUrl),
+                        createURLPathMatchExp("formflow", baseUrl),
                       ]
                     },
-                    {
-                      name: "Bundle",
-                      path: "bundle",
-                      matchExps: [
-                        createURLPathMatchExp("bundle", baseUrl),
-                      ]
-                    },
-                    { name: "Templates", path: "forms-template-library" },
-                    ...(userRoles?.includes("manage_integrations") &&
+                    ...(IS_ENTERPRISE
+                      ? [
+                          {
+                            name: "Bundle",
+                            path: "bundle",
+                            matchExps: [
+                              createURLPathMatchExp("bundle", baseUrl),
+                            ],
+                          },
+                        ]
+                    : []),
+                    // { name: "Templates", path: "forms-template-library" }, // TBD : Templates to be added on a later stage
+                    ...(IS_ENTERPRISE && userRoles?.includes("manage_integrations") &&
                     (integrationEnabled || ENABLE_INTEGRATION_PREMIUM)
                       ? [
                           {
@@ -224,8 +261,9 @@ const Sidebar = React.memo(({ props }) => {
                   subMenu={[
                     {
                       name: "Forms",
-                      path: "application",
+                      path: "form",
                       matchExps: [
+                        createURLPathMatchExp("form", baseUrl),
                         createURLPathMatchExp("application", baseUrl),
                         createURLPathMatchExp("draft", baseUrl),
                       ],
@@ -278,31 +316,13 @@ const Sidebar = React.memo(({ props }) => {
                 eventKey="4"
                 optionsCount="3"
                 mainMenu="Manage"
-                subMenu={[
-                  {
-                    name: "Dashboards",
-                    path: DASHBOARD_ROUTE,
-                    matchExps: [
-                      createURLPathMatchExp("admin/dashboard", baseUrl),
-                    ],
-                  },
-                  {
-                    name: "Roles",
-                    path: ROLE_ROUTE,
-                    matchExps: [createURLPathMatchExp("admin/roles", baseUrl)],
-                  },
-                  {
-                    name: "Users",
-                    path: USER_ROUTE,
-                    matchExps: [createURLPathMatchExp("admin/users", baseUrl)],
-                  },
-                ]}
+                subMenu={manageOptions()}
                 subscribe={props.subscribe}
               />
             )}
           </Accordion>
         </div>
-        <div className="user-container">
+        {isAuthenticated && (<div className="user-container">
           <div className="username">
             <div className="user-icon" data-testid="user-icon">
               {initials}
@@ -332,7 +352,7 @@ const Sidebar = React.memo(({ props }) => {
           >
             <p className="m-0">{t("Sign Out")}</p>
           </div>
-        </div>
+        </div>)}
       </div>
   );
 });