chore: Changes the inputs of native filters modal to have the same width (#23477)

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx

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

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx

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

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx

@@ -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;
+    }
   `}
 `;
 

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

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

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts

@@ -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],
+};

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts

@@ -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(() => {