[Discover] Deangularize Skip to bottom button (#69811)

Co-authored-by: Elastic Machine <[email protected]>

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;
-  }
 }

src/plugins/discover/public/application/angular/discover.html

@@ -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"
@@ -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>
 
               <div
                 ng-if="rows.length == opts.sampleSize"

src/plugins/discover/public/application/angular/discover.js

@@ -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;

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';

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<SkipBottomButtonProps>;
+
+  beforeAll(() => {
+    props = {
+      onClick: jest.fn(),
+    };
+  });
+
+  it('should be clickable', function () {
+    component = mountWithIntl(<SkipBottomButton {...props} />);
+    component.simulate('click');
+    expect(props.onClick).toHaveBeenCalled();
+  });
+});

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 (
+    <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>
+  );
+}

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' }]]);
+}

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)