feat: refactor action columns and dialogs for improved consistency and usability (cc9f226c) · Commits · OOP / code / portal

portal-gui/src/components/applications/app-deployment-columns.tsx

+12 −40

Changes for portal-gui/src/components/applications/app-deployment-columns.tsx: 12 added lines, 40 removed lines.
Original line number	Diff line number	Diff line
		import type { ColumnDef } from '@tanstack/react-table';

		import { EllipsisVerticalIcon } from 'lucide-react';
		import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuSeparator,
		DropdownMenuTrigger,
		} from '@/components/ui/dropdown-menu';
		import { Button } from '@/components/ui/button';
		import { actionsColumn } from '@/components/data-table/actions-column';

		import type { PresentedAppDeployment } from '@/types/application';

		@@ -50,38 +42,18 @@ export function getAppDeploymentColumns(
		),
		size: 220,
		},
		actionsColumn((deployment) => ({
		id: deployment.appDeploymentId,
		label: deployment.appDeploymentName,
		actions: [
		{ label: 'Details', onSelect: () => onDetails(deployment) },
		{
		id: 'actions',
		enableHiding: false,
		cell: ({ row }) => {
		const deployment = row.original;

		return (
		<DropdownMenu>
		<DropdownMenuTrigger asChild>
		<Button variant="ghost" size="icon">
		<EllipsisVerticalIcon className="h-4 w-4" />
		</Button>
		</DropdownMenuTrigger>

		<DropdownMenuContent align="end">
		<DropdownMenuItem onClick={() => onDetails(deployment)}>
		Details
		</DropdownMenuItem>

		<DropdownMenuSeparator />

		<DropdownMenuItem
		variant="destructive"
		onClick={() => onDelete(deployment)}
		>
		Delete
		</DropdownMenuItem>
		</DropdownMenuContent>
		</DropdownMenu>
		);
		},
		size: 70,
		label: 'Delete',
		onSelect: () => onDelete(deployment),
		destructive: true,
		separatorBefore: true,
		},
		],
		})),
		];
		}

+7 −1

Changes for portal-gui/src/components/applications/app-deployment-table.tsx: 7 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -162,7 +162,13 @@ export function AppDepploymentTable({
		<TableRow key={headerGroup.id}>
		{headerGroup.headers.map((header) => {
		return (
		<TableHead key={header.id} colSpan={header.colSpan}>
		<TableHead
		key={header.id}
		colSpan={header.colSpan}
		className={
		header.column.columnDef.meta?.headerClassName
		}
		>
		{header.isPlaceholder
		? null
		: flexRender(

+13 −40

Changes for portal-gui/src/components/applications/app-instance-columns.tsx: 13 added lines, 40 removed lines.
Original line number	Diff line number	Diff line
		import type { ColumnDef } from '@tanstack/react-table';

		import { EllipsisVerticalIcon } from 'lucide-react';
		import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuSeparator,
		DropdownMenuTrigger,
		} from '@/components/ui/dropdown-menu';
		import { Button } from '@/components/ui/button';
		import { actionsColumn } from '@/components/data-table/actions-column';

		import { Badge } from '../ui/badge';
		import type { PresentedAppInstance } from '@/types/application';

		@@ -76,38 +69,18 @@ export function getAppInstanceColumns(
		cell: ({ row }) => row.original.zoneName,
		size: 220,
		},
		actionsColumn((instance) => ({
		id: instance.appInstanceId,
		label: instance.name,
		actions: [
		{ label: 'Details', onSelect: () => onDetails(instance) },
		{
		id: 'actions',
		enableHiding: false,
		cell: ({ row }) => {
		const instance = row.original;

		return (
		<DropdownMenu>
		<DropdownMenuTrigger asChild>
		<Button variant="ghost" size="icon">
		<EllipsisVerticalIcon className="h-4 w-4" />
		</Button>
		</DropdownMenuTrigger>

		<DropdownMenuContent align="end">
		<DropdownMenuItem onClick={() => onDetails(instance)}>
		Details
		</DropdownMenuItem>

		<DropdownMenuSeparator />

		<DropdownMenuItem
		variant="destructive"
		onClick={() => onDelete(instance)}
		>
		Delete
		</DropdownMenuItem>
		</DropdownMenuContent>
		</DropdownMenu>
		);
		},
		size: 70,
		label: 'Delete',
		onSelect: () => onDelete(instance),
		destructive: true,
		separatorBefore: true,
		},
		],
		})),
		];
		}

+7 −1

Changes for portal-gui/src/components/applications/app-instance-table.tsx: 7 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -160,7 +160,13 @@ export function AppInstanceTable({
		<TableRow key={headerGroup.id}>
		{headerGroup.headers.map((header) => {
		return (
		<TableHead key={header.id} colSpan={header.colSpan}>
		<TableHead
		key={header.id}
		colSpan={header.colSpan}
		className={
		header.column.columnDef.meta?.headerClassName
		}
		>
		{header.isPlaceholder
		? null
		: flexRender(

+13 −40

Changes for portal-gui/src/components/applications/app-profile-columns .tsx: 13 added lines, 40 removed lines.
Original line number	Diff line number	Diff line
		import type { ColumnDef } from '@tanstack/react-table';

		import { EllipsisVerticalIcon } from 'lucide-react';
		import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuSeparator,
		DropdownMenuTrigger,
		} from '@/components/ui/dropdown-menu';
		import { Button } from '@/components/ui/button';
		import { actionsColumn } from '@/components/data-table/actions-column';

		import { Badge } from '@/components/ui/badge';
		import type { ApplicationProfile } from '@/types/application';

		@@ -112,38 +105,18 @@ export function getAppProfileColumns(
		},
		size: 220,
		},
		actionsColumn((application) => ({
		id: application.appId,
		label: application.name,
		actions: [
		{ label: 'Details', onSelect: () => onDetails(application) },
		{
		id: 'actions',
		enableHiding: false,
		cell: ({ row }) => {
		const application = row.original;

		return (
		<DropdownMenu>
		<DropdownMenuTrigger asChild>
		<Button variant="ghost" size="icon">
		<EllipsisVerticalIcon className="h-4 w-4" />
		</Button>
		</DropdownMenuTrigger>

		<DropdownMenuContent align="end">
		<DropdownMenuItem onClick={() => onDetails(application)}>
		Details
		</DropdownMenuItem>

		<DropdownMenuSeparator />

		<DropdownMenuItem
		variant="destructive"
		onClick={() => onDelete(application)}
		>
		Delete
		</DropdownMenuItem>
		</DropdownMenuContent>
		</DropdownMenu>
		);
		},
		size: 70,
		label: 'Delete',
		onSelect: () => onDelete(application),
		destructive: true,
		separatorBefore: true,
		},
		],
		})),
		];
		}