Canvas: Show app tab titles in overview mode
Change-Id: Iafbcfba04c53f033c091152392e724590b2f4e3f
diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index aca5bd2..345bb1d 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -72,6 +72,7 @@
node={n}
disabled={isDeployMode}
showName={true}
+ isOverview={true}
className="min-w-[500px] rounded-lg border-gray-200 border-2 p-2"
/>
))}
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index aaa4ecf..d9eea6d 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -92,7 +92,7 @@
subdomain: z.string().min(1, "required"),
});
-export function NodeAppDetails({ node, disabled, showName = true }: NodeDetailsProps<ServiceNode>) {
+export function NodeAppDetails({ node, disabled, showName = true, isOverview = false }: NodeDetailsProps<ServiceNode>) {
const { data } = node;
return (
<>
@@ -100,54 +100,80 @@
<Tabs defaultValue="runtime">
<TabsList className="w-full flex flex-row justify-between">
<TabsTrigger value="runtime">
- <TooltipProvider>
- <Tooltip>
- <TooltipTrigger>
- <Container />
- </TooltipTrigger>
- <TooltipContent>Runtime</TooltipContent>
- </Tooltip>
- </TooltipProvider>
+ {isOverview ? (
+ <div className="flex flex-row gap-1 items-center">
+ <Container /> Runtime
+ </div>
+ ) : (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger>
+ <Container />
+ </TooltipTrigger>
+ <TooltipContent>Runtime</TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
</TabsTrigger>
<TabsTrigger value="ports">
- <TooltipProvider>
- <Tooltip>
- <TooltipTrigger className="flex flex-row gap-1 items-center">
- <Network />
- </TooltipTrigger>
- <TooltipContent>
- Ports{" "}
- <Badge variant="secondary" className="rounded-full">
- {data.ports?.length ?? 0}
- </Badge>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
+ {isOverview ? (
+ <div className="flex flex-row gap-1 items-center">
+ <Network /> Ports
+ <Badge className="rounded-full">{data.ports?.length ?? 0}</Badge>
+ </div>
+ ) : (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger className="flex flex-row gap-1 items-center">
+ <Network />
+ </TooltipTrigger>
+ <TooltipContent>
+ Ports{" "}
+ <Badge variant="secondary" className="rounded-full">
+ {data.ports?.length ?? 0}
+ </Badge>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
</TabsTrigger>
<TabsTrigger value="vars">
- <TooltipProvider>
- <Tooltip>
- <TooltipTrigger className="flex flex-row gap-1 items-center">
- <Variable />
- </TooltipTrigger>
- <TooltipContent>
- Variables{" "}
- <Badge variant="secondary" className="rounded-full">
- {data.envVars?.length ?? 0}
- </Badge>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
+ {isOverview ? (
+ <div className="flex flex-row gap-1 items-center">
+ <Variable /> Variables
+ <Badge className="rounded-full">{data.envVars?.length ?? 0}</Badge>
+ </div>
+ ) : (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger className="flex flex-row gap-1 items-center">
+ <Variable />
+ </TooltipTrigger>
+ <TooltipContent>
+ Variables{" "}
+ <Badge variant="secondary" className="rounded-full">
+ {data.envVars?.length ?? 0}
+ </Badge>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
</TabsTrigger>
<TabsTrigger value="dev">
- <TooltipProvider>
- <Tooltip>
- <TooltipTrigger className="flex flex-row gap-1 items-center">
- <Code />
- </TooltipTrigger>
- <TooltipContent>Dev</TooltipContent>
- </Tooltip>
- </TooltipProvider>
+ {isOverview ? (
+ <div className="flex flex-row gap-1 items-center">
+ <Code /> Dev
+ </div>
+ ) : (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger className="flex flex-row gap-1 items-center">
+ <Code />
+ </TooltipTrigger>
+ <TooltipContent>Dev</TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
</TabsTrigger>
</TabsList>
<TabsContent value="runtime">
diff --git a/apps/canvas/front/src/lib/types.ts b/apps/canvas/front/src/lib/types.ts
index e692991..983b13e 100644
--- a/apps/canvas/front/src/lib/types.ts
+++ b/apps/canvas/front/src/lib/types.ts
@@ -4,4 +4,5 @@
node: T;
disabled?: boolean;
showName?: boolean;
+ isOverview?: boolean;
}