From c594f02948625df663ddb25911ada5ce97610e55 Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Fri, 23 Jun 2023 03:38:36 -0300
Subject: [PATCH] fix(site): display correct user_limit on license ui (#8118)

---
 site/src/api/api.ts                           |  2 +-
 .../LicenseCard/LicenseCard.test.tsx          | 70 +++++++++++++++++++
 .../components/LicenseCard/LicenseCard.tsx    |  9 ++-
 .../LicensesSettingsPageView.tsx              |  4 +-
 4 files changed, 79 insertions(+), 6 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 9b0af8f942..df8477b65e 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 0000000000..cdef5a54f3
--- /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 856c598cec..4e6596b91a 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
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index 3251943752..b1f5c678ac 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