UN-3240 [FEAT] Add HITL navigation to sidebar and remove from profile dropdown

frontend/src/components/navigations/side-nav-bar/SideNavBar.css

@@ -122,3 +122,17 @@
 .sidebar-beta-tag {
   margin-left: 8px;
 }
+
+.sidebar-antd-icon {
+  font-size: 22px;
+  color: #b4c2cf;
+  width: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.space-styles-active .sidebar-antd-icon,
+.space-styles:hover .sidebar-antd-icon {
+  color: white;
+}

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx

@@ -1,4 +1,4 @@
-import { BranchesOutlined } from "@ant-design/icons";
+import { BranchesOutlined, FileProtectOutlined } from "@ant-design/icons";
 import {
   Divider,
   Image,
@@ -165,10 +165,83 @@ SettingsPopoverContent.propTypes = {
   navigate: PropTypes.func.isRequired,
 };
 
+const HITL_MENU_ITEMS = [
+  { key: "review", label: "Review", subPath: "/review" },
+  {
+    key: "approve",
+    label: "Approve",
+    subPath: "/review/approve",
+    supervisorOnly: true,
+  },
+  {
+    key: "download",
+    label: "Download & Sync",
+    subPath: "/review/download_and_sync",
+    supervisorOnly: true,
+  },
+];
+
+const getHITLMenuItems = (orgName, role) => {
+  const isSupervisorOrAdmin = [
+    "unstract_supervisor",
+    "unstract_admin",
+  ].includes(role);
+  return HITL_MENU_ITEMS.filter(
+    (item) => !item.supervisorOnly || isSupervisorOrAdmin,
+  ).map((item) => ({
+    key: item.key,
+    label: item.label,
+    path: `/${orgName}${item.subPath}`,
+  }));
+};
+
+const getActiveHITLKey = (orgName) => {
+  const currentPath = globalThis.location.pathname;
+  const base = `/${orgName}/review`;
+  if (currentPath.startsWith(`${base}/approve`)) {
+    return "approve";
+  }
+  if (currentPath.startsWith(`${base}/download_and_sync`)) {
+    return "download";
+  }
+  if (currentPath.startsWith(base)) {
+    return "review";
+  }
+  return "review";
+};
+
+const HITLPopoverContent = ({ orgName, role, navigate }) => {
+  const hitlMenuItems = getHITLMenuItems(orgName, role);
+  const currentActiveKey = getActiveHITLKey(orgName);
+
+  return (
+    <nav className="settings-sidebar-popover">
+      {hitlMenuItems.map((menuItem) => (
+        <button
+          key={menuItem.key}
+          type="button"
+          className={`settings-menu-item ${
+            currentActiveKey === menuItem.key ? "active" : ""
+          }`}
+          onClick={() => navigate(menuItem.path)}
+        >
+          {menuItem.label}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+HITLPopoverContent.propTypes = {
+  orgName: PropTypes.string.isRequired,
+  role: PropTypes.string.isRequired,
+  navigate: PropTypes.func.isRequired,
+};
+
 const SideNavBar = ({ collapsed }) => {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
-  const { orgName, flags } = sessionDetails;
+  const { orgName, flags, role } = sessionDetails;
 
   try {
     if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
@@ -385,6 +458,37 @@ const SideNavBar = ({ collapsed }) => {
     data[0]?.subMenu?.splice(1, 0, agenticMenuItem);
   }
 
+  // Add HITL Review section if plugin is available and user has HITL role
+  const isHITLRole = [
+    "unstract_reviewer",
+    "unstract_supervisor",
+    "unstract_admin",
+  ].includes(role);
+  if (manualReviewSettingsEnabled && isHITLRole && isUnstract) {
+    const hasReviewSection = data.some((item) => item.mainTitle === "REVIEW");
+    const settingsIndex = data.findIndex(
+      (item) => item.mainTitle === "SETTINGS",
+    );
+    if (!hasReviewSection && settingsIndex !== -1) {
+      data.splice(settingsIndex, 0, {
+        id: 2.5,
+        mainTitle: "REVIEW",
+        subMenu: [
+          {
+            id: 2.51,
+            title: "HITL",
+            description: "Human-in-the-loop document review",
+            isHITL: true,
+            path: `/${orgName}/review`,
+            active: globalThis.location.pathname.startsWith(
+              `/${orgName}/review`,
+            ),
+          },
+        ],
+      });
+    }
+  }
+
   const shouldDisableAll = useMemo(() => {
     if (
       !unstractSubscriptionPlan ||
@@ -423,6 +527,61 @@ const SideNavBar = ({ collapsed }) => {
               )}
               <Space direction="vertical" className="menu-item-body">
                 {item.subMenu.map((el) => {
+                  // HITL item has a hover menu
+                  if (el.isHITL) {
+                    const handleHITLClick = () => {
+                      if (!el.disable) {
+                        navigate(el.path);
+                      }
+                    };
+
+                    const hitlContent = (
+                      <Tooltip title={collapsed ? el.title : ""}>
+                        <Space
+                          className={`space-styles ${
+                            el.active ? "space-styles-active" : ""
+                          } ${el.disable ? "space-styles-disable" : ""}`}
+                          onClick={handleHITLClick}
+                        >
+                          <FileProtectOutlined className="sidebar-antd-icon" />
+                          {!collapsed && (
+                            <div>
+                              <Typography className="sidebar-item-text fs-14">
+                                {el.title}
+                              </Typography>
+                              <Typography className="sidebar-item-text fs-11">
+                                {el.description}
+                              </Typography>
+                            </div>
+                          )}
+                        </Space>
+                      </Tooltip>
+                    );
+
+                    if (el.disable) {
+                      return <div key={el.id}>{hitlContent}</div>;
+                    }
+
+                    return (
+                      <Popover
+                        key={el.id}
+                        content={
+                          <HITLPopoverContent
+                            orgName={orgName}
+                            role={role}
+                            navigate={navigate}
+                          />
+                        }
+                        trigger="hover"
+                        placement="rightTop"
+                        arrow={false}
+                        overlayClassName="settings-popover-overlay"
+                      >
+                        {hitlContent}
+                      </Popover>
+                    );
+                  }
+
                   // Platform item has a hover menu and click navigates to platform settings
                   if (el.id === 3.6) {
                     const handlePlatformClick = () => {

frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx

@@ -1,7 +1,4 @@
 import {
-  DownloadOutlined,
-  FileProtectOutlined,
-  LikeOutlined,
   LoginOutlined,
   LogoutOutlined,
   SettingOutlined,
@@ -28,7 +25,6 @@ import {
   getBaseUrl,
   homePagePath,
   onboardCompleted,
-  UNSTRACT_ADMIN,
 } from "../../../helpers/GetStaticData.js";
 import useLogout from "../../../hooks/useLogout.js";
 import "../../../layouts/page-layout/PageLayout.css";
@@ -142,8 +138,6 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
   const onBoardUrl = `${baseUrl}/${orgName}/onboard`;
   const logout = useLogout();
   const [showOnboardBanner, setShowOnboardBanner] = useState(false);
-  const [approverStatus, setApproverStatus] = useState(false);
-  const [reviewerStatus, setReviewerStatus] = useState(false);
   const [reviewPageHeader, setReviewPageHeader] = useState("");
   const { setAlertDetails } = useAlertStore();
   const handleException = useExceptionHandler();
@@ -162,7 +156,7 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
           (state) => state?.unstractSubscriptionPlan,
         );
     }
-  } catch (error) {
+  } catch (_error) {
     // Do nothing
   }
 
@@ -189,15 +183,12 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
     const { role } = sessionDetails;
     const isReviewer = role === "unstract_reviewer";
     const isSupervisor = role === "unstract_supervisor";
-    const isAdmin = role === UNSTRACT_ADMIN;
 
     setShowOnboardBanner(
       !onboardCompleted(sessionDetails?.adapters) &&
         !isReviewer &&
         !isSupervisor,
     );
-    setApproverStatus(isAdmin || isSupervisor);
-    setReviewerStatus(isReviewer);
   }, [sessionDetails]);
 
   // Determine review page header
@@ -310,54 +301,6 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
       });
     }
 
-    // Review
-    if (isUnstract && !isSimpleLayout && (reviewerStatus || approverStatus)) {
-      menuItems.push({
-        key: "4",
-        label: (
-          <Button
-            onClick={() => navigate(`/${orgName}/review`)}
-            className="logout-button"
-            disabled={shouldDisableRouting}
-            type="text"
-          >
-            <FileProtectOutlined /> Review
-          </Button>
-        ),
-      });
-    }
-
-    // Approve
-    if (isUnstract && !isSimpleLayout && approverStatus) {
-      menuItems.push({
-        key: "5",
-        label: (
-          <Button
-            onClick={() => navigate(`/${orgName}/review/approve`)}
-            className="logout-button"
-            disabled={shouldDisableRouting}
-            type="text"
-          >
-            <LikeOutlined /> Approve
-          </Button>
-        ),
-      });
-
-      menuItems.push({
-        key: "6",
-        label: (
-          <Button
-            onClick={() => navigate(`/${orgName}/review/download_and_sync`)}
-            className="logout-button"
-            disabled={shouldDisableRouting}
-            type="text"
-          >
-            <DownloadOutlined /> Download and Sync Manager
-          </Button>
-        ),
-      });
-    }
-
     if (
       isUnstract &&
       UnstractPricingMenuLink &&
@@ -416,8 +359,6 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
   }, [
     isUnstract,
     isSimpleLayout,
-    reviewerStatus,
-    approverStatus,
     allOrganization,
     cascadeOptions,
     orgName,