feat: add copy button for workspace name in breadcrumb (#17822)

matifali · BrunoQuaresma · web-flow · commit 2c49fd9e9618 · 2025-05-15T22:41:01.000+05:00
Co-authored-by: BrunoQuaresma &lt;bruno_nonato_quaresma@hotmail.com&gt;
diff --git 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<CodeExampleProps> = ({
 	// the secure option, not remember to opt in
 	secret = true,
 }) => {
-	const buttonRef = useRef<HTMLButtonElement>(null);
-	const triggerButton = (event: KeyboardEvent | MouseEvent) => {
-		const clickTriggeredOutsideButton =
-			event.target instanceof HTMLElement &&
-			!buttonRef.current?.contains(event.target);
-
-		if (clickTriggeredOutsideButton) {
-			buttonRef.current?.click();
-		}
-	};
-
 	return (
-		<div
-			css={styles.container}
-			className={className}
-			onClick={triggerButton}
-			onKeyDown={(event) => {
-				if (event.key === "Enter") {
-					triggerButton(event);
-				}
-			}}
-			onKeyUp={(event) => {
-				if (event.key === " ") {
-					triggerButton(event);
-				}
-			}}
-		>
+		<div css={styles.container} className={className}>
 			<code css={[styles.code, secret && styles.secret]}>
 				{secret ? (
 					<>
@@ -60,7 +34,7 @@ export const CodeExample: FC<CodeExampleProps> = ({
 						 *    readily available in the HTML itself
 						 */}
 						<span aria-hidden>{obfuscateText(code)}</span>
-						<span css={{ ...visuallyHidden }}>
+						<span className="sr-only">
 							Encrypted text. Please access via the copy button.
 						</span>
 					</>
@@ -69,7 +43,7 @@ export const CodeExample: FC<CodeExampleProps> = ({
 				)}
 			</code>
 
-			<CopyButton ref={buttonRef} text={code} />
+			<CopyButton text={code} label="Copy code" />
 		</div>
 	);
 };
diff --git 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<Theme>;
-	buttonStyles?: Interpolation<Theme>;
-	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<HTMLButtonElement, CopyButtonProps>(
-	(props, ref) => {
-		const {
-			text,
-			ctaCopy,
-			wrapperStyles,
-			buttonStyles,
-			tooltipTitle = Language.tooltipTitle,
-		} = props;
-		const { showCopiedSuccess, copyToClipboard } = useClipboard({
-			textToCopy: text,
-		});
+export const CopyButton: FC<CopyButtonProps> = ({
+	text,
+	label,
+	...buttonProps
+}) => {
+	const { showCopiedSuccess, copyToClipboard } = useClipboard({
+		textToCopy: text,
+	});
 
-		return (
-			<Tooltip title={tooltipTitle} placement="top">
-				<div css={[{ display: "flex" }, wrapperStyles]}>
-					<IconButton
-						ref={ref}
-						css={[styles.button, buttonStyles]}
-						size="small"
-						aria-label={Language.ariaLabel}
-						variant="text"
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						size="icon"
+						variant="subtle"
 						onClick={copyToClipboard}
+						{...buttonProps}
 					>
-						{showCopiedSuccess ? (
-							<CheckIcon css={styles.copyIcon} />
-						) : (
-							<FileCopyIcon css={styles.copyIcon} />
-						)}
-						{ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
-					</IconButton>
-				</div>
+						{showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
+						<span className="sr-only">{label}</span>
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>{label}</TooltipContent>
 			</Tooltip>
-		);
-	},
-);
-
-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<string, Interpolation<Theme>>;
+		</TooltipProvider>
+	);
+};
diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -134,7 +134,11 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 				Copy your one-time code:&nbsp;
 				<div css={styles.copyCode}>
 					<span css={styles.code}>{externalAuthDevice.user_code}</span>
-					&nbsp; <CopyButton text={externalAuthDevice.user_code} />
+					&nbsp;{" "}
+					<CopyButton
+						text={externalAuthDevice.user_code}
+						label="Copy user code"
+					/>
 				</div>
 				<br />
 				Then open the link below and paste it:
diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx
diff --git 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<UserDropdownContentProps> = ({
 						</Tooltip>
 						<CopyButton
 							text={buildInfo.deployment_id}
-							buttonStyles={css`
-                width: 16px;
-                height: 16px;
-
-                svg {
-                  width: 16px;
-                  height: 16px;
-                }
-              `}
+							label="Copy deployment ID"
 						/>
 					</div>
 				)}
@@ -181,7 +173,7 @@ const GithubStar: FC<SvgIconProps> = (props) => (
 		fill="currentColor"
 		{...props}
 	>
-		<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+		<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
 	</svg>
 );
 
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -5,6 +5,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,
@@ -346,50 +347,57 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 	templateDisplayName,
 }) => {
 	return (
-		<Popover mode="hover">
-			<PopoverTrigger>
-				<span css={styles.breadcrumbSegment}>
-					<TopbarAvatar src={templateIconUrl} fallback={templateDisplayName} />
-					<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
-						{workspaceName}
-					</span>
-				</span>
-			</PopoverTrigger>
-
-			<HelpTooltipContent
-				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-				transformOrigin={{ vertical: "top", horizontal: "center" }}
-			>
-				<AvatarData
-					title={
-						<Link
-							component={RouterLink}
-							to={rootTemplateUrl}
-							css={{ color: "inherit" }}
-						>
-							{templateDisplayName}
-						</Link>
-					}
-					subtitle={
-						<Link
-							component={RouterLink}
-							to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
-							css={{ color: "inherit" }}
-						>
-							Version: {latestBuildVersionName}
-						</Link>
-					}
-					avatar={
-						<Avatar
-							variant="icon"
+		<div className="flex items-center">
+			<Popover mode="hover">
+				<PopoverTrigger>
+					<span css={styles.breadcrumbSegment}>
+						<TopbarAvatar
 							src={templateIconUrl}
 							fallback={templateDisplayName}
 						/>
-					}
-					imgFallbackText={templateDisplayName}
-				/>
-			</HelpTooltipContent>
-		</Popover>
+
+						<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
+							{workspaceName}
+						</span>
+					</span>
+				</PopoverTrigger>
+
+				<HelpTooltipContent
+					anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+					transformOrigin={{ vertical: "top", horizontal: "center" }}
+				>
+					<AvatarData
+						title={
+							<Link
+								component={RouterLink}
+								to={rootTemplateUrl}
+								css={{ color: "inherit" }}
+							>
+								{templateDisplayName}
+							</Link>
+						}
+						subtitle={
+							<Link
+								component={RouterLink}
+								to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
+								css={{ color: "inherit" }}
+							>
+								Version: {latestBuildVersionName}
+							</Link>
+						}
+						avatar={
+							<Avatar
+								variant="icon"
+								src={templateIconUrl}
+								fallback={templateDisplayName}
+							/>
+						}
+						imgFallbackText={templateDisplayName}
+					/>
+				</HelpTooltipContent>
+			</Popover>
+			<CopyButton text={workspaceName} label="Copy workspace name" />
+		</div>
 	);
 };
 
