From f9566ba43d5fefe2b2ff037ab247a84d9ba78f65 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Wed, 17 Aug 2022 20:32:41 +0000
Subject: [PATCH 01/19] Extract reusable Pill component

---
 site/src/components/Pill/Pill.tsx             | 63 +++++++++++++
 .../WorkspaceStatusBadge.tsx                  | 88 +++----------------
 2 files changed, 77 insertions(+), 74 deletions(-)
 create mode 100644 site/src/components/Pill/Pill.tsx

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
new file mode 100644
index 0000000000000..f4363dfaa1ea3
--- /dev/null
+++ b/site/src/components/Pill/Pill.tsx
@@ -0,0 +1,63 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import { combineClasses } from "util/combineClasses"
+
+// Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation.
+export type PaletteIndex = "primary" | "secondary" | "info" | "success" | "error" | "warning"
+
+export interface PillProps {
+  className?: string
+  icon: React.ReactNode
+  text: string
+  type?: PaletteIndex
+}
+
+export const Pill: React.FC<PillProps> = ({ className, icon, text, type }) => {
+  const styles = useStyles({ type })
+  return (
+    <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
+      <div className={styles.iconWrapper}>{icon}</div>
+      {text}
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    display: "inline-flex",
+    alignItems: "center",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: 99999,
+    fontSize: 14,
+    fontWeight: 500,
+    color: "#FFF",
+    height: theme.spacing(3),
+    paddingLeft: theme.spacing(0.75),
+    paddingRight: theme.spacing(1.5),
+    whiteSpace: "nowrap",
+  },
+
+  pillColor: {
+    backgroundColor: ({ type }: { type?: PaletteIndex }) =>
+      type ? theme.palette[type].dark : theme.palette.text.secondary,
+    borderColor: ({ type }: { type?: PaletteIndex }) =>
+      type ? theme.palette[type].main : theme.palette.text.secondary,
+  },
+
+  iconWrapper: {
+    marginRight: theme.spacing(0.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    lineHeight: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+
+    "& > svg": {
+      width: theme.spacing(2),
+      height: theme.spacing(2),
+    },
+  },
+}))
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index 2e27724cbc29c..9f7158d11f206 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -1,12 +1,10 @@
 import CircularProgress from "@material-ui/core/CircularProgress"
-import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
 import ErrorIcon from "@material-ui/icons/ErrorOutline"
 import StopIcon from "@material-ui/icons/PauseOutlined"
 import PlayIcon from "@material-ui/icons/PlayArrowOutlined"
 import { WorkspaceBuild } from "api/typesGenerated"
+import { PaletteIndex, Pill } from "components/Pill/Pill"
 import React from "react"
-import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { combineClasses } from "util/combineClasses"
 import { getWorkspaceStatus } from "util/workspace"
 
 const StatusLanguage = {
@@ -28,11 +26,9 @@ const LoadingIcon: React.FC = () => {
 }
 
 export const getStatus = (
-  theme: Theme,
   build: WorkspaceBuild,
 ): {
-  borderColor: string
-  backgroundColor: string
+  type?: PaletteIndex
   text: string
   icon: React.ReactNode
 } => {
@@ -40,78 +36,66 @@ export const getStatus = (
   switch (status) {
     case undefined:
       return {
-        borderColor: theme.palette.text.secondary,
-        backgroundColor: theme.palette.text.secondary,
         text: StatusLanguage.loading,
         icon: <LoadingIcon />,
       }
     case "started":
       return {
-        borderColor: theme.palette.success.main,
-        backgroundColor: theme.palette.success.dark,
+        type: "success",
         text: StatusLanguage.started,
         icon: <PlayIcon />,
       }
     case "starting":
       return {
-        borderColor: theme.palette.success.main,
-        backgroundColor: theme.palette.success.dark,
+        type: "success",
         text: StatusLanguage.starting,
         icon: <LoadingIcon />,
       }
     case "stopping":
       return {
-        borderColor: theme.palette.warning.main,
-        backgroundColor: theme.palette.warning.dark,
+        type: "warning",
         text: StatusLanguage.stopping,
         icon: <LoadingIcon />,
       }
     case "stopped":
       return {
-        borderColor: theme.palette.warning.main,
-        backgroundColor: theme.palette.warning.dark,
+        type: "warning",
         text: StatusLanguage.stopped,
         icon: <StopIcon />,
       }
     case "deleting":
       return {
-        borderColor: theme.palette.warning.main,
-        backgroundColor: theme.palette.warning.dark,
+        type: "warning",
         text: StatusLanguage.deleting,
         icon: <LoadingIcon />,
       }
     case "deleted":
       return {
-        borderColor: theme.palette.error.main,
-        backgroundColor: theme.palette.error.dark,
+        type: "error",
         text: StatusLanguage.deleted,
         icon: <ErrorIcon />,
       }
     case "canceling":
       return {
-        borderColor: theme.palette.warning.main,
-        backgroundColor: theme.palette.warning.dark,
+        type: "warning",
         text: StatusLanguage.canceling,
         icon: <LoadingIcon />,
       }
     case "canceled":
       return {
-        borderColor: theme.palette.warning.main,
-        backgroundColor: theme.palette.warning.dark,
+        type: "warning",
         text: StatusLanguage.canceled,
         icon: <ErrorIcon />,
       }
     case "error":
       return {
-        borderColor: theme.palette.error.main,
-        backgroundColor: theme.palette.error.dark,
+        type: "error",
         text: StatusLanguage.failed,
         icon: <ErrorIcon />,
       }
     case "queued":
       return {
-        borderColor: theme.palette.info.main,
-        backgroundColor: theme.palette.info.dark,
+        type: "info",
         text: StatusLanguage.queued,
         icon: <LoadingIcon />,
       }
@@ -125,50 +109,6 @@ export type WorkspaceStatusBadgeProps = {
 }
 
 export const WorkspaceStatusBadge: React.FC<WorkspaceStatusBadgeProps> = ({ build, className }) => {
-  const styles = useStyles()
-  const theme = useTheme()
-  const { text, icon, ...colorStyles } = getStatus(theme, build)
-  return (
-    <div
-      className={combineClasses([styles.wrapper, className])}
-      style={{ ...colorStyles }}
-      role="status"
-    >
-      <div className={styles.iconWrapper}>{icon}</div>
-      {text}
-    </div>
-  )
+  const { text, icon, type } = getStatus(build)
+  return <Pill className={className} icon={icon} text={text} type={type} />
 }
-
-const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    display: "inline-flex",
-    alignItems: "center",
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderRadius: 99999,
-    fontSize: 14,
-    fontWeight: 500,
-    color: "#FFF",
-    height: theme.spacing(3),
-    paddingLeft: theme.spacing(0.75),
-    paddingRight: theme.spacing(1.5),
-    whiteSpace: "nowrap",
-  },
-
-  iconWrapper: {
-    marginRight: theme.spacing(0.5),
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-    lineHeight: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-
-    "& > svg": {
-      width: theme.spacing(2),
-      height: theme.spacing(2),
-    },
-  },
-}))

From 7a6dd98aa3c0bc556f84a3f668da4306ca552607 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Wed, 17 Aug 2022 20:38:13 +0000
Subject: [PATCH 02/19] Make icon optional

---
 site/src/components/Pill/Pill.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index f4363dfaa1ea3..9c3fac696a5a4 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,4 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "util/combineClasses"
 
@@ -7,16 +8,16 @@ export type PaletteIndex = "primary" | "secondary" | "info" | "success" | "error
 
 export interface PillProps {
   className?: string
-  icon: React.ReactNode
+  icon?: React.ReactNode
   text: string
   type?: PaletteIndex
 }
 
 export const Pill: React.FC<PillProps> = ({ className, icon, text, type }) => {
-  const styles = useStyles({ type })
+  const styles = useStyles({ icon, type })
   return (
     <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
-      <div className={styles.iconWrapper}>{icon}</div>
+      {icon && <div className={styles.iconWrapper}>{icon}</div>}
       {text}
     </div>
   )
@@ -34,7 +35,8 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 500,
     color: "#FFF",
     height: theme.spacing(3),
-    paddingLeft: theme.spacing(0.75),
+    paddingLeft: ({ icon }: { icon?: React.ReactNode }) =>
+      icon ? theme.spacing(0.75) : theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     whiteSpace: "nowrap",
   },

From 0b6e3367ff636da245458e1b253d52cf608785f0 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Wed, 17 Aug 2022 21:20:47 +0000
Subject: [PATCH 03/19] Get pills in place

---
 .../LicenseBannerView.stories.tsx             | 27 ++++++++++++
 .../LicenseBanner/LicenseBannerView.tsx       | 43 +++++++++++++++++++
 site/src/theme/palettes.ts                    |  2 +-
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
 create mode 100644 site/src/components/LicenseBanner/LicenseBannerView.tsx

diff --git a/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
new file mode 100644
index 0000000000000..c93a9d26e5d76
--- /dev/null
+++ b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
@@ -0,0 +1,27 @@
+import { Story } from "@storybook/react"
+import { LicenseBannerView, LicenseBannerViewProps } from "./LicenseBannerView"
+
+export default {
+  title: "components/LicenseBannerView",
+  component: LicenseBannerView,
+}
+
+const Template: Story<LicenseBannerViewProps> = (args) => <LicenseBannerView {...args} />
+
+export const OneWarning = Template.bind({})
+OneWarning.args = {
+  warnings: ["You have exceeded the number of seats in your license"],
+}
+
+export const TwoWarnings = Template.bind({})
+TwoWarnings.args = {
+  warnings: [
+    "You have exceeded the number of seats in your license",
+    "You are flying too close to the sun",
+  ],
+}
+
+export const NoWarnings = Template.bind({})
+NoWarnings.args = {
+  warnings: [],
+}
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
new file mode 100644
index 0000000000000..94f4a7fe3ed45
--- /dev/null
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -0,0 +1,43 @@
+import { makeStyles, darken } from "@material-ui/core/styles"
+import { Pill } from "components/Pill/Pill"
+
+const Language = {
+  licenseIssue: "License Issue",
+  licenseIssues: (num: number) => `${num} License Issues`
+}
+
+export interface LicenseBannerViewProps {
+  warnings?: string[]
+}
+
+export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }) => {
+  const styles = useStyles()
+  if (warnings && warnings.length) {
+    if (warnings.length === 1) {
+      return (
+        <div className={styles.container}>
+          <Pill text={Language.licenseIssue} type="warning" />
+          {warnings[0]}
+        </div>
+      )
+    } else {
+      return (
+        <div className={styles.container}>
+          <Pill text={Language.licenseIssues(warnings.length)} type="warning" />
+          {warnings.map((warning, i) => (
+            <p key={`${i}`}>{warning}</p>
+          ))}
+        </div>
+      )
+    }
+  } else {
+    return null
+  }
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    padding: theme.spacing(1.5),
+    backgroundColor: darken(theme.palette.warning.main, .2)
+  }
+}))
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
index e2e23cdf4dbeb..3ef760a1c306a 100644
--- a/site/src/theme/palettes.ts
+++ b/site/src/theme/palettes.ts
@@ -24,7 +24,7 @@ export const darkPalette: PaletteOptions = {
   },
   divider: colors.gray[13],
   warning: {
-    main: colors.orange[11],
+    main: colors.orange[9],
     dark: colors.orange[15],
   },
   success: {

From dc624495154a6657cd0f7546fb60416644ef3391 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Wed, 17 Aug 2022 22:22:56 +0000
Subject: [PATCH 04/19] Rough styling

---
 .../LicenseBannerView.stories.tsx             |  6 +-
 .../LicenseBanner/LicenseBannerView.tsx       | 66 ++++++++++++++++---
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
index c93a9d26e5d76..149c08f15b743 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
@@ -10,14 +10,14 @@ const Template: Story<LicenseBannerViewProps> = (args) => <LicenseBannerView {..
 
 export const OneWarning = Template.bind({})
 OneWarning.args = {
-  warnings: ["You have exceeded the number of seats in your license"],
+  warnings: ["You have exceeded the number of seats in your license."],
 }
 
 export const TwoWarnings = Template.bind({})
 TwoWarnings.args = {
   warnings: [
-    "You have exceeded the number of seats in your license",
-    "You are flying too close to the sun",
+    "You have exceeded the number of seats in your license.",
+    "You are flying too close to the sun.",
   ],
 }
 
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 94f4a7fe3ed45..6683102bd6e2f 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -1,9 +1,16 @@
-import { makeStyles, darken } from "@material-ui/core/styles"
+import Collapse from "@material-ui/core/Collapse"
+import Link from "@material-ui/core/Link"
+import { darken, lighten, makeStyles } from "@material-ui/core/styles"
 import { Pill } from "components/Pill/Pill"
+import { useState } from "react"
 
 const Language = {
   licenseIssue: "License Issue",
-  licenseIssues: (num: number) => `${num} License Issues`
+  licenseIssues: (num: number) => `${num} License Issues`,
+  upgrade: "Contact us to upgrade your license.",
+  exceeded: "It looks like you've exceeded some limits of your license.",
+  lessDetails: "Less",
+  moreDetails: "More",
 }
 
 export interface LicenseBannerViewProps {
@@ -12,21 +19,46 @@ export interface LicenseBannerViewProps {
 
 export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }) => {
   const styles = useStyles()
+  const [showDetails, setShowDetails] = useState(false)
   if (warnings && warnings.length) {
     if (warnings.length === 1) {
       return (
         <div className={styles.container}>
           <Pill text={Language.licenseIssue} type="warning" />
-          {warnings[0]}
+          <span className={styles.text}>{warnings[0]}</span>
+          &nbsp;
+          <a href="mailto:sales@coder.com" className={styles.link}>
+            {Language.upgrade}
+          </a>
         </div>
       )
     } else {
       return (
         <div className={styles.container}>
           <Pill text={Language.licenseIssues(warnings.length)} type="warning" />
-          {warnings.map((warning, i) => (
-            <p key={`${i}`}>{warning}</p>
-          ))}
+          <span className={styles.text}>{Language.exceeded}</span>
+          &nbsp;
+          <a href="mailto:sales@coder.com" className={styles.link}>
+            {Language.upgrade}
+          </a>
+          &nbsp;
+          <Link
+            aria-expanded={showDetails}
+            onClick={() => setShowDetails((showDetails: boolean) => !showDetails)}
+            className={styles.detailLink}
+            tabIndex={0}
+          >
+            {showDetails ? Language.lessDetails : Language.moreDetails}
+          </Link>
+          <Collapse in={showDetails}>
+            <ul className={styles.list}>
+              {warnings.map((warning, i) => (
+                <li className={styles.listItem} key={`${i}-${warning}`}>
+                  {warning}
+                </li>
+              ))}
+            </ul>
+          </Collapse>
         </div>
       )
     }
@@ -38,6 +70,24 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
 const useStyles = makeStyles((theme) => ({
   container: {
     padding: theme.spacing(1.5),
-    backgroundColor: darken(theme.palette.warning.main, .2)
-  }
+    backgroundColor: darken(theme.palette.warning.main, 0.2),
+  },
+  text: {
+    marginLeft: theme.spacing(1),
+  },
+  link: {
+    color: "inherit",
+    textDecoration: "none",
+    fontWeight: "bold",
+  },
+  detailLink: {
+    cursor: "pointer",
+    color: `${lighten(theme.palette.primary.light, 0.2)}`,
+  },
+  list: {
+    margin: theme.spacing(1.5),
+  },
+  listItem: {
+    margin: theme.spacing(1),
+  },
 }))

From 5c208ce75fa4c19cce787d2bd1b37c94929c591f Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 15:51:58 +0000
Subject: [PATCH 05/19] Extract Expander component

---
 .../DropdownArrows/DropdownArrows.tsx         | 14 ++++--
 .../components/ErrorSummary/ErrorSummary.tsx  | 22 +++-----
 site/src/components/Expander/Expander.tsx     | 50 +++++++++++++++++++
 .../LicenseBanner/LicenseBannerView.tsx       | 41 ++++++++-------
 4 files changed, 85 insertions(+), 42 deletions(-)
 create mode 100644 site/src/components/Expander/Expander.tsx

diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
index 6f64ad36d1451..642fb27456df9 100644
--- a/site/src/components/DropdownArrows/DropdownArrows.tsx
+++ b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -6,7 +6,7 @@ import { FC } from "react"
 const useStyles = makeStyles((theme: Theme) => ({
   arrowIcon: {
     color: fade(theme.palette.primary.contrastText, 0.7),
-    marginLeft: theme.spacing(1),
+    marginLeft: (margin: boolean) => (margin ? theme.spacing(1) : 0),
     width: 16,
     height: 16,
   },
@@ -15,12 +15,16 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export const OpenDropdown: FC = () => {
-  const styles = useStyles()
+interface ArrowProps {
+  margin: boolean
+}
+
+export const OpenDropdown: FC<ArrowProps> = ({ margin = true }) => {
+  const styles = useStyles(margin)
   return <KeyboardArrowDown className={styles.arrowIcon} />
 }
 
-export const CloseDropdown: FC = () => {
-  const styles = useStyles()
+export const CloseDropdown: FC<ArrowProps> = ({ margin = true }) => {
+  const styles = useStyles(margin)
   return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
 }
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
index f61fb9931cd3d..7af06036cd1b3 100644
--- a/site/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -1,11 +1,11 @@
 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, lighten, 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 { Expander } from "components/Expander/Expander"
 import { Stack } from "components/Stack/Stack"
 import { FC, useState } from "react"
 
@@ -36,10 +36,6 @@ export const ErrorSummary: FC<ErrorSummaryProps> = ({
 
   const styles = useStyles({ showDetails })
 
-  const toggleShowDetails = () => {
-    setShowDetails(!showDetails)
-  }
-
   const closeError = () => {
     setOpen(false)
   }
@@ -51,18 +47,9 @@ export const ErrorSummary: FC<ErrorSummaryProps> = ({
   return (
     <Stack className={styles.root}>
       <Stack direction="row" alignItems="center" className={styles.messageBox}>
-        <div>
+        <div className={styles.flex}>
           <span className={styles.errorMessage}>{message}</span>
-          {!!detail && (
-            <Link
-              aria-expanded={showDetails}
-              onClick={toggleShowDetails}
-              className={styles.detailsLink}
-              tabIndex={0}
-            >
-              {showDetails ? Language.lessDetails : Language.moreDetails}
-            </Link>
-          )}
+          {!!detail && <Expander expanded={showDetails} setExpanded={setShowDetails} />}
         </div>
         {dismissible && (
           <IconButton onClick={closeError} className={styles.iconButton}>
@@ -95,6 +82,9 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     borderRadius: theme.shape.borderRadius,
     gap: 0,
   },
+  flex: {
+    display: "flex"
+  },
   messageBox: {
     justifyContent: "space-between",
   },
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
new file mode 100644
index 0000000000000..dd7400300e113
--- /dev/null
+++ b/site/src/components/Expander/Expander.tsx
@@ -0,0 +1,50 @@
+import Link from "@material-ui/core/Link"
+import { lighten } from "@material-ui/core/styles"
+import makeStyles from "@material-ui/core/styles/makeStyles"
+import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
+
+const Language = {
+  expand: "More",
+  collapse: "Less",
+}
+
+export interface CollapseButtonProps {
+  expanded: boolean
+  setExpanded: (val: boolean) => void
+}
+
+export const Expander: React.FC<CollapseButtonProps> = ({ expanded, setExpanded }) => {
+  const toggleExpanded = () => setExpanded(!expanded)
+  const styles = useStyles()
+  return (
+    <Link
+      aria-expanded={expanded}
+      onClick={toggleExpanded}
+      className={styles.expandLink}
+      tabIndex={0}
+    >
+      {expanded ? (
+        <span className={styles.text}>
+          {Language.collapse}
+          <CloseDropdown margin={false} />{" "}
+        </span>
+      ) : (
+        <span className={styles.text}>
+          {Language.expand}
+          <OpenDropdown margin={false} />
+        </span>
+      )}
+    </Link>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  expandLink: {
+    cursor: "pointer",
+    color: `${lighten(theme.palette.primary.light, 0.2)}`,
+  },
+  text: {
+    display: "flex",
+    alignItems: "center",
+  },
+}))
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 6683102bd6e2f..6bbb0f3f36772 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -1,6 +1,6 @@
 import Collapse from "@material-ui/core/Collapse"
-import Link from "@material-ui/core/Link"
-import { darken, lighten, makeStyles } from "@material-ui/core/styles"
+import { darken, makeStyles } from "@material-ui/core/styles"
+import { Expander } from "components/Expander/Expander"
 import { Pill } from "components/Pill/Pill"
 import { useState } from "react"
 
@@ -35,21 +35,17 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
     } else {
       return (
         <div className={styles.container}>
-          <Pill text={Language.licenseIssues(warnings.length)} type="warning" />
-          <span className={styles.text}>{Language.exceeded}</span>
-          &nbsp;
-          <a href="mailto:sales@coder.com" className={styles.link}>
-            {Language.upgrade}
-          </a>
-          &nbsp;
-          <Link
-            aria-expanded={showDetails}
-            onClick={() => setShowDetails((showDetails: boolean) => !showDetails)}
-            className={styles.detailLink}
-            tabIndex={0}
-          >
-            {showDetails ? Language.lessDetails : Language.moreDetails}
-          </Link>
+          <div className={styles.flex}>
+            <div className={styles.leftContent}>
+              <Pill text={Language.licenseIssues(warnings.length)} type="warning" />
+              <span className={styles.text}>{Language.exceeded}</span>
+              &nbsp;
+              <a href="mailto:sales@coder.com" className={styles.link}>
+                {Language.upgrade}
+              </a>
+            </div>
+            <Expander expanded={showDetails} setExpanded={setShowDetails} />
+          </div>
           <Collapse in={showDetails}>
             <ul className={styles.list}>
               {warnings.map((warning, i) => (
@@ -72,6 +68,13 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(1.5),
     backgroundColor: darken(theme.palette.warning.main, 0.2),
   },
+  flex: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  leftContent: {
+    marginRight: theme.spacing(1),
+  },
   text: {
     marginLeft: theme.spacing(1),
   },
@@ -80,10 +83,6 @@ const useStyles = makeStyles((theme) => ({
     textDecoration: "none",
     fontWeight: "bold",
   },
-  detailLink: {
-    cursor: "pointer",
-    color: `${lighten(theme.palette.primary.light, 0.2)}`,
-  },
   list: {
     margin: theme.spacing(1.5),
   },

From 0cf73fdbc3067c396e3204b9afa13eece1937bc2 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 16:35:28 +0000
Subject: [PATCH 06/19] Fix alignment

---
 site/src/components/ErrorSummary/ErrorSummary.tsx | 2 +-
 site/src/components/Expander/Expander.tsx         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
index 7af06036cd1b3..d1980e1b18b60 100644
--- a/site/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -83,7 +83,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     gap: 0,
   },
   flex: {
-    display: "flex"
+    display: "flex",
   },
   messageBox: {
     justifyContent: "space-between",
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index dd7400300e113..17186f0559c94 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -42,6 +42,7 @@ const useStyles = makeStyles((theme) => ({
   expandLink: {
     cursor: "pointer",
     color: `${lighten(theme.palette.primary.light, 0.2)}`,
+    display: "flex",
   },
   text: {
     display: "flex",

From 3cf35aa59adb03c5ffbcc45ef36c91fabf93907d Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 20:43:22 +0000
Subject: [PATCH 07/19] Put it in action - type error

---
 site/src/api/api.ts                           | 17 ++++
 site/src/api/types.ts                         | 18 +++++
 site/src/app.tsx                              |  2 +
 .../DropdownArrows/DropdownArrows.tsx         |  2 +-
 .../LicenseBanner/LicenseBanner.tsx           | 17 ++++
 .../LicenseBanner/LicenseBannerView.tsx       |  1 -
 site/src/xServices/StateContext.tsx           |  3 +
 .../entitlements/entitlementsXService.ts      | 78 +++++++++++++++++++
 8 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/LicenseBanner/LicenseBanner.tsx
 create mode 100644 site/src/xServices/entitlements/entitlementsXService.ts

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 5d40a668400f3..34560eb8cd2d2 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -370,3 +370,20 @@ export const putWorkspaceExtension = async (
 ): Promise<void> => {
   await axios.put(`/api/v2/workspaces/${workspaceId}/extend`, { deadline: newDeadline })
 }
+
+export const getEntitlements = async (): Promise<Types.Entitlements> => {
+  // return this to see the banner
+  const defaultEntitlements = {
+    warnings: ["You are over your active user limit.", "And another thing."],
+    has_license: true,
+    features: {
+      activeUsers: {
+        enabled: true,
+        entitled: "entitled" as Types.EntitlementLevel,
+        limit: 100,
+        actual: 102,
+      },
+    },
+  }
+  return defaultEntitlements
+}
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
index daf4e451ac5e8..400ee1c0c88e1 100644
--- a/site/src/api/types.ts
+++ b/site/src/api/types.ts
@@ -14,3 +14,21 @@ export interface ReconnectingPTYRequest {
 export type WorkspaceBuildTransition = "start" | "stop" | "delete"
 
 export type Message = { message: string }
+
+export type EntitlementLevel = "entitled" | "grace_period" | "not_entitled"
+
+export type LicenseFeatures = Record<
+  string,
+  {
+    entitled: EntitlementLevel
+    enabled: boolean
+    limit?: number
+    actual?: number
+  }
+>
+
+export type Entitlements = {
+  features: LicenseFeatures
+  warnings: string[]
+  has_license: boolean
+}
diff --git a/site/src/app.tsx b/site/src/app.tsx
index 3595c8affca18..ed615964ba917 100644
--- a/site/src/app.tsx
+++ b/site/src/app.tsx
@@ -1,5 +1,6 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import { LicenseBanner } from "components/LicenseBanner/LicenseBanner"
 import { FC } from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { AppRouter } from "./AppRouter"
@@ -16,6 +17,7 @@ export const App: FC = () => {
         <CssBaseline />
         <ErrorBoundary>
           <XServiceProvider>
+            <LicenseBanner />
             <AppRouter />
             <GlobalSnackbar />
           </XServiceProvider>
diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
index 642fb27456df9..a93b27189a7d1 100644
--- a/site/src/components/DropdownArrows/DropdownArrows.tsx
+++ b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 interface ArrowProps {
-  margin: boolean
+  margin?: boolean
 }
 
 export const OpenDropdown: FC<ArrowProps> = ({ margin = true }) => {
diff --git a/site/src/components/LicenseBanner/LicenseBanner.tsx b/site/src/components/LicenseBanner/LicenseBanner.tsx
new file mode 100644
index 0000000000000..6230facd4a8cc
--- /dev/null
+++ b/site/src/components/LicenseBanner/LicenseBanner.tsx
@@ -0,0 +1,17 @@
+import { useActor } from "@xstate/react"
+import { useContext, useEffect } from "react"
+import { XServiceContext } from "xServices/StateContext"
+import { LicenseBannerView } from "./LicenseBannerView"
+
+export const LicenseBanner: React.FC = () => {
+  const xServices = useContext(XServiceContext)
+  const [entitlementsState, entitlementsSend] = useActor(xServices.entitlementsXService)
+  const { warnings } = entitlementsState.context.entitlements
+
+  /** Gets license data on app mount because LicenseBanner is mounted in App */
+  useEffect(() => {
+    entitlementsSend("GET_ENTITLEMENTS")
+  }, [entitlementsSend])
+
+  return <LicenseBannerView warnings={warnings} />
+}
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 6bbb0f3f36772..97762d1390f89 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -70,7 +70,6 @@ const useStyles = makeStyles((theme) => ({
   },
   flex: {
     display: "flex",
-    justifyContent: "space-between",
   },
   leftContent: {
     marginRight: theme.spacing(1),
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
index 94873667d2698..1ad25d4c9c7d6 100644
--- a/site/src/xServices/StateContext.tsx
+++ b/site/src/xServices/StateContext.tsx
@@ -4,12 +4,14 @@ import { useNavigate } from "react-router"
 import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
+import { entitlementsMachine } from "./entitlements/entitlementsXService"
 import { siteRolesMachine } from "./roles/siteRolesXService"
 import { usersMachine } from "./users/usersXService"
 
 interface XServiceContextType {
   authXService: ActorRefFrom<typeof authMachine>
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
+  entitlementsXService: ActorRefFrom<typeof entitlementsMachine>
   usersXService: ActorRefFrom<typeof usersMachine>
   siteRolesXService: ActorRefFrom<typeof siteRolesMachine>
 }
@@ -40,6 +42,7 @@ export const XServiceProvider: React.FC = ({ children }) => {
           authMachine.withConfig({ actions: { redirectToSetupPage } }),
         ),
         buildInfoXService: useInterpret(buildInfoMachine),
+        entitlementsXService: useInterpret(entitlementsMachine),
         usersXService: useInterpret(() =>
           usersMachine.withConfig({ actions: { redirectToUsersPage } }),
         ),
diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
new file mode 100644
index 0000000000000..d37e601a04336
--- /dev/null
+++ b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -0,0 +1,78 @@
+import { assign, createMachine } from "xstate"
+import * as API from "../../api/api"
+import { Entitlements } from "../../api/types"
+
+export const Language = {
+  getEntitlementsError: "Error getting license entitlements.",
+}
+
+export type EntitlementsContext = {
+  entitlements: Entitlements
+  getEntitlementsError?: Error | unknown
+}
+
+export type EntitlementsEvent = {
+  type: "GET_ENTITLEMENTS"
+}
+
+export const entitlementsMachine = createMachine(
+  {
+    id: "entitlementsMachine",
+    initial: "idle",
+    schema: {
+      context: {} as EntitlementsContext,
+      events: {} as EntitlementsEvent,
+      services: {
+        getEntitlements: {
+          data: {} as Entitlements,
+        },
+      },
+    },
+    tsTypes: {} as import("./entitlementsXService.typegen").Typegen0,
+    context: {
+      entitlements: {
+        warnings: [],
+        features: {},
+        has_license: false,
+      },
+    },
+    states: {
+      idle: {
+        on: {
+          GET_ENTITLEMENTS: "gettingEntitlements",
+        },
+      },
+      gettingEntitlements: {
+        entry: "clearGetEntitlementsError",
+        invoke: {
+          id: "getEntitlements",
+          src: "getEntitlements",
+          onDone: {
+            target: "idle",
+            actions: ["assignEntitlements"],
+          },
+          onError: {
+            target: "idle",
+            actions: ["assignGetEntitlementsError"],
+          },
+        },
+      },
+    },
+  },
+  {
+    actions: {
+      assignEntitlements: assign({
+        entitlements: (_, event) => event.data,
+      }),
+      assignGetEntitlementsError: assign({
+        getEntitlementsError: (_, event) => event.data,
+      }),
+      clearGetEntitlementsError: assign({
+        getEntitlementsError: (_) => undefined,
+      }),
+    },
+    services: {
+      getEntitlements: () => API.getEntitlements(),
+    },
+  },
+)

From 0aebe440c5adf87d3bcd0668928f4590c2604ab3 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 22:03:43 +0000
Subject: [PATCH 08/19] Hide banner by default

---
 site/src/api/api.ts                           | 16 ++------------
 site/src/testHelpers/entities.ts              | 13 ++++++++++++
 site/src/testHelpers/handlers.ts              |  3 +++
 .../entitlements/entitlementsXService.ts      | 21 ++++++++++++++-----
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 8d9c11ab6930d..02cb79a6083c4 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -380,18 +380,6 @@ export const putWorkspaceExtension = async (
 }
 
 export const getEntitlements = async (): Promise<Types.Entitlements> => {
-  // return this to see the banner
-  const defaultEntitlements = {
-    warnings: ["You are over your active user limit.", "And another thing."],
-    has_license: true,
-    features: {
-      activeUsers: {
-        enabled: true,
-        entitled: "entitled" as Types.EntitlementLevel,
-        limit: 100,
-        actual: 102,
-      },
-    },
-  }
-  return defaultEntitlements
+  const response = await axios.get("/api/v2/entitlements")
+  return response.data
 }
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 5c484b7e89662..a9ff0807cf032 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -634,3 +634,16 @@ export const makeMockApiError = ({
   },
   isAxiosError: true,
 })
+
+export const MockEntitlements = {
+  warnings: ["You are over your active user limit.", "And another thing."],
+  has_license: true,
+  features: {
+    activeUsers: {
+      enabled: true,
+      entitled: "entitled" as Types.EntitlementLevel,
+      limit: 100,
+      actual: 102,
+    },
+  },
+}
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
index ae4f23d3b08db..c517f1213ce48 100644
--- a/site/src/testHelpers/handlers.ts
+++ b/site/src/testHelpers/handlers.ts
@@ -144,4 +144,7 @@ export const handlers = [
   rest.get("/api/v2/workspacebuilds/:workspaceBuildId/logs", (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockWorkspaceBuildLogs))
   }),
+  rest.get("/api/v2/entitlements", (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(M.MockEntitlements))
+  })
 ]
diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
index d37e601a04336..1b487b5a3cce2 100644
--- a/site/src/xServices/entitlements/entitlementsXService.ts
+++ b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -1,3 +1,4 @@
+import { MockEntitlements } from "testHelpers/entities"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import { Entitlements } from "../../api/types"
@@ -13,6 +14,12 @@ export type EntitlementsContext = {
 
 export type EntitlementsEvent = {
   type: "GET_ENTITLEMENTS"
+} | { type: "SHOW_MOCK_BANNER" } | { type: "HIDE_MOCK_BANNER" }
+
+const emptyEntitlements = {
+  warnings: [],
+  features: {},
+  has_license: false,
 }
 
 export const entitlementsMachine = createMachine(
@@ -30,16 +37,14 @@ export const entitlementsMachine = createMachine(
     },
     tsTypes: {} as import("./entitlementsXService.typegen").Typegen0,
     context: {
-      entitlements: {
-        warnings: [],
-        features: {},
-        has_license: false,
-      },
+      entitlements: emptyEntitlements
     },
     states: {
       idle: {
         on: {
           GET_ENTITLEMENTS: "gettingEntitlements",
+          SHOW_MOCK_BANNER: { actions: "assignMockEntitlements" },
+          HIDE_MOCK_BANNER: { actions: "clearMockEntitlements" }
         },
       },
       gettingEntitlements: {
@@ -70,6 +75,12 @@ export const entitlementsMachine = createMachine(
       clearGetEntitlementsError: assign({
         getEntitlementsError: (_) => undefined,
       }),
+      assignMockEntitlements: assign({
+        entitlements: (_) => MockEntitlements
+      }),
+      clearMockEntitlements: assign({
+        entitlements: (_) => emptyEntitlements
+      })
     },
     services: {
       getEntitlements: () => API.getEntitlements(),

From ac2b5aec8fb1f91ed9592f5665b3e47fc550bae9 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 22:13:38 +0000
Subject: [PATCH 09/19] Use generated type

---
 site/src/api/api.ts                            |  2 +-
 site/src/api/types.ts                          | 18 ------------------
 site/src/testHelpers/entities.ts               |  4 ++--
 .../entitlements/entitlementsXService.ts       |  2 +-
 4 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 02cb79a6083c4..20a5156e9d3f9 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -379,7 +379,7 @@ export const putWorkspaceExtension = async (
   await axios.put(`/api/v2/workspaces/${workspaceId}/extend`, { deadline: newDeadline })
 }
 
-export const getEntitlements = async (): Promise<Types.Entitlements> => {
+export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
   const response = await axios.get("/api/v2/entitlements")
   return response.data
 }
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
index 400ee1c0c88e1..daf4e451ac5e8 100644
--- a/site/src/api/types.ts
+++ b/site/src/api/types.ts
@@ -14,21 +14,3 @@ export interface ReconnectingPTYRequest {
 export type WorkspaceBuildTransition = "start" | "stop" | "delete"
 
 export type Message = { message: string }
-
-export type EntitlementLevel = "entitled" | "grace_period" | "not_entitled"
-
-export type LicenseFeatures = Record<
-  string,
-  {
-    entitled: EntitlementLevel
-    enabled: boolean
-    limit?: number
-    actual?: number
-  }
->
-
-export type Entitlements = {
-  features: LicenseFeatures
-  warnings: string[]
-  has_license: boolean
-}
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index a9ff0807cf032..c721b868cf5a5 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -635,13 +635,13 @@ export const makeMockApiError = ({
   isAxiosError: true,
 })
 
-export const MockEntitlements = {
+export const MockEntitlements: TypesGen.Entitlements = {
   warnings: ["You are over your active user limit.", "And another thing."],
   has_license: true,
   features: {
     activeUsers: {
       enabled: true,
-      entitled: "entitled" as Types.EntitlementLevel,
+      entitlement: "entitled",
       limit: 100,
       actual: 102,
     },
diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
index 1b487b5a3cce2..aa2fe1f49d1a2 100644
--- a/site/src/xServices/entitlements/entitlementsXService.ts
+++ b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -1,7 +1,7 @@
 import { MockEntitlements } from "testHelpers/entities"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
-import { Entitlements } from "../../api/types"
+import { Entitlements } from "../../api/typesGenerated"
 
 export const Language = {
   getEntitlementsError: "Error getting license entitlements.",

From c55cba6d6b859ee665f1d65f234d6c5d95a361da Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 22:36:00 +0000
Subject: [PATCH 10/19] Move PaletteIndex type

---
 site/src/components/Pill/Pill.tsx                             | 4 +---
 .../components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx  | 3 ++-
 site/src/theme/palettes.ts                                    | 3 +++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 9c3fac696a5a4..06a5c70b8efef 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,11 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import { PaletteIndex } from "theme/palettes"
 import { combineClasses } from "util/combineClasses"
 
-// Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation.
-export type PaletteIndex = "primary" | "secondary" | "info" | "success" | "error" | "warning"
-
 export interface PillProps {
   className?: string
   icon?: React.ReactNode
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index 9f7158d11f206..4816ce9eadb25 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -3,8 +3,9 @@ import ErrorIcon from "@material-ui/icons/ErrorOutline"
 import StopIcon from "@material-ui/icons/PauseOutlined"
 import PlayIcon from "@material-ui/icons/PlayArrowOutlined"
 import { WorkspaceBuild } from "api/typesGenerated"
-import { PaletteIndex, Pill } from "components/Pill/Pill"
+import { Pill } from "components/Pill/Pill"
 import React from "react"
+import { PaletteIndex } from "theme/palettes"
 import { getWorkspaceStatus } from "util/workspace"
 
 const StatusLanguage = {
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
index 3ef760a1c306a..2bfb614df9fa9 100644
--- a/site/src/theme/palettes.ts
+++ b/site/src/theme/palettes.ts
@@ -1,6 +1,9 @@
 import { PaletteOptions } from "@material-ui/core/styles/createPalette"
 import { colors } from "./colors"
 
+// Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation.
+export type PaletteIndex = "primary" | "secondary" | "info" | "success" | "error" | "warning"
+
 export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {

From 77dd18b690ce2e878b228b0a74376dfe2e3c0b0c Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 22:53:18 +0000
Subject: [PATCH 11/19] Tweak colors

---
 site/src/components/Expander/Expander.tsx               | 3 +--
 site/src/components/LicenseBanner/LicenseBannerView.tsx | 4 ++--
 site/src/components/Pill/Pill.tsx                       | 9 +++++----
 site/src/theme/palettes.ts                              | 3 ++-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index 17186f0559c94..99d57040db4fc 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -1,5 +1,4 @@
 import Link from "@material-ui/core/Link"
-import { lighten } from "@material-ui/core/styles"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 
@@ -41,7 +40,7 @@ export const Expander: React.FC<CollapseButtonProps> = ({ expanded, setExpanded
 const useStyles = makeStyles((theme) => ({
   expandLink: {
     cursor: "pointer",
-    color: `${lighten(theme.palette.primary.light, 0.2)}`,
+    color: theme.palette.text.primary,
     display: "flex",
   },
   text: {
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 97762d1390f89..1343cbd20e8c7 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -24,7 +24,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
     if (warnings.length === 1) {
       return (
         <div className={styles.container}>
-          <Pill text={Language.licenseIssue} type="warning" />
+          <Pill text={Language.licenseIssue} type="warning" lightBorder />
           <span className={styles.text}>{warnings[0]}</span>
           &nbsp;
           <a href="mailto:sales@coder.com" className={styles.link}>
@@ -37,7 +37,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
         <div className={styles.container}>
           <div className={styles.flex}>
             <div className={styles.leftContent}>
-              <Pill text={Language.licenseIssues(warnings.length)} type="warning" />
+              <Pill text={Language.licenseIssues(warnings.length)} type="warning" lightBorder />
               <span className={styles.text}>{Language.exceeded}</span>
               &nbsp;
               <a href="mailto:sales@coder.com" className={styles.link}>
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 06a5c70b8efef..e9cb4998d7ebf 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -9,10 +9,11 @@ export interface PillProps {
   icon?: React.ReactNode
   text: string
   type?: PaletteIndex
+  lightBorder?: boolean
 }
 
-export const Pill: React.FC<PillProps> = ({ className, icon, text, type }) => {
-  const styles = useStyles({ icon, type })
+export const Pill: React.FC<PillProps> = ({ className, icon, text, type, lightBorder=false }) => {
+  const styles = useStyles({ icon, type, lightBorder })
   return (
     <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
       {icon && <div className={styles.iconWrapper}>{icon}</div>}
@@ -42,8 +43,8 @@ const useStyles = makeStyles((theme) => ({
   pillColor: {
     backgroundColor: ({ type }: { type?: PaletteIndex }) =>
       type ? theme.palette[type].dark : theme.palette.text.secondary,
-    borderColor: ({ type }: { type?: PaletteIndex }) =>
-      type ? theme.palette[type].main : theme.palette.text.secondary,
+    borderColor: ({ type, lightBorder }: { type?: PaletteIndex, lightBorder?: boolean }) =>
+      type ? ( lightBorder ? theme.palette[type].light : theme.palette[type].main) : theme.palette.text.secondary,
   },
 
   iconWrapper: {
diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
index 2bfb614df9fa9..eb2fd91294893 100644
--- a/site/src/theme/palettes.ts
+++ b/site/src/theme/palettes.ts
@@ -27,7 +27,8 @@ export const darkPalette: PaletteOptions = {
   },
   divider: colors.gray[13],
   warning: {
-    main: colors.orange[9],
+    light: colors.orange[7],
+    main: colors.orange[11],
     dark: colors.orange[15],
   },
   success: {

From 94f8b51b177b1d686cb4db79d1f5ce2336f4d315 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Thu, 18 Aug 2022 23:00:39 +0000
Subject: [PATCH 12/19] Format, another color tweak

---
 .../LicenseBanner/LicenseBannerView.tsx       |  4 ++--
 site/src/components/Pill/Pill.tsx             | 10 +++++++---
 site/src/testHelpers/handlers.ts              |  2 +-
 .../entitlements/entitlementsXService.ts      | 19 +++++++++++--------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 1343cbd20e8c7..4dd6eadb544af 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -1,5 +1,5 @@
 import Collapse from "@material-ui/core/Collapse"
-import { darken, makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles"
 import { Expander } from "components/Expander/Expander"
 import { Pill } from "components/Pill/Pill"
 import { useState } from "react"
@@ -66,7 +66,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
 const useStyles = makeStyles((theme) => ({
   container: {
     padding: theme.spacing(1.5),
-    backgroundColor: darken(theme.palette.warning.main, 0.2),
+    backgroundColor: theme.palette.warning.main,
   },
   flex: {
     display: "flex",
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index e9cb4998d7ebf..55807fc86ef0d 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -12,7 +12,7 @@ export interface PillProps {
   lightBorder?: boolean
 }
 
-export const Pill: React.FC<PillProps> = ({ className, icon, text, type, lightBorder=false }) => {
+export const Pill: React.FC<PillProps> = ({ className, icon, text, type, lightBorder = false }) => {
   const styles = useStyles({ icon, type, lightBorder })
   return (
     <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
@@ -43,8 +43,12 @@ const useStyles = makeStyles((theme) => ({
   pillColor: {
     backgroundColor: ({ type }: { type?: PaletteIndex }) =>
       type ? theme.palette[type].dark : theme.palette.text.secondary,
-    borderColor: ({ type, lightBorder }: { type?: PaletteIndex, lightBorder?: boolean }) =>
-      type ? ( lightBorder ? theme.palette[type].light : theme.palette[type].main) : theme.palette.text.secondary,
+    borderColor: ({ type, lightBorder }: { type?: PaletteIndex; lightBorder?: boolean }) =>
+      type
+        ? lightBorder
+          ? theme.palette[type].light
+          : theme.palette[type].main
+        : theme.palette.text.secondary,
   },
 
   iconWrapper: {
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
index c517f1213ce48..a12b46179a5be 100644
--- a/site/src/testHelpers/handlers.ts
+++ b/site/src/testHelpers/handlers.ts
@@ -146,5 +146,5 @@ export const handlers = [
   }),
   rest.get("/api/v2/entitlements", (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockEntitlements))
-  })
+  }),
 ]
diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
index aa2fe1f49d1a2..60a321b195833 100644
--- a/site/src/xServices/entitlements/entitlementsXService.ts
+++ b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -12,9 +12,12 @@ export type EntitlementsContext = {
   getEntitlementsError?: Error | unknown
 }
 
-export type EntitlementsEvent = {
-  type: "GET_ENTITLEMENTS"
-} | { type: "SHOW_MOCK_BANNER" } | { type: "HIDE_MOCK_BANNER" }
+export type EntitlementsEvent =
+  | {
+      type: "GET_ENTITLEMENTS"
+    }
+  | { type: "SHOW_MOCK_BANNER" }
+  | { type: "HIDE_MOCK_BANNER" }
 
 const emptyEntitlements = {
   warnings: [],
@@ -37,14 +40,14 @@ export const entitlementsMachine = createMachine(
     },
     tsTypes: {} as import("./entitlementsXService.typegen").Typegen0,
     context: {
-      entitlements: emptyEntitlements
+      entitlements: emptyEntitlements,
     },
     states: {
       idle: {
         on: {
           GET_ENTITLEMENTS: "gettingEntitlements",
           SHOW_MOCK_BANNER: { actions: "assignMockEntitlements" },
-          HIDE_MOCK_BANNER: { actions: "clearMockEntitlements" }
+          HIDE_MOCK_BANNER: { actions: "clearMockEntitlements" },
         },
       },
       gettingEntitlements: {
@@ -76,11 +79,11 @@ export const entitlementsMachine = createMachine(
         getEntitlementsError: (_) => undefined,
       }),
       assignMockEntitlements: assign({
-        entitlements: (_) => MockEntitlements
+        entitlements: (_) => MockEntitlements,
       }),
       clearMockEntitlements: assign({
-        entitlements: (_) => emptyEntitlements
-      })
+        entitlements: (_) => emptyEntitlements,
+      }),
     },
     services: {
       getEntitlements: () => API.getEntitlements(),

From 69f89efa1b33c6d38b6102b955d71ac454a5ef3e Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Fri, 19 Aug 2022 17:18:05 +0000
Subject: [PATCH 13/19] Add stories

---
 .../components/Expander/Expander.stories.tsx  | 22 +++++++
 site/src/components/Expander/Expander.tsx     |  4 +-
 site/src/components/Pill/Pill.stories.tsx     | 58 +++++++++++++++++++
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/Expander/Expander.stories.tsx
 create mode 100644 site/src/components/Pill/Pill.stories.tsx

diff --git a/site/src/components/Expander/Expander.stories.tsx b/site/src/components/Expander/Expander.stories.tsx
new file mode 100644
index 0000000000000..e7d159b787d23
--- /dev/null
+++ b/site/src/components/Expander/Expander.stories.tsx
@@ -0,0 +1,22 @@
+import { Story } from "@storybook/react"
+import { Expander, ExpanderProps } from "./Expander"
+
+export default {
+  title: "components/Expander",
+  component: Expander,
+  argTypes: {
+    setExpanded: { action: "setExpanded" },
+  },
+}
+
+const Template: Story<ExpanderProps> = (args) => <Expander {...args} />
+
+export const Expanded = Template.bind({})
+Expanded.args = {
+  expanded: true
+}
+
+export const Collapsed = Template.bind({})
+Collapsed.args = {
+  expanded: false
+}
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index 99d57040db4fc..69fb04893c236 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -7,12 +7,12 @@ const Language = {
   collapse: "Less",
 }
 
-export interface CollapseButtonProps {
+export interface ExpanderProps {
   expanded: boolean
   setExpanded: (val: boolean) => void
 }
 
-export const Expander: React.FC<CollapseButtonProps> = ({ expanded, setExpanded }) => {
+export const Expander: React.FC<ExpanderProps> = ({ expanded, setExpanded }) => {
   const toggleExpanded = () => setExpanded(!expanded)
   const styles = useStyles()
   return (
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
new file mode 100644
index 0000000000000..6a9c150f7334a
--- /dev/null
+++ b/site/src/components/Pill/Pill.stories.tsx
@@ -0,0 +1,58 @@
+import { Story } from "@storybook/react"
+import { Pill, PillProps } from "./Pill"
+
+export default {
+  title: "components/Pill",
+  component: Pill,
+}
+
+const Template: Story<PillProps> = (args) => <Pill {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+  text: "Primary",
+  type: "primary"
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  text: "Secondary",
+  type: "secondary"
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  text: "Success",
+  type: "success"
+}
+
+export const Info = Template.bind({})
+Info.args = {
+  text: "Information",
+  type: "info"
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  text: "Warning",
+  type: "warning"
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  text: "Error",
+  type: "error"
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  text: "Default"
+}
+
+export const WarningLight = Template.bind({})
+WarningLight.args = {
+  text: "Warning",
+  type: "warning",
+  lightBorder: true
+}
+

From 5d001221cce79dc5025289127844c652fc65f13b Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Fri, 19 Aug 2022 18:07:53 +0000
Subject: [PATCH 14/19] Add tests

---
 .../components/Expander/Expander.stories.tsx  |  4 +--
 .../LicenseBanner/LicenseBanner.test.tsx      | 25 +++++++++++++++++++
 .../LicenseBanner/LicenseBannerView.tsx       |  4 +--
 site/src/components/Pill/Pill.stories.tsx     | 17 ++++++-------
 site/src/testHelpers/entities.ts              |  6 +++++
 .../entitlements/entitlementsXService.ts      |  4 +--
 6 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 site/src/components/LicenseBanner/LicenseBanner.test.tsx

diff --git a/site/src/components/Expander/Expander.stories.tsx b/site/src/components/Expander/Expander.stories.tsx
index e7d159b787d23..c3f41869f2157 100644
--- a/site/src/components/Expander/Expander.stories.tsx
+++ b/site/src/components/Expander/Expander.stories.tsx
@@ -13,10 +13,10 @@ const Template: Story<ExpanderProps> = (args) => <Expander {...args} />
 
 export const Expanded = Template.bind({})
 Expanded.args = {
-  expanded: true
+  expanded: true,
 }
 
 export const Collapsed = Template.bind({})
 Collapsed.args = {
-  expanded: false
+  expanded: false,
 }
diff --git a/site/src/components/LicenseBanner/LicenseBanner.test.tsx b/site/src/components/LicenseBanner/LicenseBanner.test.tsx
new file mode 100644
index 0000000000000..6db8adfea24b4
--- /dev/null
+++ b/site/src/components/LicenseBanner/LicenseBanner.test.tsx
@@ -0,0 +1,25 @@
+import { screen } from "@testing-library/react"
+import { rest } from "msw"
+import { MockEntitlementsWithWarnings } from "testHelpers/entities"
+import { render } from "testHelpers/renderHelpers"
+import { server } from "testHelpers/server"
+import { LicenseBanner } from "./LicenseBanner"
+import { Language } from "./LicenseBannerView"
+
+describe("LicenseBanner", () => {
+  it("does not show when there are no warnings", async () => {
+    render(<LicenseBanner />)
+    const bannerPill = await screen.queryByText(Language.licenseIssues(2))
+    expect(bannerPill).toBe(null)
+  })
+  it("shows when there are warnings", async () => {
+    server.use(
+      rest.get("/api/v2/entitlements", (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json(MockEntitlementsWithWarnings))
+      }),
+    )
+    render(<LicenseBanner />)
+    const bannerPill = await screen.findByText(Language.licenseIssues(2))
+    expect(bannerPill).toBeDefined()
+  })
+})
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 4dd6eadb544af..df033b7f810c1 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -4,9 +4,9 @@ import { Expander } from "components/Expander/Expander"
 import { Pill } from "components/Pill/Pill"
 import { useState } from "react"
 
-const Language = {
+export const Language = {
   licenseIssue: "License Issue",
-  licenseIssues: (num: number) => `${num} License Issues`,
+  licenseIssues: (num: number): string => `${num} License Issues`,
   upgrade: "Contact us to upgrade your license.",
   exceeded: "It looks like you've exceeded some limits of your license.",
   lessDetails: "Less",
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
index 6a9c150f7334a..5358cb7aa0834 100644
--- a/site/src/components/Pill/Pill.stories.tsx
+++ b/site/src/components/Pill/Pill.stories.tsx
@@ -11,48 +11,47 @@ const Template: Story<PillProps> = (args) => <Pill {...args} />
 export const Primary = Template.bind({})
 Primary.args = {
   text: "Primary",
-  type: "primary"
+  type: "primary",
 }
 
 export const Secondary = Template.bind({})
 Secondary.args = {
   text: "Secondary",
-  type: "secondary"
+  type: "secondary",
 }
 
 export const Success = Template.bind({})
 Success.args = {
   text: "Success",
-  type: "success"
+  type: "success",
 }
 
 export const Info = Template.bind({})
 Info.args = {
   text: "Information",
-  type: "info"
+  type: "info",
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
   text: "Warning",
-  type: "warning"
+  type: "warning",
 }
 
 export const Error = Template.bind({})
 Error.args = {
   text: "Error",
-  type: "error"
+  type: "error",
 }
 
 export const Default = Template.bind({})
 Default.args = {
-  text: "Default"
+  text: "Default",
 }
 
 export const WarningLight = Template.bind({})
 WarningLight.args = {
   text: "Warning",
   type: "warning",
-  lightBorder: true
+  lightBorder: true,
 }
-
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index c721b868cf5a5..d7b65515bd7d9 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -636,6 +636,12 @@ export const makeMockApiError = ({
 })
 
 export const MockEntitlements: TypesGen.Entitlements = {
+  warnings: [],
+  has_license: false,
+  features: {},
+}
+
+export const MockEntitlementsWithWarnings: TypesGen.Entitlements = {
   warnings: ["You are over your active user limit.", "And another thing."],
   has_license: true,
   features: {
diff --git a/site/src/xServices/entitlements/entitlementsXService.ts b/site/src/xServices/entitlements/entitlementsXService.ts
index 60a321b195833..7458067172fa5 100644
--- a/site/src/xServices/entitlements/entitlementsXService.ts
+++ b/site/src/xServices/entitlements/entitlementsXService.ts
@@ -1,4 +1,4 @@
-import { MockEntitlements } from "testHelpers/entities"
+import { MockEntitlementsWithWarnings } from "testHelpers/entities"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import { Entitlements } from "../../api/typesGenerated"
@@ -79,7 +79,7 @@ export const entitlementsMachine = createMachine(
         getEntitlementsError: (_) => undefined,
       }),
       assignMockEntitlements: assign({
-        entitlements: (_) => MockEntitlements,
+        entitlements: (_) => MockEntitlementsWithWarnings,
       }),
       clearMockEntitlements: assign({
         entitlements: (_) => emptyEntitlements,

From a8e6341a8771dfee3f6110cb30f081fad2b7b1bf Mon Sep 17 00:00:00 2001
From: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:25:33 -0400
Subject: [PATCH 15/19] Update site/src/components/Pill/Pill.tsx

Co-authored-by: Kira Pilot <kira@coder.com>
---
 site/src/components/Pill/Pill.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 55807fc86ef0d..3ec411149d8d1 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { PaletteIndex } from "theme/palettes"
 import { combineClasses } from "util/combineClasses"

From 4d55a3377028a173320ddfbc7760cdbb87c97d88 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:25:50 -0400
Subject: [PATCH 16/19] Update site/src/components/Pill/Pill.tsx

Co-authored-by: Kira Pilot <kira@coder.com>
---
 site/src/components/Pill/Pill.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 3ec411149d8d1..2c70a6d674d75 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -12,7 +12,7 @@ export interface PillProps {
   lightBorder?: boolean
 }
 
-export const Pill: React.FC<PillProps> = ({ className, icon, text, type, lightBorder = false }) => {
+export const Pill: FC<PillProps> = ({ className, icon, text, type, lightBorder = false }) => {
   const styles = useStyles({ icon, type, lightBorder })
   return (
     <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">

From 66e75bceb826f1b3e0a5c465d9922d3405442a8a Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Mon, 22 Aug 2022 16:00:26 +0000
Subject: [PATCH 17/19] Comments

---
 site/src/components/DropdownArrows/DropdownArrows.tsx   | 8 ++++----
 site/src/components/ErrorSummary/ErrorSummary.tsx       | 4 ++--
 site/src/components/Expander/Expander.tsx               | 7 +------
 site/src/components/LicenseBanner/LicenseBannerView.tsx | 4 ++--
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
index a93b27189a7d1..fa438157e87d0 100644
--- a/site/src/components/DropdownArrows/DropdownArrows.tsx
+++ b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -3,10 +3,10 @@ import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
 import { FC } from "react"
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles<Theme, ArrowProps>((theme: Theme) => ({
   arrowIcon: {
     color: fade(theme.palette.primary.contrastText, 0.7),
-    marginLeft: (margin: boolean) => (margin ? theme.spacing(1) : 0),
+    marginLeft: ({ margin }) => (margin ? theme.spacing(1) : 0),
     width: 16,
     height: 16,
   },
@@ -20,11 +20,11 @@ interface ArrowProps {
 }
 
 export const OpenDropdown: FC<ArrowProps> = ({ margin = true }) => {
-  const styles = useStyles(margin)
+  const styles = useStyles({ margin })
   return <KeyboardArrowDown className={styles.arrowIcon} />
 }
 
 export const CloseDropdown: FC<ArrowProps> = ({ margin = true }) => {
-  const styles = useStyles(margin)
+  const styles = useStyles({ margin })
   return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
 }
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
index d1980e1b18b60..4f391b401442d 100644
--- a/site/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -47,10 +47,10 @@ export const ErrorSummary: FC<ErrorSummaryProps> = ({
   return (
     <Stack className={styles.root}>
       <Stack direction="row" alignItems="center" className={styles.messageBox}>
-        <div className={styles.flex}>
+        <Stack direction="row" spacing={0}>
           <span className={styles.errorMessage}>{message}</span>
           {!!detail && <Expander expanded={showDetails} setExpanded={setShowDetails} />}
-        </div>
+        </Stack>
         {dismissible && (
           <IconButton onClick={closeError} className={styles.iconButton}>
             <CloseIcon className={styles.closeIcon} />
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index 69fb04893c236..c11a180088382 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -16,12 +16,7 @@ export const Expander: React.FC<ExpanderProps> = ({ expanded, setExpanded }) =>
   const toggleExpanded = () => setExpanded(!expanded)
   const styles = useStyles()
   return (
-    <Link
-      aria-expanded={expanded}
-      onClick={toggleExpanded}
-      className={styles.expandLink}
-      tabIndex={0}
-    >
+    <Link aria-expanded={expanded} onClick={toggleExpanded} className={styles.expandLink}>
       {expanded ? (
         <span className={styles.text}>
           {Language.collapse}
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index df033b7f810c1..ae834d34d8014 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -48,8 +48,8 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }
           </div>
           <Collapse in={showDetails}>
             <ul className={styles.list}>
-              {warnings.map((warning, i) => (
-                <li className={styles.listItem} key={`${i}-${warning}`}>
+              {warnings.map((warning) => (
+                <li className={styles.listItem} key={`${warning}`}>
                   {warning}
                 </li>
               ))}

From 95c5c2def1997ff860da4c3e2f7343648e965720 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Mon, 22 Aug 2022 16:41:52 +0000
Subject: [PATCH 18/19] Remove empty story, improve empty test

---
 .../LicenseBanner/LicenseBanner.test.tsx      |  6 +-
 .../LicenseBanner/LicenseBanner.tsx           |  6 +-
 .../LicenseBannerView.stories.tsx             |  5 --
 .../LicenseBanner/LicenseBannerView.tsx       | 74 +++++++++----------
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/site/src/components/LicenseBanner/LicenseBanner.test.tsx b/site/src/components/LicenseBanner/LicenseBanner.test.tsx
index 6db8adfea24b4..f45ac75d0ffa6 100644
--- a/site/src/components/LicenseBanner/LicenseBanner.test.tsx
+++ b/site/src/components/LicenseBanner/LicenseBanner.test.tsx
@@ -9,8 +9,10 @@ import { Language } from "./LicenseBannerView"
 describe("LicenseBanner", () => {
   it("does not show when there are no warnings", async () => {
     render(<LicenseBanner />)
-    const bannerPill = await screen.queryByText(Language.licenseIssues(2))
-    expect(bannerPill).toBe(null)
+    const bannerPillSingular = await screen.queryByText(Language.licenseIssue)
+    const bannerPillPlural = await screen.queryByText(Language.licenseIssues(2))
+    expect(bannerPillSingular).toBe(null)
+    expect(bannerPillPlural).toBe(null)
   })
   it("shows when there are warnings", async () => {
     server.use(
diff --git a/site/src/components/LicenseBanner/LicenseBanner.tsx b/site/src/components/LicenseBanner/LicenseBanner.tsx
index 6230facd4a8cc..b146944f03210 100644
--- a/site/src/components/LicenseBanner/LicenseBanner.tsx
+++ b/site/src/components/LicenseBanner/LicenseBanner.tsx
@@ -13,5 +13,9 @@ export const LicenseBanner: React.FC = () => {
     entitlementsSend("GET_ENTITLEMENTS")
   }, [entitlementsSend])
 
-  return <LicenseBannerView warnings={warnings} />
+  if (warnings && warnings.length) {
+    return <LicenseBannerView warnings={warnings} />
+  } else {
+    return null
+  }
 }
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
index 149c08f15b743..7328c24f3230f 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.stories.tsx
@@ -20,8 +20,3 @@ TwoWarnings.args = {
     "You are flying too close to the sun.",
   ],
 }
-
-export const NoWarnings = Template.bind({})
-NoWarnings.args = {
-  warnings: [],
-}
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index ae834d34d8014..5d63d23bedb67 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -14,52 +14,48 @@ export const Language = {
 }
 
 export interface LicenseBannerViewProps {
-  warnings?: string[]
+  warnings: string[]
 }
 
 export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }) => {
   const styles = useStyles()
   const [showDetails, setShowDetails] = useState(false)
-  if (warnings && warnings.length) {
-    if (warnings.length === 1) {
-      return (
-        <div className={styles.container}>
-          <Pill text={Language.licenseIssue} type="warning" lightBorder />
-          <span className={styles.text}>{warnings[0]}</span>
-          &nbsp;
-          <a href="mailto:sales@coder.com" className={styles.link}>
-            {Language.upgrade}
-          </a>
-        </div>
-      )
-    } else {
-      return (
-        <div className={styles.container}>
-          <div className={styles.flex}>
-            <div className={styles.leftContent}>
-              <Pill text={Language.licenseIssues(warnings.length)} type="warning" lightBorder />
-              <span className={styles.text}>{Language.exceeded}</span>
-              &nbsp;
-              <a href="mailto:sales@coder.com" className={styles.link}>
-                {Language.upgrade}
-              </a>
-            </div>
-            <Expander expanded={showDetails} setExpanded={setShowDetails} />
+  if (warnings.length === 1) {
+    return (
+      <div className={styles.container}>
+        <Pill text={Language.licenseIssue} type="warning" lightBorder />
+        <span className={styles.text}>{warnings[0]}</span>
+        &nbsp;
+        <a href="mailto:sales@coder.com" className={styles.link}>
+          {Language.upgrade}
+        </a>
+      </div>
+    )
+  } else {
+    return (
+      <div className={styles.container}>
+        <div className={styles.flex}>
+          <div className={styles.leftContent}>
+            <Pill text={Language.licenseIssues(warnings.length)} type="warning" lightBorder />
+            <span className={styles.text}>{Language.exceeded}</span>
+            &nbsp;
+            <a href="mailto:sales@coder.com" className={styles.link}>
+              {Language.upgrade}
+            </a>
           </div>
-          <Collapse in={showDetails}>
-            <ul className={styles.list}>
-              {warnings.map((warning) => (
-                <li className={styles.listItem} key={`${warning}`}>
-                  {warning}
-                </li>
-              ))}
-            </ul>
-          </Collapse>
+          <Expander expanded={showDetails} setExpanded={setShowDetails} />
         </div>
-      )
-    }
-  } else {
-    return null
+        <Collapse in={showDetails}>
+          <ul className={styles.list}>
+            {warnings.map((warning) => (
+              <li className={styles.listItem} key={`${warning}`}>
+                {warning}
+              </li>
+            ))}
+          </ul>
+        </Collapse>
+      </div>
+    )
   }
 }
 

From 62d090b34a0721091cdc0ae5688c1559153ca278 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 23 Aug 2022 14:27:30 +0000
Subject: [PATCH 19/19] Lint

---
 site/src/components/LicenseBanner/LicenseBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/LicenseBanner/LicenseBanner.tsx b/site/src/components/LicenseBanner/LicenseBanner.tsx
index b146944f03210..f2a78f0f12d62 100644
--- a/site/src/components/LicenseBanner/LicenseBanner.tsx
+++ b/site/src/components/LicenseBanner/LicenseBanner.tsx
@@ -13,7 +13,7 @@ export const LicenseBanner: React.FC = () => {
     entitlementsSend("GET_ENTITLEMENTS")
   }, [entitlementsSend])
 
-  if (warnings && warnings.length) {
+  if (warnings.length) {
     return <LicenseBannerView warnings={warnings} />
   } else {
     return null