chore: display the starting date when the license becomes active (#21162)

display the the not before date from the licenses endpoint to display a
Valid from license date in the UI

site/src/api/api.ts

@@ -359,6 +359,8 @@ export type DeploymentConfig = Readonly<{
 
 type Claims = {
 	license_expires: number;
+	// nbf is a standard JWT claim for "not before" - the license valid from date
+	nbf?: number;
 	account_type?: string;
 	account_id?: string;
 	trial: boolean;

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx

@@ -85,6 +85,19 @@ export const LicenseCard: FC<LicenseCardProps> = ({
 							{userLimitActual} {` / ${currentUserLimit || "Unlimited"}`}
 						</span>
 					</Stack>
+					{license.claims.nbf && (
+						<Stack
+							direction="column"
+							spacing={0}
+							alignItems="center"
+							width="134px" // standardize width of date column
+						>
+							<span css={styles.secondaryMaincolor}>Valid From</span>
+							<span css={styles.licenseExpires} className="license-valid-from">
+								{dayjs.unix(license.claims.nbf).format("MMMM D, YYYY")}
+							</span>
+						</Stack>
+					)}
 					<Stack
 						direction="column"
 						spacing={0}

site/src/testHelpers/entities.ts

@@ -3483,6 +3483,7 @@ export const MockLicenseResponse: GetLicensesResponse[] = [
 			version: 1,
 			features: {},
 			license_expires: 3420244800,
+			nbf: 1660104000, // valid from 8/10/2022
 		},
 	},
 	{
@@ -3497,6 +3498,7 @@ export const MockLicenseResponse: GetLicensesResponse[] = [
 			version: 1,
 			features: {},
 			license_expires: 3420244800,
+			nbf: 1660104000, // valid from 8/10/2022
 		},
 	},
 	{
@@ -3510,6 +3512,7 @@ export const MockLicenseResponse: GetLicensesResponse[] = [
 			version: 1,
 			features: {},
 			license_expires: 3420244800,
+			nbf: 1660104000, // valid from 8/10/2022
 		},
 	},
 	{
@@ -3523,6 +3526,7 @@ export const MockLicenseResponse: GetLicensesResponse[] = [
 			version: 1,
 			features: {},
 			license_expires: 1660104000,
+			nbf: 1628568000, // valid from 8/10/2021
 		},
 	},
 	{
@@ -3536,6 +3540,7 @@ export const MockLicenseResponse: GetLicensesResponse[] = [
 			version: 1,
 			features: {},
 			license_expires: 1682346425,
+			nbf: 1650810425, // valid from 4/24/2022
 		},
 	},
 ];