[Discover] Replace font awesome icons with Eui (#103503)

* [Discover] replace font awesome icons with eui

* [Discover] fix eslint

* [Discover] fix tests, update icon styles

* [Discover] fix eslint

* [Discover] fix functional related to awe icons

* [Discover] add empty line for scss file

* [Discover] fix eslint

* [Discover] simplify testSubjects

* Update src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx

Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>

* Update src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx

Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>

* [Discover] fix icons appearing problem

* [Discover] update test

* [Discover] remove redundant styles

* [Discover] update test snapshot

* Update src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx

Co-authored-by: Tim Roes <mail@timroes.de>

* [Discover] change tool bar text size

* [Discover] update test

* [Discover] replace button with EuiButton

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
Co-authored-by: Tim Roes <mail@timroes.de>

src/plugins/discover/public/application/angular/doc_table/_doc_table.scss

@@ -33,10 +33,6 @@ doc-table {
   th {
     white-space: nowrap;
     padding-right: $euiSizeS;
-
-    .fa {
-      font-size: 1.1em;
-    }
   }
 }
 
@@ -134,25 +130,3 @@ doc-table {
     }
   }
 }
-
-table {
-  th {
-    i.fa-sort {
-      color: $euiColorLightShade;
-    }
-
-    button.fa-sort-asc,
-    button.fa-sort-down,
-    i.fa-sort-asc,
-    i.fa-sort-down {
-      color: $euiColorPrimary;
-    }
-
-    button.fa-sort-desc,
-    button.fa-sort-up,
-    i.fa-sort-desc,
-    i.fa-sort-up {
-      color: $euiColorPrimary;
-    }
-  }
-}

src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss

@@ -2,7 +2,7 @@
   white-space: nowrap;
 }
 .kbnDocTableHeader button {
-  margin-left: $euiSizeXS;
+  margin-left: $euiSizeXS * .5;
 }
 .kbnDocTableHeader__move,
 .kbnDocTableHeader__sortChange {
@@ -12,3 +12,7 @@
     opacity: 1;
   }
 }
+.kbnDocTableHeader__actions {
+  display: flex;
+  align-items: center;
+}

src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 interface Props {
   hasPreviousPage: boolean;
@@ -18,35 +19,41 @@ interface Props {
 
 export function ToolBarPagerButtons(props: Props) {
   return (
-    <div className="kuiButtonGroup">
-      <button
-        className="kuiButton kuiButton--basic kuiButton--icon"
-        onClick={() => props.onPagePrevious()}
-        disabled={!props.hasPreviousPage}
-        data-test-subj="btnPrevPage"
-        aria-label={i18n.translate(
-          'discover.docTable.pager.toolbarPagerButtons.previousButtonAriaLabel',
-          {
-            defaultMessage: 'Previous page in table',
-          }
-        )}
-      >
-        <span className="kuiButton__icon kuiIcon fa-chevron-left" />
-      </button>
-      <button
-        className="kuiButton kuiButton--basic kuiButton--icon"
-        onClick={() => props.onPageNext()}
-        disabled={!props.hasNextPage}
-        data-test-subj="btnNextPage"
-        aria-label={i18n.translate(
-          'discover.docTable.pager.toolbarPagerButtons.nextButtonAriaLabel',
-          {
-            defaultMessage: 'Next page in table',
-          }
-        )}
-      >
-        <span className="kuiButton__icon kuiIcon fa-chevron-right" />
-      </button>
-    </div>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowLeft"
+          iconSize="m"
+          size="xs"
+          onClick={() => props.onPagePrevious()}
+          isDisabled={!props.hasPreviousPage}
+          data-test-subj="btnPrevPage"
+          aria-label={i18n.translate(
+            'discover.docTable.pager.toolbarPagerButtons.previousButtonAriaLabel',
+            {
+              defaultMessage: 'Previous page in table',
+            }
+          )}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          iconSize="m"
+          size="xs"
+          onClick={() => props.onPageNext()}
+          isDisabled={!props.hasNextPage}
+          data-test-subj="btnNextPage"
+          aria-label={i18n.translate(
+            'discover.docTable.pager.toolbarPagerButtons.nextButtonAriaLabel',
+            {
+              defaultMessage: 'Next page in table',
+            }
+          )}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.scss

@@ -0,0 +1,5 @@
+.kbnDocTable__toolBarText {
+  line-height: $euiLineHeight;
+  color: #69707D;
+  white-space: nowrap;
+}

src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import './tool_bar_pager_text.scss';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 
 interface Props {
@@ -18,7 +19,7 @@ interface Props {
 export function ToolBarPagerText({ startItem, endItem, totalItems }: Props) {
   return (
     <I18nProvider>
-      <div className="kuiToolBarText" data-test-subj="toolBarPagerText">
+      <div className="kbnDocTable__toolBarText" data-test-subj="toolBarPagerText">
         <FormattedMessage
           id="discover.docTable.pagerControl.pagesCountLabel"
           defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"