Fleet UI CX: Add license expiration to user settings page (#9396)

changes/9370-license-expiry

@@ -0,0 +1 @@
+- Add license expiry to account information page for premium users

frontend/pages/UserSettingsPage/UserSidePanel/UserSidePanel.tsx

@@ -11,7 +11,12 @@ import Avatar from "components/Avatar";
 import Button from "components/buttons/Button";
 import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
 
-import { generateRole, generateTeam, greyCell } from "utilities/helpers";
+import {
+  generateRole,
+  generateTeam,
+  greyCell,
+  readableDate,
+} from "utilities/helpers";
 
 interface IUserSidePanelProps {
   currentUser: IUser;
@@ -26,7 +31,7 @@ const UserSidePanel = ({
   onChangePassword,
   onGetApiToken,
 }: IUserSidePanelProps): JSX.Element => {
-  const { isPremiumTier } = useContext(AppContext);
+  const { isPremiumTier, config } = useContext(AppContext);
   const [versionData, setVersionData] = useState<IVersionData>();
 
   useEffect(() => {
@@ -91,6 +96,16 @@ const UserSidePanel = ({
           {roleText}
         </p>
       </div>
+      {isPremiumTier && config && (
+        <div className={`${baseClass}__more-info-detail`}>
+          <p className={`${baseClass}__header`}>License expiration date</p>
+          <p
+            className={`${baseClass}__description ${baseClass}__license-expiration`}
+          >
+            {readableDate(config.license.expiration)}
+          </p>
+        </div>
+      )}
       <div className={`${baseClass}__more-info-detail`}>
         <p className={`${baseClass}__header`}>Password</p>
       </div>

frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx

@@ -15,6 +15,7 @@ import Spinner from "components/Spinner";
 import DataError from "components/DataError";
 import Icon from "components/Icon";
 import TooltipWrapper from "components/TooltipWrapper";
+import { readableDate } from "utilities/helpers";
 
 import RequestCSRModal from "./components/RequestCSRModal";
 import EditTeamModal from "./components/EditTeamModal";
@@ -24,16 +25,6 @@ import EditTeamModal from "./components/EditTeamModal";
 
 const baseClass = "mdm-integrations";
 
-const readableDate = (date: string) => {
-  const dateString = new Date(date);
-
-  return new Intl.DateTimeFormat(navigator.language, {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  }).format(dateString);
-};
-
 const Mdm = (): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);

frontend/utilities/helpers.ts

@@ -683,6 +683,16 @@ export const licenseExpirationWarning = (expiration: string): boolean => {
   return isAfter(new Date(), new Date(expiration));
 };
 
+export const readableDate = (date: string) => {
+  const dateString = new Date(date);
+
+  return new Intl.DateTimeFormat(navigator.language, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(dateString);
+};
+
 export const performanceIndicator = (
   scheduledQueryStats: IScheduledQueryStats
 ): string => {
@@ -850,6 +860,7 @@ export default {
   humanQueryLastRun,
   inMilliseconds,
   licenseExpirationWarning,
+  readableDate,
   secondsToHms,
   secondsToDhms,
   labelSlug,