feat(explore): Move chart header to top of the page (#19529)

* Move chart header to top of the page

* Implement truncating and dynamic input

* fix typing

* Prevent cmd+z undoing changes when not in edit mode

* Fix tests, add missing types

* Show changed title in altered

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -28,7 +28,6 @@ import {
   setItem,
   LocalStorageKeys,
 } from 'src/utils/localStorageHelpers';
-import ConnectedExploreChartHeader from './ExploreChartHeader';
 import { DataTablesPane } from './DataTablesPane';
 import { buildV1ChartDataPayload } from '../exploreUtils';
 
@@ -63,7 +62,6 @@ const GUTTER_SIZE_FACTOR = 1.25;
 
 const CHART_PANEL_PADDING_HORIZ = 30;
 const CHART_PANEL_PADDING_VERTICAL = 15;
-const HEADER_PADDING = 15;
 
 const INITIAL_SIZES = [90, 10];
 const MIN_SIZES = [300, 50];
@@ -78,8 +76,8 @@ const Styles = styled.div`
   box-shadow: none;
   height: 100%;
 
-  & > div:last-of-type {
-    flex-basis: 100%;
+  & > div {
+    height: 100%;
   }
 
   .gutter {
@@ -114,10 +112,6 @@ const ExploreChartPanel = props => {
   const theme = useTheme();
   const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
   const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
-  const { height: hHeight, ref: headerRef } = useResizeDetector({
-    refreshMode: 'debounce',
-    refreshRate: 300,
-  });
   const { width: chartPanelWidth, ref: chartPanelRef } = useResizeDetector({
     refreshMode: 'debounce',
     refreshRate: 300,
@@ -156,21 +150,10 @@ const ExploreChartPanel = props => {
   }, [updateQueryContext]);
 
   const calcSectionHeight = useCallback(
-    percent => {
-      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, hHeight],
+    percent =>
+      (parseInt(props.height, 10) * percent) / 100 -
+      (gutterHeight / 2 + gutterMargin),
+    [gutterHeight, gutterMargin, props.height, props.standalone],
   );
 
   const [tableSectionHeight, setTableSectionHeight] = useState(
@@ -283,34 +266,12 @@ const ExploreChartPanel = props => {
     return standaloneChartBody;
   }
 
-  const header = (
-    <ConnectedExploreChartHeader
-      ownState={props.ownState}
-      actions={props.actions}
-      can_overwrite={props.can_overwrite}
-      can_download={props.can_download}
-      dashboardId={props.dashboardId}
-      isStarred={props.isStarred}
-      slice={props.slice}
-      sliceName={props.sliceName}
-      table_name={props.table_name}
-      form_data={props.form_data}
-      timeout={props.timeout}
-      chart={props.chart}
-      user={props.user}
-      reports={props.reports}
-    />
-  );
-
   const elementStyle = (dimension, elementSize, gutterSize) => ({
     [dimension]: `calc(${elementSize}% - ${gutterSize + gutterMargin}px)`,
   });
 
   return (
     <Styles className="panel panel-default chart-container" ref={chartPanelRef}>
-      <div className="panel-heading" ref={headerRef}>
-        {header}
-      </div>
       {props.vizType === 'filter_box' ? (
         panelBody
       ) : (