-
Notifications
You must be signed in to change notification settings - Fork 582
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Remove 'Create Project' button, replace with CLI prompt (#245)
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:__ ![2022-02-10 19 38 01](https://user-images.githubusercontent.com/88213859/153534227-d22bd786-8c43-4858-bda6-3d9d1d614711.gif)
- Loading branch information
1 parent
c0d547b
commit df13fef
Showing
13 changed files
with
193 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
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, | ||
}, | ||
})) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from "./SplitButton" | ||
export * from "./LoadingButton" | ||
export * from "./CopyButton" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { Story } from "@storybook/react" | ||
import React from "react" | ||
import { CodeExample, CodeExampleProps } from "./CodeExample" | ||
|
||
const sampleCode = `echo "Hello, world"` | ||
|
||
export default { | ||
title: "CodeExample", | ||
component: CodeExample, | ||
argTypes: { | ||
code: { control: "string", defaultValue: sampleCode }, | ||
}, | ||
} | ||
|
||
const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => <CodeExample {...args} /> | ||
|
||
export const Example = Template.bind({}) | ||
Example.args = { | ||
code: sampleCode, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { screen } from "@testing-library/react" | ||
import { render } from "../../test_helpers" | ||
import React from "react" | ||
import { CodeExample } from "./CodeExample" | ||
|
||
describe("CodeExample", () => { | ||
it("renders code", async () => { | ||
// When | ||
render(<CodeExample code="echo hello" />) | ||
|
||
// Then | ||
// Both lines should be rendered | ||
await screen.findByText("echo hello") | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { makeStyles } from "@material-ui/core/styles" | ||
import React from "react" | ||
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" | ||
|
||
import { CopyButton } from "../Button" | ||
|
||
export interface CodeExampleProps { | ||
code: string | ||
} | ||
|
||
/** | ||
* Component to show single-line code examples, with a copy button | ||
*/ | ||
export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => { | ||
const styles = useStyles() | ||
|
||
return ( | ||
<div className={styles.root}> | ||
<code>{code}</code> | ||
<CopyButton text={code} /> | ||
</div> | ||
) | ||
} | ||
|
||
const useStyles = makeStyles((theme) => ({ | ||
root: { | ||
display: "flex", | ||
flexDirection: "row", | ||
justifyContent: "space-between", | ||
alignItems: "center", | ||
background: theme.palette.background.default, | ||
color: theme.palette.codeBlock.contrastText, | ||
fontFamily: MONOSPACE_FONT_FAMILY, | ||
fontSize: 13, | ||
padding: theme.spacing(2), | ||
borderRadius: theme.shape.borderRadius, | ||
}, | ||
})) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./CodeExample" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import SvgIcon from "@material-ui/core/SvgIcon" | ||
import React from "react" | ||
|
||
export const FileCopy: typeof SvgIcon = (props) => ( | ||
<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> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
export { CoderIcon } from "./CoderIcon" | ||
export * from "./FileCopy" | ||
export { Logo } from "./Logo" | ||
export * from "./Logout" | ||
export { WorkspacesIcon } from "./WorkspacesIcon" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters