From 9b197b436b4489195ad589b44978d0a9e08d2c3f Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Tue, 7 May 2019 08:45:20 -0700
Subject: [PATCH] added scrolling to data loader panes (#7605)

---
 web-console/src/components/show-log.scss         |  2 ++
 web-console/src/console-application.scss         |  4 ++++
 web-console/src/console-application.tsx          | 10 +++++-----
 web-console/src/dialogs/table-action-dialog.scss |  4 ++--
 web-console/src/views/load-data-view.scss        | 11 +++++++++--
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/web-console/src/components/show-log.scss b/web-console/src/components/show-log.scss
index 58e7acf4af3..cd6fe978a36 100644
--- a/web-console/src/components/show-log.scss
+++ b/web-console/src/components/show-log.scss
@@ -37,6 +37,8 @@
       width: 100%;
       resize: none;
       white-space: pre;
+      font-size: 11px;
+      line-height: 13px;
     }
   }
 }
diff --git a/web-console/src/console-application.scss b/web-console/src/console-application.scss
index a10c3c3d04c..4e2e654bd3d 100644
--- a/web-console/src/console-application.scss
+++ b/web-console/src/console-application.scss
@@ -35,6 +35,10 @@
       overflow-y: scroll;
     }
 
+    &.narrow-pad {
+      padding: $standard-padding 10px;
+    }
+
     .app-view {
       position: relative;
     }
diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 4f10977d90d..b2c48925243 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -190,12 +190,12 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     this.resetInitialsWithDelay();
   }
 
-  private wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, scrollable = false) => {
+  private wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, classType: 'normal' | 'scrollable' | 'narrow-pad' = 'normal') => {
     const { hideLegacy } = this.props;
 
     return <>
       <HeaderBar active={active} hideLegacy={hideLegacy} goToLoadDataView={this.goToLoadDataView}/>
-      <div className={classNames('view-container', { scrollable })}>{el}</div>
+      <div className={classNames('view-container', classType)}>{el}</div>
     </>;
   }
 
@@ -205,7 +205,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   private wrappedLoadDataView = () => {
-  return this.wrapInViewContainer('load-data', <LoadDataView seed={this.loadDataViewSeed} goToTask={this.goToTask}/>);
+    return this.wrapInViewContainer('load-data', <LoadDataView seed={this.loadDataViewSeed} goToTask={this.goToTask}/>, 'narrow-pad');
   }
 
   private wrappedSqlView = () => {
@@ -224,12 +224,12 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   private wrappedTasksView = () => {
     const { noSqlMode } = this.state;
-    return this.wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager} goToLoadDataView={this.goToLoadDataView} noSqlMode={noSqlMode}/>, true);
+    return this.wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager} goToLoadDataView={this.goToLoadDataView} noSqlMode={noSqlMode}/>, 'scrollable');
   }
 
   private wrappedServersView = () => {
     const { noSqlMode } = this.state;
-    return this.wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask} noSqlMode={noSqlMode}/>, true);
+    return this.wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask} noSqlMode={noSqlMode}/>, 'scrollable');
   }
 
   private wrappedLookupsView = () => {
diff --git a/web-console/src/dialogs/table-action-dialog.scss b/web-console/src/dialogs/table-action-dialog.scss
index a1e5d49cf73..5c6c0a8b38b 100644
--- a/web-console/src/dialogs/table-action-dialog.scss
+++ b/web-console/src/dialogs/table-action-dialog.scss
@@ -21,9 +21,9 @@ $side-bar-width: 120px;
 .table-action-dialog {
   &.bp3-dialog {
     position: relative;
-    width: 700px;
+    width: 90vw;
+    height: 85vh;
     top: 5%;
-    height: 70vh;
 
     &::after {
       content: "";
diff --git a/web-console/src/views/load-data-view.scss b/web-console/src/views/load-data-view.scss
index 050672d27c9..46de72971c0 100644
--- a/web-console/src/views/load-data-view.scss
+++ b/web-console/src/views/load-data-view.scss
@@ -19,7 +19,7 @@
 .load-data-view {
   height: 100%;
   display: grid;
-  grid-gap: 10px 15px;
+  grid-gap: 10px 5px;
   grid-template-columns: 1fr 280px;
   grid-template-rows: 55px 1fr 28px;
   grid-template-areas:
@@ -60,7 +60,7 @@
   &.partition,
   &.tuning,
   &.publish {
-    grid-gap: 20px 50px;
+    grid-gap: 20px 40px;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-areas:
       "navi navi navi"
@@ -70,6 +70,8 @@
     .main,
     .other {
       overflow: auto;
+      padding: 0 5px;
+      margin: 0;
     }
   }
 
@@ -77,6 +79,7 @@
     grid-area: navi;
     white-space: nowrap;
     overflow: auto;
+    padding: 0 5px;
 
     .stage-section {
       display: inline-block;
@@ -98,6 +101,7 @@
   .main {
     grid-area: main;
     position: relative;
+    margin: 0 5px;
 
     .raw-lines {
       position: absolute;
@@ -212,6 +216,8 @@
 
   .control {
     grid-area: ctrl;
+    overflow: auto;
+    padding: 0 5px;
 
     .intro {
       margin-bottom: 15px;
@@ -225,6 +231,7 @@
   .next-bar {
     grid-area: next;
     text-align: right;
+    padding: 0 5px;
 
     .prev {
       float: left;