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/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 => ( - - - -); 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 32908156c5b5c..c024a3b7aa8ba 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, @@ -346,50 +347,57 @@ const WorkspaceBreadcrumb: FC = ({ templateDisplayName, }) => { return ( - - - - - - {workspaceName} - - - - - - - {templateDisplayName} - - } - subtitle={ - - Version: {latestBuildVersionName} - - } - avatar={ - + + + + - } - imgFallbackText={templateDisplayName} - /> - - + + + {workspaceName} + + + + + + + {templateDisplayName} + + } + subtitle={ + + Version: {latestBuildVersionName} + + } + avatar={ + + } + imgFallbackText={templateDisplayName} + /> + + + + ); };