hide sidebar title

eduardops · Sep 26, 2019 · e541ff9 · e541ff9
1 parent a22df7f
commit e541ff9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 46 deletions.
diff --git a/frontend/src/metabase/query_builder/components/SidebarContent.jsx b/frontend/src/metabase/query_builder/components/SidebarContent.jsx
@@ -10,6 +10,7 @@ export default function SidebarContent({
   className,
   icon,
   title,
+  isTitleHidden = false,
   color,
   onBack,
   onClose,
@@ -25,7 +26,7 @@ export default function SidebarContent({
   return (
     <div className={cx(className, "flex flex-column justify-between")}>
       <div className="scroll-y">
-        {(title || onBack || icon) && (
+        {!isTitleHidden && (title || onBack || icon) && (
           <SidebarHeader
             className="mx3 my2 pt1"
             title={title}

diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/ChartSettingsSidebar.jsx b/frontend/src/metabase/query_builder/components/view/sidebars/ChartSettingsSidebar.jsx
@@ -5,38 +5,50 @@ import ChartSettings from "metabase/visualizations/components/ChartSettings";
 import visualizations from "metabase/visualizations";
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
 
-const ChartSettingsSidebar = ({
-  question,
-  result,
-  addField,
-  initialChartSetting,
-  onReplaceAllVisualizationSettings,
-  onClose,
-  onOpenChartType,
-  ...props
-}) =>
-  result && (
-    <SidebarContent
-      className="full-height"
-      title={t`${visualizations.get(question.display()).uiName} options`}
-      onDone={onClose}
-      onBack={onOpenChartType}
-    >
-      <ChartSettings
-        question={question}
-        addField={addField}
-        series={[
-          {
-            card: question.card(),
-            data: result.data,
-          },
-        ]}
-        onChange={onReplaceAllVisualizationSettings}
-        onClose={onClose}
-        noPreview
-        initial={initialChartSetting}
-      />
-    </SidebarContent>
-  );
+export default class ChartSettingsSidebar extends React.Component {
+  state = { isSidebarTitleHidden: false };
 
-export default ChartSettingsSidebar;
+  setIsSidebarTitleHidden = isSidebarTitleHidden =>
+    this.setState({ isSidebarTitleHidden });
+
+  render() {
+    const {
+      question,
+      result,
+      addField,
+      initialChartSetting,
+      onReplaceAllVisualizationSettings,
+      onClose,
+      onOpenChartType,
+    } = this.props;
+    const { isSidebarTitleHidden } = this.state;
+    return (
+      result && (
+        <SidebarContent
+          className="full-height"
+          title={t`${visualizations.get(question.display()).uiName} options`}
+          onDone={onClose}
+          onBack={onOpenChartType}
+          isTitleHidden={isSidebarTitleHidden}
+        >
+          <ChartSettings
+            question={question}
+            addField={addField}
+            series={[
+              {
+                card: question.card(),
+                data: result.data,
+              },
+            ]}
+            onChange={onReplaceAllVisualizationSettings}
+            onClose={onClose}
+            noPreview
+            initial={initialChartSetting}
+            isSidebarTitleHidden={isSidebarTitleHidden}
+            setIsSidebarTitleHidden={this.setIsSidebarTitleHidden}
+          />
+        </SidebarContent>
+      )
+    );
+  }
+}
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -63,6 +63,14 @@ class ChartSettings extends Component {
     };
   }
 
+  componentDidUpdate() {
+    const { setIsSidebarTitleHidden, isSidebarTitleHidden } = this.props;
+    const shouldHideTitle = this._viewingColumnSettings();
+    if (setIsSidebarTitleHidden && isSidebarTitleHidden !== shouldHideTitle) {
+      setIsSidebarTitleHidden(shouldHideTitle);
+    }
+  }
+
   handleShowSection = section => {
     this.setState({ currentSection: section, currentWidget: null });
   };
@@ -135,14 +143,8 @@ class ChartSettings extends Component {
     return transformedSeries;
   }
 
-  render() {
-    const { question, addField, noPreview, children } = this.props;
-    const { currentWidget } = this.state;
-
-    const settings = this._getSettings();
+  _getWidgetsAndSections() {
     const widgets = this._getWidgets();
-    const rawSeries = this._getRawSeries();
-
     const widgetsById = {};
     const sections = {};
 
@@ -169,6 +171,7 @@ class ChartSettings extends Component {
           sectionNames[0];
 
     let visibleWidgets;
+    const { currentWidget } = this.state;
     let widget = currentWidget && widgetsById[currentWidget.id];
     if (widget) {
       widget = {
@@ -184,6 +187,28 @@ class ChartSettings extends Component {
       visibleWidgets = sections[currentSection] || [];
     }
 
+    return { visibleWidgets, currentSection, sectionNames };
+  }
+
+  _viewingColumnSettings() {
+    const { visibleWidgets } = this._getWidgetsAndSections();
+    return (
+      visibleWidgets.length === 1 && visibleWidgets[0].id === "column_settings"
+    );
+  }
+
+  render() {
+    const { question, addField, noPreview, children } = this.props;
+
+    const settings = this._getSettings();
+    const rawSeries = this._getRawSeries();
+
+    const {
+      visibleWidgets,
+      currentSection,
+      sectionNames,
+    } = this._getWidgetsAndSections();
+
     const extraWidgetProps = {
       // NOTE: special props to support adding additional fields
       question: question,
@@ -229,10 +254,7 @@ class ChartSettings extends Component {
       // don't show section tabs for a single section
       sectionNames.length > 1 &&
       // hide the section picker if the only widget is column_settings
-      !(
-        visibleWidgets.length === 1 &&
-        visibleWidgets[0].id === "column_settings"
-      );
+      !this._viewingColumnSettings();
 
     // default layout with visualization
     return (