Merge pull request #7 from andreadelrio/expandedDocFlyout

Improve Expanded Document flyout design
andreadelrio · Sep 14, 2020 · e4750d8 · e4750d8
2 parents d070949 + 72bdf33
commit e4750d8
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 52 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
@@ -26,9 +26,9 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiIcon,
-  EuiLink,
   EuiPortal,
   EuiTitle,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { DocViewer } from '../doc_viewer/doc_viewer';
 import { IndexPattern } from '../../../kibana_services';
@@ -67,40 +67,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/...lugins/discover/public/application/components/discover_grid/discover_grid_view_button.tsx b/...lugins/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>