feat(ui): Auto-wrap layout components when possible

plugins/ui/src/js/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@types/react": "^17.0.2",
+    "@types/react-is": "^17.0.2",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -57,6 +58,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-types/shared": "^3.22.0",
     "json-rpc-2.0": "^1.6.0",
+    "react-is": "^17.0.2",
     "shortid": "^2.2.16"
   },
   "publishConfig": {

plugins/ui/src/js/src/layout/Column.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { Children, useEffect, useMemo } from 'react';
+import { isElement } from 'react-is';
 import { useLayoutManager } from '@deephaven/dashboard';
 import type { RowOrColumn } from '@deephaven/golden-layout';
 import type { ColumnElementProps } from './LayoutUtils';
 import { ParentItemContext, useParentItem } from './ParentItemContext';
+import Row from './Row';
+import Stack from './Stack';
 
 function Column({ children, width }: ColumnElementProps): JSX.Element | null {
   const layoutManager = useLayoutManager();
@@ -28,9 +31,24 @@ function Column({ children, width }: ColumnElementProps): JSX.Element | null {
     column.setSize();
   }, [column]);
 
+  const hasRows = Children.toArray(children).some(
+    child => isElement(child) && child.type === Row
+  );
+
   return (
     <ParentItemContext.Provider value={column}>
-      {children}
+      {Children.map(children, child => {
+        if (isElement(child) && child.type !== Row) {
+          if (hasRows) {
+            return <Row>{child}</Row>;
+          }
+
+          if (child.type !== Stack) {
+            return <Stack>{child}</Stack>;
+          }
+        }
+        return child;
+      })}
     </ParentItemContext.Provider>
   );
 }

plugins/ui/src/js/src/layout/Dashboard.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { Children } from 'react';
 import type { DashboardElementProps } from './LayoutUtils';
 import { ParentItemContext, useParentItem } from './ParentItemContext';
+import Column from './Column';
 
 function Dashboard({ children }: DashboardElementProps): JSX.Element | null {
   const parent = useParentItem();
 
+  const needsWrapper = Children.count(children) > 1;
+
   return (
     <ParentItemContext.Provider value={parent}>
-      {children}
+      {needsWrapper ? <Column>{children}</Column> : children}
     </ParentItemContext.Provider>
   );
 }

plugins/ui/src/js/src/layout/Row.tsx

@@ -1,8 +1,11 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { Children, useEffect, useMemo } from 'react';
+import { isElement } from 'react-is';
 import { useLayoutManager } from '@deephaven/dashboard';
 import type { RowOrColumn } from '@deephaven/golden-layout';
 import type { RowElementProps } from './LayoutUtils';
 import { ParentItemContext, useParentItem } from './ParentItemContext';
+import Stack from './Stack';
+import Column from './Column';
 
 function Row({ children, height }: RowElementProps): JSX.Element | null {
   const layoutManager = useLayoutManager();
@@ -27,9 +30,24 @@ function Row({ children, height }: RowElementProps): JSX.Element | null {
     row.setSize();
   }, [row]);
 
+  const hasColumns = Children.toArray(children).some(
+    child => isElement(child) && child.type === Column
+  );
+
   return (
     <ParentItemContext.Provider value={row}>
-      {children}
+      {Children.map(children, child => {
+        if (isElement(child) && child.type !== Column) {
+          if (hasColumns) {
+            return <Column>{child}</Column>;
+          }
+
+          if (child.type !== Stack) {
+            return <Stack>{child}</Stack>;
+          }
+        }
+        return child;
+      })}
     </ParentItemContext.Provider>
   );
 }

plugins/ui/src/js/src/layout/Stack.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { Children, useEffect, useMemo } from 'react';
+import { isElement } from 'react-is';
 import { useLayoutManager } from '@deephaven/dashboard';
 import type { Stack as StackType, RowOrColumn } from '@deephaven/golden-layout';
 import type { StackElementProps } from './LayoutUtils';
 import { ParentItemContext, useParentItem } from './ParentItemContext';
+import ReactPanel from '../ReactPanel';
 
 function Stack({
   children,
@@ -38,7 +40,12 @@ function Stack({
 
   return (
     <ParentItemContext.Provider value={stack}>
-      {children}
+      {Children.map(children, child => {
+        if (isElement(child) && child.type !== ReactPanel) {
+          return <ReactPanel title="Untitled">{child}</ReactPanel>;
+        }
+        return child;
+      })}
     </ParentItemContext.Provider>
   );
 }