Merge branch 'main' into ENG-3586

2026-10-18 09:00:35 +00:00 · 2025-09-05 18:59:38 -04:00
parent 3858434135 55e89631aa
commit 48b9aeb0d1
306 changed files with 16755 additions and 7458 deletions
@@ -1,11 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Outlet, useRouterState } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";

 import { Banner } from "@app/components/page-frames/Banner";
-import { BreadcrumbContainer, TBreadcrumbFormat } from "@app/components/v2";
-import { useServerConfig } from "@app/context";
+import { useServerConfig, useSubscription } from "@app/context";
+import { useFetchServerStatus } from "@app/hooks/api";
+import { AuditLogBanner } from "@app/layouts/OrganizationLayout/components/AuditLogBanner";
+import { Navbar } from "@app/layouts/OrganizationLayout/components/NavBar";
+import { RedisBanner } from "@app/layouts/OrganizationLayout/components/RedisBanner";
+import { SmtpBanner } from "@app/layouts/OrganizationLayout/components/SmtpBanner";

 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 import { AdminSidebar } from "./Sidebar";
@@ -13,26 +17,27 @@ import { AdminSidebar } from "./Sidebar";
 export const AdminLayout = () => {
  const { t } = useTranslation();
  const { config } = useServerConfig();
-
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-
-  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
+  const { data: serverDetails, isLoading } = useFetchServerStatus();
+  const { subscription } = useSubscription();

  const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";

  return (
    <>
      <Banner />
-      <div className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden md:flex`}>
+      <div
+        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+      >
+        <Navbar />
+        {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
+        {!isLoading && !serverDetails?.emailConfigured && <SmtpBanner />}
+        {!isLoading && subscription.auditLogs && <AuditLogBanner />}
        {!window.isSecureContext && <InsecureConnectionBanner />}
        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
          <AdminSidebar />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 dark:[color-scheme:dark]">
-            {breadcrumbs ? (
-              <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-            ) : null}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 px-4 pb-4 pt-8 dark:[color-scheme:dark]">
            <Outlet />
-          </main>
+          </div>
        </div>
      </div>
      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
@@ -1,57 +1,62 @@
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faBuilding,
+  faChevronLeft,
+  faCog,
+  faDatabase,
+  faKey,
+  faLock,
+  faPlug,
+  faUserTie
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useMatchRoute } from "@tanstack/react-router";

-import { Lottie, Menu, MenuGroup, MenuItem } from "@app/components/v2";
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";

 const generalTabs = [
  {
    label: "General",
-    icon: "settings-cog",
+    icon: faCog,
    link: "/admin/"
  },
  {
    label: "Encryption",
-    icon: "lock-closed",
+    icon: faLock,
    link: "/admin/encryption"
  },
  {
    label: "Authentication",
-    icon: "check",
+    icon: faCheckCircle,
    link: "/admin/authentication"
  },
  {
    label: "Integrations",
-    icon: "sliding-carousel",
+    icon: faPlug,
    link: "/admin/integrations"
  },
  {
    label: "Caching",
-    icon: "note",
+    icon: faDatabase,
    link: "/admin/caching"
  },
  {
    label: "Environment Variables",
-    icon: "unlock",
+    icon: faKey,
    link: "/admin/environment"
  }
 ];

-const resourceTabs = [
+const othersTabs = [
  {
-    label: "Organizations",
-    icon: "groups",
-    link: "/admin/resources/organizations"
+    label: "Access Controls",
+    icon: faUserTie,
+    link: "/admin/access-management"
  },
  {
-    label: "User Identities",
-    icon: "user",
-    link: "/admin/resources/user-identities"
-  },
-  {
-    label: "Machine Identities",
-    icon: "wrench",
-    link: "/admin/resources/machine-identities"
+    label: "Resource Overview",
+    icon: faBuilding,
+    link: "/admin/resources/overview"
  }
 ];

@@ -61,6 +66,44 @@ export const AdminSidebar = () => {
  return (
    <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
      <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
+        <div className="flex-1">
+          <Menu>
+            <MenuGroup title="Configuration">
+              {generalTabs.map((tab) => {
+                const isActive = matchRoute({ to: tab.link, fuzzy: false });
+                return (
+                  <Link key={tab.link} to={tab.link}>
+                    <MenuItem isSelected={Boolean(isActive)}>
+                      <div className="mx-1 flex gap-2">
+                        <div className="w-6">
+                          <FontAwesomeIcon icon={tab.icon} />
+                        </div>
+                        {tab.label}
+                      </div>
+                    </MenuItem>
+                  </Link>
+                );
+              })}
+            </MenuGroup>
+            <MenuGroup title="Others">
+              {othersTabs.map((tab) => {
+                const isActive = matchRoute({ to: tab.link, fuzzy: false });
+                return (
+                  <Link key={tab.link} to={tab.link}>
+                    <MenuItem isSelected={Boolean(isActive)}>
+                      <div className="mx-1 flex gap-2">
+                        <div className="w-6">
+                          <FontAwesomeIcon icon={tab.icon} />
+                        </div>
+                        {tab.label}
+                      </div>
+                    </MenuItem>
+                  </Link>
+                );
+              })}
+            </MenuGroup>
+          </Menu>
+        </div>
        <Menu>
          <Link to="/organization/projects">
            <MenuItem
@@ -73,50 +116,10 @@ export const AdminSidebar = () => {
                />
              }
            >
-              Back to organization
+              Back to Organization
            </MenuItem>
          </Link>
        </Menu>
-        <div className="flex-grow">
-          <Menu>
-            <MenuGroup title="General">
-              {generalTabs.map((tab) => {
-                const isActive = matchRoute({ to: tab.link, fuzzy: false });
-                return (
-                  <Link key={tab.link} to={tab.link}>
-                    <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden rounded-none"
-                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon={tab.icon} />
-                      }
-                      isSelected={Boolean(isActive)}
-                    >
-                      {tab.label}
-                    </MenuItem>
-                  </Link>
-                );
-              })}
-            </MenuGroup>
-            <MenuGroup title="Resources">
-              {resourceTabs.map((tab) => {
-                const isActive = matchRoute({ to: tab.link, fuzzy: false });
-                return (
-                  <Link key={tab.link} to={tab.link}>
-                    <MenuItem
-                      className="relative flex items-center gap-2 overflow-hidden rounded-none"
-                      leftIcon={
-                        <Lottie className="inline-block h-6 w-6 shrink-0" icon={tab.icon} />
-                      }
-                      isSelected={Boolean(isActive)}
-                    >
-                      {tab.label}
-                    </MenuItem>
-                  </Link>
-                );
-              })}
-            </MenuGroup>
-          </Menu>
-        </div>
      </nav>
    </aside>
  );
@@ -1,12 +1,10 @@
-import { useOrganization } from "@app/context";
-import { useFetchServerStatus, useGetAuditLogStreams } from "@app/hooks/api";
+import { useFetchServerStatus, useListAuditLogStreams } from "@app/hooks/api";

 import { OrgAlertBanner } from "../OrgAlertBanner";

 export const AuditLogBanner = () => {
-  const org = useOrganization();
  const { data: status, isLoading: isLoadingStatus } = useFetchServerStatus();
-  const { data: streams, isLoading: isLoadingStreams } = useGetAuditLogStreams(org.currentOrg.id);
+  const { data: streams, isLoading: isLoadingStreams } = useListAuditLogStreams();

  if (isLoadingStreams || isLoadingStatus || !streams) return null;

@@ -10,13 +10,14 @@ import {
  faEnvelope,
  faInfo,
  faInfoCircle,
+  faServer,
  faSignOut,
  faUser,
  faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
-import { Link, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";

 import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
@@ -136,6 +137,7 @@ export const Navbar = () => {
    [notifications]
  );

+  const location = useLocation();
  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;

@@ -197,6 +199,8 @@ export const Navbar = () => {
    );
  }

+  const isServerAdminPanel = location.pathname.startsWith("/admin");
+
  return (
    <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
      <div>
@@ -205,96 +209,117 @@ export const Navbar = () => {
        </Link>
      </div>
      <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
-      <div className="flex items-center">
-        <DropdownMenu modal={false}>
-          <Link to="/organization/projects">
-            <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
-              <div>
-                <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
-              </div>
-              <div className="whitespace-nowrap">{currentOrg?.name}</div>
-              <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
-                {getPlan(subscription)}
-              </div>
-            </div>
-          </Link>
-          <DropdownMenuTrigger asChild>
-            <div>
-              <IconButton
-                variant="plain"
-                colorSchema="secondary"
-                ariaLabel="switch-org"
-                className="px-2 py-1"
-              >
-                <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
-              </IconButton>
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="start"
-            side="bottom"
-            className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
-            style={{ minWidth: "220px" }}
+      {isServerAdminPanel ? (
+        <>
+          <Link
+            to="/admin"
+            className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
          >
-            <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">organizations</div>
-            {orgs?.map((org) => {
-              return (
-                <DropdownMenuItem key={org.id}>
-                  <Button
-                    onClick={async () => {
-                      if (currentOrg?.id === org.id) return;
-
-                      if (org.authEnforced) {
-                        // org has an org-level auth method enabled (e.g. SAML)
-                        // -> logout + redirect to SAML SSO
-
-                        await logout.mutateAsync();
-                        if (org.orgAuthMethod === AuthMethod.OIDC) {
-                          window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
-                        } else {
-                          window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
-                        }
-                        window.close();
-                        return;
-                      }
-
-                      if (org.googleSsoAuthEnforced) {
-                        await logout.mutateAsync();
-                        window.open(`/api/v1/sso/redirect/google?org_slug=${org.slug}`);
-                        window.close();
-                        return;
-                      }
-
-                      handleOrgChange(org?.id);
-                    }}
+            <div>
+              <FontAwesomeIcon icon={faServer} className="text-xs text-bunker-300" />
+            </div>
+            <div className="whitespace-nowrap">Server Console</div>
+          </Link>
+          <p className="pl-3 pr-3 text-lg text-mineshaft-400/70">/</p>
+          {breadcrumbs ? (
+            // scott: remove /admin as we show server console above
+            <BreadcrumbContainer breadcrumbs={breadcrumbs.slice(1) as TBreadcrumbFormat[]} />
+          ) : null}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center">
+            <DropdownMenu modal={false}>
+              <Link to="/organization/projects">
+                <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
+                  <div>
+                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
+                  </div>
+                  <div className="whitespace-nowrap">{currentOrg?.name}</div>
+                  <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
+                    {getPlan(subscription)}
+                  </div>
+                </div>
+              </Link>
+              <DropdownMenuTrigger asChild>
+                <div>
+                  <IconButton
                    variant="plain"
                    colorSchema="secondary"
-                    size="xs"
-                    className="flex w-full items-center justify-start p-0 font-normal"
-                    leftIcon={
-                      currentOrg?.id === org.id && (
-                        <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
-                      )
-                    }
+                    ariaLabel="switch-org"
+                    className="px-2 py-1"
                  >
-                    <div className="flex w-full max-w-[150px] items-center justify-between truncate">
-                      {org.name}
-                    </div>
-                  </Button>
+                    <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
+                  </IconButton>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="start"
+                side="bottom"
+                className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
+                style={{ minWidth: "220px" }}
+              >
+                <div className="px-2 py-1 text-xs capitalize text-mineshaft-400">organizations</div>
+                {orgs?.map((org) => {
+                  return (
+                    <DropdownMenuItem key={org.id}>
+                      <Button
+                        onClick={async () => {
+                          if (currentOrg?.id === org.id) return;
+
+                          if (org.authEnforced) {
+                            // org has an org-level auth method enabled (e.g. SAML)
+                            // -> logout + redirect to SAML SSO
+
+                            await logout.mutateAsync();
+                            if (org.orgAuthMethod === AuthMethod.OIDC) {
+                              window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
+                            } else {
+                              window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
+                            }
+                            window.close();
+                            return;
+                          }
+
+                          if (org.googleSsoAuthEnforced) {
+                            await logout.mutateAsync();
+                            window.open(`/api/v1/sso/redirect/google?org_slug=${org.slug}`);
+                            window.close();
+                            return;
+                          }
+
+                          handleOrgChange(org?.id);
+                        }}
+                        variant="plain"
+                        colorSchema="secondary"
+                        size="xs"
+                        className="flex w-full items-center justify-start p-0 font-normal"
+                        leftIcon={
+                          currentOrg?.id === org.id && (
+                            <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                          )
+                        }
+                      >
+                        <div className="flex w-full max-w-[150px] items-center justify-between truncate">
+                          {org.name}
+                        </div>
+                      </Button>
+                    </DropdownMenuItem>
+                  );
+                })}
+                <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
+                  Log Out
                </DropdownMenuItem>
-              );
-            })}
-            <div className="mt-1 h-1 border-t border-mineshaft-600" />
-            <DropdownMenuItem icon={<FontAwesomeIcon icon={faSignOut} />} onClick={logOutUser}>
-              Log Out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
-      {breadcrumbs ? (
-        <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
-      ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <p className="pl-1 pr-3 text-lg text-mineshaft-400/70">/</p>
+          {breadcrumbs ? (
+            <BreadcrumbContainer breadcrumbs={breadcrumbs as TBreadcrumbFormat[]} />
+          ) : null}
+        </>
+      )}
      <div className="flex-grow" />
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger>
@@ -27,11 +27,11 @@ export const OrgAlertBanner = ({ text, link }: Props) => {
            target="_blank"
            className="group flex items-center"
          >
-            <span className="cursor-pointer pl-1 text-yellow-500 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
+            <span className="cursor-pointer pl-1 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
              here
            </span>
            <FontAwesomeIcon
-              className="ml-0.5 mt-0.5 text-yellow group-hover:text-mineshaft-100"
+              className="ml-1 mt-[0.12rem] group-hover:text-mineshaft-100"
              icon={faArrowUpRightFromSquare}
              size="xs"
            />
@@ -36,7 +36,10 @@ export const AssumePrivilegeModeBanner = () => {
              },
              {
                onSuccess: () => {
-                  const url = getProjectHomePage(currentWorkspace.type);
+                  const url = getProjectHomePage(
+                    currentWorkspace.type,
+                    currentWorkspace.environments
+                  );
                  window.location.href = url.replace("$projectId", currentWorkspace.id);
                }
              }
@@ -101,7 +101,7 @@ export const ProjectSelect = () => {
    <div className="-mr-2 flex w-full items-center gap-1">
      <DropdownMenu modal={false}>
        <Link
-          to={getProjectHomePage(currentWorkspace.type)}
+          to={getProjectHomePage(currentWorkspace.type, currentWorkspace.environments)}
          params={{
            projectId: currentWorkspace.id
          }}
@@ -158,7 +158,7 @@ export const ProjectSelect = () => {
                      // to reproduce change this back to router.push and switch between two projects with different env count
                      // look into this on dashboard revamp
                      const url = linkOptions({
-                        to: getProjectHomePage(workspace.type),
+                        to: getProjectHomePage(workspace.type, workspace.environments),
                        params: {
                          projectId: workspace.id
                        }
@@ -11,7 +11,7 @@ import {
  faVault
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";

 import { Badge, Lottie, Menu, MenuGroup, MenuItem } from "@app/components/v2";
@@ -31,6 +31,7 @@ export const SecretManagerLayout = () => {
  const { t } = useTranslation();
  const workspaceId = currentWorkspace?.id || "";
  const projectSlug = currentWorkspace?.slug || "";
+  const location = useLocation();

  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
    workspaceId
@@ -73,11 +74,21 @@ export const SecretManagerLayout = () => {
                    <Link
                      to="/projects/secret-management/$projectId/overview"
                      params={{
-                        projectId: currentWorkspace.id
+                        projectId: currentWorkspace.id,
+                        ...(currentWorkspace.environments.length
+                          ? { envSlug: currentWorkspace.environments[0]?.slug }
+                          : {})
                      }}
                    >
                      {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem
+                          isSelected={
+                            isActive ||
+                            location.pathname.startsWith(
+                              `/projects/secret-management/${currentWorkspace.id}/overview`
+                            )
+                          }
+                        >
                          <div className="mx-1 flex gap-2">
                            <div className="w-6">
                              <FontAwesomeIcon icon={faVault} />