Merge pull request #3904 from Infisical/secret-overview-expandable-header

improvement: allow users to expand collapsed environment view header

frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx

@@ -0,0 +1,36 @@
+import { MouseEventHandler } from "react";
+
+export const HeaderResizer = ({
+  onMouseDown,
+  isActive,
+  scrollOffset,
+  heightOffset
+}: {
+  onMouseDown: MouseEventHandler<HTMLDivElement>;
+  isActive: boolean;
+  scrollOffset: number;
+  heightOffset: number;
+}) => {
+  return (
+    <>
+      <div
+        tabIndex={-1}
+        role="button"
+        className={`absolute left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
+          isActive ? "bg-blue-400/75" : "bg-transparent"
+        }`}
+        onMouseDown={onMouseDown}
+        style={{
+          transform: "translateY(50%)",
+          top: heightOffset
+        }}
+      />
+      <div
+        style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
+        className="pointer-events-none absolute z-30 -translate-x-1/2"
+      >
+        <div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
+      </div>
+    </>
+  );
+};

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

@@ -45,10 +45,14 @@ export const Table = ({ children, className }: TableProps): JSX.Element => (
 export type THeadProps = {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 };
 
-export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
+export const THead = ({ children, className, style }: THeadProps): JSX.Element => (
+  <thead
+    className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}
+    style={style}
+  >
     {children}
   </thead>
 );
@@ -96,14 +100,16 @@ export const Tr = ({
 export type ThProps = {
   children?: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 };
 
-export const Th = ({ children, className }: ThProps): JSX.Element => (
+export const Th = ({ children, className, style }: ThProps): JSX.Element => (
   <th
     className={twMerge(
       "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pb-3.5 pt-4 font-semibold",
       className
     )}
+    style={style}
   >
     {children}
   </th>