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} -

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.