[editor] Switch to a column based flex layout for the editor page

cloudera · Jan 27, 2021 · f6cdd7e · f6cdd7e
1 parent 82f3081
commit f6cdd7e
Show file tree

Hide file tree

Showing 11 changed files with 563 additions and 622 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -43,7 +43,7 @@ module.exports = function(grunt) {
           'desktop/core/src/desktop/static/desktop/css/httperrors.css': 'desktop/core/src/desktop/static/desktop/less/httperrors.less',
           'apps/metastore/src/metastore/static/metastore/css/metastore.css': 'apps/metastore/src/metastore/static/metastore/less/metastore.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less',
-          'desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less',
+          'desktop/libs/notebook/src/notebook/static/notebook/css/editor2.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/editor2.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less',
           'apps/oozie/src/oozie/static/oozie/css/workflow-editor.css': 'apps/oozie/src/oozie/static/oozie/less/workflow-editor.less',
           'apps/oozie/src/oozie/static/oozie/css/workflow.css': 'apps/oozie/src/oozie/static/oozie/less/workflow.less',

diff --git a/desktop/core/src/desktop/js/apps/editor/EditorViewModel.js b/desktop/core/src/desktop/js/apps/editor/EditorViewModel.js
@@ -143,8 +143,6 @@ export default class EditorViewModel {
       $(document).trigger('editingToggled');
     });
 
-    this.removeSnippetConfirmation = ko.observable();
-
     this.assistAvailable = ko.observable(options.assistAvailable);
 
     this.assistWithoutStorage = ko.observable(false);
@@ -263,7 +261,7 @@ export default class EditorViewModel {
         });
       this.combinedContent(statements);
     }
-    $('#combinedContentModal' + this.suffix).modal('show');
+    $('#editorCombinedContentModal').modal('show');
   }
 
   getSnippetName(snippetType) {
@@ -423,25 +421,6 @@ export default class EditorViewModel {
     }
   }
 
-  removeSnippet(notebook, snippet) {
-    let hasContent = snippet.statement_raw().length > 0;
-    if (!hasContent) {
-      Object.keys(snippet.properties()).forEach(key => {
-        const value = snippet.properties()[key];
-        hasContent = hasContent || (ko.isObservable(value) && value().length > 0);
-      });
-    }
-    if (hasContent) {
-      this.removeSnippetConfirmation({ notebook: notebook, snippet: snippet });
-      $('#removeSnippetModal' + this.suffix).modal('show');
-    } else {
-      notebook.snippets.remove(snippet);
-      window.setTimeout(() => {
-        $(document).trigger('editorSizeChanged');
-      }, 100);
-    }
-  }
-
   saveAsNotebook() {
     this.selectedNotebook().id(null);
     this.selectedNotebook().uuid(hueUtils.UUID());

diff --git a/desktop/core/src/desktop/js/apps/editor/app.js b/desktop/core/src/desktop/js/apps/editor/app.js
@@ -371,7 +371,7 @@ huePubSub.subscribe('app.dom.loaded', app => {
       if (viewModel.canSave()) {
         viewModel.saveNotebook();
       } else {
-        $('#saveAsModal' + window.EDITOR_SUFFIX).modal('show');
+        $('#editorSaveAsModal').modal('show');
       }
     };
 
@@ -599,11 +599,11 @@ huePubSub.subscribe('app.dom.loaded', app => {
           $('.navigator').hide();
           $('.add-snippet').hide();
 
-          if (window.BANNER_TOP_HTML) {
-            $('.main-content').attr('style', 'top: 31px !important');
-          } else {
-            $('.main-content').css('top', '1px');
-          }
+          // if (window.BANNER_TOP_HTML) {
+          //   $('.main-content').attr('style', 'top: 31px !important');
+          // } else {
+          //   $('.main-content').css('top', '1px');
+          // }
           window.setTimeout(() => {
             huePubSub.publish(REDRAW_FIXED_HEADERS_EVENT);
           }, 200);
@@ -620,11 +620,11 @@ huePubSub.subscribe('app.dom.loaded', app => {
           }, 0);
           $('.navigator').show();
           $('.add-snippet').show();
-          if (window.BANNER_TOP_HTML) {
-            $('.main-content').css('top', '112px');
-          } else {
-            $('.main-content').css('top', '74px');
-          }
+          // if (window.BANNER_TOP_HTML) {
+          //   $('.main-content').css('top', '112px');
+          // } else {
+          //   $('.main-content').css('top', '74px');
+          // }
           window.setTimeout(() => {
             huePubSub.publish(REDRAW_FIXED_HEADERS_EVENT);
           }, 200);
@@ -637,15 +637,15 @@ huePubSub.subscribe('app.dom.loaded', app => {
     huePubSub.subscribe(
       'show.retry.modal',
       data => {
-        $('#retryModal' + window.EDITOR_SUFFIX).modal('show');
+        $('#editorRetryModal').modal('show');
       },
       HUE_PUB_SUB_EDITOR_ID
     );
 
     huePubSub.subscribe(
       'hide.retry.modal',
       data => {
-        $('#retryModal' + window.EDITOR_SUFFIX).modal('hide');
+        $('#editorRetryModal' + window.EDITOR_SUFFIX).modal('hide');
       },
       HUE_PUB_SUB_EDITOR_ID
     );

diff --git a/...core/src/desktop/js/apps/editor/components/aceEditor/__snapshots__/AceEditor.test.ts.snap b/...core/src/desktop/js/apps/editor/components/aceEditor/__snapshots__/AceEditor.test.ts.snap
@@ -3,7 +3,6 @@
 exports[`AceEditor.vue should render 1`] = `
 <div
   class="ace-editor-component"
-  style="height: 128px;"
   value="some query"
 >
   <div

diff --git a/desktop/core/src/desktop/js/apps/editor/components/ko.snippetEditorActions.js b/desktop/core/src/desktop/js/apps/editor/components/ko.snippetEditorActions.js
@@ -33,7 +33,7 @@ const TEMPLATE = `
       <i class="fa fa-fw fa-ellipsis-v"></i> ${I18n('More')}
       <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu pull-right">
+    <ul class="dropdown-menu pull-right" style="position: fixed !important; transform: translateX(-143px); left: initial; right: initial; top: initial; bottom: initial;">
       <li>
         <a href="javascript:void(0)" data-bind="click: explain, css: {'disabled': !explainEnabled() }" title="${I18n(
           'Explain the current SQL query'

diff --git a/desktop/core/src/desktop/js/apps/editor/components/resultGrid/ko.resultDownloadActions.js b/desktop/core/src/desktop/js/apps/editor/components/resultGrid/ko.resultDownloadActions.js
@@ -190,7 +190,7 @@ class ResultDownloadActions extends DisposableComponent {
     // if (notebook.canSave()) {
     //   notebook.save()
     // } else {
-    //   $('#saveAsModaleditor').modal('show');
+    //   $('#editorSaveAsModal').modal('show');
     // }
   }
 }

diff --git a/desktop/core/src/desktop/static/desktop/less/hue-mixins.less b/desktop/core/src/desktop/static/desktop/less/hue-mixins.less
@@ -146,8 +146,29 @@
   .animation(hue-fade-in-frames 2s);
 }
 
+.fillAbsolute() {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 // Flexbox mixins
 
+.flexRowLayout() {
+  .display-flex();
+  .flex-direction(column);
+
+  overflow: hidden;
+}
+
+.flexRowLayoutRow(@flex, @position: relative) {
+  .flex(@flex);
+
+  position: @position;
+}
+
 .display-flex() {
   display: -webkit-flex;
   display: -moz-box;

diff --git a/desktop/libs/notebook/src/notebook/static/notebook/css/editor2.css b/desktop/libs/notebook/src/notebook/static/notebook/css/editor2.css
diff --git a/desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css b/desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css
diff --git a/...ebook/static/notebook/less/notebook2.less → ...otebook/static/notebook/less/editor2.less b/...ebook/static/notebook/less/notebook2.less → ...otebook/static/notebook/less/editor2.less
@@ -20,15 +20,107 @@
 @import (reference) "cui/extra-variables.less";
 @import (reference) "hue-mixins.less";
 
-#editorComponents,
-#embeddable_editor,
-.editor-mode,
-.vertical-full,
-.content-panel {
-  height: 100%;
-}
+.editor {
+  .fillAbsolute();
+  .flexRowLayout();
+
+  .editor-nav-bar {
+    .flexRowLayoutRow(0 0 32px);
+  }
+
+  .editor-app {
+    .flexRowLayoutRow(0 0 100%);
+    .flexRowLayout();
+
+    > .editor-top {
+      .flexRowLayoutRow(0 0 40%);
+      .flexRowLayout();
+      padding: 0 8px;
+
+      .editor-top-actions {
+        .flexRowLayoutRow(0 0 20px);
+
+        line-height: 32px;
+
+        .editor-top-right-actions {
+          float: right;
+
+          > * {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .editor-settings-drawer {
+        position: absolute;
+        width: 100%;
+        z-index: 400;
+      }
+
+      .editor-code-editor {
+        .flexRowLayoutRow(0 1 100%);
+
+        .ace_gutter {
+          background-color: transparent !important;
+          border-right: 1px solid @cui-gray-100;
+
+          > .ace_layer {
+            border-left: none;
+          }
+        }
+      }
+
+      .editor-execute-status {
+        .flexRowLayoutRow(1 0 5px);
+      }
+
+      .editor-execute-actions {
+        .flexRowLayoutRow(0 0 36px);
+      }
+    }
+
+    > .editor-divider {
+      .flexRowLayoutRow(0 0 2px);
+
+      border-bottom: 1px solid @cui-gray-300;
+    }
+
+    > .editor-bottom {
+      .flexRowLayoutRow(0 1 60%);
+      .flexRowLayout();
+
+      padding: 0 8px;
+
+      .editor-bottom-tabs {
+        .flexRowLayoutRow(0 0 38px);
+      }
+
+      .editor-bottom-tab-content {
+        .flexRowLayoutRow(0 1 100%);
+
+        .tab-pane {
+          .fillAbsolute();
+
+          .editor-bottom-tab-panel {
+            .fillAbsolute();
+            .flexRowLayout();
+
+            .snippet-tab-actions {
+              .flexRowLayoutRow(0 0 30px);
+            }
+
+            .snippet-tab-body {
+              .flexRowLayoutRow(0 1 100%);
+
+              overflow: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+
 
-.notebook {
   .snippet-move-placeholder {
     margin: 10px;
     height: 100px;
@@ -406,8 +498,6 @@
 
   .tab-content {
     background-color: @cui-white;
-    border-left: 1px solid @cui-default-border-color;
-    border-right: 1px solid @cui-default-border-color;
   }
 
   .editor-help {