Skip to content

Commit

Permalink
[Discover] Deangularize the hits counter and create a react component (
Browse files Browse the repository at this point in the history
…#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>
  • Loading branch information
stratoula and elasticmachine authored May 11, 2020
1 parent f99cc49 commit 7fd09b3
Show file tree
Hide file tree
Showing 9 changed files with 236 additions and 28 deletions.
10 changes: 0 additions & 10 deletions src/plugins/discover/public/application/_discover.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
24 changes: 6 additions & 18 deletions src/plugins/discover/public/application/angular/discover.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'} }}"
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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' }],
]);
}
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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,');
1 change: 1 addition & 0 deletions src/plugins/discover/public/application/helpers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@
*/

export { shortenDottedString } from './shorten_dotted_string';
export { formatNumWithCommas } from './format_number_with_commas';
2 changes: 2 additions & 0 deletions src/plugins/discover/public/get_inner_angular.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -151,6 +152,7 @@ export function initializeInnerAngularModule(
.directive('fixedScroll', FixedScrollProvider)
.directive('renderComplete', createRenderCompleteDirective)
.directive('discoverSidebar', createDiscoverSidebarDirective)
.directive('hitsCounter', createHitsCounterDirective)
.service('debounce', ['$timeout', DebounceProviderTimeout]);
}

Expand Down

0 comments on commit 7fd09b3

Please sign in to comment.