From b0faa7dd43fd4897b4635b8b44b11bba16bc6615 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 1 Jul 2019 14:02:15 -0700
Subject: [PATCH] Separate Console History panel from editor with a
 drop-shadow, and add a Close button. (#39972)

---
 .../core_plugins/console/public/index.html    |   4 +-
 .../src/controllers/sense_controller.js       |   4 +
 .../public/src/directives/_history.scss       |  14 ++-
 .../public/src/directives/history.html        | 107 ++++++++++--------
 .../public/src/directives/sense_history.js    |   5 +
 5 files changed, 81 insertions(+), 53 deletions(-)

diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html
index 0e22c64d10de2..f3e4b2a8708c8 100644
--- a/src/legacy/core_plugins/console/public/index.html
+++ b/src/legacy/core_plugins/console/public/index.html
@@ -1,6 +1,6 @@
 <kbn-top-nav name="console" config="topNavMenu"></kbn-top-nav>
 <kbn-dev-tools-app data-test-subj="console">
-  <sense-history ng-show="showHistory" is-shown="showHistory" history-dirty="lastRequestTimestamp"></sense-history>
+  <sense-history ng-show="showHistory" is-shown="showHistory" close="closeHistory()" history-dirty="lastRequestTimestamp"></sense-history>
   <div class="conApp">
     <div class="conApp__editor">
       <ul class="conApp__autoComplete" id="autocomplete"></ul>
@@ -36,4 +36,4 @@
 </kbn-dev-tools-app>
 <div id="consoleWelcomePanel"></div>
 <div id="consoleHelpPanel"></div>
-<div id="consoleSettingsModal"></div>
\ No newline at end of file
+<div id="consoleSettingsModal"></div>
diff --git a/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js b/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js
index 003458868f248..2011f23d11cc6 100644
--- a/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js
+++ b/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js
@@ -106,6 +106,10 @@ module.controller('SenseController', function SenseController($scope, $timeout,
     $scope.showHistory = !$scope.showHistory;
   };
 
+  $scope.closeHistory = () => {
+    $scope.showHistory = false;
+  };
+
   $scope.topNavMenu = getTopNavConfig($scope, $scope.toggleHistory);
 
   $scope.openDocumentation = () => {
diff --git a/src/legacy/core_plugins/console/public/src/directives/_history.scss b/src/legacy/core_plugins/console/public/src/directives/_history.scss
index 0d1e9315c3978..1d13d366eec08 100644
--- a/src/legacy/core_plugins/console/public/src/directives/_history.scss
+++ b/src/legacy/core_plugins/console/public/src/directives/_history.scss
@@ -1,5 +1,8 @@
-sense-history {
-  padding: $euiSizeS;
+@import 'src/legacy/ui/public/styles/_styling_constants';
+
+.conHistory {
+  @include euiBottomShadow;
+  padding: $euiSizeM;
 }
 
 .conHistory__body {
@@ -9,10 +12,15 @@ sense-history {
 
 
 .conHistory__footer {
-  text-align: right;
+  display: flex;
+  justify-content: space-between;
   padding-top: $euiSize;
 }
 
+.conHistory__footerButtonsRight {
+  text-align: right;
+}
+
 .conHistory__reqs,
 .conHistory__viewer {
   flex: 0 0 50%;
diff --git a/src/legacy/core_plugins/console/public/src/directives/history.html b/src/legacy/core_plugins/console/public/src/directives/history.html
index e13642225a5f3..4c3adebb54ea9 100644
--- a/src/legacy/core_plugins/console/public/src/directives/history.html
+++ b/src/legacy/core_plugins/console/public/src/directives/history.html
@@ -1,53 +1,64 @@
-<h2
-  class="kuiLocalDropdownTitle"
-  i18n-id="console.historyPage.pageTitle"
-  i18n-default-message="History"
-></h2>
+<div class="conHistory">
+  <h2
+    class="kuiLocalDropdownTitle"
+    i18n-id="console.historyPage.pageTitle"
+    i18n-default-message="History"
+  ></h2>
 
-<div class="conHistory__body">
-  <ul
-    class="list-group conHistory__reqs"
-    tabindex="0"
-    role="listbox"
-    aria-activedescendant="historyReq{{ history.selectedIndex }}"
-    scrollto-activedescendant
-    ng-keydown="history.onKeyDown($event)"
-    aria-label="{{:: 'console.historyPage.requestListAriaLabel' | i18n: { defaultMessage: 'History of sent requests' } }}"
-  >
-    <li
-      class="list-group-item conHistory__req"
-      role="option"
-      ng-repeat="req in history.reqs"
-      id="historyReq{{$index}}"
-      ng-class="{ 'conHistory__req-selected': history.viewingReq === req }"
-      ng-click="history.selectedReq = req; history.viewingReq = req; history.selectedIndex = $index"
-      ng-mouseenter="history.viewingReq = req"
-      ng-mouseleave="history.viewingReq = history.selectedReq"
-      ng-dblclick="history.restore(req)"
-      aria-label="{{:: 'console.historyPage.itemOfRequestListAriaLabel' | i18n: { defaultMessage: 'Request: {historyItem}', values: { historyItem: history.describeReq(req) },} }}"
-      aria-selected="{{ history.selectedReq === req }}"
+  <div class="conHistory__body">
+    <ul
+      class="list-group conHistory__reqs"
+      tabindex="0"
+      role="listbox"
+      aria-activedescendant="historyReq{{ history.selectedIndex }}"
+      scrollto-activedescendant
+      ng-keydown="history.onKeyDown($event)"
+      aria-label="{{:: 'console.historyPage.requestListAriaLabel' | i18n: { defaultMessage: 'History of sent requests' } }}"
     >
-      {{ history.describeReq(req) }}
-      <span class="conHistory__reqIcon"><i class="fa fa-chevron-right"></i></span>
-    </li>
-  </ul>
+      <li
+        class="list-group-item conHistory__req"
+        role="option"
+        ng-repeat="req in history.reqs"
+        id="historyReq{{$index}}"
+        ng-class="{ 'conHistory__req-selected': history.viewingReq === req }"
+        ng-click="history.selectedReq = req; history.viewingReq = req; history.selectedIndex = $index"
+        ng-mouseenter="history.viewingReq = req"
+        ng-mouseleave="history.viewingReq = history.selectedReq"
+        ng-dblclick="history.restore(req)"
+        aria-label="{{:: 'console.historyPage.itemOfRequestListAriaLabel' | i18n: { defaultMessage: 'Request: {historyItem}', values: { historyItem: history.describeReq(req) },} }}"
+        aria-selected="{{ history.selectedReq === req }}"
+      >
+        {{ history.describeReq(req) }}
+        <span class="conHistory__reqIcon"><i class="fa fa-chevron-right"></i></span>
+      </li>
+    </ul>
 
-  <sense-history-viewer class="conHistory__viewer" req="history.viewingReq" />
-</div>
+    <sense-history-viewer class="conHistory__viewer" req="history.viewingReq" />
+  </div>
+
+  <div class="conHistory__footer">
+    <button
+      class="kuiButton kuiButton--danger"
+      ng-click="history.clear()"
+      i18n-id="console.historyPage.clearHistoryButtonLabel"
+      i18n-default-message="Clear"
+    ></button>
+
+    <div class="conHistory__footerButtonsRight">
+      <button
+        class="kuiButton kuiButton--hollow"
+        ng-click="history.close()"
+        i18n-id="console.historyPage.closehistoryButtonLabel"
+        i18n-default-message="Close"
+      ></button>
 
-<div class="conHistory__footer">
-  <button
-    class="kuiButton kuiButton--danger"
-    ng-click="history.clear()"
-    i18n-id="console.historyPage.clearHistoryButtonLabel"
-    i18n-default-message="Clear"
-  ></button>
-  <button
-    class="kuiButton kuiButton--primary"
-    ng-disabled="!history.selectedReq"
-    ng-click="history.restore()"
-    i18n-id="console.historyPage.applyHistoryButtonLabel"
-    i18n-default-message="Apply"
-  >
-  </button>
+      <button
+        class="kuiButton kuiButton--primary"
+        ng-disabled="!history.selectedReq"
+        ng-click="history.restore()"
+        i18n-id="console.historyPage.applyHistoryButtonLabel"
+        i18n-default-message="Apply"
+      ></button>
+    </div>
+  </div>
 </div>
diff --git a/src/legacy/core_plugins/console/public/src/directives/sense_history.js b/src/legacy/core_plugins/console/public/src/directives/sense_history.js
index dfcee2b87ba73..29ad60a84e740 100644
--- a/src/legacy/core_plugins/console/public/src/directives/sense_history.js
+++ b/src/legacy/core_plugins/console/public/src/directives/sense_history.js
@@ -36,6 +36,7 @@ require('ui/modules')
       scope: {
         isShown: '=',
         historyDirty: '=',
+        close: '&',
       },
       controller: function ($scope, $element) {
         $scope.$watch('historyDirty', () => {
@@ -73,6 +74,10 @@ require('ui/modules')
           this.init();
         };
 
+        this.close = () => {
+          $scope.close();
+        };
+
         this.restore = (req = this.selectedReq) => {
           history.restoreFromHistory(req);
         };