From 21578f74b75e630111c0fab574888f43f3235ce3 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 27 Mar 2023 16:52:04 -0300
Subject: [PATCH] chore: Changes the inputs of native filters modal to have the
 same width (#23477)

---
 .../FilterConfigurePane.tsx                   |  3 +-
 .../FiltersConfigForm/DefaultValue.tsx        | 13 ++++++-
 .../FiltersConfigForm/DependencyList.tsx      |  6 ++-
 .../FiltersConfigForm/FiltersConfigForm.tsx   |  3 +-
 .../FiltersConfigForm/constants.ts            | 38 +++++++++++++++++++
 .../FiltersConfigForm/utils.ts                | 14 +------
 6 files changed, 59 insertions(+), 18 deletions(-)
 create mode 100644 superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
index b582b24097..82b2318ef6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
+++ b/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};
 `;
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
index e4ae521764..f521eaff91 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
+++ b/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}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
index c4f6f71651..4b3ff94220 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
+++ b/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;
+    }
   `}
 `;
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index eb182d93e4..c577eb9213 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/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={[
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
new file mode 100644
index 0000000000..61beb57537
--- /dev/null
+++ b/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],
+};
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
index 4344806591..de48dbf553 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
+++ b/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(() => {