refactor(settings): migrate hidden containers panel to react [EE-5507] (#9119)

app/react/components/DetailsTable/DetailsRow.tsx

@@ -2,10 +2,11 @@ import clsx from 'clsx';
 import { ReactNode } from 'react';
 
 interface Props {
-  children?: ReactNode;
+  children: ReactNode;
   label: string;
   colClassName?: string;
   className?: string;
+  columns?: Array<ReactNode>;
 }
 
 export function DetailsRow({
@@ -13,17 +14,21 @@ export function DetailsRow({
   children,
   colClassName,
   className,
+  columns,
 }: Props) {
   return (
     <tr className={className}>
       <td className={clsx(colClassName, 'min-w-[150px] !break-normal')}>
         {label}
       </td>
-      {!!children && (
-        <td className={colClassName} data-cy={`detailsTable-${label}Value`}>
-          {children}
+      <td className={colClassName} data-cy={`detailsTable-${label}Value`}>
+        {children}
+      </td>
+      {columns?.map((column, index) => (
+        <td key={index} className={colClassName}>
+          {column}
         </td>
-      )}
+      ))}
     </tr>
   );
 }

app/react/components/DetailsTable/DetailsTable.tsx

@@ -1,17 +1,22 @@
-import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { Children, PropsWithChildren } from 'react';
 
 type Props = {
   headers?: string[];
   dataCy?: string;
+  className?: string;
+  emptyMessage?: string;
 };
 
 export function DetailsTable({
   headers = [],
   dataCy,
+  className,
+  emptyMessage,
   children,
 }: PropsWithChildren<Props>) {
   return (
-    <table className="table" data-cy={dataCy}>
+    <table className={clsx('table', className)} data-cy={dataCy}>
       {headers.length > 0 && (
         <thead>
           <tr>
@@ -21,7 +26,17 @@ export function DetailsTable({
           </tr>
         </thead>
       )}
-      {children && <tbody>{children}</tbody>}
+      <tbody>
+        {Children.count(children) > 0 ? (
+          children
+        ) : (
+          <tr>
+            <td colSpan={headers.length} className="text-muted text-center">
+              {emptyMessage}
+            </td>
+          </tr>
+        )}
+      </tbody>
     </table>
   );
 }