refactor: remove app column from tasks table (#18135)

BrunoQuaresma · web-flow · commit 696d264da8a3 · 2025-05-30T14:47:24.000-03:00
Remove the "app" column from the tasks table since the user can click on the task and use apps there.
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -1,16 +1,10 @@
 import { API } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import { disabledRefetchOptions } from "api/queries/util";
-import type {
-	Template,
-	Workspace,
-	WorkspaceAgent,
-	WorkspaceApp,
-} from "api/typesGenerated";
+import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { Button } from "components/Button/Button";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Margins } from "components/Margins/Margins";
 import {
@@ -34,23 +28,15 @@ import {
 	TableHeader,
 	TableRow,
 } from "components/Table/Table";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "components/Tooltip/Tooltip";
 import { useAuthenticated } from "hooks";
 import { ExternalLinkIcon, RotateCcwIcon, SendIcon } from "lucide-react";
-import { useAppLink } from "modules/apps/useAppLink";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
-import type { FC, PropsWithChildren, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
 import TextareaAutosize from "react-textarea-autosize";
-import { cn } from "utils/cn";
 import { pageTitle } from "utils/page";
 import { relativeTime } from "utils/time";
 
@@ -351,11 +337,6 @@ const TasksTable: FC<TasksTableProps> = ({ templates }) => {
 									src={workspace.owner_avatar_url}
 								/>
 							</TableCell>
-							<TableCell className="pl-10">
-								{agent && app && (
-									<IconAppLink app={app} workspace={workspace} agent={agent} />
-								)}
-							</TableCell>
 						</TableRow>
 					);
 				})
@@ -387,82 +368,13 @@ const TasksTable: FC<TasksTableProps> = ({ templates }) => {
 					<TableHead>Task</TableHead>
 					<TableHead>Status</TableHead>
 					<TableHead>Created by</TableHead>
-					<TableHead className="w-0" />
 				</TableRow>
 			</TableHeader>
 			<TableBody>{body}</TableBody>
 		</Table>
 	);
 };
 
-type IconAppLinkProps = {
-	app: WorkspaceApp;
-	workspace: Workspace;
-	agent: WorkspaceAgent;
-};
-
-const IconAppLink: FC<IconAppLinkProps> = ({ app, workspace, agent }) => {
-	const link = useAppLink(app, {
-		workspace,
-		agent,
-	});
-
-	return (
-		<BaseIconLink
-			key={app.id}
-			label={`Open ${link.label}`}
-			href={link.href}
-			onClick={(e) => {
-				link.onClick?.(e);
-				e.stopPropagation();
-			}}
-		>
-			<ExternalImage src={app.icon ?? "/icon/widgets.svg"} />
-		</BaseIconLink>
-	);
-};
-
-type BaseIconLinkProps = PropsWithChildren<{
-	label: string;
-	href: string;
-	isLoading?: boolean;
-	target?: string;
-	onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-}>;
-
-const BaseIconLink: FC<BaseIconLinkProps> = ({
-	href,
-	isLoading,
-	label,
-	children,
-	target,
-	onClick,
-}) => {
-	return (
-		<TooltipProvider>
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<Button variant="outline" size="icon-lg" asChild>
-						<a
-							target={target}
-							className={cn(["z-10 relative", { "animate-pulse": isLoading }])}
-							href={href}
-							onClick={(e) => {
-								e.stopPropagation();
-								onClick?.(e);
-							}}
-						>
-							{children}
-							<span className="sr-only">{label}</span>
-						</a>
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>{label}</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
-	);
-};
-
 export const data = {
 	// TODO: This function is currently inefficient because it fetches all templates
 	// and their parameters individually, resulting in many API calls and slow
