iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Breaks the dataViewCommon folder into TableCollection and Pagination (#17132)

This commit is contained in:
Michael S. Molina 2021-10-25 08:47:24 -03:00 committed by GitHub
parent 55be249870
commit 4c96ae76e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 133 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx
View File

@ -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';

2
superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
View File

@ -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 {

6
superset-frontend/src/components/ListView/ListView.test.jsx
View File

@ -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';

3
superset-frontend/src/components/ListView/ListView.tsx
View File

@ -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';

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

@ -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();
});

88
superset-frontend/src/components/Pagination/Wrapper.tsx Normal file
View 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;

94
superset-frontend/src/components/Pagination/index.tsx
View File

@ -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;

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

@ -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;

0
superset-frontend/src/components/dataViewCommon/TableCollection.tsx → superset-frontend/src/components/TableCollection/index.tsx
View File

3
superset-frontend/src/components/TableView/TableView.tsx
View File

@ -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;

48
superset-frontend/src/components/dataViewCommon/Pagination.tsx
View File

@ -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;

20
superset-frontend/src/components/dataViewCommon/index.ts
View File

@ -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';