feat(explore-datasource): add new datasource tab to explore view (#12008)

* update to datsource tab

* second update

* style updates

* update style and fix metrics bug

* updates to datsource panel

* backgrounds and borders

* more updates

* shuffling some paddings around

* more updates

* moving some more paddings around!

* Fixing sidebar width

* using Global to adjust body layout

* update test and fix bug

* removing hotkeys

* layout fixes for short content, simplifying some class names

* more styles

* add tooltip to collapse and div clickable

* more updates

* more updates for styles and add list component

* update from comments

* vising cosmetic issue with line-wrapping drop down caret on controls sections

* controls area scrolling properly again.

* change lists to old list and updates from comments

* border radius from theme

* add length field and updates from comments

* more changes from comments

* integrate health with new control

* change callapse back from stylsheet more udpates

* substitution string

* more substitution strings

* fix tests

* datasource alignment

* taking margin off the search input

* update input to flex

* fix lint

* adjusting column/metric label stylng

* fixing scrollable area layout, one more color variable

* simplifying some styles

* nixing a bad left margin

* Using gridunit for padding

* using gridUnit for padding

* define types for datsource panel

* fixing a padding issue

Co-authored-by: Evan Rusackas <evan@preset.io>

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

@@ -21,12 +21,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { styled, logging, t } from '@superset-ui/core';
-
+import { styled, logging, t, supersetTheme, css } from '@superset-ui/core';
+import { Global } from '@emotion/core';
+import { Tooltip } from 'src/common/components/Tooltip';
+import Icon from 'src/components/Icon';
 import ExploreChartPanel from './ExploreChartPanel';
 import ConnectedControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from './QueryAndSaveBtns';
+import DataSourcePanel from './DatasourcePanel';
 import { getExploreLongUrl } from '../exploreUtils';
 import { areObjectsEqual } from '../../reduxUtils';
 import { getFormDataFromControls } from '../controlUtils';
@@ -57,21 +60,65 @@ const propTypes = {
 };
 
 const Styles = styled.div`
-  height: ${({ height }) => height};
-  min-height: ${({ height }) => height};
+  background: ${({ theme }) => theme.colors.grayscale.light5};
   text-align: left;
   position: relative;
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
-  .control-pane {
+  border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  .explore-column {
     display: flex;
     flex-direction: column;
-    padding: 0 ${({ theme }) => 2 * theme.gridUnit}px;
+    padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
     max-height: 100%;
   }
+  .data-source-selection {
+    background-color: ${({ theme }) => theme.colors.grayscale.light4};
+    padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
+    border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  }
+  .main-explore-content {
+    border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  }
+  .controls-column {
+    align-self: flex-start;
+    padding: 0;
+  }
+  .title-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    padding: 0 ${({ theme }) => 2 * theme.gridUnit}px;
+    justify-content: space-between;
+    .horizontal-text {
+      text-transform: uppercase;
+      color: ${({ theme }) => theme.colors.grayscale.light1};
+      font-size: ${({ theme }) => 4 * theme.typography.sizes.s};
+    }
+  }
+  .no-show {
+    display: none;
+  }
+  .vertical-text {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+  }
+  .sidebar {
+    height: 100%;
+    background-color: ${({ theme }) => theme.colors.grayscale.light4};
+    padding: ${({ theme }) => 2 * theme.gridUnit}px;
+    width: ${({ theme }) => 8 * theme.gridUnit}px;
+  }
+  .data-tab {
+    min-width: 288px;
+  }
+  .callpase-icon > svg {
+    color: ${({ theme }) => theme.colors.primary.base};
+  }
 `;
 
 class ExploreViewContainer extends React.Component {
@@ -84,6 +131,7 @@ class ExploreViewContainer extends React.Component {
       showModal: false,
       chartIsStale: false,
       refreshOverlayVisible: false,
+      collapse: true,
     };
 
     this.addHistory = this.addHistory.bind(this);
@@ -93,6 +141,7 @@ class ExploreViewContainer extends React.Component {
     this.onQuery = this.onQuery.bind(this);
     this.toggleModal = this.toggleModal.bind(this);
     this.handleKeydown = this.handleKeydown.bind(this);
+    this.toggleCollapse = this.toggleCollapse.bind(this);
   }
 
   componentDidMount() {
@@ -259,6 +308,10 @@ class ExploreViewContainer extends React.Component {
     }
   }
 
+  toggleCollapse() {
+    this.setState(prevState => ({ collapse: !prevState.collapse }));
+  }
+
   handleResize() {
     clearTimeout(this.resizeTimer);
     this.resizeTimer = setTimeout(() => {
@@ -326,12 +379,34 @@ class ExploreViewContainer extends React.Component {
   }
 
   render() {
+    const { collapse } = this.state;
     if (this.props.standalone) {
       return this.renderChartContainer();
     }
-
     return (
-      <Styles id="explore-container" height={this.state.height}>
+      <Styles id="explore-container">
+        <Global
+          styles={css`
+            .navbar {
+              margin-bottom: 0;
+            }
+            body {
+              max-height: 100vh;
+              overflow: hidden;
+            }
+            #app-menu,
+            #app {
+              flex: 1 1 auto;
+            }
+            #app {
+              flex-basis: 100%;
+              overflow: hidden;
+            }
+            #app-menu {
+              flex-shrink: 0;
+            }
+          `}
+        />
         {this.state.showModal && (
           <SaveModal
             onHide={this.toggleModal}
@@ -340,7 +415,57 @@ class ExploreViewContainer extends React.Component {
             sliceName={this.props.sliceName}
           />
         )}
-        <div className="col-sm-4 control-pane">
+        <div
+          className={
+            collapse
+              ? 'no-show'
+              : 'data-tab explore-column data-source-selection'
+          }
+        >
+          <div className="title-container">
+            <span className="horizontal-text">{t('Datasource')}</span>
+            <span
+              role="button"
+              tabIndex={0}
+              className="action-button"
+              onClick={this.toggleCollapse}
+            >
+              <Icon
+                name="expand"
+                color={supersetTheme.colors.primary.base}
+                className="collapse-icon"
+                width={16}
+              />
+            </span>
+          </div>
+          <DataSourcePanel
+            datasource={this.props.datasource}
+            controls={this.props.controls}
+            actions={this.props.actions}
+          />
+        </div>
+        {collapse ? (
+          <div
+            className="sidebar"
+            onClick={this.toggleCollapse}
+            data-test="open-datasource-tab"
+            role="button"
+            tabIndex={0}
+          >
+            <span role="button" tabIndex={0} className="action-button">
+              <Tooltip title={t('Open Datasource Tab')}>
+                <Icon
+                  name="collapse"
+                  color={supersetTheme.colors.primary.base}
+                  className="collapse-icon"
+                  width={16}
+                />
+              </Tooltip>
+            </span>
+            <Icon name="dataset-physical" width={16} />
+          </div>
+        ) : null}
+        <div className="col-sm-3 explore-column controls-column">
           <QueryAndSaveBtns
             canAdd={!!(this.props.can_add || this.props.can_overwrite)}
             onQuery={this.onQuery}
@@ -359,7 +484,13 @@ class ExploreViewContainer extends React.Component {
             isDatasourceMetaLoading={this.props.isDatasourceMetaLoading}
           />
         </div>
-        <div className="col-sm-8">{this.renderChartContainer()}</div>
+        <div
+          className={`main-explore-content ${
+            collapse ? 'col-sm-9' : 'col-sm-7'
+          }`}
+        >
+          {this.renderChartContainer()}
+        </div>
       </Styles>
     );
   }
@@ -372,7 +503,6 @@ function mapStateToProps(state) {
   const form_data = getFormDataFromControls(explore.controls);
   const chartKey = Object.keys(charts)[0];
   const chart = charts[chartKey];
-
   return {
     isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
     datasource: explore.datasource,