From 1b375967f03f1a7a4a13ff767cbf6650bb2fdd17 Mon Sep 17 00:00:00 2001
From: "dawid.wolosz" <dawid.wolosz@softwareone.com>
Date: Thu, 5 Dec 2024 15:30:24 +0100
Subject: [PATCH] added table gradient scroll bar info.

---
 ngui/ui/src/components/Table/Table.styles.ts |   9 +
 ngui/ui/src/components/Table/Table.tsx       | 294 +++++++++++--------
 2 files changed, 173 insertions(+), 130 deletions(-)

diff --git a/ngui/ui/src/components/Table/Table.styles.ts b/ngui/ui/src/components/Table/Table.styles.ts
index 85367cd64..e719b06d9 100644
--- a/ngui/ui/src/components/Table/Table.styles.ts
+++ b/ngui/ui/src/components/Table/Table.styles.ts
@@ -6,6 +6,15 @@ const useStyles = makeStyles()(() => ({
     display: "block",
     wordBreak: "initial" // shown inside MUI Drawer table inherits word-break: "break-word" which leads to letter-by-letter break in side modals, for example
   },
+  tableGradientOverlay: {
+    position: "absolute",
+    top: "0",
+    right: "0",
+    width: "250px",
+    height: "100%",
+    background: "linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+    pointerEvents: "none"
+  },
   hoverableRow: {
     cursor: "pointer"
   }
diff --git a/ngui/ui/src/components/Table/Table.tsx b/ngui/ui/src/components/Table/Table.tsx
index 05881cf99..7a6016e69 100644
--- a/ngui/ui/src/components/Table/Table.tsx
+++ b/ngui/ui/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Box, TableBody, TableCell, TableFooter, TableHead, TableRow } from "@mui/material";
 import MuiTable from "@mui/material/Table";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
@@ -92,6 +92,35 @@ const Table = ({
   manualGlobalFiltering
 }) => {
   const headerRef = useRef();
+  const tableContainerRef = useRef<HTMLElement>();
+  const [isGradientVisible, setIsGradientVisible] = useState(false);
+
+  const updateGradientVisibility = () => {
+    const container = tableContainerRef.current as HTMLElement;
+    if (container) {
+      const isScrollable = container.scrollWidth > container.clientWidth;
+      const atScrollEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth;
+      setIsGradientVisible(isScrollable && !atScrollEnd);
+    }
+  };
+
+  useEffect(() => {
+    const container = tableContainerRef.current;
+
+    updateGradientVisibility();
+
+    if (container) {
+      container.addEventListener("scroll", updateGradientVisibility);
+      window.addEventListener("resize", updateGradientVisibility);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", updateGradientVisibility);
+        window.removeEventListener("resize", updateGradientVisibility);
+      }
+    };
+  }, []);
 
   const { classes } = useStyles();
 
@@ -273,141 +302,146 @@ const Table = ({
       />
       {/* Wrap with box in order to make table fit 100% width with small amount of columns */}
       {/* TODO: Consider using MUI TableContainer */}
-      <Box
-        className={classes.tableContainer}
-        sx={{
-          overflowX
-        }}
-      >
-        {isLoading ? (
-          <TableLoader columnsCounter={columns.length ?? 5} showHeader />
-        ) : (
-          <MuiTable
-            sx={{
-              tableLayout
-            }}
-            style={{
-              ...stickyTableStyles
-            }}
-          >
-            {withHeader && (
-              <TableHead ref={headerRef}>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHeaderCell
-                        key={header.id}
-                        isSelectionColumn={header.column.id === SELECTION_COLUMN_ID}
-                        headerContext={header}
-                        stickyStyles={stickyHeaderCellStyles}
-                        getHeaderCellClassName={getHeaderCellClassName}
-                      />
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHead>
-            )}
-            <TableBody>
-              {isEmptyArray(rows) ? (
-                <TableRow
-                  sx={
-                    disableBottomBorderForLastRow
-                      ? {
-                          "&:last-child > td": {
-                            borderBottom: "none"
+      <div style={{ position: "relative" }}>
+        <Box
+          ref={tableContainerRef}
+          className={classes.tableContainer}
+          sx={{
+            overflowX,
+            position: "relative"
+          }}
+        >
+          {isLoading ? (
+            <TableLoader columnsCounter={columns.length ?? 5} showHeader />
+          ) : (
+            <MuiTable
+              sx={{
+                tableLayout
+              }}
+              style={{
+                ...stickyTableStyles
+              }}
+            >
+              {withHeader && (
+                <TableHead ref={headerRef}>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHeaderCell
+                          key={header.id}
+                          isSelectionColumn={header.column.id === SELECTION_COLUMN_ID}
+                          headerContext={header}
+                          stickyStyles={stickyHeaderCellStyles}
+                          getHeaderCellClassName={getHeaderCellClassName}
+                        />
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHead>
+              )}
+              <TableBody>
+                {isEmptyArray(rows) ? (
+                  <TableRow
+                    sx={
+                      disableBottomBorderForLastRow
+                        ? {
+                            "&:last-child > td": {
+                              borderBottom: "none"
+                            }
                           }
-                        }
-                      : {}
-                  }
-                >
-                  <TableCell align="center" colSpan={columns.length}>
-                    <FormattedMessage id={localization.emptyMessageId || DEFAULT_EMPTY_MESSAGE_ID} />
-                  </TableCell>
-                </TableRow>
-              ) : (
-                rows.map((row, index) => {
-                  const rowStyle = typeof getRowStyle === "function" ? getRowStyle(row.original) : {};
-
-                  return (
-                    <TableRow
-                      {...getRowHoverProperties(row)}
-                      data-test-id={`row_${index}`}
-                      key={row.id}
-                      style={rowStyle}
-                      sx={
-                        disableBottomBorderForLastRow
-                          ? {
-                              "&:last-child > td": {
-                                borderBottom: "none"
+                        : {}
+                    }
+                  >
+                    <TableCell align="center" colSpan={columns.length}>
+                      <FormattedMessage id={localization.emptyMessageId || DEFAULT_EMPTY_MESSAGE_ID} />
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.map((row, index) => {
+                    const rowStyle = typeof getRowStyle === "function" ? getRowStyle(row.original) : {};
+
+                    return (
+                      <TableRow
+                        {...getRowHoverProperties(row)}
+                        data-test-id={`row_${index}`}
+                        key={row.id}
+                        style={rowStyle}
+                        sx={
+                          disableBottomBorderForLastRow
+                            ? {
+                                "&:last-child > td": {
+                                  borderBottom: "none"
+                                }
                               }
-                            }
-                          : {}
-                      }
-                    >
-                      {row.getVisibleCells().map((cell) => {
-                        if (cell.column.id === SELECTION_COLUMN_ID) {
-                          return <TableBodyCell className={"tableRowSelection"} key={cell.id} cell={cell} />;
+                            : {}
                         }
-                        const Cell = memoBodyCells ? MemoTableBodyCell : TableBodyCell;
-
-                        return (
-                          <Cell
-                            key={cell.id}
-                            cell={cell}
-                            className={
-                              typeof getRowCellClassName === "function" ? getRowCellClassName(cell.getContext()) : undefined
-                            }
-                          />
-                        );
-                      })}
+                      >
+                        {row.getVisibleCells().map((cell) => {
+                          if (cell.column.id === SELECTION_COLUMN_ID) {
+                            return <TableBodyCell className={"tableRowSelection"} key={cell.id} cell={cell} />;
+                          }
+                          const Cell = memoBodyCells ? MemoTableBodyCell : TableBodyCell;
+
+                          return (
+                            <Cell
+                              key={cell.id}
+                              cell={cell}
+                              className={
+                                typeof getRowCellClassName === "function" ? getRowCellClassName(cell.getContext()) : undefined
+                              }
+                            />
+                          );
+                        })}
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+              {withFooter && (
+                <TableFooter>
+                  {table.getFooterGroups().map((footerGroup) => (
+                    <TableRow key={footerGroup.id}>
+                      {footerGroup.headers.map((footerContext) => (
+                        <TableFooterCell key={footerContext.id} footerContext={footerContext} />
+                      ))}
                     </TableRow>
-                  );
-                })
+                  ))}
+                </TableFooter>
               )}
-            </TableBody>
-            {withFooter && (
-              <TableFooter>
-                {table.getFooterGroups().map((footerGroup) => (
-                  <TableRow key={footerGroup.id}>
-                    {footerGroup.headers.map((footerContext) => (
-                      <TableFooterCell key={footerContext.id} footerContext={footerContext} />
-                    ))}
-                  </TableRow>
-                ))}
-              </TableFooter>
-            )}
-          </MuiTable>
-        )}
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          paddingTop: SPACING_1,
-          flexWrap: "wrap",
-          flexDirection: { xs: "column-reverse", md: "row" },
-          ":empty": { display: "none" }
-        }}
-      >
-        <InfoArea
-          counters={counters}
-          rowsCount={rows.length}
-          selectedRowsCount={selectedRowsCount}
-          dataTestIds={dataTestIds.infoAreaTestIds}
-          showAllLink={showAllLink}
-          pagination={paginationSettings}
-          withSearch={withSearch}
-          withSelection={withSelection}
-          withPagination={withPagination}
-        />
-        {paginationSettings.pageCount > 1 && (
-          <Pagination
-            count={paginationSettings.pageCount}
-            page={paginationSettings.pageIndex + 1}
-            paginationHandler={paginationSettings.onPageIndexChange}
+            </MuiTable>
+          )}
+        </Box>
+        {isGradientVisible && <div className={classes.tableGradientOverlay} />}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            paddingTop: SPACING_1,
+            flexWrap: "wrap",
+            flexDirection: { xs: "column-reverse", md: "row" },
+            ":empty": { display: "none" }
+          }}
+        >
+          <InfoArea
+            counters={counters}
+            rowsCount={rows.length}
+            selectedRowsCount={selectedRowsCount}
+            dataTestIds={dataTestIds.infoAreaTestIds}
+            showAllLink={showAllLink}
+            pagination={paginationSettings}
+            withSearch={withSearch}
+            withSelection={withSelection}
+            withPagination={withPagination}
           />
-        )}
-      </Box>
+          {paginationSettings.pageCount > 1 && (
+            <Pagination
+              count={paginationSettings.pageCount}
+              page={paginationSettings.pageIndex + 1}
+              paginationHandler={paginationSettings.onPageIndexChange}
+            />
+          )}
+        </Box>
+      </div>
     </div>
   );
 };