mirror of https://github.com/apache/superset.git
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`
|
||||
min-width: 270px;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
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 { NativeFiltersForm } from '../types';
|
||||
import { getFormData } from '../../utils';
|
||||
import {
|
||||
INPUT_HEIGHT,
|
||||
INPUT_WIDTH,
|
||||
TIME_FILTER_INPUT_WIDTH,
|
||||
} from './constants';
|
||||
|
||||
type DefaultValueProps = {
|
||||
hasDefaultValue: boolean;
|
||||
|
@ -58,8 +63,12 @@ const DefaultValue: FC<DefaultValueProps> = ({
|
|||
<Loading position="inline-centered" />
|
||||
) : (
|
||||
<SuperChart
|
||||
height={32}
|
||||
width={formFilter?.filterType === 'filter_time' ? 350 : 250}
|
||||
height={INPUT_HEIGHT}
|
||||
width={
|
||||
formFilter?.filterType === 'filter_time'
|
||||
? TIME_FILTER_INPUT_WIDTH
|
||||
: INPUT_WIDTH
|
||||
}
|
||||
appSection={AppSection.FILTER_CONFIG_MODAL}
|
||||
behaviors={[Behavior.NATIVE_FILTER]}
|
||||
formData={formData}
|
||||
|
|
|
@ -21,6 +21,7 @@ import { styled, t } from '@superset-ui/core';
|
|||
import Icons from 'src/components/Icons';
|
||||
import { Select } from 'src/components';
|
||||
import { CollapsibleControl } from './CollapsibleControl';
|
||||
import { INPUT_WIDTH } from './constants';
|
||||
|
||||
interface DependencyListProps {
|
||||
availableFilters: {
|
||||
|
@ -66,10 +67,13 @@ const DeleteFilter = styled(Icons.Trash)`
|
|||
const RowPanel = styled.div`
|
||||
${({ theme }) => `
|
||||
display: flex;
|
||||
width: 220px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: ${theme.gridUnit}px;
|
||||
|
||||
& > div {
|
||||
width: ${INPUT_WIDTH}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
|
|
|
@ -91,12 +91,12 @@ import RemovedFilter from './RemovedFilter';
|
|||
import { useBackendFormUpdate, useDefaultValue } from './state';
|
||||
import {
|
||||
cachedSupersetGet,
|
||||
FILTER_SUPPORTED_TYPES,
|
||||
hasTemporalColumns,
|
||||
mostUsedDataset,
|
||||
setNativeFilterFieldValues,
|
||||
useForceUpdate,
|
||||
} from './utils';
|
||||
import { FILTER_SUPPORTED_TYPES, INPUT_WIDTH } from './constants';
|
||||
import DependencyList from './DependencyList';
|
||||
|
||||
const TabPane = styled(Tabs.TabPane)`
|
||||
|
@ -965,6 +965,7 @@ const FiltersConfigForm = (
|
|||
>
|
||||
<StyledRowSubFormItem
|
||||
name={['filters', filterId, 'adhoc_filters']}
|
||||
css={{ width: INPUT_WIDTH }}
|
||||
initialValue={filterToEdit?.adhoc_filters}
|
||||
required
|
||||
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';
|
||||
import { DatasourcesState, ChartsState } from 'src/dashboard/types';
|
||||
import { cacheWrapper } from 'src/utils/cacheWrapper';
|
||||
import { FILTER_SUPPORTED_TYPES } from './constants';
|
||||
|
||||
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) => {
|
||||
const [, updateState] = React.useState({});
|
||||
return React.useCallback(() => {
|
||||
|
|
Loading…
Reference in New Issue