fix: dataset list filters bug (#10398)

* fix dataset list filters

* update database endpoint query params using rison encode
This commit is contained in:
Lily Kuang 2020-07-22 22:23:44 -07:00 committed by GitHub
parent 3fdc141b82
commit 37f9b513fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 61 deletions

View File

@ -19,6 +19,7 @@
import React from 'react'; import React from 'react';
import styled from '@superset-ui/style'; import styled from '@superset-ui/style';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import rison from 'rison';
import { Select, AsyncSelect } from 'src/components/Select'; import { Select, AsyncSelect } from 'src/components/Select';
import { ControlLabel, Label } from 'react-bootstrap'; import { ControlLabel, Label } from 'react-bootstrap';
import { t } from '@superset-ui/translation'; import { t } from '@superset-ui/translation';
@ -274,14 +275,27 @@ export default class TableSelector extends React.PureComponent {
} }
renderDatabaseSelect() { renderDatabaseSelect() {
const queryParams = rison.encode({
order_columns: 'database_name',
order_direction: 'asc',
page: 0,
page_size: -1,
...(this.props.formMode
? {}
: {
filters: [
{
col: 'expose_in_sqllab',
opr: 'eq',
value: true,
},
],
}),
});
return this.renderSelectRow( return this.renderSelectRow(
<SupersetAsyncSelect <SupersetAsyncSelect
dataEndpoint={ dataEndpoint={`/api/v1/database/?q=${queryParams}`}
'/api/v1/database/?q=' +
'(keys:!(none),' +
'filters:!((col:expose_in_sqllab,opr:eq,value:!t)),' +
'order_columns:database_name,order_direction:asc,page:0,page_size:-1)'
}
onChange={this.onDatabaseChange} onChange={this.onDatabaseChange}
onAsyncError={() => onAsyncError={() =>
this.props.handleError(t('Error while fetching database list')) this.props.handleError(t('Error while fetching database list'))

View File

@ -80,6 +80,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
>(null); >(null);
const [datasets, setDatasets] = useState<any[]>([]); const [datasets, setDatasets] = useState<any[]>([]);
const [currentFilters, setCurrentFilters] = useState<Filters>([]); const [currentFilters, setCurrentFilters] = useState<Filters>([]);
const [filterOperators, setFilterOperators] = useState<FilterOperatorMap>();
const [ const [
lastFetchDataConfig, lastFetchDataConfig,
setLastFetchDataConfig, setLastFetchDataConfig,
@ -95,7 +96,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
); );
const [bulkSelectEnabled, setBulkSelectEnabled] = useState<boolean>(false); const [bulkSelectEnabled, setBulkSelectEnabled] = useState<boolean>(false);
const updateFilters = (filterOperators: FilterOperatorMap) => { const updateFilters = () => {
const convertFilter = ({ const convertFilter = ({
name: label, name: label,
operator, operator,
@ -103,47 +104,49 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
name: string; name: string;
operator: string; operator: string;
}) => ({ label, value: operator }); }) => ({ label, value: operator });
setCurrentFilters([ if (filterOperators) {
{ setCurrentFilters([
Header: 'Database', {
id: 'database', Header: 'Database',
input: 'select', id: 'database',
operators: filterOperators.database.map(convertFilter), input: 'select',
selects: databases.map(({ text: label, value }) => ({ operators: filterOperators.database.map(convertFilter),
label, selects: databases.map(({ text: label, value }) => ({
value, label,
})), value,
}, })),
{ },
Header: 'Schema', {
id: 'schema', Header: 'Schema',
operators: filterOperators.schema.map(convertFilter), id: 'schema',
}, operators: filterOperators.schema.map(convertFilter),
{ },
Header: 'Table Name', {
id: 'table_name', Header: 'Table Name',
operators: filterOperators.table_name.map(convertFilter), id: 'table_name',
}, operators: filterOperators.table_name.map(convertFilter),
{ },
Header: 'Owners', {
id: 'owners', Header: 'Owners',
input: 'select', id: 'owners',
operators: filterOperators.owners.map(convertFilter), input: 'select',
selects: currentOwners.map(({ text: label, value }) => ({ operators: filterOperators.owners.map(convertFilter),
label, selects: currentOwners.map(({ text: label, value }) => ({
value, label,
})), value,
}, })),
{ },
Header: 'SQL Lab View', {
id: 'is_sqllab_view', Header: 'SQL Lab View',
input: 'checkbox', id: 'is_sqllab_view',
operators: filterOperators.is_sqllab_view.map(convertFilter), input: 'checkbox',
}, operators: filterOperators.is_sqllab_view.map(convertFilter),
]); },
]);
}
}; };
const fetchDataset = () => { const fetchDataset = () =>
Promise.all([ Promise.all([
SupersetClient.get({ SupersetClient.get({
endpoint: `/api/v1/dataset/_info`, endpoint: `/api/v1/dataset/_info`,
@ -154,18 +157,20 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
SupersetClient.get({ SupersetClient.get({
endpoint: `/api/v1/dataset/related/database`, endpoint: `/api/v1/dataset/related/database`,
}), }),
]).then( ])
([ .then(
{ json: infoJson = {} }, ([
{ json: ownersJson = {} }, { json: infoJson = {} },
{ json: databasesJson = {} }, { json: ownersJson = {} },
]) => { { json: databasesJson = {} },
setCurrentOwners(ownersJson.result); ]) => {
setDatabases(databasesJson.result); setCurrentOwners(ownersJson.result);
setPermissions(infoJson.permissions); setDatabases(databasesJson.result);
updateFilters(infoJson.filters); setPermissions(infoJson.permissions);
}, setFilterOperators(infoJson.filters);
([e1, e2]) => { },
)
.catch(([e1, e2]) => {
addDangerToast(t('An error occurred while fetching datasets')); addDangerToast(t('An error occurred while fetching datasets'));
if (e1) { if (e1) {
console.error(e1); console.error(e1);
@ -173,14 +178,16 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
if (e2) { if (e2) {
console.error(e2); console.error(e2);
} }
}, });
);
};
useEffect(() => { useEffect(() => {
fetchDataset(); fetchDataset();
}, []); }, []);
useEffect(() => {
updateFilters();
}, [databases, currentOwners, permissions, filterOperators]);
const hasPerm = (perm: string) => { const hasPerm = (perm: string) => {
if (!permissions.length) { if (!permissions.length) {
return false; return false;