feat: Sticky Headers and Responsive Tables

Author: PintoGideon

src/components/FeedOutputBrowser/FeedOutputBrowser.css

@@ -12,95 +12,23 @@
   }
 }
 
-.feed-output-browser__button {
-  cursor: pointer;
-}
-
 .file-browser {
   height: 100%;
 }
 
-.file-browser__drawerbody {
-  overflow: scroll;
-}
-
-.file-browser .carousel {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  z-index: 999;
-}
-
-.file-browser__previewPanel .pf-v5-c-drawer__content,
-.file-browser__previewPanel .pf-v5-c-drawer__panel,
-.file-browser__previewPanel .pf-v5-c-drawer__panel-main {
-  overflow: hidden !important;
-}
-
-.file-browser__table--fileName {
-  display: flex;
-  flex-direction: row;
-}
-
 .file-browser__header {
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   margin-right: 0.25em;
 }
 
-.file-browser__header__info {
-  gap: 2rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
 @media screen and (min-width: 1024px) {
   .file-browser__header {
     display: flex;
   }
 }
 
-.file-browser .pf-c-breadcrumb {
-  cursor: pointer;
-  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
-}
-
-.file-browser__firstGrid {
-  overflow-y: scroll !important;
-  height: 100% !important;
-  max-width: 100%;
-  margin: 0;
-}
-
-.file-browser__firstGrid tbody tr {
-  cursor: pointer;
-}
-
-.file-browser__firstGrid svg {
-  margin-right: 0.25em;
-}
-
-.file-browser .header-panel__buttons {
-  display: flex;
-  justify-content: space-between;
-}
-
-.file-browser .preview-panel {
-  display: flex;
-  justify-content: space-between;
-}
-
-.file-browser .preview-panel > div {
-  width: 100%;
-}
-
-.file-browser .preview-panel > div > div:first-child {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
 .iframe-container {
   height: 100%;
 }

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -12,6 +12,7 @@ import {
 } from "@patternfly/react-core";
 import { Table, Tbody, Th, Thead, Tr } from "@patternfly/react-table";
 import { useEffect } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { setFilePreviewPanel } from "../../store/drawer/drawerSlice";
 import {
   clearSelectedFile,
@@ -38,8 +39,6 @@ import { OperationContext } from "../NewLibrary/context";
 import FileDetailView from "../Preview/FileDetailView";
 import XtkViewer from "../XtkViewer/XtkViewer";
 import type { FileBrowserProps } from "./types";
-import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
-import backgroundColors from "@cornerstonejs/core/dist/types/constants/backgroundColors";
 
 const previewAnimation = [{ opacity: "0.0" }, { opacity: "1.0" }];
 
@@ -153,7 +152,6 @@ const FileBrowser = (props: FileBrowserProps) => {
   return (
     <Grid hasGutter className="file-browser">
       {contextHolder}
-
       <PanelGroup autoSaveId="conditional" direction="horizontal">
         {/* Left Panel: File Browser */}
         {drawerState.files.open && (
@@ -164,6 +162,7 @@ const FileBrowser = (props: FileBrowserProps) => {
               id="4"
               defaultSize={53}
               minSize={20}
+              style={{ display: "flex", flexDirection: "column" }}
             >
               {/* Drawer Action Button for Files */}
               <DrawerActionButton
@@ -220,20 +219,30 @@ const FileBrowser = (props: FileBrowserProps) => {
                   </div>
                 </div>
                 {/* Scrollable Content */}
-                <div className="scrollable-content">
+
+                <div style={{ flex: 1, overflow: "auto" }}>
                   <Table
                     style={{
                       backgroundColor: "inherit",
                     }}
                     variant="compact"
+                    isStickyHeader={true}
                   >
                     <Thead aria-label="file-browser-table">
                       <Tr>
                         <Th aria-label="file-selection-checkbox" />
-                        <Th aria-label="file-name">{columnNames.name}</Th>
-                        <Th aria-label="file-creator">{columnNames.created}</Th>
-                        <Th aria-label="file-owner">{columnNames.creator}</Th>
-                        <Th aria-label="file-size">{columnNames.size}</Th>
+                        <Th aria-label="file-name" width={40}>
+                          {columnNames.name}
+                        </Th>
+                        <Th aria-label="file-creator" width={20}>
+                          {columnNames.created}
+                        </Th>
+                        <Th aria-label="file-owner" width={20}>
+                          {columnNames.creator}
+                        </Th>
+                        <Th aria-label="file-size" width={20}>
+                          {columnNames.size}
+                        </Th>
                       </Tr>
                     </Thead>
                     <Tbody>

src/components/NewLibrary/components/LibraryTable.tsx

@@ -34,6 +34,7 @@ import useNewResourceHighlight from "../utils/useNewResourceHighlight";
 import { FolderContextMenu } from "./ContextMenu";
 import { getFileName, getLinkFileName } from "./FileCard";
 import { getFolderName } from "./FolderCard";
+import TruncatedText from "./TruncatedText";
 
 interface TableProps {
   data: {
@@ -148,7 +149,7 @@ const BaseRow: React.FC<RowProps> = ({
             isSelected: isSelected,
           }}
         />
-        <Td dataLabel={columnNames.name}>
+        <Td dataLabel={columnNames.name} modifier="truncate">
           <Button
             onClick={(e) => {
               e.stopPropagation();
@@ -158,23 +159,21 @@ const BaseRow: React.FC<RowProps> = ({
             icon={icon}
             variant="link"
           >
-            {name}
+            <TruncatedText text={name} className="pf-c-button__text" />
           </Button>
-          <span
-            style={{
-              display: "inline-block",
-              width: "90px",
-              marginLeft: "0.25em",
-            }}
-          >
-            {isNewResource ? <Tag color="#3E8635">Newly Added</Tag> : null}
-          </span>
+          {isNewResource && (
+            <span style={{ marginLeft: "0.5em" }}>
+              <Tag color="#3E8635">Newly Added</Tag>
+            </span>
+          )}
+        </Td>
+        <Td dataLabel={columnNames.date} modifier="truncate">
+          <TruncatedText text={format(new Date(date), "dd MMM yyyy, HH:mm")} />
         </Td>
-        <Td dataLabel={columnNames.date}>
-          {format(new Date(date), "dd MMM yyyy, HH:mm")}
+        <Td dataLabel={columnNames.owner} modifier="truncate">
+          <TruncatedText text={owner} />
         </Td>
-        <Td dataLabel={columnNames.owner}>{owner}</Td>
-        <Td dataLabel={columnNames.size}>
+        <Td dataLabel={columnNames.size} modifier="truncate">
           {size > 0 ? formatBytes(size, 0) : " "}
         </Td>
       </Tr>
@@ -308,19 +307,32 @@ const LibraryTable: React.FC<TableProps> = ({
         variant="compact"
         aria-label="Simple table"
         isStriped={true}
+        isStickyHeader={true}
       >
         <Caption>Data Library</Caption>
         <Thead>
           <Tr>
             <Th screenReaderText="Select a row" arial-label="Select a row" />
-            <Th sort={{ sortBy, onSort, columnIndex: 1 }} name="name">
+            <Th
+              sort={{ sortBy, onSort, columnIndex: 1 }}
+              width={40}
+              name="name"
+            >
               {columnNames.name}
             </Th>
-            <Th sort={{ sortBy, onSort, columnIndex: 2 }} name="date">
+            <Th
+              sort={{ sortBy, onSort, columnIndex: 2 }}
+              width={20}
+              name="date"
+            >
               {columnNames.date}
             </Th>
-            <Th name="owner">{columnNames.owner}</Th>
-            <Th name="size">{columnNames.size}</Th>
+            <Th name="owner">
+              {columnNames.owner} width={20}
+            </Th>
+            <Th name="size">
+              {columnNames.size} width={20}
+            </Th>
           </Tr>
         </Thead>
         <Tbody>

src/components/NewLibrary/components/TruncatedText.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect, useState } from "react";
+import { Tooltip } from "@patternfly/react-core";
+
+interface TruncatedTextProps {
+  text: string;
+  className?: string;
+}
+
+const TruncatedText: React.FC<TruncatedTextProps> = React.memo(
+  ({ text, className }) => {
+    const textRef = useRef<HTMLSpanElement>(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+      const { current } = textRef;
+      /*
+        clientWidth: Represents the inner width of an element (excluding borders and scrollbars). It's essentially the width available for the content.
+        scrollWidth: Represents the total width of the element's content, including the portion not visible on the screen due to overflow.
+ *      */
+      if (current) {
+        setIsTruncated(current.scrollWidth > current.clientWidth);
+      }
+    }, []);
+
+    return (
+      <Tooltip content={text} isVisible={isTruncated} trigger="mouseenter">
+        <span ref={textRef} className={className}>
+          {text}
+        </span>
+      </Tooltip>
+    );
+  },
+);
+
+export default TruncatedText;