From f31e8ddfe95e1bc309c9d89133e3fbe2e29b82cf Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Thu, 27 Jul 2023 20:57:38 +0530
Subject: [PATCH] feat: added width for expandable table and secret missing
 count ui fix

---
 .../SecretOverviewPage/SecretOverviewPage.tsx | 31 ++++++++++++++++---
 .../SecretOverviewTableRow.tsx                | 14 +++++++--
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index f3f47bd9e6..8f2e1d6c30 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
@@ -39,6 +39,26 @@ export const SecretOverviewPage = () => {
   const { createNotification } = useNotificationContext();
   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);
+
+  useEffect(() => {
+    const handleParentTableWidthResize = () => {
+      setExpandableTableWidth(parentTableRef.current?.clientWidth || 0);
+    };
+
+    window.addEventListener("resize", handleParentTableWidthResize);
+    return () => window.removeEventListener("resize", handleParentTableWidthResize);
+  }, []);
+
+  useEffect(() => {
+    if (parentTableRef.current) {
+      setExpandableTableWidth(parentTableRef.current.clientWidth);
+    }
+  }, [parentTableRef.current]);
+
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const { currentOrg } = useOrganization();
   const workspaceId = currentWorkspace?._id as string;
@@ -240,12 +260,12 @@ export const SecretOverviewPage = () => {
           />
         </div>
       </div>
-      <div className="mt-6">
+      <div className="thin-scrollbar mt-6" ref={parentTableRef}>
         <TableContainer>
           <Table>
             <THead>
               <Tr>
-                <Th className="sticky left-0 z-10 bg-clip-padding">Secret</Th>
+                <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Secret</Th>
                 {userAvailableEnvs?.map(({ name, slug }, index) => {
                   const envSecKeyCount = getEnvSecretKeyCount(slug);
                   const missingKeyCount = secKeys.length - envSecKeyCount;
@@ -261,7 +281,7 @@ export const SecretOverviewPage = () => {
                             className="max-w-none lowercase"
                             content={`${missingKeyCount} secrets missing\n compared to other environments`}
                           >
-                            <div className="ml-2 flex h-5 w-5 cursor-default items-center justify-center rounded-sm bg-red-700 text-xs text-bunker-100">
+                            <div className="ml-2 flex h-5 cursor-default items-center justify-center rounded-sm bg-red-700 p-1 text-xs text-bunker-100">
                               <span className="text-bunker-100">{missingKeyCount}</span>
                             </div>
                           </Tooltip>
@@ -299,10 +319,11 @@ export const SecretOverviewPage = () => {
                   environments={userAvailableEnvs}
                   secretKey={key}
                   getSecretByKey={getSecretByKey}
+                  expandableColWidth={expandableTableWidth}
                 />
               ))}
               <Tr>
-                <Td />
+                <Td className="sticky left-0 z-10 border-x  border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
                 {userAvailableEnvs.map(({ name, slug }) => (
                   <Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
                     <div className="flex items-center justify-center">
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index 4aa81ab5c3..dc193129d1 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -11,6 +11,7 @@ import { SecretEditRow } from "./SecretEditRow";
 type Props = {
   secretKey: string;
   environments: { name: string; slug: string }[];
+  expandableColWidth: number;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string) => Promise<void>;
@@ -23,7 +24,8 @@ export const SecretOverviewTableRow = ({
   getSecretByKey,
   onSecretUpdate,
   onSecretCreate,
-  onSecretDelete
+  onSecretDelete,
+  expandableColWidth
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
   const totalCols = environments.length + 1; // secret key row
@@ -56,7 +58,15 @@ export const SecretOverviewTableRow = ({
       {isFormExpanded && (
         <Tr>
           <Td colSpan={totalCols}>
-            <div className="rounded-md bg-bunker-700 p-4 pb-6">
+            <div
+              className="rounded-md bg-bunker-700 p-4 pb-6"
+              style={{
+                width: `calc(${expandableColWidth}px - 2rem)`,
+                position: "sticky",
+                left: "1.25rem",
+                right: "1.25rem"
+              }}
+            >
               <div className="mb-4 flex items-center justify-between">
                 <div className="text-lg font-medium">Secrets</div>
                 <div>