Merge pull request #22 from dwarfered/21-default-sort-orders-and-show…

…-long-lived-secret-dates Default sort orders and show long lived secret dates
dwarfered · Jan 18, 2025 · bfd4a1f · bfd4a1f
2 parents 4f16471 + de90eed
commit bfd4a1f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 46 deletions.
diff --git a/components/app-registrations/CredentialStatusGrid.columns.tsx b/components/app-registrations/CredentialStatusGrid.columns.tsx
@@ -41,13 +41,6 @@ function getExpiredCredentialsCount(item: GridItem): number {
   );
 }
 
-function getLongLivedCredentialsCount(item: GridItem): number {
-  return (
-    item.longLivedKeyCredentials.length +
-    item.longLivedPasswordCredentials.length
-  );
-}
-
 function getWarningDates(item: GridItem): Date[] {
   const allWarningTimes = [
     ...item.warningPasswordCredentials.map((x) =>
@@ -66,6 +59,24 @@ function getEarliestWarningDate(item: GridItem): Date | null {
   return dates.length > 0 ? dates[0] : null;
 }
 
+function getLongLivedDates(item: GridItem): Date[] {
+  const allLongLivedDates = [
+    ...(item.longLivedPasswordCredentials || []).map(
+      (x) => new Date(x.endDateTime)
+    ),
+    ...(item.longLivedKeyCredentials || []).map((x) => new Date(x.endDateTime)),
+  ];
+
+  const validDates = allLongLivedDates.filter((date) => !isNaN(date.getTime()));
+
+  return validDates.sort((a, b) => b.getTime() - a.getTime());
+}
+
+function getLatestLongLivedDate(item: GridItem): Date | null {
+  const dates = getLongLivedDates(item);
+  return dates.length > 0 ? dates[0] : null;
+}
+
 export const credentialStatusColumns = (
   isAuthenticated: boolean
 ): TableColumnDefinition<GridItem>[] => [
@@ -105,7 +116,7 @@ export const credentialStatusColumns = (
         );
       }
 
-      if (activeCount === 1) {
+      if (activeCount === 1 || activeCount === 2) {
         return (
           <TableCellLayout
             media={<CheckmarkCircleFilled {...validIconStyleProps} />}
@@ -132,13 +143,7 @@ export const credentialStatusColumns = (
       const expiredCount = getExpiredCredentialsCount(item);
 
       if (expiredCount === 0) {
-        return (
-          <TableCellLayout
-            media={ undefined}
-          >
-            -
-          </TableCellLayout>
-        );
+        return <TableCellLayout media={undefined}>-</TableCellLayout>;
       }
 
       return (
@@ -151,25 +156,28 @@ export const credentialStatusColumns = (
 
   createTableColumn<GridItem>({
     columnId: "longLived",
-    compare: (a, b) =>
-      getLongLivedCredentialsCount(a) - getLongLivedCredentialsCount(b),
+    compare: (a, b) => {
+      const latestA = getLatestLongLivedDate(a);
+      const latestB = getLatestLongLivedDate(b);
+
+      // Handle null values (no valid dates)
+      if (!latestA && !latestB) return 0;
+      if (!latestA) return 1; // Put nulls at the "bottom"
+      if (!latestB) return -1;
+
+      return latestA.getTime() - latestB.getTime();
+    },
     renderHeaderCell: () => "Long-lived",
     renderCell: (item) => {
-      const count = getLongLivedCredentialsCount(item);
+      const longLivedDates = getLongLivedDates(item);
 
-      if (count === 0) {
-        return (
-          <TableCellLayout
-            media={ undefined }
-          >
-            -
-          </TableCellLayout>
-        );
+      if (longLivedDates.length === 0) {
+        return <TableCellLayout media={undefined}>-</TableCellLayout>;
       }
 
       return (
         <TableCellLayout media={<ErrorCircleFilled {...errorIconStyleProps} />}>
-          {count}
+          <DateList dates={longLivedDates} />
         </TableCellLayout>
       );
     },
@@ -194,18 +202,13 @@ export const credentialStatusColumns = (
       const expiringCount = warningDates.length;
 
       if (expiringCount === 0) {
-        return (
-          <TableCellLayout
-          >
-            -
-          </TableCellLayout>
-        );
+        return <TableCellLayout>-</TableCellLayout>;
       }
 
       return (
         <TableCellLayout media={<WarningFilled {...warningIconStyleProps} />}>
-        <DateList dates={warningDates} />
-      </TableCellLayout>
+          <DateList dates={warningDates} />
+        </TableCellLayout>
       );
     },
   }),

diff --git a/components/app-registrations/CredentialStatusGrid.data-model.ts b/components/app-registrations/CredentialStatusGrid.data-model.ts
@@ -44,6 +44,8 @@ export function generateApplications(): Application[] {
 
   const twoYearsFromNow = new Date();
   twoYearsFromNow.setFullYear(now.getFullYear() + 2);
+  const fourYearsFromNow = new Date();
+  fourYearsFromNow.setFullYear(now.getFullYear() + 4);
 
   const twoMonthsFromNow = new Date();
   twoMonthsFromNow.setMonth(now.getMonth() + 2);
@@ -70,7 +72,7 @@ export function generateApplications(): Application[] {
           secretText: null,
           customKeyIdentifier: null,
           keyId: "password-id-long-lived",
-          endDateTime: twoYearsFromNow.toISOString(),
+          endDateTime: fourYearsFromNow.toISOString(),
           hint: "LLP",
           displayName: "Long Lived Password",
         },

diff --git a/components/enterprise-applications/SamlStatusGrid.tsx b/components/enterprise-applications/SamlStatusGrid.tsx
@@ -109,16 +109,16 @@ export default function SamlStatusGrid() {
     );
   }
 
-  // type SortDirection = "ascending" | "descending";
-  // interface SortState {
-  //   sortColumn?: string;
-  //   sortDirection: SortDirection;
-  // }
+  type SortDirection = "ascending" | "descending";
+  interface SortState {
+    sortColumn: string | undefined;
+    sortDirection: SortDirection;
+  }
 
-  // const defaultSortState: SortState = {
-  //   sortColumn: "warnCredential",
-  //   sortDirection: "ascending",
-  // };
+  const newSortState: SortState = {
+    sortColumn: "expiry",
+    sortDirection: "ascending",
+  };
 
   return (
     <div>
@@ -153,7 +153,7 @@ export default function SamlStatusGrid() {
         columns={columns}
         sortable
         getRowId={(item) => item.displayName}
-        // defaultSortState={defaultSortState}
+        defaultSortState={newSortState}
         style={{ marginBottom: "10px" }}
       >
         <DataGridHeader>