Deangularize the hits counter and create a react component

Author: stratoula

src/plugins/discover/public/application/_discover.scss

@@ -38,17 +38,7 @@ discover-app {
 }
 
 .dscResultCount {
-  text-align: center;
   padding-top: $euiSizeXS;
-  padding-left: $euiSizeM;
-
-  .dscResultHits {
-    padding-left: $euiSizeXS;
-  }
-
-  > .kuiLink {
-    padding-left: $euiSizeM;
-  }
 }
 
 .dscTimechart__header {

src/plugins/discover/public/application/angular/discover.html

@@ -89,24 +89,12 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
               </span>
             </button>
 
-            <div class="dscResultCount">
-              <strong data-test-subj="discoverQueryHits">{{(hits || 0) | number:0}}</strong>
-              <span
-                class="dscResultHits"
-                i18n-id="discover.hitsPluralTitle"
-                i18n-default-message="{hits, plural, one {hit} other {hits}}"
-                i18n-values="{ hits }"
-              ></span>
-              <button
-                ng-if="opts.savedSearch.id"
-                class="kuiLink"
-                type="button"
-                id="reload_saved_search"
-                ng-click="resetQuery()"
-              >
-                {{::'discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reset search'} }}
-              </button>
-            </div>
+            <hits-counter
+              hits="hits || 0"
+              show-reset-button="opts.savedSearch.id"
+              on-reset-query="resetQuery"
+            >
+            </hits-counter>
 
             <section
               aria-label="{{::'discover.histogramOfFoundDocumentsAriaLabel' | i18n: {defaultMessage: 'Histogram of found documents'} }}"