improvement: add invite members link to nav bar to improve discovery

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -21,6 +21,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { Mfa } from "@app/components/auth/Mfa";
@@ -567,15 +568,30 @@ export const Navbar = () => {
           </Button>
         </Tooltip>
       )}
-      {user.superAdmin && !location.pathname.startsWith("/admin") && (
-        <Link
-          className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
-          to="/admin"
-        >
-          <InstanceIcon className="inline-block size-3.5" />
-          <span className="ml-2 hidden md:inline-block">Server Console</span>
-        </Link>
-      )}
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {!location.pathname.startsWith("/admin") ? (
+        user.superAdmin ? (
+          <Link
+            className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+            to="/admin"
+          >
+            <InstanceIcon className="inline-block size-3.5" />
+            <span className="ml-2 hidden md:inline-block">Server Console</span>
+          </Link>
+        ) : (
+          <Link
+            className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+            to="/organization/access-management"
+            search={{
+              selectedTab: "members",
+              action: "invite-members"
+            }}
+          >
+            <UserPlusIcon className="inline-block size-3.5" />
+            <span className="ml-2 hidden md:inline-block">Invite Members</span>
+          </Link>
+        )
+      ) : null}
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>
           <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { BanIcon } from "lucide-react";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { BanIcon, UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -16,6 +17,7 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { Badge, DocumentationLinkBadge } from "@app/components/v3";
+import { ROUTE_PATHS } from "@app/const/routes";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -35,6 +37,7 @@ import { OrgMembersTable } from "./OrgMembersTable";
 export const OrgMembersSection = () => {
   const { subscription } = useSubscription();
   const { currentOrg, isSubOrganization } = useOrganization();
+  const navigate = useNavigate();
   const orgId = currentOrg?.id ?? "";
   const { user } = useUser();
   const userId = user?.id || "";
@@ -55,6 +58,22 @@ export const OrgMembersSection = () => {
 
   const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([]);
 
+  const urlAction = useSearch({
+    from: ROUTE_PATHS.Organization.AccessControlPage.id,
+    select: (el) => el.action,
+    structuralSharing: true
+  });
+
+  useEffect(() => {
+    if (urlAction === "invite-members") {
+      handlePopUpOpen("addMember");
+      navigate({
+        to: ".",
+        search: ({ action, ...search }) => search
+      });
+    }
+  }, []);
+
   const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
   const { mutateAsync: deleteBatchMutateAsync } = useDeleteOrgMembershipBatch();
   const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
@@ -194,13 +213,13 @@ export const OrgMembersSection = () => {
               <Button
                 colorSchema="secondary"
                 type="submit"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                leftIcon={<UserPlusIcon size={16} />}
                 onClick={() =>
                   isSubOrganization ? handlePopUpOpen("addMemberToSubOrg") : handleAddMemberModal()
                 }
                 isDisabled={!isAllowed}
               >
-                Add Member
+                {isSubOrganization ? "Add Members" : "Invite Members"}
               </Button>
             )}
           </OrgPermissionCan>