feat(identities) show expiration in identity list (canonical#2186)

## Done

- feat(identities) show expiration in identity list

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask @Kxiru
or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](https://github.com/canonical/lxd-ui/blob/main/CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
    - open permissions > identities
    - issue a new token for expiry in 1 second
    - check expiry warning within list

## Screenshots

[if relevant, include a screenshot or screen capture]

Author: edlerd

src/pages/permissions/IdentityExpiration.tsx

@@ -0,0 +1,26 @@
+import { type FC } from "react";
+import { isBeforeNow, isoTimeToString, UNDEFINED_DATE } from "util/helpers";
+import type { LxdIdentity } from "types/permissions";
+import { Icon, Tooltip } from "@canonical/react-components";
+
+interface Props {
+  identity: LxdIdentity;
+}
+
+const IdentityExpiration: FC<Props> = ({ identity }) => {
+  const expiry = identity.expires_at ?? UNDEFINED_DATE;
+  const isValid = expiry !== UNDEFINED_DATE;
+  const isExpired = isBeforeNow(expiry);
+  const caption = isValid ? isoTimeToString(expiry) : "-";
+
+  return isExpired ? (
+    <Tooltip message="Has expired" position="right">
+      <span>{caption}</span>
+      <Icon name="warning" className="u-margin-left--small" />
+    </Tooltip>
+  ) : (
+    caption
+  );
+};
+
+export default IdentityExpiration;

src/pages/permissions/PermissionIdentities.tsx

@@ -41,6 +41,7 @@ import {
 import CreateIdentity from "pages/permissions/CreateIdentity";
 import PermissionIdentitiesActions from "pages/permissions/PermissionIdentitiesActions";
 import ResourceLabel from "components/ResourceLabel";
+import IdentityExpiration from "pages/permissions/IdentityExpiration";
 import EditIdentityGroupsPanel from "./panels/EditIdentityGroupsPanel";
 
 const PermissionIdentities: FC = () => {
@@ -74,6 +75,7 @@ const PermissionIdentities: FC = () => {
     { content: "ID", sortKey: "id", className: "identity-id" },
     { content: "Auth method", sortKey: "authmethod", className: "auth-method" },
     { content: "Type", sortKey: "type", className: "identity-type" },
+    { content: "Expires", sortKey: "expires", className: "expires" },
     {
       content: "Groups",
       sortKey: "groups",
@@ -183,6 +185,11 @@ const PermissionIdentities: FC = () => {
           "aria-label": "Type",
           className: "u-truncate identity-type",
         },
+        {
+          content: <IdentityExpiration identity={identity} />,
+          role: "cell",
+          "aria-label": "Expires",
+        },
         {
           content: getGroupLink(),
           role: "cell",
@@ -224,6 +231,7 @@ const PermissionIdentities: FC = () => {
         name: name.toLowerCase(),
         authentication_method: identity.authentication_method,
         type: identity.type,
+        expires: identity.expires_at ?? "",
         groups: identity.groups?.length || 0,
       },
     };

src/util/helpers.tsx

@@ -34,6 +34,14 @@ export const isoTimeToString = (isoTime: string): string => {
   });
 };
 
+export const isBeforeNow = (time: string): boolean => {
+  if (!time || time === UNDEFINED_DATE) {
+    return false;
+  }
+  const parsed = Date.parse(time);
+  return !Number.isNaN(parsed) && parsed < Date.now();
+};
+
 export const stringToIsoTime = (dateTime: string): string => {
   const date = new Date(dateTime);
   return date.toISOString();