From 21df0c90a941381a79fac55998f617d7b87d3fc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Thu, 24 Jan 2019 12:00:10 +0100
Subject: [PATCH] Removed some split complexity

---
 .../app/features/explore/ExploreToolbar.tsx   | 62 ++++++++-----------
 public/sass/pages/_explore.scss               | 36 +++++------
 2 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index 25b8b3deb9a..4652a7f8846 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -3,18 +3,6 @@ import { ExploreId } from 'app/types/explore';
 import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 
-const createDatasourcePicker = (props: Props) => {
-  const { exploreDatasources, selectedDatasource } = props;
-
-  return (
-    <DataSourcePicker
-      onChange={props.onChangeDatasource}
-      datasources={exploreDatasources}
-      current={selectedDatasource}
-    />
-  );
-};
-
 const createResponsiveButton = (options: {
   splitted: boolean;
   title: string;
@@ -32,12 +20,6 @@ const createResponsiveButton = (options: {
   );
 };
 
-const createSplittedClassName = (options: { splitted: boolean; className: string }) => {
-  const { className, splitted } = options;
-
-  return splitted ? `${className}-splitted` : className;
-};
-
 interface Props {
   datasourceMissing: boolean;
   exploreDatasources: DataSourceSelectItem[];
@@ -61,18 +43,20 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
   }
 
   render() {
-    const { datasourceMissing, exploreId, loading, splitted, timepicker } = this.props;
-    const toolbar = createSplittedClassName({ splitted, className: 'toolbar' });
-    const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' });
-    const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' });
-    const toolbarContent = createSplittedClassName({ splitted, className: 'toolbar-content' });
-    const toolbarContentItem = createSplittedClassName({ splitted, className: 'toolbar-content-item' });
-    const timepickerClasses = createSplittedClassName({ splitted, className: 'timepicker toolbar-content-item' });
+    const {
+      datasourceMissing,
+      exploreDatasources,
+      exploreId,
+      loading,
+      selectedDatasource,
+      splitted,
+      timepicker,
+    } = this.props;
 
     return (
-      <div className={toolbar}>
-        <div className={toolbarItem}>
-          <div className={toolbarHeader}>
+      <div className={splitted ? 'toolbar splitted' : 'toolbar'}>
+        <div className="toolbar-item">
+          <div className="toolbar-header">
             <div className="toolbar-header-title">
               {exploreId === 'left' && (
                 <a className="navbar-page-btn">
@@ -90,15 +74,21 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
             </div>
           </div>
         </div>
-        <div className={toolbarItem}>
-          <div className={toolbarContent}>
+        <div className="toolbar-item">
+          <div className="toolbar-content">
             {!datasourceMissing ? (
-              <div className={toolbarContentItem}>
-                <div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
+              <div className="toolbar-content-item">
+                <div className="datasource-picker">
+                  <DataSourcePicker
+                    onChange={this.props.onChangeDatasource}
+                    datasources={exploreDatasources}
+                    current={selectedDatasource}
+                  />
+                </div>
               </div>
             ) : null}
             {exploreId === 'left' && !splitted ? (
-              <div className={toolbarContentItem}>
+              <div className="toolbar-content-item">
                 {createResponsiveButton({
                   splitted,
                   title: 'Split',
@@ -107,13 +97,13 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
                 })}
               </div>
             ) : null}
-            <div className={timepickerClasses}>{timepicker}</div>
-            <div className={toolbarContentItem}>
+            <div className="toolbar-content-item timepicker">{timepicker}</div>
+            <div className="toolbar-content-item">
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
                 Clear All
               </button>
             </div>
-            <div className={toolbarContentItem}>
+            <div className="toolbar-content-item">
               {createResponsiveButton({
                 splitted,
                 title: 'Run Query',
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 25221c52589..062387fdf67 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -14,7 +14,6 @@
 }
 
 .sidemenu-open {
-  .toolbar-header-splitted,
   .toolbar-header {
     padding: 0;
     margin-left: 0;
@@ -27,7 +26,6 @@
   }
 }
 
-.toolbar-splitted,
 .toolbar {
   background: inherit;
   display: flex;
@@ -41,21 +39,26 @@
   transition-property: box-shadow, border-bottom;
 }
 
-.toolbar-item-splitted,
 .toolbar-item {
   position: relative;
   align-self: center;
 }
 
-.toolbar-item-splitted {
-  flex: 1 1 100%;
+.toolbar.splitted {
+  .toolbar-item {
+    flex: 1 1 100%;
+  }
+
+  .toolbar-content-item:first-child {
+    padding-left: 0;
+    margin-right: auto;
+  }
 }
 
 .toolbar-item:last-child {
   flex: auto;
 }
 
-.toolbar-header-splitted,
 .toolbar-header {
   display: flex;
   flex: 1 1 0;
@@ -90,7 +93,6 @@
   margin-left: auto;
 }
 
-.toolbar-content-splitted,
 .toolbar-content {
   display: flex;
   flex-flow: row wrap;
@@ -107,14 +109,11 @@
   margin-right: auto;
 }
 
-.toolbar-content-item-splitted:first-child {
-  padding-left: 0;
-  margin-right: auto;
-}
-
 @media only screen and (max-width: 1545px) {
-  .timepicker-rangestring {
-    display: none;
+  .toolbar.splitted {
+    .timepicker-rangestring {
+      display: none;
+    }
   }
 }
 
@@ -125,14 +124,15 @@
     }
   }
 
-  .toolbar-content-splitted,
   .toolbar-content {
     justify-content: flex-start;
   }
 
-  .toolbar-content-item-splitted {
-    padding: 2px 0;
-    margin: 0;
+  .toolbar.splitted {
+    .toolbar-content-item {
+      padding: 2px 0;
+      margin: 0;
+    }
   }
 
   .toolbar-content-item {