feat: Tabs in column

superset-frontend/spec/javascripts/dashboard/util/isValidChild_spec.ts

@@ -83,6 +83,7 @@ describe('isValidChild', () => {
       [ROOT, TABS, TAB, ROW, COLUMN, ROW, COLUMN, CHART],
       [ROOT, TABS, TAB, ROW, COLUMN, ROW, COLUMN, MARKDOWN],
       [ROOT, TABS, TAB, TABS, TAB, ROW, COLUMN, ROW, COLUMN, MARKDOWN],
+      [ROOT, GRID, ROW, COLUMN, TABS],
     ];
 
     validExamples.forEach((example, exampleIdx) => {
@@ -127,7 +128,6 @@ describe('isValidChild', () => {
       [ROOT, GRID, ROW, [TABS]],
       [ROOT, GRID, ROW, [TAB]],
       [ROOT, GRID, ROW, [DIVIDER]],
-      [ROOT, GRID, ROW, COLUMN, [TABS]],
       [ROOT, GRID, ROW, COLUMN, [TAB]],
       [ROOT, GRID, ROW, COLUMN, ROW, [DIVIDER]],
       [ROOT, GRID, ROW, COLUMN, ROW, COLUMN, [ROW]], // too nested

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

@@ -48,6 +48,7 @@ const propTypes = {
   dashboardId: PropTypes.number.isRequired,
   component: componentShape.isRequired,
   parentComponent: componentShape.isRequired,
+  getComponentById: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired,
   depth: PropTypes.number.isRequired,
   editMode: PropTypes.bool.isRequired,
@@ -268,16 +269,22 @@ class ChartHolder extends React.Component {
       isComponentVisible,
       dashboardId,
       fullSizeChartId,
+      getComponentById = () => undefined,
     } = this.props;
 
     const { chartId } = component.meta;
     const isFullSize = fullSizeChartId === chartId;
 
     // inherit the size of parent columns
-    const widthMultiple =
-      parentComponent.type === COLUMN_TYPE
-        ? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
-        : component.meta.width || GRID_MIN_COLUMN_COUNT;
+    const columnParentWidth = getComponentById(
+      parentComponent.parents?.find(parent => parent.startsWith(COLUMN_TYPE)),
+    )?.meta?.width;
+    let widthMultiple = component.meta.width || GRID_MIN_COLUMN_COUNT;
+    if (parentComponent.type === COLUMN_TYPE) {
+      widthMultiple = parentComponent.meta.width || GRID_MIN_COLUMN_COUNT;
+    } else if (columnParentWidth && widthMultiple > columnParentWidth) {
+      widthMultiple = columnParentWidth;
+    }
 
     let chartWidth = 0;
     let chartHeight = 0;

superset-frontend/src/dashboard/components/gridComponents/Column.jsx

@@ -110,6 +110,7 @@ class Column extends React.PureComponent {
       onResizeStop,
       handleComponentDrop,
       editMode,
+      onChangeTab,
       isComponentVisible,
     } = this.props;
 
@@ -191,6 +192,7 @@ class Column extends React.PureComponent {
                     onResize={onResize}
                     onResizeStop={onResizeStop}
                     isComponentVisible={isComponentVisible}
+                    onChangeTab={onChangeTab}
                   />
                 ))}
 

superset-frontend/src/dashboard/components/gridComponents/Row.jsx

@@ -109,6 +109,7 @@ class Row extends React.PureComponent {
       onResizeStop,
       handleComponentDrop,
       editMode,
+      onChangeTab,
       isComponentVisible,
     } = this.props;
 
@@ -176,6 +177,7 @@ class Row extends React.PureComponent {
                   onResize={onResize}
                   onResizeStop={onResizeStop}
                   isComponentVisible={isComponentVisible}
+                  onChangeTab={onChangeTab}
                 />
               ))}
 

superset-frontend/src/dashboard/containers/DashboardComponent.jsx

@@ -75,6 +75,7 @@ function mapStateToProps(
   const component = dashboardLayout[id];
   const props = {
     component,
+    getComponentById: id => dashboardLayout[id],
     parentComponent: dashboardLayout[parentId],
     editMode: dashboardState.editMode,
     filters: getActiveFilters(),

superset-frontend/src/dashboard/util/isValidChild.ts

@@ -48,7 +48,7 @@ import {
 import { DASHBOARD_ROOT_DEPTH as rootDepth } from './constants';
 
 const depthOne = rootDepth + 1;
-const depthTwo = rootDepth + 2;
+// const depthTwo = rootDepth + 2; // Meantime no need
 const depthThree = rootDepth + 3;
 const depthFour = rootDepth + 4;
 const depthFive = rootDepth + 5;
@@ -77,17 +77,17 @@ const parentMaxDepthLookup = {
   },
 
   [TABS_TYPE]: {
-    [TAB_TYPE]: depthTwo,
+    [TAB_TYPE]: depthThree,
   },
 
   [TAB_TYPE]: {
-    [CHART_TYPE]: depthTwo,
-    [MARKDOWN_TYPE]: depthTwo,
-    [COLUMN_TYPE]: depthTwo,
-    [DIVIDER_TYPE]: depthTwo,
-    [HEADER_TYPE]: depthTwo,
-    [ROW_TYPE]: depthTwo,
-    [TABS_TYPE]: depthTwo,
+    [CHART_TYPE]: depthFive,
+    [MARKDOWN_TYPE]: depthFive,
+    [COLUMN_TYPE]: depthThree,
+    [DIVIDER_TYPE]: depthFive,
+    [HEADER_TYPE]: depthFive,
+    [ROW_TYPE]: depthThree,
+    [TABS_TYPE]: depthThree,
   },
 
   [COLUMN_TYPE]: {
@@ -96,6 +96,7 @@ const parentMaxDepthLookup = {
     [MARKDOWN_TYPE]: depthFive,
     [ROW_TYPE]: depthThree,
     [DIVIDER_TYPE]: depthThree,
+    [TABS_TYPE]: depthThree,
   },
 
   // these have no valid children