diff --git a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx b/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx
index b0872f59d8..3dc619a288 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx
+++ b/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';
diff --git a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx b/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
index 1b7357c39d..d4b19be021 100644
--- a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
+++ b/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 {
diff --git a/superset-frontend/src/components/ListView/ListView.test.jsx b/superset-frontend/src/components/ListView/ListView.test.jsx
index 5501567996..ee8194f854 100644
--- a/superset-frontend/src/components/ListView/ListView.test.jsx
+++ b/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';
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 543e81a519..afcbef3ef4 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/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';
diff --git a/superset-frontend/src/components/Pagination/Pagination.test.tsx b/superset-frontend/src/components/Pagination/Wrapper.test.tsx
similarity index 86%
rename from superset-frontend/src/components/Pagination/Pagination.test.tsx
rename to superset-frontend/src/components/Pagination/Wrapper.test.tsx
index 192d4de3f3..64f4ddf5fa 100644
--- a/superset-frontend/src/components/Pagination/Pagination.test.tsx
+++ b/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: () =>
,
@@ -36,34 +36,34 @@ jest.mock('./Ellipsis', () => ({
test('Pagination rendering correctly', () => {
render(
-
+
- ,
+ ,
);
expect(screen.getByRole('navigation')).toBeInTheDocument();
expect(screen.getByTestId('test')).toBeInTheDocument();
});
test('Next attribute', () => {
- render();
+ render();
expect(screen.getByTestId('next')).toBeInTheDocument();
});
test('Prev attribute', () => {
- render();
+ render();
expect(screen.getByTestId('next')).toBeInTheDocument();
});
test('Item attribute', () => {
render(
-
+
<>>
- ,
+ ,
);
expect(screen.getByTestId('item')).toBeInTheDocument();
});
test('Ellipsis attribute', () => {
- render();
+ render();
expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
});
diff --git a/superset-frontend/src/components/Pagination/Wrapper.tsx b/superset-frontend/src/components/Pagination/Wrapper.tsx
new file mode 100644
index 0000000000..cff503da0a
--- /dev/null
+++ b/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 {children};
+}
+
+Pagination.Next = Next;
+Pagination.Prev = Prev;
+Pagination.Item = Item;
+Pagination.Ellipsis = Ellipsis;
+
+export default Pagination;
diff --git a/superset-frontend/src/components/Pagination/index.tsx b/superset-frontend/src/components/Pagination/index.tsx
index cff503da0a..1ee115dc5d 100644
--- a/superset-frontend/src/components/Pagination/index.tsx
+++ b/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';
+import Pagination from 'src/components/Pagination/Wrapper';
+import {
+ createUltimatePagination,
+ ITEM_TYPES,
+} from 'react-ultimate-pagination';
-interface PaginationProps {
- children: JSX.Element | JSX.Element[];
-}
+const ListViewPagination = createUltimatePagination({
+ WrapperComponent: Pagination,
+ itemTypeToComponent: {
+ [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
+
+ {value}
+
+ ),
+ [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
+
+ ),
+ [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
+
+ ),
+ [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
+
+ ),
+ [ITEM_TYPES.FIRST_PAGE_LINK]: () => null,
+ [ITEM_TYPES.LAST_PAGE_LINK]: () => null,
+ },
+});
-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 {children};
-}
-
-Pagination.Next = Next;
-Pagination.Prev = Prev;
-Pagination.Item = Item;
-Pagination.Ellipsis = Ellipsis;
-
-export default Pagination;
+export default ListViewPagination;
diff --git a/superset-frontend/src/components/dataViewCommon/TableCollection.test.tsx b/superset-frontend/src/components/TableCollection/TableCollection.test.tsx
similarity index 98%
rename from superset-frontend/src/components/dataViewCommon/TableCollection.test.tsx
rename to superset-frontend/src/components/TableCollection/TableCollection.test.tsx
index 91fa91b634..0b7f093888 100644
--- a/superset-frontend/src/components/dataViewCommon/TableCollection.test.tsx
+++ b/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;
diff --git a/superset-frontend/src/components/dataViewCommon/TableCollection.tsx b/superset-frontend/src/components/TableCollection/index.tsx
similarity index 100%
rename from superset-frontend/src/components/dataViewCommon/TableCollection.tsx
rename to superset-frontend/src/components/TableCollection/index.tsx
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
index 67da3fe6b0..7a69789964 100644
--- a/superset-frontend/src/components/TableView/TableView.tsx
+++ b/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;
diff --git a/superset-frontend/src/components/dataViewCommon/Pagination.tsx b/superset-frontend/src/components/dataViewCommon/Pagination.tsx
deleted file mode 100644
index 6d1d272456..0000000000
--- a/superset-frontend/src/components/dataViewCommon/Pagination.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * 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 Pagination from 'src/components/Pagination';
-import {
- createUltimatePagination,
- ITEM_TYPES,
-} from 'react-ultimate-pagination';
-
-const ListViewPagination = createUltimatePagination({
- WrapperComponent: Pagination,
- itemTypeToComponent: {
- [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
-
- {value}
-
- ),
- [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
-
- ),
- [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
-
- ),
- [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
-
- ),
- [ITEM_TYPES.FIRST_PAGE_LINK]: () => null,
- [ITEM_TYPES.LAST_PAGE_LINK]: () => null,
- },
-});
-
-export default ListViewPagination;
diff --git a/superset-frontend/src/components/dataViewCommon/index.ts b/superset-frontend/src/components/dataViewCommon/index.ts
deleted file mode 100644
index e552e5c9d6..0000000000
--- a/superset-frontend/src/components/dataViewCommon/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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.
- */
-export { default as Pagination } from './Pagination';
-export { default as TableCollection } from './TableCollection';