Merge remote-tracking branch 'upstream/master' into fix/issue_12388_p…

…opover_closes_onchange
apache · Jan 12, 2021 · f6446af · f6446af
2 parents 802d9bf + e47350e
commit f6446af
Show file tree

Hide file tree

Showing 20 changed files with 183 additions and 91 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -149,6 +149,7 @@
     "react-loadable": "^5.5.0",
     "react-markdown": "^4.3.1",
     "react-redux": "^7.2.0",
+    "react-resize-detector": "^6.0.1-rc.1",
     "react-router-dom": "^5.1.2",
     "react-search-input": "^0.11.3",
     "react-select": "^3.1.0",

diff --git a/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js b/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js
@@ -83,7 +83,7 @@ describe('getControlsForVizType', () => {
       JSON.stringify({
         label_colors: {
           type: 'ColorMapControl',
-          label: t('Color Map'),
+          label: t('Color map'),
           default: {},
           renderTrigger: true,
           mapStateToProps: state => ({

diff --git a/superset-frontend/src/chart/chartAction.js b/superset-frontend/src/chart/chartAction.js
@@ -301,7 +301,7 @@ export function runAnnotationQuery(
             dispatch(
               annotationQueryFailed(
                 annotation,
-                { error: 'Query Timeout' },
+                { error: 'Query timeout' },
                 sliceKey,
               ),
             );

diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
@@ -38,14 +38,14 @@ import Collapse from './Collapse';
 import { CronPicker, CronError } from './CronPicker';
 
 export default {
-  title: 'Common Components',
+  title: 'Common components',
   decorators: [withKnobs],
 };
 
 export const StyledModal = () => (
   <Modal
     disablePrimaryButton={false}
-    onHandledPrimaryAction={action('Primary Action')}
+    onHandledPrimaryAction={action('Primary action')}
     primaryButtonName="Danger"
     primaryButtonType="danger"
     show
@@ -65,14 +65,14 @@ export const StyledTabs = () => (
     <Tabs.TabPane
       tab="Tab 1"
       key="1"
-      disabled={boolean('Tab 1 Disabled', false)}
+      disabled={boolean('Tab 1 disabled', false)}
     >
       Tab 1 Content!
     </Tabs.TabPane>
     <Tabs.TabPane
       tab="Tab 2"
       key="2"
-      disabled={boolean('Tab 2 Disabled', false)}
+      disabled={boolean('Tab 2 disabled', false)}
     >
       Tab 2 Content!
     </Tabs.TabPane>
@@ -88,14 +88,14 @@ export const StyledEditableTabs = () => (
     <Tabs.TabPane
       tab="Tab 1"
       key="1"
-      disabled={boolean('Tab 1 Disabled', false)}
+      disabled={boolean('Tab 1 disabled', false)}
     >
       Tab 1 Content!
     </Tabs.TabPane>
     <Tabs.TabPane
       tab="Tab 2"
       key="2"
-      disabled={boolean('Tab 2 Disabled', false)}
+      disabled={boolean('Tab 2 disabled', false)}
     >
       Tab 2 Content!
     </Tabs.TabPane>
@@ -123,7 +123,7 @@ export const TabsWithDropdownMenu = () => (
         </>
       }
       key="1"
-      disabled={boolean('Tab 1 Disabled', false)}
+      disabled={boolean('Tab 1 disabled', false)}
     >
       Tab 1 Content!
     </Tabs.TabPane>

diff --git a/superset-frontend/src/components/AnchorLink.jsx b/superset-frontend/src/components/AnchorLink.jsx
@@ -85,7 +85,7 @@ class AnchorLink extends React.PureComponent {
               filters,
               anchorLinkId,
             )}
-            emailSubject={t('Superset Chart')}
+            emailSubject={t('Superset chart')}
             emailContent={t('Check out this chart in dashboard:')}
             placement={placement}
           />

diff --git a/superset-frontend/src/components/EditableTitle.tsx b/superset-frontend/src/components/EditableTitle.tsx
@@ -178,7 +178,7 @@ export default function EditableTitle({
         label="title"
         tooltip={
           canEdit
-            ? t('click to edit')
+            ? t('Click to edit')
             : noPermitTooltip ||
               t("You don't have the rights to alter this title.")
         }

diff --git a/superset-frontend/src/components/OmniContainer.jsx b/superset-frontend/src/components/OmniContainer.jsx
@@ -41,7 +41,7 @@ const getDashboards = query =>
       })),
     )
     .catch(() => ({
-      title: t('An error occurred while fethching Dashboards'),
+      title: t('An error occurred while fetching dashboards'),
     }));
 
 const OmniModal = styled(Modal)`

diff --git a/superset-frontend/src/dashboard/stylesheets/dnd.less b/superset-frontend/src/dashboard/stylesheets/dnd.less
@@ -20,6 +20,13 @@
   position: relative;
 }
 
+// Fixes ISSUE-12181 - before in chart's contract-trigger breaks drag and drop mode
+.dashboard--editing {
+  .contract-trigger:before {
+    display: none;
+  }
+}
+
 .dragdroppable--dragging {
   opacity: 0.2;
 }

diff --git a/superset-frontend/src/explore/components/DatasourcePanel.tsx b/superset-frontend/src/explore/components/DatasourcePanel.tsx
@@ -141,6 +141,24 @@ const DatasourceContainer = styled.div`
   }
 `;
 
+const LabelContainer = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  & > span {
+    white-space: nowrap;
+  }
+
+  .option-label {
+    display: inline;
+  }
+
+  .metric-option > .option-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
 const DataSourcePanel = ({
   datasource,
   controls: { datasource: datasourceControl },
@@ -200,9 +218,9 @@ const DataSourcePanel = ({
               {t(`Showing %s of %s`, metricSlice.length, metrics.length)}
             </div>
             {metricSlice.map(m => (
-              <div key={m.metric_name} className="column">
+              <LabelContainer key={m.metric_name} className="column">
                 <MetricOption metric={m} showType />
-              </div>
+              </LabelContainer>
             ))}
           </Collapse.Panel>
           <Collapse.Panel
@@ -213,9 +231,9 @@ const DataSourcePanel = ({
               {t(`Showing %s of %s`, columnSlice.length, columns.length)}
             </div>
             {columnSlice.map(col => (
-              <div key={col.column_name} className="column">
+              <LabelContainer key={col.column_name} className="column">
                 <ColumnOption column={col} showType />
-              </div>
+              </LabelContainer>
             ))}
           </Collapse.Panel>
         </Collapse>

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -16,12 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
-import { ParentSize } from '@vx/responsive';
 import { styled, useTheme } from '@superset-ui/core';
-import debounce from 'lodash/debounce';
+import { useResizeDetector } from 'react-resize-detector';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import ChartContainer from 'src/chart/ChartContainer';
 import ConnectedExploreChartHeader from './ExploreChartHeader';
@@ -55,6 +54,7 @@ const propTypes = {
 const GUTTER_SIZE_FACTOR = 1.25;
 
 const CHART_PANEL_PADDING = 30;
+const HEADER_PADDING = 15;
 
 const INITIAL_SIZES = [90, 10];
 const MIN_SIZES = [300, 50];
@@ -104,20 +104,32 @@ const ExploreChartPanel = props => {
   const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
   const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
 
-  const panelHeadingRef = useRef(null);
+  const { height: hHeight, ref: headerRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 300,
+  });
+  const { width: chartWidth, ref: chartRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 300,
+  });
   const [splitSizes, setSplitSizes] = useState(INITIAL_SIZES);
 
   const calcSectionHeight = useCallback(
     percent => {
-      const headerHeight = props.standalone
-        ? 0
-        : panelHeadingRef?.current?.offsetHeight ?? 50;
+      let headerHeight;
+      if (props.standalone) {
+        headerHeight = 0;
+      } else if (hHeight) {
+        headerHeight = hHeight + HEADER_PADDING;
+      } else {
+        headerHeight = 50;
+      }
       const containerHeight = parseInt(props.height, 10) - headerHeight;
       return (
         (containerHeight * percent) / 100 - (gutterHeight / 2 + gutterMargin)
       );
     },
-    [gutterHeight, gutterMargin, props.height, props.standalone],
+    [gutterHeight, gutterMargin, props.height, props.standalone, hHeight],
   );
 
   const [tableSectionHeight, setTableSectionHeight] = useState(
@@ -132,15 +144,11 @@ const ExploreChartPanel = props => {
   );
 
   useEffect(() => {
-    const recalcSizes = debounce(() => recalcPanelSizes(splitSizes), 200);
-
-    window.addEventListener('resize', recalcSizes);
-    return () => window.removeEventListener('resize', recalcSizes);
-  }, [props.standalone, recalcPanelSizes, splitSizes]);
+    recalcPanelSizes(splitSizes);
+  }, [recalcPanelSizes, splitSizes]);
 
   const onDragEnd = sizes => {
     setSplitSizes(sizes);
-    recalcPanelSizes(sizes);
   };
 
   const onCollapseChange = openPanelName => {
@@ -154,42 +162,46 @@ const ExploreChartPanel = props => {
       ];
     }
     setSplitSizes(splitSizes);
-    recalcPanelSizes(splitSizes);
   };
 
-  const renderChart = () => {
+  const renderChart = useCallback(() => {
     const { chart } = props;
     const newHeight = calcSectionHeight(splitSizes[0]) - CHART_PANEL_PADDING;
     return (
-      <ParentSize>
-        {({ width }) =>
-          width > 0 && (
-            <ChartContainer
-              width={Math.floor(width)}
-              height={newHeight}
-              annotationData={chart.annotationData}
-              chartAlert={chart.chartAlert}
-              chartStackTrace={chart.chartStackTrace}
-              chartId={chart.id}
-              chartStatus={chart.chartStatus}
-              triggerRender={props.triggerRender}
-              datasource={props.datasource}
-              errorMessage={props.errorMessage}
-              formData={props.form_data}
-              onQuery={props.onQuery}
-              owners={props?.slice?.owners}
-              queriesResponse={chart.queriesResponse}
-              refreshOverlayVisible={props.refreshOverlayVisible}
-              setControlValue={props.actions.setControlValue}
-              timeout={props.timeout}
-              triggerQuery={chart.triggerQuery}
-              vizType={props.vizType}
-            />
-          )
-        }
-      </ParentSize>
+      chartWidth > 0 && (
+        <ChartContainer
+          width={Math.floor(chartWidth)}
+          height={newHeight}
+          annotationData={chart.annotationData}
+          chartAlert={chart.chartAlert}
+          chartStackTrace={chart.chartStackTrace}
+          chartId={chart.id}
+          chartStatus={chart.chartStatus}
+          triggerRender={props.triggerRender}
+          datasource={props.datasource}
+          errorMessage={props.errorMessage}
+          formData={props.form_data}
+          onQuery={props.onQuery}
+          owners={props?.slice?.owners}
+          queriesResponse={chart.queriesResponse}
+          refreshOverlayVisible={props.refreshOverlayVisible}
+          setControlValue={props.actions.setControlValue}
+          timeout={props.timeout}
+          triggerQuery={chart.triggerQuery}
+          vizType={props.vizType}
+        />
+      )
     );
-  };
+  }, [calcSectionHeight, chartWidth, props, splitSizes]);
+
+  const panelBody = useMemo(
+    () => (
+      <div className="panel-body" ref={chartRef}>
+        {renderChart()}
+      </div>
+    ),
+    [chartRef, renderChart],
+  );
 
   if (props.standalone) {
     // dom manipulation hack to get rid of the boostrap theme's body background
@@ -222,14 +234,12 @@ const ExploreChartPanel = props => {
     [dimension]: `calc(${elementSize}% - ${gutterSize + gutterMargin}px)`,
   });
 
-  const panelBody = <div className="panel-body">{renderChart()}</div>;
-
   return (
     <Styles
       className="panel panel-default chart-container"
       style={{ height: props.height }}
     >
-      <div className="panel-heading" ref={panelHeadingRef}>
+      <div className="panel-heading" ref={headerRef}>
         {header}
       </div>
       {props.vizType === 'filter_box' ? (