coder · Kira-Pilot · May 25, 2023 · May 25, 2023 · May 25, 2023
diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -6,6 +6,8 @@ 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"
 
 type LicenseCardProps = {
   license: License
@@ -67,29 +69,46 @@ export const LicenseCard = ({
             flex: 1,
           }}
         >
-          <Stack direction="column" spacing={0}>
+          <Stack direction="column" spacing={0} alignItems="center">
             <span className={styles.secondaryMaincolor}>Users</span>
             <span className={styles.userLimit}>
               {userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
             </span>
           </Stack>
-
-          <Stack direction="column" spacing={0}>
-            <span className={styles.secondaryMaincolor}>Valid Until</span>
+          <Stack
+            direction="column"
+            spacing={0}
+            alignItems="center"
+            width="134px" // standardize width of date column
+          >
+            {compareAsc(
+              new Date(license.claims.license_expires * 1000),
+              new Date(),
+            ) < 1 ? (
+              <Pill
+                className={styles.expiredBadge}
+                text="Expired"
+                type="error"
+              />
+            ) : (
+              <span className={styles.secondaryMaincolor}>Valid Until</span>
+            )}
             <span className={styles.licenseExpires}>
               {dayjs
                 .unix(license.claims.license_expires)
                 .format("MMMM D, YYYY")}
             </span>
           </Stack>
-          <Button
-            className={styles.removeButton}
-            variant="text"
-            size="small"
-            onClick={() => setLicenseIDMarkedForRemoval(license.id)}
-          >
-            Remove
-          </Button>
+          <Stack spacing={2}>
+            <Button
+              className={styles.removeButton}
+              variant="text"
+              size="small"
+              onClick={() => setLicenseIDMarkedForRemoval(license.id)}
+            >
+              Remove
+            </Button>
+          </Stack>
         </Stack>
       </Stack>
     </Paper>
@@ -119,6 +138,9 @@ const useStyles = makeStyles((theme) => ({
   licenseExpires: {
     color: theme.palette.text.secondary,
   },
+  expiredBadge: {
+    marginBottom: theme.spacing(0.5),
+  },
   secondaryMaincolor: {
     color: theme.palette.text.secondary,
   },

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
@@ -1,33 +1,17 @@
-import { GetLicensesResponse } from "api/api"
 import LicensesSettingsPageView from "./LicensesSettingsPageView"
+import { MockLicenseResponse } from "testHelpers/entities"
 
 export default {
   title: "pages/LicensesSettingsPageView",
   component: LicensesSettingsPageView,
 }
 
-const licensesTest: GetLicensesResponse[] = [
-  {
-    id: 1,
-    uploaded_at: "1682346425",
-    expires_at: "1682346425",
-    uuid: "1",
-    claims: {
-      trial: false,
-      all_features: true,
-      version: 1,
-      features: {},
-      license_expires: 1682346425,
-    },
-  },
-]
-
 const defaultArgs = {
   showConfetti: false,
   isLoading: false,
   userLimitActual: 1,
   userLimitLimit: 10,
-  licenses: licensesTest,
+  licenses: MockLicenseResponse,
 }
 
 export const Default = {

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -68,16 +68,22 @@ const LicensesSettingsPageView: FC<Props> = ({
 
       {!isLoading && licenses && licenses?.length > 0 && (
         <Stack spacing={4}>
-          {licenses?.map((license) => (
-            <LicenseCard
-              key={license.id}
-              license={license}
-              userLimitActual={userLimitActual}
-              userLimitLimit={userLimitLimit}
-              isRemoving={isRemovingLicense}
-              onRemove={removeLicense}
-            />
-          ))}
+          {licenses
+            ?.sort(
+              (a, b) =>
+                new Date(b.claims.license_expires as number).valueOf() -
+                new Date(a.claims.license_expires as number).valueOf(),
+            )
+            .map((license) => (
+              <LicenseCard
+                key={license.id}
+                license={license}
+                userLimitActual={userLimitActual}
+                userLimitLimit={userLimitLimit}
+                isRemoving={isRemovingLicense}
+                onRemove={removeLicense}
+              />
+            ))}
         </Stack>
       )}
 

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1,8 +1,8 @@
-import { withDefaultFeatures } from "./../api/api"
+import { withDefaultFeatures, GetLicensesResponse } from "api/api"
 import { FieldError } from "api/errors"
 import { everyOneGroup } from "utils/groups"
-import * as Types from "../api/types"
-import * as TypesGen from "../api/typesGenerated"
+import * as Types from "api/types"
+import * as TypesGen from "api/typesGenerated"
 import range from "lodash/range"
 import { Permissions } from "xServices/auth/authXService"
 import { TemplateVersionFiles } from "utils/templateVersion"
@@ -1732,3 +1732,45 @@ export const MockStartupLogs: TypesGen.WorkspaceAgentStartupLog[] = [
     level: "info",
   },
 ]
+
+export const MockLicenseResponse: GetLicensesResponse[] = [
+  {
+    id: 1,
+    uploaded_at: "1660104000",
+    expires_at: "3420244800", // expires on 5/20/2078
+    uuid: "1",
+    claims: {
+      trial: false,
+      all_features: true,
+      version: 1,
+      features: {},
+      license_expires: 3420244800,
+    },
+  },
+  {
+    id: 1,
+    uploaded_at: "1660104000",
+    expires_at: "1660104000", // expired on 8/10/2022
+    uuid: "1",
+    claims: {
+      trial: false,
+      all_features: true,
+      version: 1,
+      features: {},
+      license_expires: 1660104000,
+    },
+  },
+  {
+    id: 1,
+    uploaded_at: "1682346425",
+    expires_at: "1682346425", // expired on 4/24/2023
+    uuid: "1",
+    claims: {
+      trial: false,
+      all_features: true,
+      version: 1,
+      features: {},
+      license_expires: 1682346425,
+    },
+  },
+]