From 1753e7d16edd02c0cb31e8ec2c093d0e4fe5daf1 Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Wed, 6 Oct 2021 14:23:07 -0400
Subject: [PATCH 1/7] Adding description works

---
 .../spec/fixtures/mockNativeFilters.ts        |  2 +
 .../dashboard/fixtures/mockNativeFilters.ts   |  1 +
 .../FiltersConfigForm/FiltersConfigForm.tsx   | 79 ++++++++++---------
 .../getControlItemsMap.test.tsx               |  1 +
 .../nativeFilters/FiltersConfigModal/types.ts |  1 +
 .../nativeFilters/FiltersConfigModal/utils.ts |  1 +
 .../components/nativeFilters/types.ts         |  1 +
 7 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/superset-frontend/spec/fixtures/mockNativeFilters.ts b/superset-frontend/spec/fixtures/mockNativeFilters.ts
index 6da3a3561df3e..30bf3d85120ef 100644
--- a/superset-frontend/spec/fixtures/mockNativeFilters.ts
+++ b/superset-frontend/spec/fixtures/mockNativeFilters.ts
@@ -52,6 +52,7 @@ export const nativeFilters: NativeFiltersState = {
         inverseSelection: false,
       },
       type: NativeFilterType.NATIVE_FILTER,
+      description: '',
     },
     'NATIVE_FILTER-x9QPw0so1': {
       id: 'NATIVE_FILTER-x9QPw0so1',
@@ -81,6 +82,7 @@ export const nativeFilters: NativeFiltersState = {
         inverseSelection: false,
       },
       type: NativeFilterType.NATIVE_FILTER,
+      description: '2 letter code',
     },
   },
 };
diff --git a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
index 1a309fdfc1a33..f4ab60dc57137 100644
--- a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
+++ b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
@@ -68,6 +68,7 @@ export const nativeFiltersInfo: NativeFiltersState = {
         isRequired: false,
       },
       type: NativeFilterType.NATIVE_FILTER,
+      description: '',
     },
   },
 };
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 a4caf6bf89faf..35a3811b0a3ea 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -16,6 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import {
+  ColumnMeta,
+  InfoTooltipWithTrigger,
+  Metric,
+} from '@superset-ui/chart-controls';
 import {
   AdhocFilter,
   Behavior,
@@ -26,15 +31,11 @@ import {
   JsonResponse,
   styled,
   SupersetApiError,
-  t,
   SupersetClient,
+  t,
 } from '@superset-ui/core';
-import {
-  ColumnMeta,
-  InfoTooltipWithTrigger,
-  Metric,
-} from '@superset-ui/chart-controls';
 import { FormInstance } from 'antd/lib/form';
+import { isEmpty, isEqual } from 'lodash';
 import React, {
   forwardRef,
   useCallback,
@@ -44,53 +45,52 @@ import React, {
   useState,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { isEqual, isEmpty } from 'lodash';
-import { FormItem } from 'src/components/Form';
-import { Input } from 'src/common/components';
+import { getChartDataRequest } from 'src/chart/chartAction';
+import { Input, TextArea } from 'src/common/components';
 import { Select } from 'src/components';
-import { cacheWrapper } from 'src/utils/cacheWrapper';
-import AdhocFilterControl from 'src/explore/components/controls/FilterControl/AdhocFilterControl';
-import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
-import { addDangerToast } from 'src/components/MessageToasts/actions';
-import { ClientErrorObject } from 'src/utils/getClientErrorObject';
 import Collapse from 'src/components/Collapse';
-import { getChartDataRequest } from 'src/chart/chartAction';
-import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
-import { waitForAsyncData } from 'src/middleware/asyncEvent';
-import Tabs from 'src/components/Tabs';
+import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert';
+import { FormItem } from 'src/components/Form';
 import Icons from 'src/components/Icons';
-import { Tooltip } from 'src/components/Tooltip';
+import Loading from 'src/components/Loading';
+import { addDangerToast } from 'src/components/MessageToasts/actions';
 import { Radio } from 'src/components/Radio';
-import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert';
+import Tabs from 'src/components/Tabs';
+import { Tooltip } from 'src/components/Tooltip';
 import {
   Chart,
   ChartsState,
   DatasourcesState,
   RootState,
 } from 'src/dashboard/types';
-import Loading from 'src/components/Loading';
+import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
+import AdhocFilterControl from 'src/explore/components/controls/FilterControl/AdhocFilterControl';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import { waitForAsyncData } from 'src/middleware/asyncEvent';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import { ClientErrorObject } from 'src/utils/getClientErrorObject';
+import { Filter, NativeFilterType } from '../../types';
+import { getFormData } from '../../utils';
+import {
+  CASCADING_FILTERS,
+  getFiltersConfigModalTestId,
+} from '../FiltersConfigModal';
+import { FilterRemoval, NativeFiltersForm } from '../types';
+import { CollapsibleControl } from './CollapsibleControl';
 import { ColumnSelect } from './ColumnSelect';
-import { NativeFiltersForm, FilterRemoval } from '../types';
+import DatasetSelect from './DatasetSelect';
+import DefaultValue from './DefaultValue';
+import FilterScope from './FilterScope/FilterScope';
+import getControlItemsMap from './getControlItemsMap';
+import RemovedFilter from './RemovedFilter';
+import { useBackendFormUpdate, useDefaultValue } from './state';
 import {
   FILTER_SUPPORTED_TYPES,
   hasTemporalColumns,
+  mostUsedDataset,
   setNativeFilterFieldValues,
   useForceUpdate,
-  mostUsedDataset,
 } from './utils';
-import { useBackendFormUpdate, useDefaultValue } from './state';
-import { getFormData } from '../../utils';
-import { Filter, NativeFilterType } from '../../types';
-import getControlItemsMap from './getControlItemsMap';
-import FilterScope from './FilterScope/FilterScope';
-import RemovedFilter from './RemovedFilter';
-import DefaultValue from './DefaultValue';
-import { CollapsibleControl } from './CollapsibleControl';
-import {
-  CASCADING_FILTERS,
-  getFiltersConfigModalTestId,
-} from '../FiltersConfigModal';
-import DatasetSelect from './DatasetSelect';
 
 const { TabPane } = Tabs;
 
@@ -931,6 +931,13 @@ const FiltersConfigForm = (
             {Object.keys(controlItems)
               .filter(key => BASIC_CONTROL_ITEMS.includes(key))
               .map(key => controlItems[key].element)}
+            <StyledFormItem
+              name={['filters', filterId, 'description']}
+              initialValue={filterToEdit?.description}
+              label={<StyledLabel>{t('Description')}</StyledLabel>}
+            >
+              <TextArea />
+            </StyledFormItem>
           </Collapse.Panel>
           {hasAdvancedSection && (
             <Collapse.Panel
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
index 53772cc17d14a..f87a43467502f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
@@ -64,6 +64,7 @@ const filterMock: Filter = {
   targets: [{}],
   controlValues: {},
   type: NativeFilterType.NATIVE_FILTER,
+  description: '',
 };
 
 const createProps: () => ControlItemsProps = () => ({
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
index 246f413bcc13e..9dcf33b6cee3d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
@@ -45,6 +45,7 @@ export interface NativeFiltersFormItem {
   time_range?: string;
   granularity_sqla?: string;
   type: NativeFilterType;
+  description: string;
 }
 
 export interface NativeFiltersForm {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
index a6698d2b84ebe..ba444e5b966a6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
@@ -151,6 +151,7 @@ export const createHandleSave = (
         scope: formInputs.scope,
         sortMetric: formInputs.sortMetric,
         type: formInputs.type,
+        description: formInputs.description || '',
       };
     });
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/types.ts
index 62833989ccde4..7b16d08b9030d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/types.ts
@@ -60,6 +60,7 @@ export interface Filter {
   tabsInScope?: string[];
   chartsInScope?: number[];
   type: NativeFilterType;
+  description: string;
 }
 
 export type FilterConfiguration = Filter[];

From 4590a23c5f25347ae1c89e792b333a4bf8ffcfaf Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Thu, 7 Oct 2021 16:07:27 -0400
Subject: [PATCH 2/7] Add some tests

---
 .../dashboard/fixtures/mockNativeFilters.ts   |  2 +-
 .../CascadeFilterControl.test.tsx             | 36 +++++++++++++------
 .../FilterControls/FilterControl.tsx          | 25 +++++++++++--
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
index f4ab60dc57137..0d2b3c7c57103 100644
--- a/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
+++ b/superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.ts
@@ -68,7 +68,7 @@ export const nativeFiltersInfo: NativeFiltersState = {
         isRequired: false,
       },
       type: NativeFilterType.NATIVE_FILTER,
-      description: '',
+      description: 'test description',
     },
   },
 };
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
index 2cfdb3a1eafa0..5b02eb8cc23e6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
@@ -23,21 +23,21 @@ import { Provider } from 'react-redux';
 import { nativeFiltersInfo } from 'spec/javascripts/dashboard/fixtures/mockNativeFilters';
 import CascadeFilterControl, { CascadeFilterControlProps } from '.';
 
-const mockedProps = {
+const mockedProps = (defaultsId = nativeFiltersInfo.filters.DefaultsID) => ({
   filter: {
-    ...nativeFiltersInfo.filters.DefaultsID,
+    ...defaultsId,
     cascadeChildren: [
       {
-        ...nativeFiltersInfo.filters.DefaultsID,
+        ...defaultsId,
         name: 'test child filter 1',
         cascadeChildren: [],
       },
       {
-        ...nativeFiltersInfo.filters.DefaultsID,
+        ...defaultsId,
         name: 'test child filter 2',
         cascadeChildren: [
           {
-            ...nativeFiltersInfo.filters.DefaultsID,
+            ...defaultsId,
             name: 'test child of a child filter',
             cascadeChildren: [],
           },
@@ -46,7 +46,7 @@ const mockedProps = {
     ],
   },
   onFilterSelectionChange: jest.fn(),
-};
+});
 
 const setup = (props: CascadeFilterControlProps) => (
   <Provider store={mockStore}>
@@ -55,22 +55,38 @@ const setup = (props: CascadeFilterControlProps) => (
 );
 
 test('should render', () => {
-  const { container } = render(setup(mockedProps));
+  const { container } = render(setup(mockedProps()));
   expect(container).toBeInTheDocument();
 });
 
 test('should render the filter name', () => {
-  render(setup(mockedProps));
+  render(setup(mockedProps()));
   expect(screen.getByText('test')).toBeInTheDocument();
 });
 
 test('should render the children filter names', () => {
-  render(setup(mockedProps));
+  render(setup(mockedProps()));
   expect(screen.getByText('test child filter 1')).toBeInTheDocument();
   expect(screen.getByText('test child filter 2')).toBeInTheDocument();
 });
 
 test('should render the child of a child filter name', () => {
-  render(setup(mockedProps));
+  render(setup(mockedProps()));
   expect(screen.getByText('test child of a child filter')).toBeInTheDocument();
 });
+
+test('should render tooltip if description is not empty', async () => {
+  render(setup(mockedProps()));
+  const toolTips = await screen.findAllByTestId('filter-description');
+  expect(toolTips).toHaveLength(4);
+  toolTips.map(item => expect(item).toBeInTheDocument());
+});
+test('should not render tooltip if description is empty', () => {
+  render(
+    setup(
+      mockedProps({ ...nativeFiltersInfo.filters.DefaultsID, description: '' }),
+    ),
+  );
+  const toolTips = screen.queryAllByTestId('filter-description');
+  toolTips.map(item => expect(item).not.toBeInTheDocument());
+});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index c952c1f250674..ee1082f6cb039 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -17,11 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { styled } from '@superset-ui/core';
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { styled, t } from '@superset-ui/core';
 import { Form, FormItem } from 'src/components/Form';
+import { checkIsMissingRequiredValue } from '../utils';
 import FilterValue from './FilterValue';
 import { FilterProps } from './types';
-import { checkIsMissingRequiredValue } from '../utils';
 
 const StyledIcon = styled.div`
   position: absolute;
@@ -52,6 +53,12 @@ const StyledFilterControlContainer = styled(Form)`
   }
 `;
 
+const ToolTipContainer = styled.div`
+  font-size: ${({ theme }) => theme.typography.sizes.m}px;
+  display: flex;
+  padding-left: ${({ theme }) => theme.gridUnit}px;
+`;
+
 const FilterControl: React.FC<FilterProps> = ({
   dataMaskSelected,
   filter,
@@ -74,7 +81,19 @@ const FilterControl: React.FC<FilterProps> = ({
           <StyledFilterControlTitleBox>
             <StyledFilterControlTitle data-test="filter-control-name">
               {name}
-            </StyledFilterControlTitle>
+            </StyledFilterControlTitle>{' '}
+            {!!filter.description && (
+              <ToolTipContainer
+                data-test="filter-description"
+                className="text-muted"
+              >
+                <InfoTooltipWithTrigger
+                  label={t('description')}
+                  tooltip={filter.description}
+                  placement="top"
+                />
+              </ToolTipContainer>
+            )}
             <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
           </StyledFilterControlTitleBox>
         }

From c2b0fa2c9961e70bda36807d57b71fa96942899e Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Fri, 15 Oct 2021 04:03:35 -0400
Subject: [PATCH 3/7] Fix tests

---
 .../CascadeFilterControl.test.tsx             | 30 ++++++++------
 .../FilterControls/FilterControl.tsx          | 41 ++++++++++---------
 .../FiltersConfigForm/FiltersConfigForm.tsx   |  7 +++-
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
index 5b02eb8cc23e6..c43038a343a80 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { fireEvent, render, screen } from 'spec/helpers/testing-library';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { Provider } from 'react-redux';
 import { nativeFiltersInfo } from 'spec/javascripts/dashboard/fixtures/mockNativeFilters';
 import CascadeFilterControl, { CascadeFilterControlProps } from '.';
 
-const mockedProps = (defaultsId = nativeFiltersInfo.filters.DefaultsID) => ({
+const createProps = (defaultsId = nativeFiltersInfo.filters.DefaultsID) => ({
   filter: {
     ...defaultsId,
     cascadeChildren: [
@@ -55,38 +55,42 @@ const setup = (props: CascadeFilterControlProps) => (
 );
 
 test('should render', () => {
-  const { container } = render(setup(mockedProps()));
+  const { container } = render(setup(createProps()));
   expect(container).toBeInTheDocument();
 });
 
 test('should render the filter name', () => {
-  render(setup(mockedProps()));
+  render(setup(createProps()));
   expect(screen.getByText('test')).toBeInTheDocument();
 });
 
 test('should render the children filter names', () => {
-  render(setup(mockedProps()));
+  render(setup(createProps()));
   expect(screen.getByText('test child filter 1')).toBeInTheDocument();
   expect(screen.getByText('test child filter 2')).toBeInTheDocument();
 });
 
 test('should render the child of a child filter name', () => {
-  render(setup(mockedProps()));
+  render(setup(createProps()));
   expect(screen.getByText('test child of a child filter')).toBeInTheDocument();
 });
 
 test('should render tooltip if description is not empty', async () => {
-  render(setup(mockedProps()));
-  const toolTips = await screen.findAllByTestId('filter-description');
-  expect(toolTips).toHaveLength(4);
-  toolTips.map(item => expect(item).toBeInTheDocument());
+  render(setup(createProps()));
+  expect(screen.getByText('test')).toBeInTheDocument();
+  const toolTip = screen.getByText('test').closest('div')?.nextSibling;
+  expect(toolTip).not.toBe(null);
+  expect(toolTip).toHaveAttribute('role', 'img');
+  fireEvent.mouseOver(toolTip as HTMLElement);
+  expect(await screen.findByText('test description')).toBeInTheDocument();
 });
+
 test('should not render tooltip if description is empty', () => {
   render(
     setup(
-      mockedProps({ ...nativeFiltersInfo.filters.DefaultsID, description: '' }),
+      createProps({ ...nativeFiltersInfo.filters.DefaultsID, description: '' }),
     ),
   );
-  const toolTips = screen.queryAllByTestId('filter-description');
-  toolTips.map(item => expect(item).not.toBeInTheDocument());
+  const toolTip = screen.getByText('test').closest('div')?.nextSibling;
+  expect(toolTip).toBe(null);
 });
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index ee1082f6cb039..36746fef18012 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import { styled, t } from '@superset-ui/core';
+import { styled } from '@superset-ui/core';
 import { Form, FormItem } from 'src/components/Form';
+import Icons from 'src/components/Icons';
 import { checkIsMissingRequiredValue } from '../utils';
 import FilterValue from './FilterValue';
 import { FilterProps } from './types';
@@ -51,12 +51,9 @@ const StyledFilterControlContainer = styled(Form)`
     width: 100%;
     padding-right: ${({ theme }) => theme.gridUnit * 11}px;
   }
-`;
-
-const ToolTipContainer = styled.div`
-  font-size: ${({ theme }) => theme.typography.sizes.m}px;
-  display: flex;
-  padding-left: ${({ theme }) => theme.gridUnit}px;
+  .ant-form-item-tooltip {
+    margin-bottom: ${({ theme }) => theme.gridUnit}px;
+  }
 `;
 
 const FilterControl: React.FC<FilterProps> = ({
@@ -77,23 +74,27 @@ const FilterControl: React.FC<FilterProps> = ({
   return (
     <StyledFilterControlContainer layout="vertical">
       <FormItem
+        tooltip={
+          filter.description.trim()
+            ? {
+                icon: <Icons.Info />,
+                overlay: filter.description,
+                placement: 'topRight',
+                overlayInnerStyle: {
+                  display: '-webkit-box',
+                  overflow: 'auto',
+                  textOverflow: 'ellipsis',
+                  WebkitLineClamp: 20,
+                  WebkitBoxOrient: 'vertical',
+                },
+              }
+            : null
+        }
         label={
           <StyledFilterControlTitleBox>
             <StyledFilterControlTitle data-test="filter-control-name">
               {name}
             </StyledFilterControlTitle>{' '}
-            {!!filter.description && (
-              <ToolTipContainer
-                data-test="filter-description"
-                className="text-muted"
-              >
-                <InfoTooltipWithTrigger
-                  label={t('description')}
-                  tooltip={filter.description}
-                  placement="top"
-                />
-              </ToolTipContainer>
-            )}
             <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
           </StyledFilterControlTitleBox>
         }
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 d2bcedd1f33f2..2fb648c97e6d9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -69,8 +69,11 @@ import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { waitForAsyncData } from 'src/middleware/asyncEvent';
 import { cacheWrapper } from 'src/utils/cacheWrapper';
 import { ClientErrorObject } from 'src/utils/getClientErrorObject';
-import { Filter, NativeFilterType } from '../../types';
-import { getFormData } from '../../utils';
+import {
+  Filter,
+  NativeFilterType,
+} from 'src/dashboard/components/nativeFilters/types';
+import { getFormData } from 'src/dashboard/components/nativeFilters/utils';
 import {
   CASCADING_FILTERS,
   getFiltersConfigModalTestId,

From 7901493fed45579d1aac377fc963dcb176874be7 Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Mon, 25 Oct 2021 04:15:18 -0400
Subject: [PATCH 4/7] Styled look good

---
 .../FilterControls/FilterControl.tsx          | 79 +++++++++++--------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 453c2e54154b6..980d3a6b82903 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 import React, { useMemo } from 'react';
-import { styled, t } from '@superset-ui/core';
-import Form from 'antd/lib/form';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { styled } from '@superset-ui/core';
+import { FormItem as StyledFormItem, Form } from 'src/components/Form';
+import Icons from 'src/components/Icons';
+import { Tooltip } from 'src/components/Tooltip';
 import { theme as supersetTheme } from 'src/preamble';
 import { checkIsMissingRequiredValue } from '../utils';
 import FilterValue from './FilterValue';
@@ -43,11 +44,6 @@ const StyledFilterControlTitleBox = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-bottom: ${({ theme }) => theme.gridUnit}px;
-  .ant-form-item-required:not(.ant-form-item-required-mark-optional) {
-    &::before {
-      display: none;
-    }
-  }
 `;
 
 const StyledFilterControlContainer = styled(Form)`
@@ -62,21 +58,56 @@ const StyledFilterControlContainer = styled(Form)`
   }
 `;
 
-const FormItem = styled(Form.Item)`
+const FormItem = styled(StyledFormItem)`
   ${({ theme }) => `
     .ant-form-item-label {
-      padding-bottom: ${theme.gridUnit}px;
+      label.ant-form-item-required:not(.ant-form-item-required-mark-optional){
+        &::after {
+          display: none;
+        }
+      }
     }
-
-  `}
+`}
 `;
 
 const ToolTipContainer = styled.div`
   font-size: ${({ theme }) => theme.typography.sizes.m}px;
   display: flex;
-  padding-left: ${({ theme }) => theme.gridUnit}px;
 `;
 
+const RequiredFieldIndicator = () => (
+  <span
+    css={{
+      color: supersetTheme.colors.error.base,
+      fontSize: `${supersetTheme.typography.sizes.s}px`,
+      paddingLeft: '2px',
+    }}
+  >
+    *
+  </span>
+);
+
+const DescriptoinToolTip = ({ description }: { description: string }) => (
+  <ToolTipContainer>
+    <Tooltip
+      title={description}
+      placement="top"
+      overlayInnerStyle={{
+        display: '-webkit-box',
+        overflow: 'hidden',
+        // @ts-ignore -webkit-line-clamp is not in the CSS type
+        '-webkit-line-clamp': '20',
+        '-webkit-box-orient': 'vertical',
+        'text-overflow': 'ellipsis',
+      }}
+    >
+      <Icons.InfoCircle
+        className="text-muted"
+        css={{ color: supersetTheme.colors.grayscale.light1 }}
+      />
+    </Tooltip>
+  </ToolTipContainer>
+);
 const FilterControl: React.FC<FilterProps> = ({
   dataMaskSelected,
   filter,
@@ -99,29 +130,14 @@ const FilterControl: React.FC<FilterProps> = ({
         <StyledFilterControlTitle data-test="filter-control-name">
           {name}
         </StyledFilterControlTitle>
-        {isRequired && (
-          <span
-            css={{
-              color: supersetTheme.colors.error.base,
-              fontSize: `${supersetTheme.typography.sizes.s}px`,
-            }}
-          >
-            *
-          </span>
-        )}
+        {isRequired && <RequiredFieldIndicator />}
         {filter.description && filter.description.trim() && (
-          <ToolTipContainer>
-            <InfoTooltipWithTrigger
-              label={t('description')}
-              tooltip={filter.description}
-              placement="top"
-            />
-          </ToolTipContainer>
+          <DescriptoinToolTip description={filter.description} />
         )}
         <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
       </StyledFilterControlTitleBox>
     ),
-    [icon, name],
+    [name, isRequired, filter.description, icon],
   );
 
   return (
@@ -139,7 +155,6 @@ const FilterControl: React.FC<FilterProps> = ({
           inView={inView}
         />
       </FormItem>
-      {filter.requiredFirst ? <span>Test</span> : null}
     </StyledFilterControlContainer>
   );
 };

From 7bd5705f32469427e04646c863aa51e973f65466 Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Mon, 25 Oct 2021 06:01:45 -0400
Subject: [PATCH 5/7] Tests successful

---
 .../CascadeFilterControl.test.tsx             |  5 ++-
 .../FilterControls/FilterControl.tsx          | 32 +++++++++----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
index c43038a343a80..c690c323d5b72 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/CascadeFilterControl.test.tsx
@@ -78,9 +78,8 @@ test('should render the child of a child filter name', () => {
 test('should render tooltip if description is not empty', async () => {
   render(setup(createProps()));
   expect(screen.getByText('test')).toBeInTheDocument();
-  const toolTip = screen.getByText('test').closest('div')?.nextSibling;
+  const toolTip = screen.getByText('test')?.parentElement?.querySelector('i');
   expect(toolTip).not.toBe(null);
-  expect(toolTip).toHaveAttribute('role', 'img');
   fireEvent.mouseOver(toolTip as HTMLElement);
   expect(await screen.findByText('test description')).toBeInTheDocument();
 });
@@ -91,6 +90,6 @@ test('should not render tooltip if description is empty', () => {
       createProps({ ...nativeFiltersInfo.filters.DefaultsID, description: '' }),
     ),
   );
-  const toolTip = screen.getByText('test').closest('div')?.nextSibling;
+  const toolTip = screen.getByText('test')?.parentElement?.querySelector('i');
   expect(toolTip).toBe(null);
 });
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 980d3a6b82903..dc756035cefb9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -19,7 +19,6 @@
 import React, { useMemo } from 'react';
 import { styled } from '@superset-ui/core';
 import { FormItem as StyledFormItem, Form } from 'src/components/Form';
-import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 import { theme as supersetTheme } from 'src/preamble';
 import { checkIsMissingRequiredValue } from '../utils';
@@ -59,15 +58,13 @@ const StyledFilterControlContainer = styled(Form)`
 `;
 
 const FormItem = styled(StyledFormItem)`
-  ${({ theme }) => `
-    .ant-form-item-label {
-      label.ant-form-item-required:not(.ant-form-item-required-mark-optional){
-        &::after {
-          display: none;
-        }
+  .ant-form-item-label {
+    label.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+      &::after {
+        display: none;
       }
     }
-`}
+  }
 `;
 
 const ToolTipContainer = styled.div`
@@ -80,7 +77,7 @@ const RequiredFieldIndicator = () => (
     css={{
       color: supersetTheme.colors.error.base,
       fontSize: `${supersetTheme.typography.sizes.s}px`,
-      paddingLeft: '2px',
+      paddingLeft: `${supersetTheme.gridUnit}px`,
     }}
   >
     *
@@ -91,23 +88,23 @@ const DescriptoinToolTip = ({ description }: { description: string }) => (
   <ToolTipContainer>
     <Tooltip
       title={description}
-      placement="top"
+      placement="right"
       overlayInnerStyle={{
         display: '-webkit-box',
         overflow: 'hidden',
-        // @ts-ignore -webkit-line-clamp is not in the CSS type
-        '-webkit-line-clamp': '20',
-        '-webkit-box-orient': 'vertical',
-        'text-overflow': 'ellipsis',
+        WebkitLineClamp: 20,
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
       }}
     >
-      <Icons.InfoCircle
-        className="text-muted"
-        css={{ color: supersetTheme.colors.grayscale.light1 }}
+      <i
+        className="fa fa-info-circle text-muted"
+        css={{ paddingLeft: `${supersetTheme.gridUnit}px`, cursor: 'pointer' }}
       />
     </Tooltip>
   </ToolTipContainer>
 );
+
 const FilterControl: React.FC<FilterProps> = ({
   dataMaskSelected,
   filter,
@@ -158,4 +155,5 @@ const FilterControl: React.FC<FilterProps> = ({
     </StyledFilterControlContainer>
   );
 };
+
 export default React.memo(FilterControl);

From 4a5c51e22be3605f70c5db6d810360a6e2e47449 Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Wed, 27 Oct 2021 02:09:39 -0400
Subject: [PATCH 6/7] Address PR comments

---
 .../FilterControls/FilterControl.tsx          | 22 ++++++++++---------
 .../FiltersConfigForm/FiltersConfigForm.tsx   |  1 +
 .../nativeFilters/FiltersConfigModal/utils.ts |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index d18a87cdf27e4..eec3c78fa3e75 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -17,10 +17,9 @@
  * under the License.
  */
 import React, { useMemo } from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, SupersetTheme } from '@superset-ui/core';
 import { FormItem as StyledFormItem, Form } from 'src/components/Form';
 import { Tooltip } from 'src/components/Tooltip';
-import { theme as supersetTheme } from 'src/preamble';
 import { checkIsMissingRequiredValue } from '../utils';
 import FilterValue from './FilterValue';
 import { FilterProps } from './types';
@@ -74,17 +73,17 @@ const ToolTipContainer = styled.div`
 
 const RequiredFieldIndicator = () => (
   <span
-    css={{
-      color: supersetTheme.colors.error.base,
-      fontSize: `${supersetTheme.typography.sizes.s}px`,
-      paddingLeft: `${supersetTheme.gridUnit}px`,
-    }}
+    css={(theme: SupersetTheme) => ({
+      color: theme.colors.error.base,
+      fontSize: `${theme.typography.sizes.s}px`,
+      paddingLeft: '1px',
+    })}
   >
     *
   </span>
 );
 
-const DescriptoinToolTip = ({ description }: { description: string }) => (
+const DescriptionToolTip = ({ description }: { description: string }) => (
   <ToolTipContainer>
     <Tooltip
       title={description}
@@ -99,7 +98,10 @@ const DescriptoinToolTip = ({ description }: { description: string }) => (
     >
       <i
         className="fa fa-info-circle text-muted"
-        css={{ paddingLeft: `${supersetTheme.gridUnit}px`, cursor: 'pointer' }}
+        css={(theme: SupersetTheme) => ({
+          paddingLeft: `${theme.gridUnit}px`,
+          cursor: 'pointer',
+        })}
       />
     </Tooltip>
   </ToolTipContainer>
@@ -131,7 +133,7 @@ const FilterControl: React.FC<FilterProps> = ({
         </StyledFilterControlTitle>
         {isRequired && <RequiredFieldIndicator />}
         {filter.description && filter.description.trim() && (
-          <DescriptoinToolTip description={filter.description} />
+          <DescriptionToolTip description={filter.description} />
         )}
         <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
       </StyledFilterControlTitleBox>
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 d1e905407d7da..024b843461af3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -972,6 +972,7 @@ const FiltersConfigForm = (
             <StyledFormItem
               name={['filters', filterId, 'description']}
               initialValue={filterToEdit?.description}
+              rules={[{ transform: value => value.trim() }]}
               label={<StyledLabel>{t('Description')}</StyledLabel>}
             >
               <TextArea />
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
index a4c8609355395..84b224b118edb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
@@ -159,7 +159,7 @@ export const createHandleSave = (
         scope: formInputs.scope,
         sortMetric: formInputs.sortMetric,
         type: formInputs.type,
-        description: formInputs.description || '',
+        description: (formInputs.description || '').trim(),
       };
     });
 

From bb60d88869c8dd6e735a7ecfbe797deba3ecf4a9 Mon Sep 17 00:00:00 2001
From: Ajay Mancheery <ajay.m@outlook.com>
Date: Wed, 27 Oct 2021 03:45:57 -0400
Subject: [PATCH 7/7] fix a test

---
 .../FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx   | 1 -
 1 file changed, 1 deletion(-)

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 024b843461af3..d1e905407d7da 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -972,7 +972,6 @@ const FiltersConfigForm = (
             <StyledFormItem
               name={['filters', filterId, 'description']}
               initialValue={filterToEdit?.description}
-              rules={[{ transform: value => value.trim() }]}
               label={<StyledLabel>{t('Description')}</StyledLabel>}
             >
               <TextArea />