Jul 22, 2022 · Jul 22, 2022 · Jul 22, 2022 · Jul 22, 2022 · Jul 22, 2022 · Jul 22, 2022
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
    isApiError(error) && error.response.data.validations ? error.response.data.validations : []
  return validationErrors.map((error) => error.detail).join("\n")
 }

 export const getErrorDetail = (error: Error | ApiError | unknown): string | undefined | null =>
  isApiError(error) ? error.response.data.detail : error instanceof Error ? error.stack : null
diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
 }

 export const WithUndefined = Template.bind({})

 export const WithDefaultMessage = Template.bind({})
 WithDefaultMessage.args = {
  // Unknown error type
  error: {
    message: "Failed to fetch something!",
  },
  defaultMessage: "This is a default error message",
 }

 export const WithDismissible = Template.bind({})
 WithDismissible.args = {
  error: {
    response: {
      data: {
        message: "Failed to fetch something!",
      },
    },
    isAxiosError: true,
  },
  dismissible: true,
 }

 export const WithDetails = Template.bind({})
 WithDetails.args = {
  error: {
    response: {
      data: {
        message: "Failed to fetch something!",
        detail: "The resource you requested does not exist in the database.",
      },
    },
    isAxiosError: true,
  },
  dismissible: true,
 }
diff --git a/site/src/components/ErrorSummary/ErrorSummary.test.tsx b/site/src/components/ErrorSummary/ErrorSummary.test.tsx
 import { render, screen } from "@testing-library/react"
 import {fireEvent,render, screen } from "@testing-library/react"
 import { ErrorSummary } from "./ErrorSummary"

 describe("ErrorSummary", () => {
    render(<ErrorSummary error={error} />)

    // Then
    const element = await screen.findByText("test error message", { exact: false })
    const element = await screen.findByText("test error message")
    expect(element).toBeDefined()
  })

  it("shows details on More click", async () => {
    // When
    const error = {
      response: {
        data: {
          message: "Failed to fetch something!",
          detail: "The resource you requested does not exist in the database.",
        },
      },
      isAxiosError: true,
    }
    render(<ErrorSummary error={error} />)

    // Then
    fireEvent.click(screen.getByText("More"))
    const element = await screen.findByText(
      "The resource you requested does not exist in the database.",
      { exact: false },
    )
    expect(element.closest(".MuiCollapse-entered")).toBeDefined()
  })

  it("hides details on Less click", async () => {
    // When
    const error = {
      response: {
        data: {
          message: "Failed to fetch something!",
          detail: "The resource you requested does not exist in the database.",
        },
      },
      isAxiosError: true,
    }
    render(<ErrorSummary error={error} />)

    // Then
    fireEvent.click(screen.getByText("More"))
    fireEvent.click(screen.getByText("Less"))
    const element = await screen.findByText(
      "The resource you requested does not exist in the database.",
      { exact: false },
    )
    expect(element.closest(".MuiCollapse-hidden")).toBeDefined()
  })

  it("renders nothing on closing", async () => {
    // When
    const error = new Error("test error message")
    render(<ErrorSummary error={error} dismissible />)

    // Then
    const element = await screen.findByText("test error message")
    expect(element).toBeDefined()

    const closeIcon = screen.getAllByRole("button")[0]
    fireEvent.click(closeIcon)
    const nullElement = screen.queryByText("test error message")
    expect(nullElement).toBeNull()
  })
 })
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
 import Button from "@material-ui/core/Button"
 import Collapse from "@material-ui/core/Collapse"
 import IconButton from "@material-ui/core/IconButton"
 import Link from "@material-ui/core/Link"
 import { darken, makeStyles, Theme } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
 import RefreshIcon from "@material-ui/icons/Refresh"
 import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import { FC, useState } from "react"

 const Language = {
  retryMessage: "Retry",
  unknownErrorMessage: "An unknown error has occurred",
  moreDetails: "More",
  lessDetails: "Less",
 }

 export interface ErrorSummaryProps {
  error: Error | unknown
  error:ApiError |Error | unknown
  retry?: () => void
  dismissible?: boolean
  defaultMessage?: string
 }

 export const ErrorSummary: FC<ErrorSummaryProps> = ({ error, retry }) => (
  <Stack>
    {!(error instanceof Error) ? (
      <div>{Language.unknownErrorMessage}</div>
    ) : (
      <div>{error.toString()}</div>
    )}

    {retry && (
      <div>
        <Button onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
          {Language.retryMessage}
        </Button>
      </div>
    )}
  </Stack>
 )
 export const ErrorSummary: FC<ErrorSummaryProps> = ({
  error,
  retry,
  dismissible,
  defaultMessage,
 }) => {
  const message = getErrorMessage(error, defaultMessage || Language.unknownErrorMessage)
  const detail = getErrorDetail(error)
  const [showDetails, setShowDetails] = useState(false)
  const [isOpen, setOpen] = useState(true)

  const styles = useStyles({ showDetails })

  const toggleShowDetails = () => {
    setShowDetails(!showDetails)
  }

  const closeError = () => {
    setOpen(false)
  }

  if (!isOpen) {
    return null
  }

  return (
    <Stack className={styles.root}>
      <Stack direction="row" alignItems="center" className={styles.messageBox}>
        <div>
          <span className={styles.errorMessage}>{message}</span>
          {!!detail && (
            <Link
              aria-expanded={showDetails}
              onClick={toggleShowDetails}
              className={styles.detailsLink}
              tabIndex={0}
            >
              {showDetails ? Language.lessDetails : Language.moreDetails}
            </Link>
          )}
        </div>
        {dismissible && (
          <IconButton onClick={closeError} className={styles.iconButton}>
            <CloseIcon className={styles.closeIcon} />
          </IconButton>
        )}
      </Stack>
      <Collapse in={showDetails}>
        <div className={styles.details}>{detail}</div>
      </Collapse>
      {retry && (
        <div className={styles.retry}>
          <Button size="small" onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
            {Language.retryMessage}
          </Button>
        </div>
      )}
    </Stack>
  )
 }

 interface StyleProps {
  showDetails?: boolean
 }

 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
  root: {
    background: darken(theme.palette.error.main, 0.6),
    margin: `${theme.spacing(2)}px`,
    padding: `${theme.spacing(2)}px`,
    borderRadius: theme.shape.borderRadius,
    gap: 0,
  },
  messageBox: {
    justifyContent: "space-between",
  },
  errorMessage: {
    marginRight: `${theme.spacing(1)}px`,
  },
  detailsLink: {
    cursor: "pointer",
  },
  details: {
    marginTop: `${theme.spacing(2)}px`,
    padding: `${theme.spacing(2)}px`,
    background: darken(theme.palette.error.main, 0.7),
    borderRadius: theme.shape.borderRadius,
  },
  iconButton: {
    padding: 0,
  },
  closeIcon: {
    width: 25,
    height: 25,
    color: theme.palette.primary.contrastText,
  },
  retry: {
    marginTop: `${theme.spacing(2)}px`,
  },
 }))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -83,3 +83,6 @@ export const getValidationErrorMessage = (error: Error \| ApiError \| unknown): st
		isApiError(error) && error.response.data.validations ? error.response.data.validations : []
		return validationErrors.map((error) => error.detail).join("\n")
		}

		export const getErrorDetail = (error: Error \| ApiError \| unknown): string \| undefined \| null =>
		isApiError(error) ? error.response.data.detail : error instanceof Error ? error.stack : null
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,3 +23,39 @@ WithRetry.args = {
		}

		export const WithUndefined = Template.bind({})

		export const WithDefaultMessage = Template.bind({})
		WithDefaultMessage.args = {
		// Unknown error type
		error: {
		message: "Failed to fetch something!",
		},
		defaultMessage: "This is a default error message",
		}

		export const WithDismissible = Template.bind({})
		WithDismissible.args = {
		error: {
		response: {
		data: {
		message: "Failed to fetch something!",
		},
		},
		isAxiosError: true,
		},
		dismissible: true,
		}

		export const WithDetails = Template.bind({})
		WithDetails.args = {
		error: {
		response: {
		data: {
		message: "Failed to fetch something!",
		detail: "The resource you requested does not exist in the database.",
		},
		},
		isAxiosError: true,
		},
		dismissible: true,
		}
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import { render, screen } from "@testing-library/react"
		import {fireEvent,render, screen } from "@testing-library/react"
		import { ErrorSummary } from "./ErrorSummary"

		describe("ErrorSummary", () => {
Expand All		@@ -8,7 +8,67 @@ describe("ErrorSummary", () => {
		render(<ErrorSummary error={error} />)

		// Then
		const element = await screen.findByText("test error message", { exact: false })
		const element = await screen.findByText("test error message")
		expect(element).toBeDefined()
		})

		it("shows details on More click", async () => {
		// When
		const error = {
		response: {
		data: {
		message: "Failed to fetch something!",
		detail: "The resource you requested does not exist in the database.",
		},
		},
		isAxiosError: true,
		}
		render(<ErrorSummary error={error} />)

		// Then
		fireEvent.click(screen.getByText("More"))
		const element = await screen.findByText(
		"The resource you requested does not exist in the database.",
		{ exact: false },
		)
		expect(element.closest(".MuiCollapse-entered")).toBeDefined()
		})

		it("hides details on Less click", async () => {
		// When
		const error = {
		response: {
		data: {
		message: "Failed to fetch something!",
		detail: "The resource you requested does not exist in the database.",
		},
		},
		isAxiosError: true,
		}
		render(<ErrorSummary error={error} />)

		// Then
		fireEvent.click(screen.getByText("More"))
		fireEvent.click(screen.getByText("Less"))
		const element = await screen.findByText(
		"The resource you requested does not exist in the database.",
		{ exact: false },
		)
		expect(element.closest(".MuiCollapse-hidden")).toBeDefined()
		})

		it("renders nothing on closing", async () => {
		// When
		const error = new Error("test error message")
		render(<ErrorSummary error={error} dismissible />)

		// Then
		const element = await screen.findByText("test error message")
		expect(element).toBeDefined()

		const closeIcon = screen.getAllByRole("button")[0]
		fireEvent.click(closeIcon)
		const nullElement = screen.queryByText("test error message")
		expect(nullElement).toBeNull()
		})
		})
Original file line number	Diff line number	Diff line change
		@@ -1,32 +1,125 @@
		import Button from "@material-ui/core/Button"
		import Collapse from "@material-ui/core/Collapse"
		import IconButton from "@material-ui/core/IconButton"
		import Link from "@material-ui/core/Link"
		import { darken, makeStyles, Theme } from "@material-ui/core/styles"
		import CloseIcon from "@material-ui/icons/Close"
		import RefreshIcon from "@material-ui/icons/Refresh"
		import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
		import { Stack } from "components/Stack/Stack"
		import { FC } from "react"
		import { FC, useState } from "react"

		const Language = {
		retryMessage: "Retry",
		unknownErrorMessage: "An unknown error has occurred",
		moreDetails: "More",
		lessDetails: "Less",
		}

		export interface ErrorSummaryProps {
		error: Error \| unknown
		error:ApiError \|Error \| unknown
		retry?: () => void
		dismissible?: boolean
		defaultMessage?: string
		}

		export const ErrorSummary: FC<ErrorSummaryProps> = ({ error, retry }) => (
		<Stack>
		{!(error instanceof Error) ? (
		<div>{Language.unknownErrorMessage}</div>
		) : (
		<div>{error.toString()}</div>
		)}

		{retry && (
		<div>
		<Button onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
		{Language.retryMessage}
		</Button>
		</div>
		)}
		</Stack>
		)
		export const ErrorSummary: FC<ErrorSummaryProps> = ({
		error,
		retry,
		dismissible,
		defaultMessage,
		}) => {
		const message = getErrorMessage(error, defaultMessage \|\| Language.unknownErrorMessage)
		const detail = getErrorDetail(error)
		const [showDetails, setShowDetails] = useState(false)
		const [isOpen, setOpen] = useState(true)

		const styles = useStyles({ showDetails })

		const toggleShowDetails = () => {
		setShowDetails(!showDetails)
		}

		const closeError = () => {
		setOpen(false)
		}

		if (!isOpen) {
		return null
		}

		return (
		<Stack className={styles.root}>
		<Stack direction="row" alignItems="center" className={styles.messageBox}>
		<div>
		<span className={styles.errorMessage}>{message}</span>
		{!!detail && (
		<Link
		aria-expanded={showDetails}
		onClick={toggleShowDetails}
		className={styles.detailsLink}
		tabIndex={0}
		>
		{showDetails ? Language.lessDetails : Language.moreDetails}
		</Link>
		)}
		</div>
		{dismissible && (
		<IconButton onClick={closeError} className={styles.iconButton}>
		<CloseIcon className={styles.closeIcon} />
		</IconButton>
		)}
		</Stack>
		<Collapse in={showDetails}>
		<div className={styles.details}>{detail}</div>
		</Collapse>
		{retry && (
		<div className={styles.retry}>
		<Button size="small" onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
		{Language.retryMessage}
		</Button>
		</div>
		)}
		</Stack>
		)
		}

		interface StyleProps {
		showDetails?: boolean
		}

		const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
		root: {
		background: darken(theme.palette.error.main, 0.6),
		margin: `${theme.spacing(2)}px`,
Copy link Member Kira-PilotJul 22, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Just a suggestion: this component might be a little more flexible if we leave off the margin and instead let the parent decide what the margin should be (it will probably vary). If you feel like it, you could even pass in a`style` prop so that the parent can pass through its own styles. Copy link Contributor presleypJul 22, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I think we're going to use this component a lot and I'd like it to look decent without additional styling. Maybe we can give it margins we think are typical and then override when necessary. AbhineetJain reacted with thumbs up emoji
		padding: `${theme.spacing(2)}px`,
		borderRadius: theme.shape.borderRadius,
		gap: 0,
		},
		messageBox: {
		justifyContent: "space-between",
		},
		errorMessage: {
		marginRight: `${theme.spacing(1)}px`,
		},
		detailsLink: {
		cursor: "pointer",
		},
		details: {
		marginTop: `${theme.spacing(2)}px`,
		padding: `${theme.spacing(2)}px`,
		background: darken(theme.palette.error.main, 0.7),
		borderRadius: theme.shape.borderRadius,
		},
		iconButton: {
		padding: 0,
		},
		closeIcon: {
		width: 25,
		height: 25,
		color: theme.palette.primary.contrastText,
		},
		retry: {
		marginTop: `${theme.spacing(2)}px`,
		},
		}))