mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
chore: Breaks the dataViewCommon folder into TableCollection and Pagination (#17132)
This commit is contained in:
parent
55be249870
commit
4c96ae76e3
@ -22,7 +22,7 @@ import configureStore from 'redux-mock-store';
|
|||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import QueryTable from 'src/SqlLab/components/QueryTable';
|
import QueryTable from 'src/SqlLab/components/QueryTable';
|
||||||
import TableView from 'src/components/TableView';
|
import TableView from 'src/components/TableView';
|
||||||
import { TableCollection } from 'src/components/dataViewCommon';
|
import TableCollection from 'src/components/TableCollection';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import { queries, user } from 'src/SqlLab/fixtures';
|
import { queries, user } from 'src/SqlLab/fixtures';
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ import { getChartControlPanelRegistry } from '@superset-ui/core';
|
|||||||
import AlteredSliceTag from 'src/components/AlteredSliceTag';
|
import AlteredSliceTag from 'src/components/AlteredSliceTag';
|
||||||
import ModalTrigger from 'src/components/ModalTrigger';
|
import ModalTrigger from 'src/components/ModalTrigger';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
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 TableView from 'src/components/TableView';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -29,9 +29,9 @@ import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
|
|||||||
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
||||||
import ListView from 'src/components/ListView/ListView';
|
import ListView from 'src/components/ListView/ListView';
|
||||||
import ListViewFilters from 'src/components/ListView/Filters';
|
import ListViewFilters from 'src/components/ListView/Filters';
|
||||||
import ListViewPagination from 'src/components/dataViewCommon/Pagination';
|
import ListViewPagination from 'src/components/Pagination';
|
||||||
import TableCollection from 'src/components/dataViewCommon/TableCollection';
|
import TableCollection from 'src/components/TableCollection';
|
||||||
import Pagination from 'src/components/Pagination';
|
import Pagination from 'src/components/Pagination/Wrapper';
|
||||||
|
|
||||||
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
||||||
|
|
||||||
|
@ -25,7 +25,8 @@ import cx from 'classnames';
|
|||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
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 CardCollection from './CardCollection';
|
||||||
import FilterControls from './Filters';
|
import FilterControls from './Filters';
|
||||||
import { CardSortSelect } from './CardSortSelect';
|
import { CardSortSelect } from './CardSortSelect';
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render, screen } from 'spec/helpers/testing-library';
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
import Pagination from '.';
|
import Wrapper from './Wrapper';
|
||||||
|
|
||||||
jest.mock('./Next', () => ({
|
jest.mock('./Next', () => ({
|
||||||
Next: () => <div data-test="next" />,
|
Next: () => <div data-test="next" />,
|
||||||
@ -36,34 +36,34 @@ jest.mock('./Ellipsis', () => ({
|
|||||||
|
|
||||||
test('Pagination rendering correctly', () => {
|
test('Pagination rendering correctly', () => {
|
||||||
render(
|
render(
|
||||||
<Pagination>
|
<Wrapper>
|
||||||
<li data-test="test" />
|
<li data-test="test" />
|
||||||
</Pagination>,
|
</Wrapper>,
|
||||||
);
|
);
|
||||||
expect(screen.getByRole('navigation')).toBeInTheDocument();
|
expect(screen.getByRole('navigation')).toBeInTheDocument();
|
||||||
expect(screen.getByTestId('test')).toBeInTheDocument();
|
expect(screen.getByTestId('test')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Next attribute', () => {
|
test('Next attribute', () => {
|
||||||
render(<Pagination.Next onClick={jest.fn()} />);
|
render(<Wrapper.Next onClick={jest.fn()} />);
|
||||||
expect(screen.getByTestId('next')).toBeInTheDocument();
|
expect(screen.getByTestId('next')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Prev attribute', () => {
|
test('Prev attribute', () => {
|
||||||
render(<Pagination.Next onClick={jest.fn()} />);
|
render(<Wrapper.Next onClick={jest.fn()} />);
|
||||||
expect(screen.getByTestId('next')).toBeInTheDocument();
|
expect(screen.getByTestId('next')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Item attribute', () => {
|
test('Item attribute', () => {
|
||||||
render(
|
render(
|
||||||
<Pagination.Item onClick={jest.fn()}>
|
<Wrapper.Item onClick={jest.fn()}>
|
||||||
<></>
|
<></>
|
||||||
</Pagination.Item>,
|
</Wrapper.Item>,
|
||||||
);
|
);
|
||||||
expect(screen.getByTestId('item')).toBeInTheDocument();
|
expect(screen.getByTestId('item')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Ellipsis attribute', () => {
|
test('Ellipsis attribute', () => {
|
||||||
render(<Pagination.Ellipsis onClick={jest.fn()} />);
|
render(<Wrapper.Ellipsis onClick={jest.fn()} />);
|
||||||
expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
|
expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
|
||||||
});
|
});
|
88
superset-frontend/src/components/Pagination/Wrapper.tsx
Normal file
88
superset-frontend/src/components/Pagination/Wrapper.tsx
Normal file
@ -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;
|
@ -16,73 +16,33 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { styled } from '@superset-ui/core';
|
import Pagination from 'src/components/Pagination/Wrapper';
|
||||||
import { Next } from './Next';
|
import {
|
||||||
import { Prev } from './Prev';
|
createUltimatePagination,
|
||||||
import { Item } from './Item';
|
ITEM_TYPES,
|
||||||
import { Ellipsis } from './Ellipsis';
|
} from 'react-ultimate-pagination';
|
||||||
|
|
||||||
interface PaginationProps {
|
const ListViewPagination = createUltimatePagination({
|
||||||
children: JSX.Element | JSX.Element[];
|
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`
|
export default ListViewPagination;
|
||||||
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;
|
|
||||||
|
@ -20,7 +20,7 @@ import React from 'react';
|
|||||||
import { render, screen } from 'spec/helpers/testing-library';
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
import { renderHook } from '@testing-library/react-hooks';
|
import { renderHook } from '@testing-library/react-hooks';
|
||||||
import { TableInstance, useTable } from 'react-table';
|
import { TableInstance, useTable } from 'react-table';
|
||||||
import TableCollection from './TableCollection';
|
import TableCollection from '.';
|
||||||
|
|
||||||
let defaultProps: any;
|
let defaultProps: any;
|
||||||
|
|
@ -21,7 +21,8 @@ import isEqual from 'lodash/isEqual';
|
|||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
|
import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
|
||||||
import { Empty } from 'src/common/components';
|
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';
|
import { SortByType, ServerPagination } from './types';
|
||||||
|
|
||||||
const DEFAULT_PAGE_SIZE = 10;
|
const DEFAULT_PAGE_SIZE = 10;
|
||||||
|
@ -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;
|
|
@ -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';
|
|
Loading…
Reference in New Issue
Block a user