From 605ac9b0e9c1517a8f3d11ee517384f2b48e1adf Mon Sep 17 00:00:00 2001 From: M Atif Ali Date: Wed, 14 May 2025 08:04:55 +0000 Subject: [PATCH 1/3] feat: update CopyButton styling in WorkspaceBreadcrumb component --- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 32908156c5b5c..4c424de334ed6 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -7,6 +7,7 @@ import { workspaceQuota } from "api/queries/workspaceQuota"; import type * as TypesGen from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; +import { CopyButton } from "components/CopyButton/CopyButton"; import { Topbar, TopbarAvatar, @@ -350,9 +351,20 @@ const WorkspaceBreadcrumb: FC = ({ - - {workspaceName} - +
+ + {workspaceName} + + +
From 0aef61d9e24e3a7e4f207fce80c1404f5837d3cf Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 14 May 2025 11:38:23 +0000 Subject: [PATCH 2/3] refactor copy button to allow better experience and visual --- .../components/CodeExample/CodeExample.tsx | 34 +----- site/src/components/CopyButton/CopyButton.tsx | 103 ++++++------------ .../GitDeviceAuth/GitDeviceAuth.tsx | 6 +- .../UserDropdown/UserDropdownContent.tsx | 12 +- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 98 ++++++++--------- 5 files changed, 93 insertions(+), 160 deletions(-) diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index 71ef7f951471e..b2c8bd16cf0a1 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -1,6 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; -import { visuallyHidden } from "@mui/utils"; -import { type FC, type KeyboardEvent, type MouseEvent, useRef } from "react"; +import type { FC } from "react"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; import { CopyButton } from "../CopyButton/CopyButton"; @@ -21,33 +20,8 @@ export const CodeExample: FC = ({ // the secure option, not remember to opt in secret = true, }) => { - const buttonRef = useRef(null); - const triggerButton = (event: KeyboardEvent | MouseEvent) => { - const clickTriggeredOutsideButton = - event.target instanceof HTMLElement && - !buttonRef.current?.contains(event.target); - - if (clickTriggeredOutsideButton) { - buttonRef.current?.click(); - } - }; - return ( -
{ - if (event.key === "Enter") { - triggerButton(event); - } - }} - onKeyUp={(event) => { - if (event.key === " ") { - triggerButton(event); - } - }} - > +
{secret ? ( <> @@ -60,7 +34,7 @@ export const CodeExample: FC = ({ * readily available in the HTML itself */} {obfuscateText(code)} - + Encrypted text. Please access via the copy button. @@ -69,7 +43,7 @@ export const CodeExample: FC = ({ )} - +
); }; diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index 86a14c2a2ff48..9110bb4cd68d0 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,77 +1,44 @@ -import { type Interpolation, type Theme, css } from "@emotion/react"; -import IconButton from "@mui/material/Button"; -import Tooltip from "@mui/material/Tooltip"; +import { Button, type ButtonProps } from "components/Button/Button"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { useClipboard } from "hooks/useClipboard"; -import { CheckIcon } from "lucide-react"; -import { type ReactNode, forwardRef } from "react"; -import { FileCopyIcon } from "../Icons/FileCopyIcon"; +import { CheckIcon, CopyIcon } from "lucide-react"; +import type { FC } from "react"; -interface CopyButtonProps { - children?: ReactNode; +type CopyButtonProps = ButtonProps & { text: string; - ctaCopy?: string; - wrapperStyles?: Interpolation; - buttonStyles?: Interpolation; - tooltipTitle?: string; -} - -const Language = { - tooltipTitle: "Copy to clipboard", - ariaLabel: "Copy to clipboard", + label: string; }; -/** - * Copy button used inside the CodeBlock component internally - */ -export const CopyButton = forwardRef( - (props, ref) => { - const { - text, - ctaCopy, - wrapperStyles, - buttonStyles, - tooltipTitle = Language.tooltipTitle, - } = props; - const { showCopiedSuccess, copyToClipboard } = useClipboard({ - textToCopy: text, - }); +export const CopyButton: FC = ({ + text, + label, + ...buttonProps +}) => { + const { showCopiedSuccess, copyToClipboard } = useClipboard({ + textToCopy: text, + }); - return ( - -
- + + +
+ {showCopiedSuccess ? : } + {label} + + + {label} - ); - }, -); - -const styles = { - button: (theme) => css` - border-radius: 8px; - padding: 8px; - min-width: 32px; - - &:hover { - background: ${theme.palette.background.paper}; - } - `, - copyIcon: css` - width: 20px; - height: 20px; - `, -} satisfies Record>; + + ); +}; diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx index 5bbf036943773..bd35b305eea7f 100644 --- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx +++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx @@ -134,7 +134,11 @@ export const GitDeviceAuth: FC = ({ Copy your one-time code: 
{externalAuthDevice.user_code} -   +  {" "} +

Then open the link below and paste it: diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index 13ee16076dc5b..b8e4b9885d21b 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx @@ -151,15 +151,7 @@ export const UserDropdownContent: FC = ({
)} @@ -181,7 +173,7 @@ const GithubStar: FC = (props) => ( fill="currentColor" {...props} > - + ); diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 4c424de334ed6..c024a3b7aa8ba 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -347,61 +347,57 @@ const WorkspaceBreadcrumb: FC = ({ templateDisplayName, }) => { return ( - - - - -
+
+ + + + + {workspaceName} - -
- - + + - - - {templateDisplayName} - - } - subtitle={ - - Version: {latestBuildVersionName} - - } - avatar={ - - } - imgFallbackText={templateDisplayName} - /> - - + + + {templateDisplayName} + + } + subtitle={ + + Version: {latestBuildVersionName} + + } + avatar={ + + } + imgFallbackText={templateDisplayName} + /> + + + +
); }; From c5ea5802e44458c2af307f1ff76e16bd28751c1c Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 14 May 2025 11:42:54 +0000 Subject: [PATCH 3/3] Remove unused component --- site/src/components/Icons/FileCopyIcon.tsx | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 site/src/components/Icons/FileCopyIcon.tsx diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx deleted file mode 100644 index bd6fc359fe71f..0000000000000 --- a/site/src/components/Icons/FileCopyIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; - -export const FileCopyIcon = (props: SvgIconProps): JSX.Element => ( - - - -);