mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Bryan
df13fef161
For black-triangle and alpha builds, we won't be able to create projects in the UI, because they require collecting and tar'ing a set of assets associated with the project - so the CLI is going to be our entry point for creating projects. This shifts the UI to remove the 'Create Project' button, and adds a prompt to copy a command to run. __Before:__ <img width="1134" alt="image" src="https://user-images.githubusercontent.com/88213859/153534269-58dc95bd-0417-4bed-8e62-e2b6f479da61.png"> __After:__ 
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import Button from "@material-ui/core/Button"
|
|
import Tooltip from "@material-ui/core/Tooltip"
|
|
import Check from "@material-ui/icons/Check"
|
|
import React, { useState } from "react"
|
|
import { FileCopy } from "../Icons"
|
|
|
|
interface CopyButtonProps {
|
|
text: string
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Copy button used inside the CodeBlock component internally
|
|
*/
|
|
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
|
|
const styles = useStyles()
|
|
const [isCopied, setIsCopied] = useState<boolean>(false)
|
|
|
|
const copyToClipboard = async (): Promise<void> => {
|
|
try {
|
|
await window.navigator.clipboard.writeText(text)
|
|
setIsCopied(true)
|
|
|
|
window.setTimeout(() => {
|
|
setIsCopied(false)
|
|
}, 1000)
|
|
} catch (err) {
|
|
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
|
|
if (err instanceof Error) {
|
|
wrappedErr.stack = err.stack
|
|
}
|
|
console.error(wrappedErr)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Tooltip title="Copy to Clipboard" placement="top">
|
|
<div className={`${styles.copyButtonWrapper} ${className}`}>
|
|
<Button className={styles.copyButton} onClick={copyToClipboard} size="small">
|
|
{isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
|
|
</Button>
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
copyButtonWrapper: {
|
|
display: "flex",
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
copyButton: {
|
|
borderRadius: 7,
|
|
background: theme.palette.codeBlock.button.main,
|
|
color: theme.palette.codeBlock.button.contrastText,
|
|
padding: theme.spacing(0.85),
|
|
minWidth: 32,
|
|
|
|
"&:hover": {
|
|
background: theme.palette.codeBlock.button.hover,
|
|
},
|
|
},
|
|
fileCopyIcon: {
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
}))
|