K7 Discover app cleanup (#30037) (#30282)

Does some design cleanup in the discover application.

src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js

@@ -117,7 +117,7 @@ describe('docViews', function () {
 
     describe('filtering', function () {
       it('should apply a filter when clicking filterable fields', function () {
-        const cell = $elem.find('td[title="bytes"]').next();
+        const cell = $elem.find('td[title="bytes"]').prev();
 
         cell.find('.fa-search-plus').first().click();
         expect($scope.filter.calledOnce).to.be(true);
@@ -128,7 +128,7 @@ describe('docViews', function () {
       });
 
       it('should NOT apply a filter when clicking non-filterable fields', function () {
-        const cell = $elem.find('td[title="area"]').next();
+        const cell = $elem.find('td[title="area"]').prev();
 
         cell.find('.fa-search-plus').first().click();
         expect($scope.filter.calledOnce).to.be(false);

src/legacy/core_plugins/kbn_doc_views/public/views/table.html

@@ -1,11 +1,6 @@
 <table class="table table-condensed">
   <tbody>
     <tr ng-repeat="field in fields" data-test-subj="tableDocViewRow-{{ field }}">
-      <td field-name="field"
-          field-type="mapping[field].type"
-          width="1%"
-          class="kbnDocViewer__field">
-      </td>
       <td width="1%" class="kbnDocViewer__buttons" ng-if="filter">
         <span ng-if="mapping[field].filterable">
           <button
@@ -14,6 +9,7 @@
             data-test-subj="addInclusiveFilterButton"
             tooltip="{{ ::'kbnDocViews.table.filterForValueButtonTooltip' | i18n: { defaultMessage: 'Filter for value' } }}"
             tooltip-append-to-body="1"
+            class="kbnDocViewer__actionButton"
           >
             <i
               class="fa fa-search-plus"></i>
@@ -24,6 +20,7 @@
             ng-click="filter(mapping[field], flattened[field],'-')"
             tooltip="{{ ::'kbnDocViews.table.filterOutValueButtonTooltip' | i18n: { defaultMessage: 'Filter out value' } }}"
             tooltip-append-to-body="1"
+            class="kbnDocViewer__actionButton"
           >
             <i
               class="fa fa-search-minus"></i>
@@ -32,6 +29,7 @@
         <span
           ng-if="!mapping[field].filterable"
           tooltip="{{ ::'kbnDocViews.table.unindexedFieldsCanNotBeSearchedTooltip' | i18n: { defaultMessage: 'Unindexed fields can not be searched' } }}"
+          class="kbnDocViewer__actionButton"
         >
           <i class="fa fa-search-plus text-muted"></i>
           <i class="fa fa-search-minus text-muted"></i>
@@ -43,6 +41,7 @@
             ng-click="toggleColumn(field)"
             tooltip-append-to-body="1"
             tooltip="{{ ::'kbnDocViews.table.toggleColumnInTableButtonTooltip' | i18n: { defaultMessage: 'Toggle column in table' } }}"
+            class="kbnDocViewer__actionButton"
           >
             <i
               class="fa fa-columns"
@@ -55,6 +54,7 @@
             ng-click="filter('_exists_', field, '+')"
             tooltip="{{ ::'kbnDocViews.table.filterForFieldPresentButtonTooltip' | i18n: { defaultMessage: 'Filter for field present' } }}"
             tooltip-append-to-body="1"
+            class="kbnDocViewer__actionButton"
           >
             <i
               class="fa fa-asterisk"></i>
@@ -63,17 +63,23 @@
         <span
           ng-if="indexPattern.metaFields.includes(field)"
           tooltip="{{ ::'kbnDocViews.table.unableToFilterForPresenceOfMetaFieldsTooltip' | i18n: { defaultMessage: 'Unable to filter for presence of meta fields' } }}"
+          class="kbnDocViewer__actionButton"
         >
           <i class="fa fa-asterisk text-muted"></i>
         </span>
         <span
           ng-if="mapping[field].scripted"
           tooltip="{{ ::'kbnDocViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip' | i18n: { defaultMessage: 'Unable to filter for presence of scripted fields' } }}"
+          class="kbnDocViewer__actionButton"
         >
           <i class="fa fa-asterisk text-muted"></i>
         </span>
       </td>
-
+      <td field-name="field"
+          field-type="mapping[field].type"
+          width="1%"
+          class="kbnDocViewer__field">
+      </td>
       <td>
         <i ng-if="!mapping[field] && field[0] === '_'"
           tooltip-placement="top"

src/legacy/core_plugins/kibana/public/discover/_discover.scss

@@ -123,16 +123,14 @@ discover-app {
 .dscFieldDetails {
   padding: 10px;
   background-color: shade($euiColorLightestShade, 5%);
-  color: shade($euiColorEmptyShade, 65%);
+  color: $euiTextColor;
 }
 
 // SASSTODO: replace the padding and margin values with variables
 .dscFieldDetails__progress {
-  background-color: rgba(0, 0, 0, 0.8);
-  padding: 3px;
-  border-radius: $euiBorderRadius;
-  margin-left: 3px;
-  margin-right: 3px;
+  background-color: $euiColorEmptyShade;
+  color: $euiColorDarkShade;
+  padding: $euiSizeXS;
 }
 
 // SASSTODO: replace the margin-top value with a variable

src/legacy/core_plugins/kibana/public/discover/_hacks.scss

@@ -1,6 +1,7 @@
 // SASSTODO: the classname is dinamically generated with ng-class
 .tab-discover {
   overflow: hidden;
+  background: $euiColorEmptyShade;
 }
 
 // SASSTODO: these are Angular Bootstrap classes. Will be replaced by EUI

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

@@ -33,7 +33,7 @@
 
   <div class="dscSidebar__listHeader sidebar-list-header" ng-if="fields.length">
     <h3
-      class="sidebar-list-header-label"
+      class="euiFlexItem euiTitle euiTitle--xxsmall"
       id="selected_fields"
       tabindex="0"
       i18n-id="kbn.discover.fieldChooser.filter.selectedFieldsTitle"
@@ -54,7 +54,7 @@
 
   <div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium" ng-if="fields.length">
     <h3
-      class="euiFlexItem sidebar-list-header-label"
+      class="euiFlexItem euiTitle euiTitle--xxsmall"
       id="available_fields"
       tabindex="0"
       i18n-id="kbn.discover.fieldChooser.filter.availableFieldsTitle"

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html

@@ -93,7 +93,7 @@
   <a
     ng-href="{{field.details.visualizeUrl}}"
     ng-show="field.visualizable"
-    class="kuiButton kuiButton--secondary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"
+    class="kuiButton kuiButton--secondary kuiButton--small kuiVerticalRhythmSmall"
     data-test-subj="fieldVisualize-{{::field.name}}"
   >
     <span

src/legacy/core_plugins/kibana/public/discover/index.html

@@ -88,14 +88,15 @@
               ng-hide="fetchError"
               class="dscOverlay"
             >
-              <div class="euiTitle">
-                <h2
-                  i18n-id="kbn.discover.searchingTitle"
-                  i18n-default-message="Searching"
-                ></h2>
-              </div>
+              <h2
+                i18n-id="kbn.discover.searchingTitle"
+                i18n-default-message="Searching"
+                class="euiTitle euiTitle--small"
+              ></h2>
               <div class="euiSpacer euiSpacer--m"></div>
-              <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
+              <div class="euiLoadingSpinner euiLoadingSpinner--large"></div>
+              <div class="euiSpacer euiSpacer--m"></div>
+              <div ng-show="fetchStatus">{{fetchStatus.complete}} / {{fetchStatus.total}}</div>
             </div>
           </div>
 

src/ui/public/doc_table/components/table_row.js

@@ -61,7 +61,7 @@ module.directive('kbnTableRow', function ($compile, $httpParamSerializer, kbnUrl
       onRemoveColumn: '=?',
     },
     link: function ($scope, $el) {
-      $el.after('<tr data-test-subj="docTableDetailsRow">');
+      $el.after('<tr data-test-subj="docTableDetailsRow" class="kbnDocTableDetails__row">');
       $el.empty();
 
       // when we compile the details, we use this $scope

src/ui/public/doc_table/components/table_row/_cell.scss

@@ -2,6 +2,10 @@
   white-space: pre-wrap;
 }
 
+.kbnDocTableCell__toggleDetails {
+  padding: 4px 0 0 0!important;
+}
+
 .kbnDocTableCell__filter {
   position: absolute;
   white-space: nowrap;

src/ui/public/doc_table/components/table_row/_details.scss

@@ -5,3 +5,21 @@
   float: right;
   padding-top: $euiSizeS; /* 1 */
 }
+
+// Overwrite the border on the bootstrap table
+.kbnDocTableDetails__row {
+
+  > td {
+    // Offsets negative margins from an inner flex group
+    padding: $euiSizeL !important;
+
+    tr:hover td {
+      background: tintOrShade($euiColorLightestShade, 50%, 20%);
+    }
+  }
+
+  td {
+    border-top: none !important;
+  }
+}
+

src/ui/public/doc_table/components/table_row/details.html

@@ -1,20 +1,42 @@
 <td colspan="{{ columns.length + 2 }}">
-  <div class="kbnDocTableDetails__actions">
-    <a
-      class="kuiButton kuiButton--small kuiButton--secondary"
-      data-test-subj="docTableRowAction"
-      ng-href="{{ getContextAppHref() }}"
-      ng-if="indexPattern.isTimeBased()"
-      i18n-id="common.ui.docTable.tableRow.viewSurroundingDocumentsLinkText"
-      i18n-default-message="View surrounding documents"
-    ></a>
-    <a
-      class="kuiButton kuiButton--small kuiButton--secondary"
-      data-test-subj="docTableRowAction"
-      ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}"
-      i18n-id="common.ui.docTable.tableRow.viewSingleDocumentLinkText"
-      i18n-default-message="View single document"
-    ></a>
+  <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--justifyContentSpaceBetween">
+    <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+      <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <icon type="'folderOpen'" size="'m'"></icon>
+        </div>
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <h4
+            class="euiTitle euiTitle--xsmall"
+            i18n-id="common.ui.docTable.tableRow.detailHeading"
+            i18n-default-message="Expanded document"
+          ></h4>
+        </div>
+      </div>
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+          <a
+            class="euiLink"
+            data-test-subj="docTableRowAction"
+            ng-href="{{ getContextAppHref() }}"
+            ng-if="indexPattern.isTimeBased()"
+            i18n-id="common.ui.docTable.tableRow.viewSurroundingDocumentsLinkText"
+            i18n-default-message="View surrounding documents"
+          ></a>
+        </div>
+        <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+          <a
+            class="euiLink"
+            data-test-subj="docTableRowAction"
+            ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}"
+            i18n-id="common.ui.docTable.tableRow.viewSingleDocumentLinkText"
+            i18n-default-message="View single document"
+          ></a>
+        </div>
+      </div>
+    </div>
   </div>
   <doc-viewer
     columns="columns"

src/ui/public/doc_table/components/table_row/open.html

@@ -1,12 +1,10 @@
-<td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn">
+<td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn" class="kbnDocTableCell__toggleDetails">
   <button
-    class="kbnDocTableOpen__button"
+    class="euiButtonIcon euiButtonIcon--text"
     aria-expanded="{{!!open}}"
     aria-label="{{ ::'common.ui.docTable.tableRow.toggleRowDetailsButtonAriaLabel' | i18n: {defaultMessage: 'Toggle row details'} }}"
   >
-    <span
-      class="kuiIcon"
-      ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }"
-    ></span>
+    <icon ng-if="open" type="'arrowDown'" size="'s'"></icon>
+    <icon ng-if="!open" type="'arrowRight'" size="'s'"></icon>
   </button>
 </td>

src/ui/public/doc_viewer/__tests__/doc_viewer.js

@@ -81,14 +81,14 @@ describe('docViewer', function () {
       registerExtension();
       registerExtension({ title: 'exampleView2' });
       init();
-      expect($elem.find('.nav-tabs li').length).to.be(2);
+      expect($elem.find('.euiTabs button').length).to.be(2);
     });
 
     it('should activate the first view in order', function () {
       registerExtension({ order: 2 });
       registerExtension({ title: 'exampleView2' });
       init();
-      expect($elem.find('.nav-tabs .active').text().trim()).to.be('exampleView2');
+      expect($elem.find('.euiTabs .euiTab-isSelected').text().trim()).to.be('exampleView2');
     });
   });
 });

src/ui/public/doc_viewer/_doc_viewer.scss

@@ -5,6 +5,11 @@
     word-break: break-all;
     word-wrap: break-word;
     white-space: pre-wrap;
+    color: $euiColorFullShade;
+  }
+
+  .dscFieldName {
+    color: $euiColorDarkShade;
   }
 
   td,
@@ -15,6 +20,12 @@
   tr:first-child td {
     border-top-color: transparent;
   }
+
+  tr:hover {
+    .kbnDocViewer__actionButton {
+      opacity: 1;
+    }
+  }
 }
 
 .kbnDocViewer__content {
@@ -26,3 +37,11 @@
 .kbnDocViewer__field {
   white-space: nowrap;
 }
+
+.kbnDocViewer__actionButton {
+  opacity: 0;
+
+  &:focus {
+    opacity: 1;
+  }
+}

src/ui/public/doc_viewer/doc_viewer.js

@@ -39,25 +39,26 @@ uiModules.get('kibana')
       template: function ($el) {
         const $viewer = $('<div class="kbnDocViewer">');
         $el.append($viewer);
-        const $tabs = $('<ul class="nav nav-tabs" role="tablist">');
+        const $tabs = $('<div class="euiTabs euiTabs--small" role="tablist">');
         const $content = $('<div class="kbnDocViewer__content" role="tabpanel">');
         $viewer.append($tabs);
         $viewer.append($content);
         docViews.inOrder.forEach(view => {
           const $tab = $(
-            `<li
+            `<button
             ng-show="docViews['${view.name}'].shouldShow(hit)"
-            ng-class="{active: mode == '${view.name}'}"
+            class="euiTab"
+            ng-class="{'euiTab euiTab-isSelected': mode === '${view.name}', 'euiTab': true}"
             role="tab"
             aria-selected="{{mode === '${view.name}'}}"
+            ng-click="mode='${view.name}'"
           >
-            <a
-              ng-click="mode='${view.name}'"
-              kbn-accessible-click
+            <span
+              class="euiTab__content"
             >
               ${view.title}
-            </a>
-          </li>`
+            </span>
+          </button>`
           );
           $tabs.append($tab);
           const $viewAttrs = `

src/ui/public/filter_bar/_global_filter_group.scss

@@ -9,7 +9,7 @@
 
 // sass-lint:disable quotes
 .globalFilterGroup__branch {
-  padding: $euiSize $euiSize $euiSizeS $euiSizeS;
+  padding: $euiSize $euiSize 0 $euiSizeS;
   background-repeat: no-repeat;
   background-position: right top;
   background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");

src/ui/public/filter_bar/filter_bar.tsx

@@ -115,7 +115,7 @@ class FilterBarUI extends Component<Props, State> {
     const newFilter = buildEmptyFilter(isPinned, index);
 
     const button = (
-      <EuiButtonEmpty size="s" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
+      <EuiButtonEmpty size="xs" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
         +{' '}
         <FormattedMessage
           id="common.ui.filterBar.addFilterButtonLabel"
@@ -125,27 +125,29 @@ class FilterBarUI extends Component<Props, State> {
     );
 
     return (
-      <EuiPopover
-        id="addFilterPopover"
-        button={button}
-        isOpen={this.state.isAddFilterPopoverOpen}
-        closePopover={this.onCloseAddFilterPopover}
-        anchorPosition="downLeft"
-        withTitle
-        panelPaddingSize="none"
-        ownFocus={true}
-      >
-        <EuiFlexItem grow={false}>
-          <div style={{ width: 400 }}>
-            <FilterEditor
-              filter={newFilter}
-              indexPatterns={this.props.indexPatterns}
-              onSubmit={this.onAdd}
-              onCancel={this.onCloseAddFilterPopover}
-            />
-          </div>
-        </EuiFlexItem>
-      </EuiPopover>
+      <EuiFlexItem grow={false}>
+        <EuiPopover
+          id="addFilterPopover"
+          button={button}
+          isOpen={this.state.isAddFilterPopoverOpen}
+          closePopover={this.onCloseAddFilterPopover}
+          anchorPosition="downLeft"
+          withTitle
+          panelPaddingSize="none"
+          ownFocus={true}
+        >
+          <EuiFlexItem grow={false}>
+            <div style={{ width: 400 }}>
+              <FilterEditor
+                filter={newFilter}
+                indexPatterns={this.props.indexPatterns}
+                onSubmit={this.onAdd}
+                onCancel={this.onCloseAddFilterPopover}
+              />
+            </div>
+          </EuiFlexItem>
+        </EuiPopover>
+      </EuiFlexItem>
     );
   }
 

src/ui/public/filter_bar/filter_item.tsx

@@ -181,7 +181,7 @@ class FilterItemUI extends Component<Props, State> {
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         button={badge}
-        anchorPosition="downCenter"
+        anchorPosition="downLeft"
         withTitle={true}
         panelPaddingSize="none"
       >

src/ui/public/styles/_legacy/components/_sidebar.scss

@@ -8,7 +8,7 @@
   border-bottom-color: transparent;
 
   .sidebar-well {
-    background-color: tint($euiColorPrimary, 90%);
+    background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
   }
 
   .sidebar-list {
@@ -94,7 +94,7 @@
     padding: $euiSizeXS $euiSizeS;
     display: flex;
     justify-content: space-between;
-    background-color: shade($euiColorPrimary, 60%);
+    background-color: shadeOrTint($euiColorPrimary, 60%, 60%);
     color: $euiColorEmptyShade;
     line-height: $euiSizeL;
 
@@ -110,8 +110,9 @@
     }
   }
 
-  .index-pattern-selection .ui-select-toggle {
-    border-radius: 0;
+  .index-pattern-selection {
+    padding: $euiSizeS;
+    padding-bottom: 0;
   }
 
   .index-pattern-selection .ui-select-choices {

src/ui/ui_render/views/ui_app.pug

@@ -30,7 +30,7 @@ block content
     .kibanaWelcomeText {
       font-size: 14px;
       font-family: Sans-serif;
-      color: #343741;
+      color: #98A2B3;
       animation: fadeIn 1s ease-in-out;
       animation-fill-mode: forwards;
       opacity: 0;