mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
chore: Changes the inputs of native filters modal to have the same width (#23477)
This commit is contained in:
parent
0fa421271e
commit
21578f74b7
@ -46,7 +46,8 @@ const ContentHolder = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const TitlesContainer = styled.div`
|
const TitlesContainer = styled.div`
|
||||||
min-width: 270px;
|
min-width: 300px;
|
||||||
|
max-width: 300px;
|
||||||
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -28,6 +28,11 @@ import { FormInstance } from 'src/components';
|
|||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
import { NativeFiltersForm } from '../types';
|
import { NativeFiltersForm } from '../types';
|
||||||
import { getFormData } from '../../utils';
|
import { getFormData } from '../../utils';
|
||||||
|
import {
|
||||||
|
INPUT_HEIGHT,
|
||||||
|
INPUT_WIDTH,
|
||||||
|
TIME_FILTER_INPUT_WIDTH,
|
||||||
|
} from './constants';
|
||||||
|
|
||||||
type DefaultValueProps = {
|
type DefaultValueProps = {
|
||||||
hasDefaultValue: boolean;
|
hasDefaultValue: boolean;
|
||||||
@ -58,8 +63,12 @@ const DefaultValue: FC<DefaultValueProps> = ({
|
|||||||
<Loading position="inline-centered" />
|
<Loading position="inline-centered" />
|
||||||
) : (
|
) : (
|
||||||
<SuperChart
|
<SuperChart
|
||||||
height={32}
|
height={INPUT_HEIGHT}
|
||||||
width={formFilter?.filterType === 'filter_time' ? 350 : 250}
|
width={
|
||||||
|
formFilter?.filterType === 'filter_time'
|
||||||
|
? TIME_FILTER_INPUT_WIDTH
|
||||||
|
: INPUT_WIDTH
|
||||||
|
}
|
||||||
appSection={AppSection.FILTER_CONFIG_MODAL}
|
appSection={AppSection.FILTER_CONFIG_MODAL}
|
||||||
behaviors={[Behavior.NATIVE_FILTER]}
|
behaviors={[Behavior.NATIVE_FILTER]}
|
||||||
formData={formData}
|
formData={formData}
|
||||||
|
@ -21,6 +21,7 @@ import { styled, t } from '@superset-ui/core';
|
|||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
import { Select } from 'src/components';
|
import { Select } from 'src/components';
|
||||||
import { CollapsibleControl } from './CollapsibleControl';
|
import { CollapsibleControl } from './CollapsibleControl';
|
||||||
|
import { INPUT_WIDTH } from './constants';
|
||||||
|
|
||||||
interface DependencyListProps {
|
interface DependencyListProps {
|
||||||
availableFilters: {
|
availableFilters: {
|
||||||
@ -66,10 +67,13 @@ const DeleteFilter = styled(Icons.Trash)`
|
|||||||
const RowPanel = styled.div`
|
const RowPanel = styled.div`
|
||||||
${({ theme }) => `
|
${({ theme }) => `
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 220px;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: ${theme.gridUnit}px;
|
margin-bottom: ${theme.gridUnit}px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
width: ${INPUT_WIDTH}px;
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -91,12 +91,12 @@ import RemovedFilter from './RemovedFilter';
|
|||||||
import { useBackendFormUpdate, useDefaultValue } from './state';
|
import { useBackendFormUpdate, useDefaultValue } from './state';
|
||||||
import {
|
import {
|
||||||
cachedSupersetGet,
|
cachedSupersetGet,
|
||||||
FILTER_SUPPORTED_TYPES,
|
|
||||||
hasTemporalColumns,
|
hasTemporalColumns,
|
||||||
mostUsedDataset,
|
mostUsedDataset,
|
||||||
setNativeFilterFieldValues,
|
setNativeFilterFieldValues,
|
||||||
useForceUpdate,
|
useForceUpdate,
|
||||||
} from './utils';
|
} from './utils';
|
||||||
|
import { FILTER_SUPPORTED_TYPES, INPUT_WIDTH } from './constants';
|
||||||
import DependencyList from './DependencyList';
|
import DependencyList from './DependencyList';
|
||||||
|
|
||||||
const TabPane = styled(Tabs.TabPane)`
|
const TabPane = styled(Tabs.TabPane)`
|
||||||
@ -965,6 +965,7 @@ const FiltersConfigForm = (
|
|||||||
>
|
>
|
||||||
<StyledRowSubFormItem
|
<StyledRowSubFormItem
|
||||||
name={['filters', filterId, 'adhoc_filters']}
|
name={['filters', filterId, 'adhoc_filters']}
|
||||||
|
css={{ width: INPUT_WIDTH }}
|
||||||
initialValue={filterToEdit?.adhoc_filters}
|
initialValue={filterToEdit?.adhoc_filters}
|
||||||
required
|
required
|
||||||
rules={[
|
rules={[
|
||||||
|
@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* 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 { GenericDataType } from '@superset-ui/core';
|
||||||
|
|
||||||
|
export const INPUT_HEIGHT = 32;
|
||||||
|
|
||||||
|
export const INPUT_WIDTH = 270;
|
||||||
|
|
||||||
|
export const TIME_FILTER_INPUT_WIDTH = 350;
|
||||||
|
|
||||||
|
export const FILTER_SUPPORTED_TYPES = {
|
||||||
|
filter_time: [GenericDataType.TEMPORAL],
|
||||||
|
filter_timegrain: [GenericDataType.TEMPORAL],
|
||||||
|
filter_timecolumn: [GenericDataType.TEMPORAL],
|
||||||
|
filter_select: [
|
||||||
|
GenericDataType.BOOLEAN,
|
||||||
|
GenericDataType.STRING,
|
||||||
|
GenericDataType.NUMERIC,
|
||||||
|
GenericDataType.TEMPORAL,
|
||||||
|
],
|
||||||
|
filter_range: [GenericDataType.NUMERIC],
|
||||||
|
};
|
@ -28,22 +28,10 @@ import {
|
|||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import { DatasourcesState, ChartsState } from 'src/dashboard/types';
|
import { DatasourcesState, ChartsState } from 'src/dashboard/types';
|
||||||
import { cacheWrapper } from 'src/utils/cacheWrapper';
|
import { cacheWrapper } from 'src/utils/cacheWrapper';
|
||||||
|
import { FILTER_SUPPORTED_TYPES } from './constants';
|
||||||
|
|
||||||
const FILTERS_FIELD_NAME = 'filters';
|
const FILTERS_FIELD_NAME = 'filters';
|
||||||
|
|
||||||
export const FILTER_SUPPORTED_TYPES = {
|
|
||||||
filter_time: [GenericDataType.TEMPORAL],
|
|
||||||
filter_timegrain: [GenericDataType.TEMPORAL],
|
|
||||||
filter_timecolumn: [GenericDataType.TEMPORAL],
|
|
||||||
filter_select: [
|
|
||||||
GenericDataType.BOOLEAN,
|
|
||||||
GenericDataType.STRING,
|
|
||||||
GenericDataType.NUMERIC,
|
|
||||||
GenericDataType.TEMPORAL,
|
|
||||||
],
|
|
||||||
filter_range: [GenericDataType.NUMERIC],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useForceUpdate = (isActive = true) => {
|
export const useForceUpdate = (isActive = true) => {
|
||||||
const [, updateState] = React.useState({});
|
const [, updateState] = React.useState({});
|
||||||
return React.useCallback(() => {
|
return React.useCallback(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user