Skip to content

Commit 4d4ffa2

Browse files
Kira-PilotKira-Pilot
authored
feat: add expiration indicators to license card (#7684)
* sorting licenses; add expiration badge * updated story
1 parent 0c66523 commit 4d4ffa2

File tree

4 files changed

+97
-43
lines changed

4 files changed

+97
-43
lines changed

‎site/src/components/LicenseCard/LicenseCard.tsx

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
66
import { Stack } from "components/Stack/Stack"
77
import dayjs from "dayjs"
88
import { useState } from "react"
9+
import { Pill } from "components/Pill/Pill"
10+
import { compareAsc } from "date-fns"
911

1012
type LicenseCardProps = {
1113
license: License
@@ -67,29 +69,46 @@ export const LicenseCard = ({
6769
flex: 1,
6870
}}
6971
>
70-
<Stack direction="column" spacing={0}>
72+
<Stack direction="column" spacing={0} alignItems="center">
7173
<span className={styles.secondaryMaincolor}>Users</span>
7274
<span className={styles.userLimit}>
7375
{userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
7476
</span>
7577
</Stack>
76-
77-
<Stack direction="column" spacing={0}>
78-
<span className={styles.secondaryMaincolor}>Valid Until</span>
78+
<Stack
79+
direction="column"
80+
spacing={0}
81+
alignItems="center"
82+
width="134px" // standardize width of date column
83+
>
84+
{compareAsc(
85+
new Date(license.claims.license_expires * 1000),
86+
new Date(),
87+
) < 1 ? (
88+
<Pill
89+
className={styles.expiredBadge}
90+
text="Expired"
91+
type="error"
92+
/>
93+
) : (
94+
<span className={styles.secondaryMaincolor}>Valid Until</span>
95+
)}
7996
<span className={styles.licenseExpires}>
8097
{dayjs
8198
.unix(license.claims.license_expires)
8299
.format("MMMM D, YYYY")}
83100
</span>
84101
</Stack>
85-
<Button
86-
className={styles.removeButton}
87-
variant="text"
88-
size="small"
89-
onClick={() => setLicenseIDMarkedForRemoval(license.id)}
90-
>
91-
Remove
92-
</Button>
102+
<Stack spacing={2}>
103+
<Button
104+
className={styles.removeButton}
105+
variant="text"
106+
size="small"
107+
onClick={() => setLicenseIDMarkedForRemoval(license.id)}
108+
>
109+
Remove
110+
</Button>
111+
</Stack>
93112
</Stack>
94113
</Stack>
95114
</Paper>
@@ -119,6 +138,9 @@ const useStyles = makeStyles((theme) => ({
119138
licenseExpires: {
120139
color: theme.palette.text.secondary,
121140
},
141+
expiredBadge: {
142+
marginBottom: theme.spacing(0.5),
143+
},
122144
secondaryMaincolor: {
123145
color: theme.palette.text.secondary,
124146
},

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,17 @@
1-
import { GetLicensesResponse } from "api/api"
21
import LicensesSettingsPageView from "./LicensesSettingsPageView"
2+
import { MockLicenseResponse } from "testHelpers/entities"
33

44
export default {
55
title: "pages/LicensesSettingsPageView",
66
component: LicensesSettingsPageView,
77
}
88

9-
const licensesTest: GetLicensesResponse[] = [
10-
{
11-
id: 1,
12-
uploaded_at: "1682346425",
13-
expires_at: "1682346425",
14-
uuid: "1",
15-
claims: {
16-
trial: false,
17-
all_features: true,
18-
version: 1,
19-
features: {},
20-
license_expires: 1682346425,
21-
},
22-
},
23-
]
24-
259
const defaultArgs = {
2610
showConfetti: false,
2711
isLoading: false,
2812
userLimitActual: 1,
2913
userLimitLimit: 10,
30-
licenses: licensesTest,
14+
licenses: MockLicenseResponse,
3115
}
3216

3317
export const Default = {

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,22 @@ const LicensesSettingsPageView: FC<Props> = ({
6868

6969
{!isLoading && licenses && licenses?.length > 0 && (
7070
<Stack spacing={4}>
71-
{licenses?.map((license) => (
72-
<LicenseCard
73-
key={license.id}
74-
license={license}
75-
userLimitActual={userLimitActual}
76-
userLimitLimit={userLimitLimit}
77-
isRemoving={isRemovingLicense}
78-
onRemove={removeLicense}
79-
/>
80-
))}
71+
{licenses
72+
?.sort(
73+
(a, b) =>
74+
new Date(b.claims.license_expires as number).valueOf() -
75+
new Date(a.claims.license_expires as number).valueOf(),
76+
)
77+
.map((license) => (
78+
<LicenseCard
79+
key={license.id}
80+
license={license}
81+
userLimitActual={userLimitActual}
82+
userLimitLimit={userLimitLimit}
83+
isRemoving={isRemovingLicense}
84+
onRemove={removeLicense}
85+
/>
86+
))}
8187
</Stack>
8288
)}
8389

‎site/src/testHelpers/entities.ts

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { withDefaultFeatures } from "./../api/api"
1+
import { withDefaultFeatures, GetLicensesResponse } from "api/api"
22
import { FieldError } from "api/errors"
33
import { everyOneGroup } from "utils/groups"
4-
import * as Types from "../api/types"
5-
import * as TypesGen from "../api/typesGenerated"
4+
import * as Types from "api/types"
5+
import * as TypesGen from "api/typesGenerated"
66
import range from "lodash/range"
77
import { Permissions } from "xServices/auth/authXService"
88
import { TemplateVersionFiles } from "utils/templateVersion"
@@ -1732,3 +1732,45 @@ export const MockStartupLogs: TypesGen.WorkspaceAgentStartupLog[] = [
17321732
level: "info",
17331733
},
17341734
]
1735+
1736+
export const MockLicenseResponse: GetLicensesResponse[] = [
1737+
{
1738+
id: 1,
1739+
uploaded_at: "1660104000",
1740+
expires_at: "3420244800", // expires on 5/20/2078
1741+
uuid: "1",
1742+
claims: {
1743+
trial: false,
1744+
all_features: true,
1745+
version: 1,
1746+
features: {},
1747+
license_expires: 3420244800,
1748+
},
1749+
},
1750+
{
1751+
id: 1,
1752+
uploaded_at: "1660104000",
1753+
expires_at: "1660104000", // expired on 8/10/2022
1754+
uuid: "1",
1755+
claims: {
1756+
trial: false,
1757+
all_features: true,
1758+
version: 1,
1759+
features: {},
1760+
license_expires: 1660104000,
1761+
},
1762+
},
1763+
{
1764+
id: 1,
1765+
uploaded_at: "1682346425",
1766+
expires_at: "1682346425", // expired on 4/24/2023
1767+
uuid: "1",
1768+
claims: {
1769+
trial: false,
1770+
all_features: true,
1771+
version: 1,
1772+
features: {},
1773+
license_expires: 1682346425,
1774+
},
1775+
},
1776+
]

0 commit comments

Comments
 (0)