[Discover] Deangularize the hits counter and create a react component (…

…#65631) (#65881)

* Deangularize the hits counter and create a react component

* Add aria-label to button for accessibility

* Add icon to the link button and use EuiText

* Remove snapshots and test with findTestSubject

* Change toString with String()

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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'} }}"

src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { HitsCounter, HitsCounterProps } from './hits_counter';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('hits counter', function() {
+  let props: HitsCounterProps;
+  let component: ReactWrapper<HitsCounterProps>;
+
+  beforeAll(() => {
+    props = {
+      onResetQuery: jest.fn(),
+      showResetButton: true,
+      hits: 2,
+    };
+  });
+
+  it('HitsCounter renders a button by providing the showResetButton property', () => {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(1);
+  });
+
+  it('HitsCounter not renders a button when the showResetButton property is false', () => {
+    component = mountWithIntl(
+      <HitsCounter hits={2} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(0);
+  });
+
+  it('expect to render the number of hits', function() {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('2');
+  });
+
+  it('expect to render 1,899 hits if 1899 hits given', function() {
+    component = mountWithIntl(
+      <HitsCounter hits={1899} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('1,899');
+  });
+
+  it('should reset query', function() {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    findTestSubject(component, 'resetSavedSearch').simulate('click');
+    expect(props.onResetQuery).toHaveBeenCalled();
+  });
+});

src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx

@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { formatNumWithCommas } from '../../helpers';
+
+export interface HitsCounterProps {
+  /**
+   * the number of query hits
+   */
+  hits: number;
+  /**
+   * displays the reset button
+   */
+  showResetButton: boolean;
+  /**
+   * resets the query
+   */
+  onResetQuery: () => void;
+}
+
+export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) {
+  return (
+    <I18nProvider>
+      <EuiFlexGroup
+        gutterSize="s"
+        className="dscResultCount"
+        responsive={false}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <strong data-test-subj="discoverQueryHits">{formatNumWithCommas(hits)}</strong>{' '}
+            <FormattedMessage
+              id="discover.hitsPluralTitle"
+              defaultMessage="{hits, plural, one {hit} other {hits}}"
+              values={{
+                hits,
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        {showResetButton && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="refresh"
+              data-test-subj="resetSavedSearch"
+              onClick={onResetQuery}
+              size="s"
+              aria-label={i18n.translate('discover.reloadSavedSearchButton', {
+                defaultMessage: 'Reset search',
+              })}
+            >
+              <FormattedMessage
+                id="discover.reloadSavedSearchButton"
+                defaultMessage="Reset search"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}

src/plugins/discover/public/application/components/hits_counter/hits_counter_directive.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { HitsCounter } from './hits_counter';
+
+export function createHitsCounterDirective(reactDirective: any) {
+  return reactDirective(HitsCounter, [
+    ['hits', { watchDepth: 'reference' }],
+    ['showResetButton', { watchDepth: 'reference' }],
+    ['onResetQuery', { watchDepth: 'reference' }],
+  ]);
+}

src/plugins/discover/public/application/components/hits_counter/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { HitsCounter } from './hits_counter';
+export { createHitsCounterDirective } from './hits_counter_directive';

src/plugins/discover/public/application/helpers/format_number_with_commas.ts

@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const COMMA_SEPARATOR_RE = /(\d)(?=(\d{3})+(?!\d))/g;
+
+/**
+ * Converts a number to a string and adds commas
+ * as thousands separators
+ */
+export const formatNumWithCommas = (input: number) =>
+  String(input).replace(COMMA_SEPARATOR_RE, '$1,');

src/plugins/discover/public/application/helpers/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { shortenDottedString } from './shorten_dotted_string';
+export { formatNumWithCommas } from './format_number_with_commas';

src/plugins/discover/public/get_inner_angular.ts

@@ -57,6 +57,7 @@ import {
   createTopNavHelper,
 } from '../../kibana_legacy/public';
 import { createDiscoverSidebarDirective } from './application/components/sidebar';
+import { createHitsCounterDirective } from '././application/components/hits_counter';
 import { DiscoverStartPlugins } from './plugin';
 
 /**
@@ -151,6 +152,7 @@ export function initializeInnerAngularModule(
     .directive('fixedScroll', FixedScrollProvider)
     .directive('renderComplete', createRenderCompleteDirective)
     .directive('discoverSidebar', createDiscoverSidebarDirective)
+    .directive('hitsCounter', createHitsCounterDirective)
     .service('debounce', ['$timeout', DebounceProviderTimeout]);
 }