From 5734f98eff516d1ce5de7face58ddd8faf06e31f Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 5 May 2025 20:55:25 +0000 Subject: [PATCH 1/7] refactor: update app buttons to use the new button component --- site/src/components/Button/Button.tsx | 11 ++-- .../ExternalImage/ExternalImage.tsx | 39 +++++++++------ site/src/modules/resources/AgentButton.tsx | 31 ------------ .../resources/AgentDevcontainerCard.tsx | 40 ++++++++------- .../src/modules/resources/AppLink/AppLink.tsx | 50 +++++++++++-------- .../modules/resources/AppLink/BaseIcon.tsx | 5 ++ .../resources/TerminalLink/TerminalLink.tsx | 37 +++++++------- .../VSCodeDesktopButton.tsx | 19 ++++--- .../VSCodeDevContainerButton.tsx | 19 ++++--- site/src/theme/externalImages.ts | 2 - 10 files changed, 121 insertions(+), 132 deletions(-) delete mode 100644 site/src/modules/resources/AgentButton.tsx diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx index f3940fe45cabc..0b10f768f68fc 100644 --- a/site/src/components/Button/Button.tsx +++ b/site/src/components/Button/Button.tsx @@ -13,7 +13,8 @@ const buttonVariants = cva( text-sm font-semibold font-medium cursor-pointer no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link disabled:pointer-events-none disabled:text-content-disabled - [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5`, + [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5 + [&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5`, { variants: { variant: { @@ -28,11 +29,11 @@ const buttonVariants = cva( }, size: { - lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg", - sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm", + lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg", + sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm", xs: "min-w-8 py-1 px-2 text-2xs rounded-md", - icon: "size-8 px-1.5 [&_svg]:size-icon-sm", - "icon-lg": "size-10 px-2 [&_svg]:size-icon-lg", + icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm", + "icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg", }, }, defaultVariants: { diff --git a/site/src/components/ExternalImage/ExternalImage.tsx b/site/src/components/ExternalImage/ExternalImage.tsx index b15af07944ca8..a0cb3c634052c 100644 --- a/site/src/components/ExternalImage/ExternalImage.tsx +++ b/site/src/components/ExternalImage/ExternalImage.tsx @@ -1,19 +1,28 @@ import { useTheme } from "@emotion/react"; import { type ImgHTMLAttributes, forwardRef } from "react"; -import { getExternalImageStylesFromUrl } from "theme/externalImages"; +import { + type ExternalImageModeStyles, + getExternalImageStylesFromUrl, +} from "theme/externalImages"; -export const ExternalImage = forwardRef< - HTMLImageElement, - ImgHTMLAttributes ->((attrs, ref) => { - const theme = useTheme(); +type ExternalImageProps = ImgHTMLAttributes & { + mode?: ExternalImageModeStyles; +}; - return ( - // biome-ignore lint/a11y/useAltText: no reasonable alt to provide - - ); -}); +export const ExternalImage = forwardRef( + ({ mode, ...imgProps }, ref) => { + const theme = useTheme(); + + return ( + // biome-ignore lint/a11y/useAltText: alt should be passed in as a prop + + ); + }, +); diff --git a/site/src/modules/resources/AgentButton.tsx b/site/src/modules/resources/AgentButton.tsx deleted file mode 100644 index 2f772e4f8e0ca..0000000000000 --- a/site/src/modules/resources/AgentButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Button, { type ButtonProps } from "@mui/material/Button"; -import { forwardRef } from "react"; - -export const AgentButton = forwardRef( - (props, ref) => { - const { children, ...buttonProps } = props; - - return ( - - ); - }, -); diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx index 91a90a75db85f..81e47adeb208d 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.tsx @@ -1,5 +1,3 @@ -import Link from "@mui/material/Link"; -import Tooltip from "@mui/material/Tooltip"; import type { Workspace, WorkspaceAgent, @@ -8,10 +6,16 @@ import type { import { ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { portForwardURL } from "utils/portForward"; -import { AgentButton } from "./AgentButton"; import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton"; import { TerminalLink } from "./TerminalLink/TerminalLink"; import { VSCodeDevContainerButton } from "./VSCodeDevContainerButton/VSCodeDevContainerButton"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; +import { Button } from "components/Button/Button"; type AgentDevcontainerCardProps = { agent: WorkspaceAgent; @@ -74,7 +78,7 @@ export const AgentDevcontainerCard: FC = ({ const linkDest = hasHostBind ? portForwardURL( wildcardHostname, - port.host_port!, + port.host_port, agent.name, workspace.name, workspace.owner_name, @@ -82,21 +86,19 @@ export const AgentDevcontainerCard: FC = ({ ) : ""; return ( - - - } - disabled={!hasHostBind} - href={linkDest} - > - {portLabel} - - - + + + + + + {helperText} + + ); })} diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index 5bf2114acf879..ab97c5cf530e1 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -1,18 +1,22 @@ import { useTheme } from "@emotion/react"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import CircularProgress from "@mui/material/CircularProgress"; -import Link from "@mui/material/Link"; -import Tooltip from "@mui/material/Tooltip"; import { API } from "api/api"; import type * as TypesGen from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; import { useProxy } from "contexts/ProxyContext"; -import { type FC, type MouseEvent, useState } from "react"; +import { type FC, useState } from "react"; import { createAppLinkHref } from "utils/apps"; import { generateRandomString } from "utils/random"; -import { AgentButton } from "../AgentButton"; import { BaseIcon } from "./BaseIcon"; import { ShareIcon } from "./ShareIcon"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; +import { Button } from "components/Button/Button"; export const DisplayAppNameMap: Record = { port_forwarding_helper: "Ports", @@ -112,22 +116,13 @@ export const AppLink: FC = ({ app, workspace, agent }) => { canClick = false; } - const isPrivateApp = app.sharing_level === "owner"; + const canShare = app.sharing_level !== "owner"; - return ( - - } - disabled={!canClick} + const button = ( + ); + + if (primaryTooltip) { + return ( + + + {button} + {primaryTooltip} + + + ); + } + + return button; }; diff --git a/site/src/modules/resources/AppLink/BaseIcon.tsx b/site/src/modules/resources/AppLink/BaseIcon.tsx index b768facbdd482..b588affe4416c 100644 --- a/site/src/modules/resources/AppLink/BaseIcon.tsx +++ b/site/src/modules/resources/AppLink/BaseIcon.tsx @@ -1,7 +1,9 @@ +import { useTheme } from "@emotion/react"; import ComputerIcon from "@mui/icons-material/Computer"; import type { WorkspaceApp } from "api/typesGenerated"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import type { FC } from "react"; +import { forDarkThemes, forLightThemes } from "theme/externalImages"; interface BaseIconProps { app: WorkspaceApp; @@ -9,8 +11,11 @@ interface BaseIconProps { } export const BaseIcon: FC = ({ app, onIconPathError }) => { + const theme = useTheme(); + return app.icon ? ( `Terminal - ${identifier}`, @@ -39,23 +38,21 @@ export const TerminalLink: FC = ({ }/terminal?${params.toString()}`; return ( - } - href={href} - onClick={(event: MouseEvent) => { - event.preventDefault(); - window.open( - href, - Language.terminalTitle(generateRandomString(12)), - "width=900,height=600", - ); - }} - data-testid="terminal" - > - {DisplayAppNameMap.web_terminal} - + ); }; diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx index 10193660155eb..c55b776767518 100644 --- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -7,8 +7,8 @@ import type { DisplayApp } from "api/typesGenerated"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; -import { AgentButton } from "../AgentButton"; import { DisplayAppNameMap } from "../AppLink/AppLink"; +import { Button } from "components/Button/Button"; export interface VSCodeDesktopButtonProps { userName: string; @@ -51,21 +51,20 @@ export const VSCodeDesktopButton: FC = (props) => { )} - { setIsVariantMenuOpen(true); }} css={{ paddingLeft: 0, paddingRight: 0 }} > - + = ({ const [loading, setLoading] = useState(false); return ( - } + ); }; @@ -159,8 +158,7 @@ const VSCodeInsidersButton: FC = ({ const [loading, setLoading] = useState(false); return ( - } + ); }; diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx index 3b32c672e8e8f..bf1aa83bd4feb 100644 --- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx +++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx @@ -7,8 +7,8 @@ import type { DisplayApp } from "api/typesGenerated"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; -import { AgentButton } from "../AgentButton"; import { DisplayAppNameMap } from "../AppLink/AppLink"; +import { Button } from "components/Button/Button"; export interface VSCodeDevContainerButtonProps { userName: string; @@ -54,21 +54,20 @@ export const VSCodeDevContainerButton: FC = ( )} - { setIsVariantMenuOpen(true); }} css={{ paddingLeft: 0, paddingRight: 0 }} > - + = ({ const [loading, setLoading] = useState(false); return ( - } + ); }; @@ -162,8 +161,7 @@ const VSCodeInsidersButton: FC = ({ const [loading, setLoading] = useState(false); return ( - } + ); }; diff --git a/site/src/theme/externalImages.ts b/site/src/theme/externalImages.ts index 889347ea0ec74..22c94b9a44b4b 100644 --- a/site/src/theme/externalImages.ts +++ b/site/src/theme/externalImages.ts @@ -1,7 +1,5 @@ import type { CSSObject } from "@emotion/react"; -type ExternalImageMode = keyof ExternalImageModeStyles; - export interface ExternalImageModeStyles { /** * monochrome icons will be flattened to a neutral, theme-appropriate color. From 8140292ad539d933d3800cdda874a70a8ff60467 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 5 May 2025 21:07:40 +0000 Subject: [PATCH 2/7] Add AgentButton back --- .../ExternalImage/ExternalImage.tsx | 39 +++++++------------ site/src/modules/resources/AgentButton.tsx | 8 ++++ .../resources/AgentDevcontainerCard.tsx | 6 +-- .../src/modules/resources/AppLink/AppLink.tsx | 6 +-- .../modules/resources/AppLink/BaseIcon.tsx | 5 --- .../resources/TerminalLink/TerminalLink.tsx | 6 +-- .../VSCodeDesktopButton.tsx | 14 +++---- .../VSCodeDevContainerButton.tsx | 14 +++---- 8 files changed, 46 insertions(+), 52 deletions(-) create mode 100644 site/src/modules/resources/AgentButton.tsx diff --git a/site/src/components/ExternalImage/ExternalImage.tsx b/site/src/components/ExternalImage/ExternalImage.tsx index a0cb3c634052c..d85b227b999b4 100644 --- a/site/src/components/ExternalImage/ExternalImage.tsx +++ b/site/src/components/ExternalImage/ExternalImage.tsx @@ -1,28 +1,19 @@ import { useTheme } from "@emotion/react"; import { type ImgHTMLAttributes, forwardRef } from "react"; -import { - type ExternalImageModeStyles, - getExternalImageStylesFromUrl, -} from "theme/externalImages"; +import { getExternalImageStylesFromUrl } from "theme/externalImages"; -type ExternalImageProps = ImgHTMLAttributes & { - mode?: ExternalImageModeStyles; -}; +export const ExternalImage = forwardRef< + HTMLImageElement, + ImgHTMLAttributes +>((props, ref) => { + const theme = useTheme(); -export const ExternalImage = forwardRef( - ({ mode, ...imgProps }, ref) => { - const theme = useTheme(); - - return ( - // biome-ignore lint/a11y/useAltText: alt should be passed in as a prop - - ); - }, -); + return ( + // biome-ignore lint/a11y/useAltText: alt should be passed in as a prop + + ); +}); diff --git a/site/src/modules/resources/AgentButton.tsx b/site/src/modules/resources/AgentButton.tsx new file mode 100644 index 0000000000000..e5b4a54834531 --- /dev/null +++ b/site/src/modules/resources/AgentButton.tsx @@ -0,0 +1,8 @@ +import { Button, type ButtonProps } from "components/Button/Button"; +import { forwardRef } from "react"; + +export const AgentButton = forwardRef( + (props, ref) => { + return + {helperText} diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index ab97c5cf530e1..938b8bfa5286e 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -16,7 +16,7 @@ import { TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; -import { Button } from "components/Button/Button"; +import { AgentButton } from "../AgentButton"; export const DisplayAppNameMap: Record = { port_forwarding_helper: "Ports", @@ -119,7 +119,7 @@ export const AppLink: FC = ({ app, workspace, agent }) => { const canShare = app.sharing_level !== "owner"; const button = ( - + ); if (primaryTooltip) { diff --git a/site/src/modules/resources/AppLink/BaseIcon.tsx b/site/src/modules/resources/AppLink/BaseIcon.tsx index b588affe4416c..b768facbdd482 100644 --- a/site/src/modules/resources/AppLink/BaseIcon.tsx +++ b/site/src/modules/resources/AppLink/BaseIcon.tsx @@ -1,9 +1,7 @@ -import { useTheme } from "@emotion/react"; import ComputerIcon from "@mui/icons-material/Computer"; import type { WorkspaceApp } from "api/typesGenerated"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import type { FC } from "react"; -import { forDarkThemes, forLightThemes } from "theme/externalImages"; interface BaseIconProps { app: WorkspaceApp; @@ -11,11 +9,8 @@ interface BaseIconProps { } export const BaseIcon: FC = ({ app, onIconPathError }) => { - const theme = useTheme(); - return app.icon ? ( `Terminal - ${identifier}`, @@ -38,7 +38,7 @@ export const TerminalLink: FC = ({ }/terminal?${params.toString()}`; return ( - + ); }; diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx index c55b776767518..5d408b3dc9803 100644 --- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -8,7 +8,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; import { DisplayAppNameMap } from "../AppLink/AppLink"; -import { Button } from "components/Button/Button"; +import { AgentButton } from "../AgentButton"; export interface VSCodeDesktopButtonProps { userName: string; @@ -51,7 +51,7 @@ export const VSCodeDesktopButton: FC = (props) => { )} - + = ({ const [loading, setLoading] = useState(false); return ( - + ); }; @@ -158,7 +158,7 @@ const VSCodeInsidersButton: FC = ({ const [loading, setLoading] = useState(false); return ( - + ); }; diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx index bf1aa83bd4feb..efe9c4820d4f3 100644 --- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx +++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx @@ -8,7 +8,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; import { DisplayAppNameMap } from "../AppLink/AppLink"; -import { Button } from "components/Button/Button"; +import { AgentButton } from "../AgentButton"; export interface VSCodeDevContainerButtonProps { userName: string; @@ -54,7 +54,7 @@ export const VSCodeDevContainerButton: FC = ( )} - + = ({ const [loading, setLoading] = useState(false); return ( - + ); }; @@ -161,7 +161,7 @@ const VSCodeInsidersButton: FC = ({ const [loading, setLoading] = useState(false); return ( - + ); }; From 2a39826007b81cf9c6673c16c8533c42a0d80027 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 5 May 2025 21:11:59 +0000 Subject: [PATCH 3/7] FMT --- site/src/modules/resources/AgentDevcontainerCard.tsx | 12 ++++++------ site/src/modules/resources/AppLink/AppLink.tsx | 12 ++++++------ .../modules/resources/TerminalLink/TerminalLink.tsx | 2 +- .../VSCodeDesktopButton/VSCodeDesktopButton.tsx | 2 +- .../VSCodeDevContainerButton.tsx | 2 +- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx index 8ede00da80540..d9a591625b2f8 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.tsx @@ -3,19 +3,19 @@ import type { WorkspaceAgent, WorkspaceAgentContainer, } from "api/typesGenerated"; -import { ExternalLinkIcon } from "lucide-react"; -import type { FC } from "react"; -import { portForwardURL } from "utils/portForward"; -import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton"; -import { TerminalLink } from "./TerminalLink/TerminalLink"; -import { VSCodeDevContainerButton } from "./VSCodeDevContainerButton/VSCodeDevContainerButton"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; +import { ExternalLinkIcon } from "lucide-react"; +import type { FC } from "react"; +import { portForwardURL } from "utils/portForward"; import { AgentButton } from "./AgentButton"; +import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton"; +import { TerminalLink } from "./TerminalLink/TerminalLink"; +import { VSCodeDevContainerButton } from "./VSCodeDevContainerButton/VSCodeDevContainerButton"; type AgentDevcontainerCardProps = { agent: WorkspaceAgent; diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index 938b8bfa5286e..db0d7cc19a069 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -4,19 +4,19 @@ import CircularProgress from "@mui/material/CircularProgress"; import { API } from "api/api"; import type * as TypesGen from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; -import { useProxy } from "contexts/ProxyContext"; -import { type FC, useState } from "react"; -import { createAppLinkHref } from "utils/apps"; -import { generateRandomString } from "utils/random"; -import { BaseIcon } from "./BaseIcon"; -import { ShareIcon } from "./ShareIcon"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; +import { useProxy } from "contexts/ProxyContext"; +import { type FC, useState } from "react"; +import { createAppLinkHref } from "utils/apps"; +import { generateRandomString } from "utils/random"; import { AgentButton } from "../AgentButton"; +import { BaseIcon } from "./BaseIcon"; +import { ShareIcon } from "./ShareIcon"; export const DisplayAppNameMap: Record = { port_forwarding_helper: "Ports", diff --git a/site/src/modules/resources/TerminalLink/TerminalLink.tsx b/site/src/modules/resources/TerminalLink/TerminalLink.tsx index 5229b80e92844..23204bd819dfe 100644 --- a/site/src/modules/resources/TerminalLink/TerminalLink.tsx +++ b/site/src/modules/resources/TerminalLink/TerminalLink.tsx @@ -1,8 +1,8 @@ import { TerminalIcon } from "components/Icons/TerminalIcon"; import type { FC, MouseEvent } from "react"; import { generateRandomString } from "utils/random"; -import { DisplayAppNameMap } from "../AppLink/AppLink"; import { AgentButton } from "../AgentButton"; +import { DisplayAppNameMap } from "../AppLink/AppLink"; const Language = { terminalTitle: (identifier: string): string => `Terminal - ${identifier}`, diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx index 5d408b3dc9803..6cdba06efa626 100644 --- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -7,8 +7,8 @@ import type { DisplayApp } from "api/typesGenerated"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; -import { DisplayAppNameMap } from "../AppLink/AppLink"; import { AgentButton } from "../AgentButton"; +import { DisplayAppNameMap } from "../AppLink/AppLink"; export interface VSCodeDesktopButtonProps { userName: string; diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx index efe9c4820d4f3..cdb7439c89df9 100644 --- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx +++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx @@ -7,8 +7,8 @@ import type { DisplayApp } from "api/typesGenerated"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; import { type FC, useRef, useState } from "react"; -import { DisplayAppNameMap } from "../AppLink/AppLink"; import { AgentButton } from "../AgentButton"; +import { DisplayAppNameMap } from "../AppLink/AppLink"; export interface VSCodeDevContainerButtonProps { userName: string; From 5853a55bf51c557f70ddf8ea5683749114adb8d1 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 6 May 2025 13:35:00 +0000 Subject: [PATCH 4/7] Fix styles --- site/src/components/Button/Button.tsx | 11 +++--- .../modules/dashboard/Navbar/ProxyMenu.tsx | 25 +++++--------- .../management/OrganizationSidebarView.tsx | 34 +++++++++---------- .../src/modules/resources/AppLink/AppLink.tsx | 22 +++--------- .../VSCodeDesktopButton.tsx | 11 +++--- .../VSCodeDevContainerButton.tsx | 9 +++-- 6 files changed, 44 insertions(+), 68 deletions(-) diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx index 0b10f768f68fc..908dacb8c5c3d 100644 --- a/site/src/components/Button/Button.tsx +++ b/site/src/components/Button/Button.tsx @@ -13,8 +13,9 @@ const buttonVariants = cva( text-sm font-semibold font-medium cursor-pointer no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link disabled:pointer-events-none disabled:text-content-disabled + [&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5 - [&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5`, + [&>img]:pointer-events-none [&>img]:shrink-0 [&>img]:p-0.5`, { variants: { variant: { @@ -29,11 +30,11 @@ const buttonVariants = cva( }, size: { - lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg", - sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm", + lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&>img]:size-icon-lg", + sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&>img]:size-icon-sm", xs: "min-w-8 py-1 px-2 text-2xs rounded-md", - icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm", - "icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg", + icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&>img]:size-icon-sm", + "icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&>img]:size-icon-lg", }, }, defaultVariants: { diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx index 86d9b9b53ee84..97e360984357f 100644 --- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx +++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx @@ -81,32 +81,25 @@ export const ProxyMenu: FC = ({ proxyContextValue }) => { {selectedProxy ? ( -

+ <> +

+ ) : ( "Select Proxy" )} - + -

- {activeOrganization ? ( - <> - - - {activeOrganization.display_name || activeOrganization.name} - - - ) : ( - No organization selected - )} -

- + {activeOrganization ? ( + <> + + + {activeOrganization.display_name || activeOrganization.name} + + + ) : ( + No organization selected + )} + diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx index db0d7cc19a069..8eeef61ee920e 100644 --- a/site/src/modules/resources/AppLink/AppLink.tsx +++ b/site/src/modules/resources/AppLink/AppLink.tsx @@ -1,9 +1,9 @@ import { useTheme } from "@emotion/react"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; -import CircularProgress from "@mui/material/CircularProgress"; import { API } from "api/api"; import type * as TypesGen from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; +import { Spinner } from "components/Spinner/Spinner"; import { Tooltip, TooltipContent, @@ -79,21 +79,7 @@ export const AppLink: FC = ({ app, workspace, agent }) => { let primaryTooltip = ""; if (app.health === "initializing") { - icon = ( - // This is a hack to make the spinner appear in the center of the start - // icon space - - - - ); + icon = ; primaryTooltip = "Initializing..."; } if (app.health === "unhealthy") { @@ -119,9 +105,9 @@ export const AppLink: FC = ({ app, workspace, agent }) => { const canShare = app.sharing_level !== "owner"; const button = ( - + { if (!canClick) { return; diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx index 6cdba06efa626..92fdc287ca955 100644 --- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -1,5 +1,4 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import ButtonGroup from "@mui/material/ButtonGroup"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import { API } from "api/api"; @@ -43,8 +42,8 @@ export const VSCodeDesktopButton: FC = (props) => { const includesVSCodeInsiders = props.displayApps.includes("vscode_insiders"); return includesVSCodeDesktop && includesVSCodeInsiders ? ( -

- + <> +

{variant === "vscode" ? ( ) : ( @@ -61,11 +60,11 @@ export const VSCodeDesktopButton: FC = (props) => { onClick={() => { setIsVariantMenuOpen(true); }} - css={{ paddingLeft: 0, paddingRight: 0 }} + size="icon-lg" > - +

= (props) => { {DisplayAppNameMap.vscode_insiders} -

- + <> +

{variant === "vscode" ? ( ) : ( @@ -68,7 +67,7 @@ export const VSCodeDevContainerButton: FC = ( > - +

= ( {DisplayAppNameMap.vscode_insiders} -