From 364c473cd9bf517758f6e60e0feb8f104cdbc0f9 Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Tue, 20 Jun 2023 22:59:30 +0000
Subject: [PATCH 1/2] fix(site): display correct user_limit on license ui

---
 site/src/components/LicenseCard/LicenseCard.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
index 856c598cecaaa..09cfc84d1222e 100644
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -1,16 +1,16 @@
 import Button from "@mui/material/Button"
 import Paper from "@mui/material/Paper"
 import { makeStyles } from "@mui/styles"
-import { License } from "api/typesGenerated"
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Stack } from "components/Stack/Stack"
 import dayjs from "dayjs"
 import { useState } from "react"
 import { Pill } from "components/Pill/Pill"
 import { compareAsc } from "date-fns"
+import { GetLicensesResponse } from "api/api"
 
 type LicenseCardProps = {
-  license: License
+  license: GetLicensesResponse
   userLimitActual?: number
   userLimitLimit?: number
   onRemove: (licenseId: number) => void
@@ -30,6 +30,9 @@ export const LicenseCard = ({
     number | undefined
   >(undefined)
 
+  const currentUserLimit =
+    license.claims.features["user_limit"] || userLimitLimit
+
   return (
     <Paper key={license.id} elevation={2} className={styles.licenseCard}>
       <ConfirmDialog
@@ -72,7 +75,7 @@ export const LicenseCard = ({
           <Stack direction="column" spacing={0} alignItems="center">
             <span className={styles.secondaryMaincolor}>Users</span>
             <span className={styles.userLimit}>
-              {userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
+              {userLimitActual} {` / ${currentUserLimit || "Unlimited"}`}
             </span>
           </Stack>
           <Stack
@@ -82,7 +85,7 @@ export const LicenseCard = ({
             width="134px" // standardize width of date column
           >
             {compareAsc(
-              new Date(license.claims.license_expires * 1000),
+              new Date((license.claims.license_expires as number) * 1000),
               new Date(),
             ) < 1 ? (
               <Pill
@@ -95,7 +98,7 @@ export const LicenseCard = ({
             )}
             <span className={styles.licenseExpires}>
               {dayjs
-                .unix(license.claims.license_expires)
+                .unix(license.claims.license_expires as number)
                 .format("MMMM D, YYYY")}
             </span>
           </Stack>

From 42565c889264ad9b99b329e60ab3cc350692255d Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Wed, 21 Jun 2023 21:07:07 +0000
Subject: [PATCH 2/2] fix type and add tests

---
 site/src/api/api.ts                           |  2 +-
 .../LicenseCard/LicenseCard.test.tsx          | 70 +++++++++++++++++++
 .../components/LicenseCard/LicenseCard.tsx    |  4 +-
 .../LicensesSettingsPageView.tsx              |  4 +-
 4 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 site/src/components/LicenseCard/LicenseCard.test.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 9b0af8f942e0e..df8477b65e926 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -1006,7 +1006,7 @@ export const getWorkspaceBuildParameters = async (
   return response.data
 }
 type Claims = {
-  license_expires?: number
+  license_expires: number
   account_type?: string
   account_id?: string
   trial: boolean
diff --git a/site/src/components/LicenseCard/LicenseCard.test.tsx b/site/src/components/LicenseCard/LicenseCard.test.tsx
new file mode 100644
index 0000000000000..cdef5a54f39c1
--- /dev/null
+++ b/site/src/components/LicenseCard/LicenseCard.test.tsx
@@ -0,0 +1,70 @@
+import { screen } from "@testing-library/react"
+import { render } from "../../testHelpers/renderHelpers"
+import { LicenseCard } from "./LicenseCard"
+import { MockLicenseResponse } from "testHelpers/entities"
+
+describe("LicenseCard", () => {
+  it("renders (smoke test)", async () => {
+    // When
+    render(
+      <LicenseCard
+        license={MockLicenseResponse[0]}
+        userLimitActual={1}
+        userLimitLimit={10}
+        onRemove={() => null}
+        isRemoving={false}
+      />,
+    )
+
+    // Then
+    await screen.findByText("#1")
+    await screen.findByText("1 / 10")
+    await screen.findByText("Enterprise")
+  })
+
+  it("renders userLimit as unlimited if there is not user limit", async () => {
+    // When
+    render(
+      <LicenseCard
+        license={MockLicenseResponse[0]}
+        userLimitActual={1}
+        userLimitLimit={undefined}
+        onRemove={() => null}
+        isRemoving={false}
+      />,
+    )
+
+    // Then
+    await screen.findByText("#1")
+    await screen.findByText("1 / Unlimited")
+    await screen.findByText("Enterprise")
+  })
+
+  it("renders license's user_limit when it is available instead of using the default", async () => {
+    const licenseUserLimit = 3
+    const license = {
+      ...MockLicenseResponse[0],
+      claims: {
+        ...MockLicenseResponse[0].claims,
+        features: {
+          ...MockLicenseResponse[0].claims.features,
+          user_limit: licenseUserLimit,
+        },
+      },
+    }
+
+    // When
+    render(
+      <LicenseCard
+        license={license}
+        userLimitActual={1}
+        userLimitLimit={100} // This should not be used
+        onRemove={() => null}
+        isRemoving={false}
+      />,
+    )
+
+    // Then
+    await screen.findByText("1 / 3")
+  })
+})
diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
index 09cfc84d1222e..4e6596b91a324 100644
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -85,7 +85,7 @@ export const LicenseCard = ({
             width="134px" // standardize width of date column
           >
             {compareAsc(
-              new Date((license.claims.license_expires as number) * 1000),
+              new Date(license.claims.license_expires * 1000),
               new Date(),
             ) < 1 ? (
               <Pill
@@ -98,7 +98,7 @@ export const LicenseCard = ({
             )}
             <span className={styles.licenseExpires}>
               {dayjs
-                .unix(license.claims.license_expires as number)
+                .unix(license.claims.license_expires)
                 .format("MMMM D, YYYY")}
             </span>
           </Stack>
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index 32519437522d3..b1f5c678ac630 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -71,8 +71,8 @@ const LicensesSettingsPageView: FC<Props> = ({
           {licenses
             ?.sort(
               (a, b) =>
-                new Date(b.claims.license_expires as number).valueOf() -
-                new Date(a.claims.license_expires as number).valueOf(),
+                new Date(b.claims.license_expires).valueOf() -
+                new Date(a.claims.license_expires).valueOf(),
             )
             .map((license) => (
               <LicenseCard