chore: Breaks the dataViewCommon folder into TableCollection and Pagi…

…nation (#17132)

superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx

@@ -22,7 +22,7 @@ import configureStore from 'redux-mock-store';
 import { styledMount as mount } from 'spec/helpers/theming';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 import TableView from 'src/components/TableView';
-import { TableCollection } from 'src/components/dataViewCommon';
+import TableCollection from 'src/components/TableCollection';
 import { Provider } from 'react-redux';
 import { queries, user } from 'src/SqlLab/fixtures';
 

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx

@@ -23,7 +23,7 @@ import { getChartControlPanelRegistry } from '@superset-ui/core';
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import ModalTrigger from 'src/components/ModalTrigger';
 import { Tooltip } from 'src/components/Tooltip';
-import TableCollection from 'src/components/dataViewCommon/TableCollection';
+import TableCollection from 'src/components/TableCollection';
 import TableView from 'src/components/TableView';
 
 import {

superset-frontend/src/components/ListView/ListView.test.jsx

@@ -29,9 +29,9 @@ import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 import ListView from 'src/components/ListView/ListView';
 import ListViewFilters from 'src/components/ListView/Filters';
-import ListViewPagination from 'src/components/dataViewCommon/Pagination';
-import TableCollection from 'src/components/dataViewCommon/TableCollection';
-import Pagination from 'src/components/Pagination';
+import ListViewPagination from 'src/components/Pagination';
+import TableCollection from 'src/components/TableCollection';
+import Pagination from 'src/components/Pagination/Wrapper';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 

superset-frontend/src/components/ListView/ListView.tsx

@@ -25,7 +25,8 @@ import cx from 'classnames';
 import Button from 'src/components/Button';
 import Icons from 'src/components/Icons';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
-import { TableCollection, Pagination } from 'src/components/dataViewCommon';
+import Pagination from 'src/components/Pagination';
+import TableCollection from 'src/components/TableCollection';
 import CardCollection from './CardCollection';
 import FilterControls from './Filters';
 import { CardSortSelect } from './CardSortSelect';

superset-frontend/src/components/Pagination/Pagination.test.tsx → superset-frontend/src/components/Pagination/Wrapper.test.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
-import Pagination from '.';
+import Wrapper from './Wrapper';
 
 jest.mock('./Next', () => ({
   Next: () => <div data-test="next" />,
@@ -36,34 +36,34 @@ jest.mock('./Ellipsis', () => ({
 
 test('Pagination rendering correctly', () => {
   render(
-    <Pagination>
+    <Wrapper>
       <li data-test="test" />
-    </Pagination>,
+    </Wrapper>,
   );
   expect(screen.getByRole('navigation')).toBeInTheDocument();
   expect(screen.getByTestId('test')).toBeInTheDocument();
 });
 
 test('Next attribute', () => {
-  render(<Pagination.Next onClick={jest.fn()} />);
+  render(<Wrapper.Next onClick={jest.fn()} />);
   expect(screen.getByTestId('next')).toBeInTheDocument();
 });
 
 test('Prev attribute', () => {
-  render(<Pagination.Next onClick={jest.fn()} />);
+  render(<Wrapper.Next onClick={jest.fn()} />);
   expect(screen.getByTestId('next')).toBeInTheDocument();
 });
 
 test('Item attribute', () => {
   render(
-    <Pagination.Item onClick={jest.fn()}>
+    <Wrapper.Item onClick={jest.fn()}>
       <></>
-    </Pagination.Item>,
+    </Wrapper.Item>,
   );
   expect(screen.getByTestId('item')).toBeInTheDocument();
 });
 
 test('Ellipsis attribute', () => {
-  render(<Pagination.Ellipsis onClick={jest.fn()} />);
+  render(<Wrapper.Ellipsis onClick={jest.fn()} />);
   expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
 });

superset-frontend/src/components/Pagination/Wrapper.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 React from 'react';
+import { styled } from '@superset-ui/core';
+import { Next } from './Next';
+import { Prev } from './Prev';
+import { Item } from './Item';
+import { Ellipsis } from './Ellipsis';
+
+interface PaginationProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+const PaginationList = styled.ul`
+  display: inline-block;
+  margin: 16px 0;
+  padding: 0;
+
+  li {
+    display: inline;
+    margin: 0 4px;
+
+    span {
+      padding: 8px 12px;
+      text-decoration: none;
+      background-color: ${({ theme }) => theme.colors.grayscale.light5};
+      border-radius: ${({ theme }) => theme.borderRadius}px;
+
+      &:hover,
+      &:focus {
+        z-index: 2;
+        color: ${({ theme }) => theme.colors.grayscale.dark1};
+        background-color: ${({ theme }) => theme.colors.grayscale.light3};
+      }
+    }
+
+    &.disabled {
+      span {
+        background-color: transparent;
+        cursor: default;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+    &.active {
+      span {
+        z-index: 3;
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+        cursor: default;
+        background-color: ${({ theme }) => theme.colors.primary.base};
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+`;
+
+function Pagination({ children }: PaginationProps) {
+  return <PaginationList role="navigation">{children}</PaginationList>;
+}
+
+Pagination.Next = Next;
+Pagination.Prev = Prev;
+Pagination.Item = Item;
+Pagination.Ellipsis = Ellipsis;
+
+export default Pagination;

superset-frontend/src/components/Pagination/index.tsx

@@ -16,73 +16,33 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import React from 'react';
-import { styled } from '@superset-ui/core';
-import { Next } from './Next';
-import { Prev } from './Prev';
-import { Item } from './Item';
-import { Ellipsis } from './Ellipsis';
-
-interface PaginationProps {
-  children: JSX.Element | JSX.Element[];
-}
-
-const PaginationList = styled.ul`
-  display: inline-block;
-  margin: 16px 0;
-  padding: 0;
-
-  li {
-    display: inline;
-    margin: 0 4px;
-
-    span {
-      padding: 8px 12px;
-      text-decoration: none;
-      background-color: ${({ theme }) => theme.colors.grayscale.light5};
-      border-radius: ${({ theme }) => theme.borderRadius}px;
-
-      &:hover,
-      &:focus {
-        z-index: 2;
-        color: ${({ theme }) => theme.colors.grayscale.dark1};
-        background-color: ${({ theme }) => theme.colors.grayscale.light3};
-      }
-    }
-
-    &.disabled {
-      span {
-        background-color: transparent;
-        cursor: default;
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-    &.active {
-      span {
-        z-index: 3;
-        color: ${({ theme }) => theme.colors.grayscale.light5};
-        cursor: default;
-        background-color: ${({ theme }) => theme.colors.primary.base};
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  }
-`;
-
-function Pagination({ children }: PaginationProps) {
-  return <PaginationList role="navigation">{children}</PaginationList>;
-}
-
-Pagination.Next = Next;
-Pagination.Prev = Prev;
-Pagination.Item = Item;
-Pagination.Ellipsis = Ellipsis;
-
-export default Pagination;
+import Pagination from 'src/components/Pagination/Wrapper';
+import {
+  createUltimatePagination,
+  ITEM_TYPES,
+} from 'react-ultimate-pagination';
+
+const ListViewPagination = createUltimatePagination({
+  WrapperComponent: Pagination,
+  itemTypeToComponent: {
+    [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
+      <Pagination.Item active={isActive} onClick={onClick}>
+        {value}
+      </Pagination.Item>
+    ),
+    [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
+      <Pagination.Ellipsis disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.Prev disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.Next disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.FIRST_PAGE_LINK]: () => null,
+    [ITEM_TYPES.LAST_PAGE_LINK]: () => null,
+  },
+});
+
+export default ListViewPagination;

superset-frontend/src/components/dataViewCommon/TableCollection.test.tsx → superset-frontend/src/components/TableCollection/TableCollection.test.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import { renderHook } from '@testing-library/react-hooks';
 import { TableInstance, useTable } from 'react-table';
-import TableCollection from './TableCollection';
+import TableCollection from '.';
 
 let defaultProps: any;
 

superset-frontend/src/components/TableView/TableView.tsx

@@ -21,7 +21,8 @@ import isEqual from 'lodash/isEqual';
 import { styled, t } from '@superset-ui/core';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
 import { Empty } from 'src/common/components';
-import { TableCollection, Pagination } from 'src/components/dataViewCommon';
+import Pagination from 'src/components/Pagination';
+import TableCollection from 'src/components/TableCollection';
 import { SortByType, ServerPagination } from './types';
 
 const DEFAULT_PAGE_SIZE = 10;