From 89486e8898f2bd02129c057b0212911409385e07 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 29 May 2025 16:10:43 +0000 Subject: [PATCH 1/6] feat: group external apps on task page --- .../components/DropdownMenu/DropdownMenu.tsx | 2 +- site/src/pages/TaskPage/TaskPage.tsx | 83 +++++++++++++++---- 2 files changed, 66 insertions(+), 19 deletions(-) diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx index 8d9fb12d774a3..319ac3242067a 100644 --- a/site/src/components/DropdownMenu/DropdownMenu.tsx +++ b/site/src/components/DropdownMenu/DropdownMenu.tsx @@ -111,7 +111,7 @@ export const DropdownMenuItem = forwardRef< [ "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors", "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - "[&>svg]:size-4 [&>svg]:shrink-0 no-underline", + "[&>svg]:size-4 [&>svg]:shrink-0 [&>img]:size-4 [&>img]:shrink-0 no-underline", inset && "pl-8", ], className, diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index 7a0b79d7a410a..d93c2074c462c 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -2,6 +2,12 @@ import { API } from "api/api"; import { getErrorDetail, getErrorMessage } from "api/errors"; import type { WorkspaceApp, WorkspaceStatus } from "api/typesGenerated"; import { Button } from "components/Button/Button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "components/DropdownMenu/DropdownMenu"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; @@ -14,7 +20,12 @@ import { TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useProxy } from "contexts/ProxyContext"; -import { ArrowLeftIcon, LayoutGridIcon, RotateCcwIcon } from "lucide-react"; +import { + ArrowLeftIcon, + ChevronDownIcon, + LayoutGridIcon, + RotateCcwIcon, +} from "lucide-react"; import { AppStatusIcon } from "modules/apps/AppStatusIcon"; import { getAppHref } from "modules/apps/apps"; import { useAppLink } from "modules/apps/useAppLink"; @@ -307,23 +318,59 @@ const TaskApps: FC = ({ task }) => { return (
- {apps.map((app) => ( - { - if (app.external) { - return; - } - - e.preventDefault(); - setActiveAppId(app.id); - setIframeSrc(e.currentTarget.href); - }} - /> - ))} + {apps + .filter((app) => !app.external) + .map((app) => ( + { + if (app.external) { + return; + } + + e.preventDefault(); + setActiveAppId(app.id); + setIframeSrc(e.currentTarget.href); + }} + /> + ))} + +
+ + + + + + {apps + .filter((app) => app.external) + .map((app) => { + const link = useAppLink(app, { + agent, + workspace: task.workspace, + }); + + return ( + + + {app.icon ? ( + + ) : ( + + )} + {link.label} + + + ); + })} + + +
From 8c7ede2241221d4d821c3276cc7e9ef6f4d76982 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 29 May 2025 16:22:19 +0000 Subject: [PATCH 2/6] Update label to Open in IDE --- site/src/pages/TaskPage/TaskPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index d93c2074c462c..27d0a32dc0872 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -342,7 +342,7 @@ const TaskApps: FC = ({ task }) => { From 50724f47714bc4cc75e631f763d4b6b1b0b9957a Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 29 May 2025 16:32:06 +0000 Subject: [PATCH 3/6] Test and check external apps --- site/src/pages/TaskPage/TaskPage.stories.tsx | 8 ++- site/src/pages/TaskPage/TaskPage.tsx | 73 +++++++++++--------- 2 files changed, 46 insertions(+), 35 deletions(-) diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx index 1fd9c4b93cfa6..1b1abcf6b5ef4 100644 --- a/site/src/pages/TaskPage/TaskPage.stories.tsx +++ b/site/src/pages/TaskPage/TaskPage.stories.tsx @@ -131,9 +131,15 @@ export const Active: Story = { { ...MockWorkspaceApp, id: "vscode", - display_name: "VSCode", + display_name: "VS Code Web", icon: "/icon/code.svg", }, + { + ...MockWorkspaceApp, + id: "zed", + display_name: "Zed", + icon: "/icon/zed.svg", + }, ], }, ], diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index 27d0a32dc0872..38bd20b4fd1b7 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -315,10 +315,13 @@ const TaskApps: FC = ({ task }) => { return src; }); + const emmbedApps = apps.filter((app) => !app.external); + const externalApps = apps.filter((app) => app.external); + return (
- {apps + {emmbedApps .filter((app) => !app.external) .map((app) => ( = ({ task }) => { /> ))} -
- - - - - - {apps - .filter((app) => app.external) - .map((app) => { - const link = useAppLink(app, { - agent, - workspace: task.workspace, - }); - - return ( - - - {app.icon ? ( - - ) : ( - - )} - {link.label} - - - ); - })} - - -
+ {externalApps.length > 0 && ( +
+ + + + + + {externalApps + .filter((app) => app.external) + .map((app) => { + const link = useAppLink(app, { + agent, + workspace: task.workspace, + }); + + return ( + + + {app.icon ? ( + + ) : ( + + )} + {link.label} + + + ); + })} + + +
+ )}
From 8e0f48200cf8282926a750752fc01c5bbedd5164 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 29 May 2025 16:32:31 +0000 Subject: [PATCH 4/6] Prevent --- site/src/pages/TaskPage/TaskPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index d00afc834ca0f..c76c3c9717d27 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -266,7 +266,7 @@ const TaskPage = () => {