From 8a780b942e2d0044b38220ec7f336afce594392f Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Sun, 30 Aug 2020 17:40:34 -0700
Subject: [PATCH 1/2] improve expanded doc flyout design

---
 .../discover_grid/discover_grid_flyout.tsx    | 55 ++++++++++---------
 .../discover_grid_view_button.tsx             |  2 +-
 .../components/table/table_row.tsx            | 40 +++++++-------
 .../table/table_row_btn_filter_add.tsx        |  2 +-
 .../table/table_row_btn_filter_exists.tsx     |  2 +-
 .../table/table_row_btn_filter_remove.tsx     |  2 +-
 .../table/table_row_btn_toggle_column.tsx     |  4 +-
 7 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
index 378c03d02cf10..0d81584ba4ce7 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
@@ -29,6 +29,7 @@ import {
   EuiLink,
   EuiPortal,
   EuiTitle,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { DocViewer } from '../doc_viewer/doc_viewer';
 import { IndexPattern } from '../../../kibana_services';
@@ -67,40 +68,44 @@ export const DiscoverGridFlyout = function DiscoverGridInner({
             <EuiFlexItem>
               <EuiTitle className="dscTable__flyoutHeader">
                 <h2>
-                  <EuiIcon type="folderOpen" size="l" />{' '}
+                  <EuiIcon type="expand" size="m" />{' '}
                   {i18n.translate('discover.grid.tableRow.detailHeading', {
                     defaultMessage: 'Expanded document',
                   })}
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiFlexGroup justifyContent="flexEnd">
-                {indexPattern.isTimeBased() && (
-                  <EuiFlexItem grow={false}>
-                    <EuiLink href={getContextAppHref ? getContextAppHref(hit._id) : ''}>
-                      {i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkText', {
-                        defaultMessage: 'View surrounding documents',
-                      })}
-                    </EuiLink>
-                  </EuiFlexItem>
-                )}
-                <EuiFlexItem grow={false}>
-                  <EuiLink
-                    href={`#/doc/${indexPattern.id}/${hit._index}?id=${encodeURIComponent(
-                      hit._id as string
-                    )}`}
-                  >
-                    {i18n.translate('discover.grid.tableRow.viewSingleDocumentLinkText', {
-                      defaultMessage: 'View single document',
-                    })}
-                  </EuiLink>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
+          <EuiFlexGroup direction="column" gutterSize="none" alignItems="flexEnd">
+            {indexPattern.isTimeBased() && (
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  size="xs"
+                  iconType="documents"
+                  href={getContextAppHref ? getContextAppHref(hit._id) : ''}
+                >
+                  {i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkText', {
+                    defaultMessage: 'View surrounding documents',
+                  })}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                size="xs"
+                iconType="document"
+                href={`#/doc/${indexPattern.id}/${hit._index}?id=${encodeURIComponent(
+                  hit._id as string
+                )}`}
+              >
+                {i18n.translate('discover.grid.tableRow.viewSingleDocumentLinkText', {
+                  defaultMessage: 'View single document',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
           <DocViewer
             hit={hit}
             columns={columns}
diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_view_button.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_view_button.tsx
index 0608e541a1194..e823b1bde01fe 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_view_button.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_view_button.tsx
@@ -32,7 +32,7 @@ export const ViewButton = ({ rowIndex }: { rowIndex: number }) => {
       onClick={() => setViewed(rowIndex)}
       className="dscTable__buttonToggle"
     >
-      <EuiIcon size="s" type={viewed === rowIndex ? 'eyeClosed' : 'eye'} />
+      <EuiIcon size="s" type={viewed === rowIndex ? 'expandMini' : 'expand'} />
     </button>
   );
 };
diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx
index 5f7dd9f37dcd3..699197e90b994 100644
--- a/src/plugins/discover/public/application/components/table/table_row.tsx
+++ b/src/plugins/discover/public/application/components/table/table_row.tsx
@@ -67,26 +67,6 @@ export function DocViewTableRow({
 
   return (
     <tr key={field} data-test-subj={`tableDocViewRow-${field}`}>
-      {typeof onFilter === 'function' && (
-        <td className="kbnDocViewer__buttons">
-          <DocViewTableRowBtnFilterAdd
-            disabled={!fieldMapping || !fieldMapping.filterable}
-            onClick={() => onFilter(fieldMapping, valueRaw, '+')}
-          />
-          <DocViewTableRowBtnFilterRemove
-            disabled={!fieldMapping || !fieldMapping.filterable}
-            onClick={() => onFilter(fieldMapping, valueRaw, '-')}
-          />
-          {typeof onToggleColumn === 'function' && (
-            <DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
-          )}
-          <DocViewTableRowBtnFilterExists
-            disabled={!fieldMapping || !fieldMapping.filterable}
-            onClick={() => onFilter('_exists_', field, '+')}
-            scripted={fieldMapping && fieldMapping.scripted}
-          />
-        </td>
-      )}
       <td className="kbnDocViewer__field">
         <FieldName
           fieldName={field}
@@ -112,6 +92,26 @@ export function DocViewTableRow({
           dangerouslySetInnerHTML={{ __html: value as string }}
         />
       </td>
+      {typeof onFilter === 'function' && (
+        <td className="kbnDocViewer__buttons">
+          <DocViewTableRowBtnFilterAdd
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter(fieldMapping, valueRaw, '+')}
+          />
+          <DocViewTableRowBtnFilterRemove
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter(fieldMapping, valueRaw, '-')}
+          />
+          {typeof onToggleColumn === 'function' && (
+            <DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
+          )}
+          <DocViewTableRowBtnFilterExists
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter('_exists_', field, '+')}
+            scripted={fieldMapping && fieldMapping.scripted}
+          />
+        </td>
+      )}
     </tr>
   );
 }
diff --git a/src/plugins/discover/public/application/components/table/table_row_btn_filter_add.tsx b/src/plugins/discover/public/application/components/table/table_row_btn_filter_add.tsx
index bd842eb5c6f72..142761768b472 100644
--- a/src/plugins/discover/public/application/components/table/table_row_btn_filter_add.tsx
+++ b/src/plugins/discover/public/application/components/table/table_row_btn_filter_add.tsx
@@ -49,7 +49,7 @@ export function DocViewTableRowBtnFilterAdd({ onClick, disabled = false }: Props
         data-test-subj="addInclusiveFilterButton"
         disabled={disabled}
         onClick={onClick}
-        iconType={'magnifyWithPlus'}
+        iconType={'plusInCircle'}
         iconSize={'s'}
       />
     </EuiToolTip>
diff --git a/src/plugins/discover/public/application/components/table/table_row_btn_filter_exists.tsx b/src/plugins/discover/public/application/components/table/table_row_btn_filter_exists.tsx
index dab22c103bc48..43a711fc72da5 100644
--- a/src/plugins/discover/public/application/components/table/table_row_btn_filter_exists.tsx
+++ b/src/plugins/discover/public/application/components/table/table_row_btn_filter_exists.tsx
@@ -61,7 +61,7 @@ export function DocViewTableRowBtnFilterExists({
         className="kbnDocViewer__actionButton"
         data-test-subj="addExistsFilterButton"
         disabled={disabled}
-        iconType={'indexOpen'}
+        iconType={'filter'}
         iconSize={'s'}
       />
     </EuiToolTip>
diff --git a/src/plugins/discover/public/application/components/table/table_row_btn_filter_remove.tsx b/src/plugins/discover/public/application/components/table/table_row_btn_filter_remove.tsx
index bbef54cb4ecc7..878088ae0a6d8 100644
--- a/src/plugins/discover/public/application/components/table/table_row_btn_filter_remove.tsx
+++ b/src/plugins/discover/public/application/components/table/table_row_btn_filter_remove.tsx
@@ -49,7 +49,7 @@ export function DocViewTableRowBtnFilterRemove({ onClick, disabled = false }: Pr
         data-test-subj="removeInclusiveFilterButton"
         disabled={disabled}
         onClick={onClick}
-        iconType={'magnifyWithMinus'}
+        iconType={'minusInCircle'}
         iconSize={'s'}
       />
     </EuiToolTip>
diff --git a/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx b/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx
index 3e5a057929701..1a32ba3be1712 100644
--- a/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx
+++ b/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx
@@ -37,7 +37,7 @@ export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = fal
         className="kbnDocViewer__actionButton"
         data-test-subj="toggleColumnButton"
         disabled
-        iconType={'tableOfContents'}
+        iconType={'listAdd'}
         iconSize={'s'}
       />
     );
@@ -59,7 +59,7 @@ export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = fal
         onClick={onClick}
         className="kbnDocViewer__actionButton"
         data-test-subj="toggleColumnButton"
-        iconType={'tableOfContents'}
+        iconType={'listAdd'}
         iconSize={'s'}
       />
     </EuiToolTip>

From 72bdf33dd1d16d9180d5f748f11180a1a5b90a31 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Sun, 30 Aug 2020 18:21:53 -0700
Subject: [PATCH 2/2] remove EuiLink

---
 .../components/discover_grid/discover_grid_flyout.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
index 0d81584ba4ce7..f2987fcec7fe9 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
@@ -26,7 +26,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiIcon,
-  EuiLink,
   EuiPortal,
   EuiTitle,
   EuiButtonEmpty,