From 605ac9b0e9c1517a8f3d11ee517384f2b48e1adf Mon Sep 17 00:00:00 2001
From: M Atif Ali <me@matifali.dev>
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<WorkspaceBreadcrumbProps> = ({
 			<PopoverTrigger>
 				<span css={styles.breadcrumbSegment}>
 					<TopbarAvatar src={templateIconUrl} fallback={templateDisplayName} />
-					<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
-						{workspaceName}
-					</span>
+					<div css={{ display: "flex", alignItems: "center", gap: "4px" }}>
+						<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
+							{workspaceName}
+						</span>
+						<CopyButton
+							text={workspaceName}
+							tooltipTitle="Copy workspace name"
+							buttonStyles={{
+								padding: "4px",
+								minWidth: "24px",
+								height: "24px",
+							}}
+						/>
+					</div>
 				</span>
 			</PopoverTrigger>
 

From 0aef61d9e24e3a7e4f207fce80c1404f5837d3cf Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
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<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
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<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
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<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/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<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
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<WorkspaceBreadcrumbProps> = ({
 	templateDisplayName,
 }) => {
 	return (
-		<Popover mode="hover">
-			<PopoverTrigger>
-				<span css={styles.breadcrumbSegment}>
-					<TopbarAvatar src={templateIconUrl} fallback={templateDisplayName} />
-					<div css={{ display: "flex", alignItems: "center", gap: "4px" }}>
+		<div className="flex items-center">
+			<Popover mode="hover">
+				<PopoverTrigger>
+					<span css={styles.breadcrumbSegment}>
+						<TopbarAvatar
+							src={templateIconUrl}
+							fallback={templateDisplayName}
+						/>
+
 						<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
 							{workspaceName}
 						</span>
-						<CopyButton
-							text={workspaceName}
-							tooltipTitle="Copy workspace name"
-							buttonStyles={{
-								padding: "4px",
-								minWidth: "24px",
-								height: "24px",
-							}}
-						/>
-					</div>
-				</span>
-			</PopoverTrigger>
+					</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>
+				<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>
 	);
 };
 

From c5ea5802e44458c2af307f1ff76e16bd28751c1c Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
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 => (
-	<SvgIcon {...props} viewBox="0 0 20 20">
-		<path
-			d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"
-			fill="currentColor"
-		/>
-	</SvgIcon>
-);

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>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.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17822.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17822.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17822.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17822.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>