coder · presleyp · Aug 23, 2022 · Aug 17, 2022 · Aug 17, 2022 · Aug 17, 2022
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -378,3 +378,8 @@ export const putWorkspaceExtension = async (
 ): Promise<void> => {
   await axios.put(`/api/v2/workspaces/${workspaceId}/extend`, { deadline: newDeadline })
 }
+
+export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
+  const response = await axios.get("/api/v2/entitlements")
+  return response.data
+}
diff --git 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 { HelmetProvider } from "react-helmet-async"
 import { BrowserRouter as Router } from "react-router-dom"
@@ -18,6 +19,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
@@ -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: theme.spacing(1),
+    marginLeft: ({ margin }) => (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
@@ -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<React.PropsWithChildren<ErrorSummaryProps>> = ({
 
   const styles = useStyles({ showDetails })
 
-  const toggleShowDetails = () => {
-    setShowDetails(!showDetails)
-  }
-
   const closeError = () => {
     setOpen(false)
   }
@@ -51,19 +47,10 @@ export const ErrorSummary: FC<React.PropsWithChildren<ErrorSummaryProps>> = ({
   return (
     <Stack className={styles.root}>
       <Stack direction="row" alignItems="center" className={styles.messageBox}>
-        <div>
+        <Stack direction="row" spacing={0}>
           <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>
+          {!!detail && <Expander expanded={showDetails} setExpanded={setShowDetails} />}
+        </Stack>
         {dismissible && (
           <IconButton onClick={closeError} className={styles.iconButton}>
             <CloseIcon className={styles.closeIcon} />
@@ -101,6 +88,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.stories.tsx 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
@@ -0,0 +1,45 @@
+import Link from "@material-ui/core/Link"
+import makeStyles from "@material-ui/core/styles/makeStyles"
+import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownArrows"
+
+const Language = {
+  expand: "More",
+  collapse: "Less",
+}
+
+export interface ExpanderProps {
+  expanded: boolean
+  setExpanded: (val: boolean) => void
+}
+
+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}>
+      {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: theme.palette.text.primary,
+    display: "flex",
+  },
+  text: {
+    display: "flex",
+    alignItems: "center",
+  },
+}))
diff --git a/site/src/components/LicenseBanner/LicenseBanner.test.tsx b/site/src/components/LicenseBanner/LicenseBanner.test.tsx
@@ -0,0 +1,27 @@
+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 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(
+      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/LicenseBanner.tsx b/site/src/components/LicenseBanner/LicenseBanner.tsx
@@ -0,0 +1,21 @@
+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])
+
+  if (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
@@ -0,0 +1,22 @@
+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.",
+  ],
+}
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -0,0 +1,87 @@
+import Collapse from "@material-ui/core/Collapse"
+import { makeStyles } from "@material-ui/core/styles"
+import { Expander } from "components/Expander/Expander"
+import { Pill } from "components/Pill/Pill"
+import { useState } from "react"
+
+export const Language = {
+  licenseIssue: "License Issue",
+  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",
+  moreDetails: "More",
+}
+
+export interface LicenseBannerViewProps {
+  warnings: string[]
+}
+
+export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({ warnings }) => {
+  const styles = useStyles()
+  const [showDetails, setShowDetails] = useState(false)
+  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} />
+        </div>
+        <Collapse in={showDetails}>
+          <ul className={styles.list}>
+            {warnings.map((warning) => (
+              <li className={styles.listItem} key={`${warning}`}>
+                {warning}
+              </li>
+            ))}
+          </ul>
+        </Collapse>
+      </div>
+    )
+  }
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    padding: theme.spacing(1.5),
+    backgroundColor: theme.palette.warning.main,
+  },
+  flex: {
+    display: "flex",
+  },
+  leftContent: {
+    marginRight: theme.spacing(1),
+  },
+  text: {
+    marginLeft: theme.spacing(1),
+  },
+  link: {
+    color: "inherit",
+    textDecoration: "none",
+    fontWeight: "bold",
+  },
+  list: {
+    margin: theme.spacing(1.5),
+  },
+  listItem: {
+    margin: theme.spacing(1),
+  },
+}))