From 0e44318a93d3dad5f27d4504a1db05acccf61781 Mon Sep 17 00:00:00 2001
From: santoshp210-akamai
 <159890961+santoshp210-akamai@users.noreply.github.com>
Date: Thu, 5 Dec 2024 21:28:40 +0530
Subject: [PATCH] upcoming: [DI-22217] - Review changes: Added a
 TableRowLabelMap for the TableHead Row, Replaced referencing colors directly
 and used theme styling for colors

---
 .../Alerts/AlertsListing/AlertListing.tsx     | 58 +++++--------------
 .../Alerts/AlertsListing/AlertTableRow.tsx    | 10 +++-
 .../Alerts/AlertsListing/constants.ts         | 22 +++++++
 3 files changed, 45 insertions(+), 45 deletions(-)
 create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx
index f7105d00e48..cdeee1703ae 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx
@@ -14,6 +14,7 @@ import { StyledPlaceholder } from 'src/features/StackScripts/StackScriptBase/Sta
 import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts';
 
 import { AlertTableRow } from './AlertTableRow';
+import { AlertListingTableLabelMap } from './constants';
 
 export const AlertListing = () => {
   // These are dummy order value and handleOrder methods, will replace them in the next PR
@@ -39,50 +40,19 @@ export const AlertListing = () => {
       <Table colCount={7} size="small">
         <TableHead>
           <TableRow>
-            <TableSortCell
-              active={true}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="alertName"
-            >
-              Alert Name
-            </TableSortCell>
-            <TableSortCell
-              handleClick={() => {
-                'asc';
-              }}
-              active={true}
-              direction={order}
-              label="service"
-              size="small"
-            >
-              Service
-            </TableSortCell>
-            <TableSortCell
-              active={true}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="status"
-            >
-              Status
-            </TableSortCell>
-            <TableSortCell
-              active={true}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="lastModified"
-            >
-              Last Modified
-            </TableSortCell>
-            <TableSortCell
-              active={true}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="createdBy"
-              size="small"
-            >
-              Created By
-            </TableSortCell>
+            {AlertListingTableLabelMap.map((value, idx) => {
+              return (
+                <TableSortCell
+                  active={true}
+                  direction={order}
+                  handleClick={handleOrderChange}
+                  key={idx}
+                  label={value.label}
+                >
+                  {value.colName}
+                </TableSortCell>
+              );
+            })}
             <TableCell actionCell />
           </TableRow>
         </TableHead>
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx
index 9e119238ac8..f94fc0ad3d4 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx
@@ -9,6 +9,7 @@ import { capitalize } from 'src/utilities/capitalize';
 import { AlertActionMenu } from './AlertActionMenu';
 
 import type { Alert } from '@linode/api-v4';
+import { useTheme } from '@mui/material';
 
 interface Props {
   /**
@@ -20,12 +21,19 @@ interface Props {
 export const AlertTableRow = (props: Props) => {
   const { alert } = props;
   const { created_by, id, label, service_type, status, updated } = alert;
+  const theme = useTheme();
   return (
     <TableRow data-qa-alert-cell={id} key={`alert-row-${id}`}>
       <TableCell>{label}</TableCell>
       <TableCell>{service_type}</TableCell>
       <TableCell>
-        <Typography color={status === 'enabled' ? 'limegreen' : 'gray'}>
+        <Typography
+          color={
+            status === 'enabled'
+              ? theme.tokens.color.Green[70]
+              : theme.tokens.color.Neutrals[60]
+          }
+        >
           {capitalize(status)}
         </Typography>
       </TableCell>
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts
new file mode 100644
index 00000000000..5dd71994c12
--- /dev/null
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts
@@ -0,0 +1,22 @@
+export const AlertListingTableLabelMap = [
+  {
+    colName: 'AlertName',
+    label: 'alertName',
+  },
+  {
+    colName: 'Service',
+    label: 'service',
+  },
+  {
+    colName: 'Status',
+    label: 'status',
+  },
+  {
+    colName: 'Last Modified',
+    label: 'lastModified',
+  },
+  {
+    colName: 'Created By',
+    label: 'createdBy',
+  },
+];