From 652812d9c3fab1e1aa1e9624bfc4e00197dd92c6 Mon Sep 17 00:00:00 2001 From: Marco Liberati Date: Tue, 30 Jun 2020 10:59:14 +0200 Subject: [PATCH] [Discover] Deangularize Skip to bottom button (#69811) Co-authored-by: Elastic Machine --- .../public/application/_discover.scss | 12 +---- .../public/application/angular/discover.html | 15 +----- .../public/application/angular/discover.js | 27 ++++++---- .../components/skip_bottom_button/index.ts | 21 ++++++++ .../skip_bottom_button.test.tsx | 41 ++++++++++++++ .../skip_bottom_button/skip_bottom_button.tsx | 53 +++++++++++++++++++ .../skip_bottom_button_directive.ts | 23 ++++++++ .../discover/public/get_inner_angular.ts | 2 + 8 files changed, 159 insertions(+), 35 deletions(-) create mode 100644 src/plugins/discover/public/application/components/skip_bottom_button/index.ts create mode 100644 src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx create mode 100644 src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx create mode 100644 src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button_directive.ts diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index b0f3dfaf96c4f3..1aaa0a24357edd 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -100,16 +100,6 @@ discover-app { .dscSkipButton { position: absolute; - left: -10000px; + right: $euiSizeM; top: $euiSizeXS; - width: 1px; - height: 1px; - overflow: hidden; - - &:focus { - left: initial; - right: $euiSize; - width: auto; - height: auto; - } } diff --git a/src/plugins/discover/public/application/angular/discover.html b/src/plugins/discover/public/application/angular/discover.html index 022c39afff27f5..3c16e4a6d9deee 100644 --- a/src/plugins/discover/public/application/angular/discover.html +++ b/src/plugins/discover/public/application/angular/discover.html @@ -65,18 +65,7 @@

{{screenTitle}}

- + {{screenTitle}} on-remove-column="removeColumn" > - + ​
{ + bottomMarker.focus(); + // The anchor tag is not technically empty (it's a hack to make Safari scroll) + // so the browser will show a highlight: remove the focus once scrolled + $timeout(() => { + bottomMarker.blur(); + }, 0); + }, 0); + }; + $scope.newQuery = function () { history.push('/'); }; @@ -1007,17 +1023,6 @@ function discoverController( $window.scrollTo(0, 0); }; - $scope.scrollToBottom = function () { - // delay scrolling to after the rows have been rendered - $timeout(() => { - $element.find('#discoverBottomMarker').focus(); - }, 0); - }; - - $scope.showAllRows = function () { - $scope.minimumVisibleRows = $scope.hits; - }; - async function setupVisualization() { // If no timefield has been specified we don't create a histogram of messages if (!getTimeField()) return; diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/index.ts b/src/plugins/discover/public/application/components/skip_bottom_button/index.ts new file mode 100644 index 00000000000000..2feaa35e0d61f7 --- /dev/null +++ b/src/plugins/discover/public/application/components/skip_bottom_button/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 { SkipBottomButton } from './skip_bottom_button'; +export { createSkipBottomButtonDirective } from './skip_bottom_button_directive'; diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx new file mode 100644 index 00000000000000..bf417f9f1890b6 --- /dev/null +++ b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx @@ -0,0 +1,41 @@ +/* + * 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 { SkipBottomButton, SkipBottomButtonProps } from './skip_bottom_button'; +// @ts-ignore +import { findTestSubject } from '@elastic/eui/lib/test'; + +describe('Skip to Bottom Button', function () { + let props: SkipBottomButtonProps; + let component: ReactWrapper; + + beforeAll(() => { + props = { + onClick: jest.fn(), + }; + }); + + it('should be clickable', function () { + component = mountWithIntl(); + component.simulate('click'); + expect(props.onClick).toHaveBeenCalled(); + }); +}); diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx new file mode 100644 index 00000000000000..ccf05ca031a8da --- /dev/null +++ b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx @@ -0,0 +1,53 @@ +/* + * 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 { EuiSkipLink } from '@elastic/eui'; +import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; + +export interface SkipBottomButtonProps { + /** + * Action to perform on click + */ + onClick: () => void; +} + +export function SkipBottomButton({ onClick }: SkipBottomButtonProps) { + return ( + + { + // prevent the anchor to reload the page on click + event.preventDefault(); + // The destinationId prop cannot be leveraged here as the table needs + // to be updated first (angular logic) + onClick(); + }} + className="dscSkipButton" + destinationId="" + > + + + + ); +} diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button_directive.ts b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button_directive.ts new file mode 100644 index 00000000000000..27f17b25fd447c --- /dev/null +++ b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button_directive.ts @@ -0,0 +1,23 @@ +/* + * 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 { SkipBottomButton } from './skip_bottom_button'; + +export function createSkipBottomButtonDirective(reactDirective: any) { + return reactDirective(SkipBottomButton, [['onClick', { watchDepth: 'reference' }]]); +} diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover/public/get_inner_angular.ts index 2b4705645cfccd..05513eef936247 100644 --- a/src/plugins/discover/public/get_inner_angular.ts +++ b/src/plugins/discover/public/get_inner_angular.ts @@ -63,6 +63,7 @@ import { createLoadingSpinnerDirective } from '././application/components/loadin import { createTimechartHeaderDirective } from './application/components/timechart_header'; import { DiscoverStartPlugins } from './plugin'; import { getScopedHistory } from './kibana_services'; +import { createSkipBottomButtonDirective } from './application/components/skip_bottom_button'; /** * returns the main inner angular module, it contains all the parts of Angular Discover @@ -155,6 +156,7 @@ export function initializeInnerAngularModule( .directive('fixedScroll', FixedScrollProvider) .directive('renderComplete', createRenderCompleteDirective) .directive('discoverSidebar', createDiscoverSidebarDirective) + .directive('skipBottomButton', createSkipBottomButtonDirective) .directive('hitsCounter', createHitsCounterDirective) .directive('loadingSpinner', createLoadingSpinnerDirective) .directive('timechartHeader', createTimechartHeaderDirective)