Merge pull request #2621 from scott-ray-wilson/improve-overview-table-overflow

Improvement: Cap Expanded Secret View Width when Overview Table Overflows

frontend/src/components/v2/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { Skeleton } from "../Skeleton";
@@ -7,12 +7,13 @@ export type TableContainerProps = {
   children: ReactNode;
   isRounded?: boolean;
   className?: string;
-};
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 export const TableContainer = ({
   children,
   className,
-  isRounded = true
+  isRounded = true,
+  ...props
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
@@ -20,6 +21,7 @@ export const TableContainer = ({
       isRounded && "rounded-lg",
       className
     )}
+    {...props}
   >
     {children}
   </div>

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -107,18 +107,10 @@ export const SecretOverviewPage = () => {
   const { t } = useTranslation();
 
   const router = useRouter();
-  // this is to set expandable table width
-  // coz when overflow the table goes to the right
-  const parentTableRef = useRef<HTMLTableElement>(null);
-  const [expandableTableWidth, setExpandableTableWidth] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [debouncedScrollOffset] = useDebounce(scrollOffset);
   const { permission } = useProjectPermission();
 
-  useEffect(() => {
-    if (parentTableRef.current) {
-      setExpandableTableWidth(parentTableRef.current.clientWidth);
-    }
-  }, [parentTableRef.current]);
-
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const isProjectV3 = currentWorkspace?.version === ProjectVersion.V3;
   const { currentOrg } = useOrganization();
@@ -162,19 +154,13 @@ export const SecretOverviewPage = () => {
   }, []);
 
   useEffect(() => {
-    const handleParentTableWidthResize = () => {
-      setExpandableTableWidth(parentTableRef.current?.clientWidth || 0);
-    };
-
     const onRouteChangeStart = () => {
       resetSelectedEntries();
     };
 
     router.events.on("routeChangeStart", onRouteChangeStart);
 
-    window.addEventListener("resize", handleParentTableWidthResize);
     return () => {
-      window.removeEventListener("resize", handleParentTableWidthResize);
       router.events.off("routeChangeStart", onRouteChangeStart);
     };
   }, []);
@@ -864,8 +850,11 @@ export const SecretOverviewPage = () => {
           selectedEntries={selectedEntries}
           resetSelectedEntries={resetSelectedEntries}
         />
-        <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-          <TableContainer className="rounded-b-none">
+        <div className="thin-scrollbar mt-4">
+          <TableContainer
+            onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
+            className="thin-scrollbar"
+          >
             <Table>
               <THead>
                 <Tr className="sticky top-0 z-20 border-0">
@@ -1052,7 +1041,7 @@ export const SecretOverviewPage = () => {
                         environments={visibleEnvs}
                         secretKey={key}
                         getSecretByKey={getSecretByKey}
-                        expandableColWidth={expandableTableWidth}
+                        scrollOffset={debouncedScrollOffset}
                       />
                     ))}
                   </>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -23,7 +23,6 @@ type Props = {
   secretKey: string;
   secretPath: string;
   environments: { name: string; slug: string }[];
-  expandableColWidth: number;
   isSelected: boolean;
   onToggleSecretSelect: (key: string) => void;
   getSecretByKey: (slug: string, key: string) => SecretV3RawSanitized | undefined;
@@ -41,6 +40,7 @@ type Props = {
     env: string,
     secretName: string
   ) => { secret?: SecretV3RawSanitized; environmentInfo?: WorkspaceEnv } | undefined;
+  scrollOffset: number;
 };
 
 export const SecretOverviewTableRow = ({
@@ -53,9 +53,7 @@ export const SecretOverviewTableRow = ({
   onSecretDelete,
   isImportedSecretPresentInEnv,
   getImportedSecretByKey,
-  // temporary until below todo is resolved
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  expandableColWidth,
+  scrollOffset,
   onToggleSecretSelect,
   isSelected
 }: Props) => {
@@ -152,11 +150,11 @@ export const SecretOverviewTableRow = ({
             }`}
           >
             <div
-              className="ml-2 w-[99%] p-2"
-              // TODO: scott expandableColWidth sometimes 0 due to parent ref not mounting, opting for relative width until resolved
-              // style={{
-              //   width: `calc(${expandableColWidth} - 1rem)`
-              // }}
+              className="ml-2 p-2"
+              style={{
+                marginLeft: scrollOffset,
+                width: "calc(100vw - 290px)" // 290px accounts for sidebar and margin
+              }}
             >
               <SecretRenameRow
                 secretKey={secretKey}