Table pagination style change (#7435)

* Style pagination

* Removed use of important

* Removed space

* Align items

* Switched back to react table 6.8.6

* Component name change

web-console/src/bootstrap/react-table-custom-pagination.scss

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+
+.ReactTable {
+  .-pageJump {
+    .bp3-input {
+      background-color: #374653;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  .-pageSizeOptions {
+    .bp3-html-select select {
+      background-color: #394b59;
+      width: 90px;
+      position: relative;
+      top: -2px;
+    }
+  }
+}

web-console/src/bootstrap/react-table-custom-pagination.tsx

@@ -0,0 +1,176 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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 {Button, Classes, HTMLSelect} from '@blueprintjs/core';
+import * as React from 'react';
+
+import './react-table-custom-pagination.scss';
+
+interface ReactTableCustomPaginationProps extends React.Props<any> {
+  pages: number;
+  page: number;
+  showPageSizeOptions: boolean;
+  pageSizeOptions: number[];
+  pageSize: number;
+  showPageJump: boolean;
+  canPrevious: boolean;
+  canNext: boolean;
+  onPageSizeChange: any;
+  previousText: string;
+  nextText: string;
+  onPageChange: any;
+  ofText: string;
+  pageText: string;
+  rowsText: string;
+  style: Record<string, any>;
+}
+
+interface ReactTableCustomPaginationState {
+  page: string | number;
+}
+
+export class ReactTableCustomPagination extends React.Component<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
+  constructor(props: ReactTableCustomPaginationProps) {
+    super(props);
+
+    this.state = {
+      page: props.page
+    };
+  }
+
+  componentWillReceiveProps(nextProps: ReactTableCustomPaginationProps) {
+    this.setState({ page: nextProps.page });
+  }
+
+  getSafePage = (page: any) => {
+    if (Number.isNaN(page)) {
+      page = this.props.page;
+    }
+    return Math.min(Math.max(page, 0), this.props.pages - 1);
+  }
+
+  changePage = (page: any) => {
+    page = this.getSafePage(page);
+    this.setState({ page });
+    if (this.props.page !== page) {
+      this.props.onPageChange(page);
+    }
+  }
+
+  applyPage = (e: any) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const page = this.state.page;
+    this.changePage(page === '' ? this.props.page : page);
+  }
+
+  render() {
+    const {
+      pages,
+      page,
+      showPageSizeOptions,
+      pageSizeOptions,
+      pageSize,
+      showPageJump,
+      canPrevious,
+      canNext,
+      onPageSizeChange,
+      style,
+      previousText,
+      nextText,
+      ofText,
+      pageText,
+      rowsText
+    } = this.props;
+
+    return (
+      <div className={'-pagination'} style={style}>
+        <div className="-previous">
+          <Button
+            fill
+            onClick={() => {
+              if (!canPrevious) return;
+              this.changePage(page - 1);
+            }}
+            disabled={!canPrevious}
+          >
+            {previousText}
+          </Button>
+        </div>
+        <div className="-center">
+          <span className="-pageInfo">
+            {pageText}{' '}
+            {showPageJump
+              ? <div className="-pageJump">
+                <input
+                  className={Classes.INPUT}
+                  type={this.state.page === '' ? 'text' : 'number'}
+                  onChange={e => {
+                    const val: string = e.target.value;
+                    const page: number = parseInt(val, 10) - 1;
+                    if (val === '') {
+                      return this.setState({ page: val });
+                    }
+                    this.setState({ page: this.getSafePage(page) });
+                  }}
+                  value={this.state.page === '' ? '' : (this.state.page as number) + 1}
+                  onBlur={this.applyPage}
+                  onKeyPress={e => {
+                    if (e.which === 13 || e.keyCode === 13) {
+                      this.applyPage(e);
+                    }
+                  }}
+                />
+              </div>
+             : <span className="-currentPage">{page + 1}</span>
+            }
+            {' '}
+            {ofText} <span className="-totalPages">{pages || 1}</span>
+          </span>
+          {showPageSizeOptions && (
+            <span className="select-wrap -pageSizeOptions">
+              <HTMLSelect
+                onChange={e => onPageSizeChange(Number(e.target.value))}
+                value={pageSize}
+              >
+                {pageSizeOptions.map((option: any, i: number) => (
+                  <option key={i} value={option}>
+                    {`${option} ${rowsText}`}
+                  </option>
+                ))}
+              </HTMLSelect>
+            </span>
+          )}
+        </div>
+        <div className="-next">
+          <Button
+            fill
+            onClick={() => {
+              if (!canNext) return;
+              this.changePage(page + 1);
+            }}
+            disabled={!canNext}
+          >
+            {nextText}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}

web-console/src/bootstrap/react-table-defaults.tsx

@@ -16,20 +16,15 @@
  * limitations under the License.
  */
 
-import { Button } from '@blueprintjs/core';
 import * as React from 'react';
 import { Filter, ReactTableDefaults } from 'react-table';
 
 import { Loader } from '../components/loader';
 import { countBy, makeTextFilter } from '../utils';
 
-/* tslint:disable:max-classes-per-file */
+import { ReactTableCustomPagination } from './react-table-custom-pagination';
 
-class FullButton extends React.Component {
+/* tslint:disable:max-classes-per-file */
-  render() {
-    return <Button fill {...this.props}/>;
-  }
-}
 
 class NoData extends React.Component {
   render() {
@@ -50,8 +45,7 @@ Object.assign(ReactTableDefaults, {
   loadingText: '',
   NoDataComponent: NoData,
   FilterComponent: makeTextFilter(),
-  PreviousComponent: FullButton,
+  PaginationComponent: ReactTableCustomPagination,
-  NextComponent: FullButton,
   AggregatedComponent: (opt: any) => {
     const { subRows, column } = opt;
     const previewValues = subRows.filter((d: any) => typeof d[column.id] !== 'undefined').map((row: any) => row[column.id]);