chore: Breaks the dataViewCommon folder into TableCollection and Pagination (#17132)
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx b/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx
index b0872f5..3dc619a 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 { 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 1b7357c..d4b19be 100644
--- a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
+++ b/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
@@ -23,7 +23,7 @@
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 5501567..ee8194f 100644
--- a/superset-frontend/src/components/ListView/ListView.test.jsx
+++ b/superset-frontend/src/components/ListView/ListView.test.jsx
@@ -29,9 +29,9 @@
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 543e81a..afcbef3 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -25,7 +25,8 @@
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 192d4de..64f4ddf 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: () => <div data-test="next" />,
@@ -36,34 +36,34 @@
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();
});
diff --git a/superset-frontend/src/components/Pagination/Wrapper.tsx b/superset-frontend/src/components/Pagination/Wrapper.tsx
new file mode 100644
index 0000000..cff503d
--- /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 <PaginationList role="navigation">{children}</PaginationList>;
+}
+
+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 cff503d..1ee115d 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 }) => (
+ <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,
+ },
+});
-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;
+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 91fa91b..0b7f093 100644
--- a/superset-frontend/src/components/dataViewCommon/TableCollection.test.tsx
+++ b/superset-frontend/src/components/TableCollection/TableCollection.test.tsx
@@ -20,7 +20,7 @@
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 67da3fe..7a69789 100644
--- a/superset-frontend/src/components/TableView/TableView.tsx
+++ b/superset-frontend/src/components/TableView/TableView.tsx
@@ -21,7 +21,8 @@
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 6d1d272..0000000
--- 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 }) => (
- <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;
diff --git a/superset-frontend/src/components/dataViewCommon/index.ts b/superset-frontend/src/components/dataViewCommon/index.ts
deleted file mode 100644
index e552e5c..0000000
--- 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';
