Merge pull request #4426 from Infisical/secret-dashboard-update

improvement(frontend): Remove secret overview page and re-vamp secret dashboard

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -10,6 +10,7 @@ type Props = {
   children?: ReactNode;
   icon?: IconDefinition;
   iconSize?: SizeProp;
+  titleClassName?: string;
 };
 
 export const EmptyState = ({
@@ -17,7 +18,8 @@ export const EmptyState = ({
   className,
   children,
   icon = faCubesStacked,
-  iconSize = "2x"
+  iconSize = "2x",
+  titleClassName
 }: Props) => (
   <div
     className={twMerge(
@@ -27,7 +29,7 @@ export const EmptyState = ({
   >
     <FontAwesomeIcon icon={icon} size={iconSize} />
     <div className="flex flex-col items-center py-4">
-      <div className="text-sm text-bunker-300">{title}</div>
+      <div className={twMerge("text-sm text-bunker-300", titleClassName)}>{title}</div>
       <div>{children}</div>
     </div>
   </div>

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -67,7 +67,7 @@ export const FilterableSelect = <T,>({
         }),
         menuPortal: (provided) => ({
           ...provided,
-          zIndex: 9999
+          zIndex: 99999
         })
       }}
       tabSelectsValue={tabSelectsValue}

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

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
+import { DetailedHTMLProps, forwardRef, HTMLAttributes, ReactNode, TdHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { Skeleton } from "../Skeleton";
@@ -9,22 +9,20 @@ export type TableContainerProps = {
   className?: string;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const TableContainer = ({
-  children,
-  className,
-  isRounded = true,
-  ...props
-}: TableContainerProps): JSX.Element => (
-  <div
-    className={twMerge(
-      "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
-      isRounded && "rounded-lg",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </div>
+export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
+  ({ children, className, isRounded = true, ...props }, ref): JSX.Element => (
+    <div
+      ref={ref}
+      className={twMerge(
+        "relative w-full overflow-x-auto border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter",
+        isRounded && "rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
 );
 
 // main parent table