feat: Tabs in column (apache#16593)

* fix:fix get permission function * feat: add tabs inside column * lint: fix lint * test: fix test * test: fix tests * test: fix tests * fix: pass onChangeTab function through layout
opus-42 · Nov 14, 2021 · cc9c821 · cc9c821
1 parent d2adaa7
commit cc9c821
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/superset-frontend/spec/javascripts/dashboard/util/isValidChild_spec.ts b/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

diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/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;

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/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}
                   />
                 ))}
 

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/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}
                 />
               ))}
 

diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/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(),

diff --git a/superset-frontend/src/dashboard/util/isValidChild.ts b/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