[Discover] Deangularize Skip to bottom button (#69811)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
8485d2fbac
commit
a40e58e898
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -65,18 +65,7 @@
|
|||
<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"
|
||||
|
@ -141,7 +130,7 @@
|
|||
on-remove-column="removeColumn"
|
||||
></doc-table>
|
||||
|
||||
<a tabindex="0" id="discoverBottomMarker"></a>
|
||||
<a tabindex="0" id="discoverBottomMarker">​</a>
|
||||
|
||||
<div
|
||||
ng-if="rows.length == opts.sampleSize"
|
||||
|
|
|
@ -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('/');
|
||||
};
|
||||
|
@ -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;
|
||||
|
|
|
@ -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';
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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' }]]);
|
||||
}
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue