added story

Kira-Pilot · Kira-Pilot · commit dfa43fb1a8f0 · 2022-05-19T17:41:08.000Z
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,4 +1,4 @@
-import Button from "@material-ui/core/Button"
+import IconButton from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
@@ -45,16 +45,14 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   return (
     <Tooltip title="Copy to Clipboard" placement="top">
       <div className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}>
-        <Button
+        <IconButton
           className={combineClasses([styles.copyButton, buttonClassName])}
           onClick={copyToClipboard}
           size="small"
-          startIcon={
-            isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />
-          }
         >
-          {ctaCopy && ctaCopy}
-        </Button>
+          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
+          {ctaCopy && <div className={styles.buttonCopy}>{ctaCopy}</div>}
+        </IconButton>
       </div>
     </Tooltip>
   )
@@ -80,4 +78,7 @@ const useStyles = makeStyles((theme) => ({
     width: 20,
     height: 20,
   },
+  buttonCopy: {
+    marginLeft: theme.spacing(1),
+  },
 }))
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
-import { createCtas } from "./ReportButtons"
+import { createCtas } from "./createCtas"
 
 const Language = {
   reportLoading: "Generating crash report...",
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx
@@ -0,0 +1,30 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { RuntimeErrorState, RuntimeErrorStateProps } from "./RuntimeErrorState"
+
+const error = new Error("An error occurred")
+
+export default {
+  title: "components/RuntimeErrorState",
+  component: RuntimeErrorState,
+  argTypes: {
+    error: {
+      defaultValue: error,
+    },
+  },
+} as ComponentMeta<typeof RuntimeErrorState>
+
+const Template: Story<RuntimeErrorStateProps> = (args) => <RuntimeErrorState {...args} />
+
+export const Errored = Template.bind({})
+Errored.parameters = {
+  // The RuntimeErrorState is noisy for chromatic, because it renders an actual error
+  // along with the stacktrace - and the stacktrace includes the full URL of
+  // scripts in the stack. This is problematic, because every deployment uses
+  // a different URL, causing the validation to fail.
+  chromatic: { disableSnapshot: true },
+}
+
+Errored.args = {
+  error,
+}
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
@@ -15,7 +15,7 @@ const Language = {
   link: "send it to us.",
 }
 
-interface RuntimeErrorStateProps {
+export interface RuntimeErrorStateProps {
   error: Error
 }
 
diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx
@@ -59,14 +59,14 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: 0,
     flex: theme.spacing(1),
     textTransform: "uppercase",
-    fontSize: theme.typography.button.fontSize,
+    fontSize: theme.typography.fontSize,
   },
 
   copyButton: {
     width: "100%",
     marginRight: theme.spacing(1),
     backgroundColor: theme.palette.primary.main,
     textTransform: "uppercase",
-    fontSize: theme.typography.button.fontSize,
+    fontSize: theme.typography.fontSize,
   },
 }))
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
@@ -37,7 +37,4 @@ export const darkPalette: PaletteOptions = {
   success: {
     main: "#6BBE00",
   },
-  error: {
-    main: "#DD4764",
-  },
 }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const Language = {`
`15`	`15`	`link: "send it to us.",`
`16`	`16`	`}`
`17`	`17`
`18`		`-interface RuntimeErrorStateProps {`
	`18`	`+export interface RuntimeErrorStateProps {`
`19`	`19`	`error: Error`
`20`	`20`	`}`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,4 @@ export const darkPalette: PaletteOptions = {`
`37`	`37`	`success: {`
`38`	`38`	`main: "#6BBE00",`
`39`	`39`	`},`
`40`		`- error: {`
`41`		`- main: "#DD4764",`
`42`		`- },`
`43`	`40`	`}`