upcoming: [DI-22217] - Review changes: Added a TableRowLabelMap for t…

…he TableHead Row, Replaced referencing colors directly and used theme styling for colors
linode · Dec 5, 2024 · 0e44318 · 0e44318
1 parent 07fb774
commit 0e44318
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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',
+  },
+];