Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Discover] Deangularize Skip to bottom button #69811

Merged
merged 10 commits into from
Jun 30, 2020
12 changes: 1 addition & 11 deletions src/plugins/discover/public/application/_discover.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
15 changes: 2 additions & 13 deletions src/plugins/discover/public/application/angular/discover.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
<div class="dscWrapper__content" ng-show="resultState === 'ready'">
<!-- result -->
<div class="dscResults">
<button
class="kuiButton kuiButton--basic kuiButton--iconText dscSkipButton"
ng-click="showAllRows(); scrollToBottom()"
>
<span class="kuiButton__inner">
<span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-down"></span>
<span
i18n-id="discover.skipToBottomButtonLabel"
i18n-default-message="Skip to bottom"
></span>
</span>
</button>
<skip-bottom-button on-click="onSkipBottomButtonClick"></skip-bottom-button>

<hits-counter
hits="hits || 0"
Expand Down Expand Up @@ -141,7 +130,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
on-remove-column="removeColumn"
></doc-table>

<a tabindex="0" id="discoverBottomMarker"></a>
<a tabindex="0" id="discoverBottomMarker">&#8203;</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This symbol actually adds a line of whitespace, is this intended?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. From my tests Safari won't scroll to the marker if empty. For this reason I had to add this empty space character to the node.


<div
ng-if="rows.length == opts.sampleSize"
Expand Down
27 changes: 16 additions & 11 deletions src/plugins/discover/public/application/angular/discover.js
Original file line number Diff line number Diff line change
Expand Up @@ -943,6 +943,22 @@ function discoverController(
$route.reload();
};

$scope.onSkipBottomButtonClick = function () {
// show all the Rows
$scope.minimumVisibleRows = $scope.hits;

// delay scrolling to after the rows have been rendered
const bottomMarker = $element.find('#discoverBottomMarker');
$timeout(() => {
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('/');
};
Expand Down Expand Up @@ -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;
Expand Down
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 { SkipBottomButton } from './skip_bottom_button';
export { createSkipBottomButtonDirective } from './skip_bottom_button_directive';
Original file line number Diff line number Diff line change
@@ -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<SkipBottomButtonProps>;

beforeAll(() => {
props = {
onClick: jest.fn(),
};
});

it('should be clickable', function () {
component = mountWithIntl(<SkipBottomButton {...props} />);
component.simulate('click');
expect(props.onClick).toHaveBeenCalled();
});
});
Original file line number Diff line number Diff line change
@@ -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 (
<I18nProvider>
<EuiSkipLink
size="s"
// @ts-ignore
onClick={(event) => {
// 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=""
>
<FormattedMessage
id="discover.skipToBottomButtonLabel"
defaultMessage="Skip to end of table"
/>
</EuiSkipLink>
</I18nProvider>
);
}
Original file line number Diff line number Diff line change
@@ -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' }]]);
}
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 @@ -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
Expand Down Expand Up @@ -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)
Expand Down