tweak user level tab view

mbecker20 · mbecker20 · commit c5401de1c545 · 2025-10-28T11:42:29.000-07:00
diff --git a/frontend/src/components/resources/deployment/tabs.tsx b/frontend/src/components/resources/deployment/tabs.tsx
@@ -3,10 +3,7 @@ import { useDeployment } from ".";
 import { useLocalStorage, usePermissions } from "@lib/hooks";
 import { useServer } from "../server";
 import { useMemo } from "react";
-import {
-  MobileFriendlyTabsSelector,
-  TabNoContent,
-} from "@ui/mobile-friendly-tabs";
+import { MobileFriendlyTabsSelector } from "@ui/mobile-friendly-tabs";
 import { DeploymentConfig } from "./config";
 import { DeploymentLogs } from "./log";
 import { DeploymentInspect } from "./inspect";
@@ -58,44 +55,32 @@ const DeploymentTabsInner = ({
       ? "Config"
       : _view;
 
-  const tabsNoContent = useMemo<TabNoContent<DeploymentTabsView>[]>(
-    () => [
-      {
-        value: "Config",
-      },
-      {
-        value: "Log",
-        hidden: !specificLogs,
-        disabled: logsDisabled,
-      },
-      {
-        value: "Inspect",
-        hidden: !specificInspect,
-        disabled: inspectDisabled,
-      },
-      {
-        value: "Terminals",
-        hidden: !specificTerminal,
-        disabled: terminalDisabled,
-      },
-    ],
-    [
-      specificLogs,
-      logsDisabled,
-      specificInspect,
-      inspectDisabled,
-      specificTerminal,
-      terminalDisabled,
-    ]
-  );
-
-  const Selector = (
-    <MobileFriendlyTabsSelector
-      tabs={tabsNoContent}
-      value={view}
-      onValueChange={setView as any}
-      tabsTriggerClassname="w-[110px]"
-    />
+  const Selector = useMemo(
+    () => (
+      <MobileFriendlyTabsSelector
+        tabs={[
+          {
+            value: "Config",
+          },
+          {
+            value: "Log",
+            disabled: logsDisabled,
+          },
+          {
+            value: "Inspect",
+            disabled: inspectDisabled,
+          },
+          {
+            value: "Terminals",
+            disabled: terminalDisabled,
+          },
+        ]}
+        value={view}
+        onValueChange={setView as any}
+        tabsTriggerClassname="w-[110px]"
+      />
+    ),
+    [logsDisabled, inspectDisabled, terminalDisabled]
   );
 
   const target: Types.TerminalTarget = useMemo(
diff --git a/frontend/src/components/resources/server/tabs.tsx b/frontend/src/components/resources/server/tabs.tsx
@@ -1,10 +1,7 @@
 import { useLocalStorage, usePermissions, useRead, useUser } from "@lib/hooks";
 import { useServer } from ".";
 import { ReactNode, useMemo } from "react";
-import {
-  MobileFriendlyTabsSelector,
-  TabNoContent,
-} from "@ui/mobile-friendly-tabs";
+import { MobileFriendlyTabsSelector } from "@ui/mobile-friendly-tabs";
 import { ServerStats } from "./stats";
 import { ServerInfo } from "./info";
 import { ServerConfig } from "./config";
@@ -27,9 +24,8 @@ export const ServerTabs = ({ id }: { id: string }) => {
 
   const { specificTerminal } = usePermissions({ type: "Server", id });
   const server_info = useServer(id)?.info;
-  const terminals_disabled = server_info?.terminals_disabled ?? true;
-  const container_terminals_disabled =
-    server_info?.container_terminals_disabled ?? true;
+  const terminalDisabled =
+    !specificTerminal || (server_info?.terminals_disabled ?? true);
 
   const deployments =
     useRead("ListDeployments", {}).data?.filter(
@@ -49,43 +45,34 @@ export const ServerTabs = ({ id }: { id: string }) => {
 
   const noResources = noDeployments && noRepos && noStacks;
 
-  const tabsNoContent = useMemo<TabNoContent<ServerTabView>[]>(
-    () => [
-      {
-        value: "Config",
-      },
-      {
-        value: "Stats",
-      },
-      {
-        value: "Docker",
-      },
-      {
-        value: "Resources",
-        disabled: noResources,
-      },
-      {
-        value: "Terminals",
-        disabled:
-          !specificTerminal ||
-          (terminals_disabled && container_terminals_disabled),
-      },
-    ],
-    [
-      noResources,
-      specificTerminal,
-      terminals_disabled,
-      container_terminals_disabled,
-    ]
-  );
-
-  const Selector = (
-    <MobileFriendlyTabsSelector
-      tabs={tabsNoContent}
-      value={view}
-      onValueChange={setView as any}
-      tabsTriggerClassname="w-[110px]"
-    />
+  const Selector = useMemo(
+    () => (
+      <MobileFriendlyTabsSelector
+        tabs={[
+          {
+            value: "Config",
+          },
+          {
+            value: "Stats",
+          },
+          {
+            value: "Docker",
+          },
+          {
+            value: "Resources",
+            disabled: noResources,
+          },
+          {
+            value: "Terminals",
+            disabled: terminalDisabled,
+          },
+        ]}
+        value={view}
+        onValueChange={setView as any}
+        tabsTriggerClassname="w-[110px]"
+      />
+    ),
+    [noResources, terminalDisabled]
   );
 
   switch (view) {
diff --git a/frontend/src/components/resources/stack/tabs.tsx b/frontend/src/components/resources/stack/tabs.tsx
@@ -19,16 +19,15 @@ export const StackTabs = ({ id }: { id: string }) => {
     "Config"
   );
   const info = useStack(id)?.info;
-  const { specific, specificLogs } = usePermissions({ type: "Stack", id });
+  const { specificLogs } = usePermissions({ type: "Stack", id });
 
   const state = info?.state;
   const hideInfo = !info?.files_on_host && !info?.repo && !info?.linked_repo;
   const hideServices =
     state === undefined ||
     state === Types.StackState.Unknown ||
     state === Types.StackState.Down;
-  const hideLogs =
-    hideServices || !specific.includes(Types.SpecificPermission.Logs);
+  const hideLogs = hideServices || !specificLogs;
 
   const view =
     (_view === "Info" && hideInfo) ||
@@ -52,7 +51,6 @@ export const StackTabs = ({ id }: { id: string }) => {
       },
       {
         value: "Log",
-        hidden: !specificLogs,
         disabled: hideLogs,
       },
     ],
diff --git a/frontend/src/components/topbar/index.tsx b/frontend/src/components/topbar/index.tsx
@@ -23,13 +23,16 @@ export const Topbar = () => {
     <div className="fixed top-0 w-full bg-accent z-50 border-b shadow-sm">
       <div className="container px-[1.2rem] h-16 flex items-center justify-between md:grid md:grid-cols-[auto_1fr] lg:grid-cols-3">
         {/* Logo */}
-        <Link
-          to="/"
-          className="flex gap-3 items-center text-2xl tracking-widest md:mx-2"
-        >
-          <img src="/komodo-512x512.png" className="w-[32px]" />
-          <div className="hidden lg:block">KOMODO</div>
-        </Link>
+        <div className="flex items-center gap-1">
+          <Link
+            to="/"
+            className="flex gap-3 items-center text-2xl tracking-widest md:mx-2"
+          >
+            <img src="/komodo-512x512.png" className="w-[32px]" />
+            <div className="hidden lg:block">KOMODO</div>
+          </Link>
+          <MobileDropdown />
+        </div>
 
         {/* Searchbar */}
         <div className="hidden lg:flex justify-center">
@@ -38,7 +41,6 @@ export const Topbar = () => {
 
         {/* Shortcuts */}
         <div className="flex justify-end items-center gap-1">
-          <MobileDropdown />
           <OmniSearch setOpen={setOmniOpen} className="lg:hidden" />
           <div className="flex gap-0">
             <Docs />
diff --git a/frontend/src/pages/stack-service/index.tsx b/frontend/src/pages/stack-service/index.tsx
@@ -19,7 +19,6 @@ import {
 } from "@lib/color";
 import {
   usePermissions,
-  useLocalStorage,
   useRead,
   useSetTitle,
   useContainerPortsMap,
@@ -28,20 +27,12 @@ import { cn } from "@lib/utils";
 import { Types } from "komodo_client";
 import { ChevronLeft, Clapperboard, Layers2 } from "lucide-react";
 import { Link, useParams } from "react-router-dom";
-import { StackServiceLogs } from "./log";
 import { Button } from "@ui/button";
 import { ExportButton } from "@components/export";
 import { ContainerPortLink, DockerResourceLink } from "@components/util";
 import { ResourceNotifications } from "@pages/resource-notifications";
 import { Fragment } from "react/jsx-runtime";
-import { ContainerTerminals } from "@components/terminal/container";
-import { useServer } from "@components/resources/server";
-import { StackServiceInspect } from "./inspect";
-import { useMemo } from "react";
-import {
-  MobileFriendlyTabsSelector,
-  TabNoContent,
-} from "@ui/mobile-friendly-tabs";
+import { StackServiceTabs } from "./tabs";
 
 type IdServiceComponent = React.FC<{ id: string; service?: string }>;
 
@@ -224,110 +215,3 @@ const StackServicePageInner = ({
     </div>
   );
 };
-
-type StackServiceTabsView = "Log" | "Inspect" | "Terminals";
-
-const StackServiceTabs = ({
-  stack,
-  service,
-  container_state,
-}: {
-  stack: Types.StackListItem;
-  service: string;
-  container_state: Types.ContainerStateStatusEnum;
-}) => {
-  const [_view, setView] = useLocalStorage<StackServiceTabsView>(
-    `stack-${stack.id}-${service}-tabs-v2`,
-    "Log"
-  );
-  const { specificLogs, specificInspect, specificTerminal } = usePermissions({
-    type: "Stack",
-    id: stack.id,
-  });
-  const container_terminals_disabled =
-    useServer(stack.info.server_id)?.info.container_terminals_disabled ?? true;
-  const logDisabled =
-    !specificLogs || container_state === Types.ContainerStateStatusEnum.Empty;
-  const inspectDisabled =
-    !specificInspect ||
-    container_state === Types.ContainerStateStatusEnum.Empty;
-  const terminalDisabled =
-    !specificTerminal ||
-    container_terminals_disabled ||
-    container_state !== Types.ContainerStateStatusEnum.Running;
-  const view =
-    (inspectDisabled && _view === "Inspect") ||
-    (terminalDisabled && _view === "Terminals")
-      ? "Log"
-      : _view;
-
-  const tabsNoContent = useMemo<TabNoContent<StackServiceTabsView>[]>(
-    () => [
-      {
-        value: "Log",
-        hidden: !specificLogs,
-        disabled: logDisabled,
-      },
-      {
-        value: "Inspect",
-        hidden: !specificInspect,
-        disabled: inspectDisabled,
-      },
-      {
-        value: "Terminals",
-        hidden: !specificTerminal,
-        disabled: terminalDisabled,
-      },
-    ],
-    [
-      specificLogs,
-      logDisabled,
-      specificInspect,
-      inspectDisabled,
-      specificTerminal,
-      terminalDisabled,
-    ]
-  );
-
-  const Selector = (
-    <MobileFriendlyTabsSelector
-      tabs={tabsNoContent}
-      value={view}
-      onValueChange={setView as any}
-      tabsTriggerClassname="w-[110px]"
-    />
-  );
-
-  const target: Types.TerminalTarget = useMemo(
-    () => ({
-      type: "Stack",
-      params: {
-        stack: stack.id,
-        service,
-      },
-    }),
-    [stack.id, service]
-  );
-
-  switch (view) {
-    case "Log":
-      return (
-        <StackServiceLogs
-          id={stack.id}
-          service={service}
-          titleOther={Selector}
-          disabled={logDisabled}
-        />
-      );
-    case "Inspect":
-      return (
-        <StackServiceInspect
-          id={stack.id}
-          service={service}
-          titleOther={Selector}
-        />
-      );
-    case "Terminals":
-      return <ContainerTerminals target={target} titleOther={Selector} />;
-  }
-};
diff --git a/frontend/src/pages/stack-service/tabs.tsx b/frontend/src/pages/stack-service/tabs.tsx
