From 6541938f1643767df2281888efead841a64468f3 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Sat, 22 Jan 2022 13:26:16 -0700
Subject: [PATCH] Added TableRow customized style option (#1437)

---
 .../FormComponents/common/styleLibrary.ts     |  9 +++++++++
 .../Common/TableWrapper/TableWrapper.tsx      | 20 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index e5c6f14e6..63e22f769 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -1266,3 +1266,12 @@ export const textStyleUtils: any = {
     color: "#8399AB",
   },
 };
+
+// These classes are meant to be used as React.CSSProperties for TableWrapper
+export const TableRowPredefStyles: any = {
+  deleted: {
+    color: "#ACACAC",
+    backgroundColor: "#FDFDFD",
+    fontStyle: "italic",
+  }
+}
diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
index b2456ba75..673e16f25 100644
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
@@ -38,6 +38,7 @@ import history from "../../../../history";
 import {
   checkboxIcons,
   radioIcons,
+  TableRowPredefStyles,
 } from "../FormComponents/common/styleLibrary";
 
 //Interfaces for table Items
@@ -104,6 +105,11 @@ interface TableWrapperProps {
   sortConfig?: ISortConfig;
   disabled?: boolean;
   onSelectAll?: () => void;
+  rowStyle?: ({
+    index,
+  }: {
+    index: number;
+  }) => "deleted" | "" | React.CSSProperties;
 }
 
 const borderColor = "#9c9c9c80";
@@ -458,6 +464,7 @@ const TableWrapper = ({
   autoScrollToBottom = false,
   disabled = false,
   onSelectAll,
+  rowStyle,
 }: TableWrapperProps) => {
   const [columnSelectorOpen, setColumnSelectorOpen] = useState<boolean>(false);
   const [anchorEl, setAnchorEl] = React.useState<any>(null);
@@ -637,6 +644,19 @@ const TableWrapper = ({
                       scrollToIndex={
                         autoScrollToBottom ? records.length - 1 : -1
                       }
+                      rowStyle={(r) => {
+                        if (rowStyle) {
+                          const returnElement = rowStyle(r);
+
+                          if (typeof returnElement === "string") {
+                            return get(TableRowPredefStyles, returnElement, {});
+                          }
+
+                          return returnElement;
+                        }
+
+                        return {};
+                      }}
                     >
                       {hasSelect && (
                         <Column