diff --git a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx b/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx index b0872f59d87e9..3dc619a288ee3 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 1b7357c39d68f..d4b19be02192c 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 550156799615b..ee8194f854ef1 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 543e81a519be5..afcbef3ef456c 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 192d4de3f3db3..64f4ddf5faa20 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 0000000000000..cff503da0a969 --- /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 cff503da0a969..1ee115dc5d441 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'; - -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; +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 }) => ( + + {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/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 91fa91b6342be..0b7f093888eec 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 67da3fe6b064e..7a69789964b49 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 6d1d27245616a..0000000000000 --- 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 e552e5c9d6279..0000000000000 --- 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';