From b37eb71f799984bd047557c95e77a076edd7d129 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Fri, 25 Apr 2025 16:40:47 +0200
Subject: [PATCH] Wizard: Add retirement date column

This adds retirement date column to the Packages table and populates it with `end_date` from content-services searchRPMs endpoint.
---
 .../steps/Packages/Packages.tsx               | 65 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
index 2af4fd55..52439e46 100644
--- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
+++ b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
@@ -33,6 +33,9 @@ import {
 } from '@patternfly/react-core';
 import { Modal } from '@patternfly/react-core';
 import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
   ExternalLinkAltIcon,
   HelpIcon,
   OptimizeIcon,
@@ -1002,6 +1005,55 @@ const Packages = () => {
     );
   };
 
+  const formatDate = (date: string | undefined) => {
+    if (!date) {
+      return <>N/A</>;
+    }
+
+    const retirementDate = new Date(date);
+
+    const currentDate = new Date();
+    const msPerDay = 1000 * 60 * 60 * 24;
+    const differenceInDays = Math.round(
+      (retirementDate.getTime() - currentDate.getTime()) / msPerDay
+    );
+
+    let icon;
+
+    switch (true) {
+      case differenceInDays < 0:
+        icon = (
+          <Icon status="danger" isInline>
+            <ExclamationCircleIcon />
+          </Icon>
+        );
+        break;
+      case differenceInDays <= 365:
+        icon = (
+          <Icon status="warning" isInline>
+            <ExclamationTriangleIcon />
+          </Icon>
+        );
+        break;
+      case differenceInDays > 365:
+        icon = (
+          <Icon status="success" isInline>
+            <CheckCircleIcon />
+          </Icon>
+        );
+        break;
+    }
+
+    return (
+      <>
+        {icon}{' '}
+        {retirementDate.toLocaleString('en-US', { month: 'short' }) +
+          ' ' +
+          retirementDate.getFullYear()}
+      </>
+    );
+  };
+
   const composePkgTable = () => {
     let rows: ReactElement[] = [];
 
@@ -1076,6 +1128,7 @@ const Packages = () => {
                   </Popover>
                 </Td>
                 <Td>N/A</Td>
+                <Td>N/A</Td>
                 {grp.repository === 'distro' ? (
                   <>
                     <Td>Red Hat</Td>
@@ -1166,6 +1219,13 @@ const Packages = () => {
                     source.type === 'module' ? source.stream : 'N/A'
                   )}
                 </Td>
+                <Td>
+                  {pkg.sources?.map((source) =>
+                    source.type === 'module'
+                      ? formatDate(source.end_date)
+                      : 'N/A'
+                  )}
+                </Td>
                 {pkg.repository === 'distro' ? (
                   <>
                     <Td>Red Hat</Td>
@@ -1286,9 +1346,10 @@ const Packages = () => {
           <Tr>
             <Th aria-label="Expanded" />
             <Th aria-label="Selected" />
-            <Th width={30}>Name</Th>
+            <Th width={20}>Name</Th>
             <Th width={20}>Application stream</Th>
-            <Th width={30}>Package repository</Th>
+            <Th width={20}>Retirement date</Th>
+            <Th width={20}>Package repository</Th>
           </Tr>
         </Thead>
         {bodyContent}