feat(dashboard): Dashboard-Native Filters

superset-frontend/src/common/components/Modal/Modal.tsx

@@ -102,7 +102,9 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
   }
 
   // styling for Tabs component
-  .ant-tabs {
+  // Aaron note 20-11-19: this seems to be exclusively here for the Edit Database modal.
+  // TODO: remove this as it is a special case.
+  .ant-tabs-top {
     margin-top: -${({ theme }) => theme.gridUnit * 4}px;
   }
 `;

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigForm.tsx

@@ -115,27 +115,20 @@ const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
   }); // TODO: when connect to store read from there
 
   return (
-    <Form
-      form={form}
-      onValuesChange={changes => {
-        // un-set the "column" value whenever the dataset changes.
-        // Doing this in the onChange handler of the
-        // dataset selector doesn't work for some reason.
-        if ('dataset' in changes && changes.dataset?.value !== datasetId) {
-          form.setFieldsValue({ column: null });
-          setDatasetId(changes.dataset.value);
-        }
-      }}
-    >
+    <>
       <Form.Item
-        name="name"
+        name={['filters', filterId, 'name']}
         label="Filter Name"
         initialValue={filterToEdit?.name}
         rules={[{ required: true }]}
       >
         <Input />
       </Form.Item>
-      <Form.Item name="dataset" label="Datasource" rules={[{ required: true }]}>
+      <Form.Item
+        name={['filters', filterId, 'dataset']}
+        label="Datasource"
+        rules={[{ required: true }]}
+      >
         <SupersetResourceSelect
           resource="dataset"
           searchColumn="table_name"
@@ -146,7 +139,7 @@ const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
       <Form.Item
         // don't show the column select unless we have a dataset
         style={{ display: datasetId == null ? undefined : 'none' }}
-        name="column"
+        name={['filters', filterId, 'column']}
         initialValue={
           filterToEdit?.targets?.length && filterToEdit?.targets[0]?.datasetId
         }
@@ -155,23 +148,32 @@ const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
       >
         <ColumnSelect datasetId={datasetId} />
       </Form.Item>
-      <Form.Item name="defaultValue" label="Default Value">
+      <Form.Item
+        name={['filters', filterId, 'defaultValue']}
+        label="Default Value"
+      >
         <Input />
       </Form.Item>
-      <Form.Item name="isInstant" label={t('Apply changes instantly')}>
+      <Form.Item
+        name={['filters', filterId, 'isInstant']}
+        label={t('Apply changes instantly')}
+      >
         <Input type="checkbox" />
       </Form.Item>
       <Form.Item
-        name="allowsMultipleValues"
+        name={['filters', filterId, 'allowsMultipleValues']}
         label={t('Allow multiple selections')}
       >
         <Input type="checkbox" />
       </Form.Item>
-      <Form.Item name="isRequired" label={t('Required')}>
+      <Form.Item
+        name={['filters', filterId, 'isRequired']}
+        label={t('Required')}
+      >
         <Input type="checkbox" />
       </Form.Item>
       <Typography.Title level={5}>{t('Scoping')}</Typography.Title>
-      <Form.Item name="scoping" initialValue={scoping}>
+      <Form.Item name={['filters', filterId, 'scoping']} initialValue={scoping}>
         <Radio.Group
           onChange={({ target: { value } }) => {
             setScoping(value as Scoping);
@@ -193,7 +195,7 @@ const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
           <ScopingTree setFilterScope={setFilterScope} />
         </>
       )}
-    </Form>
+    </>
   );
 };
 

superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx

@@ -16,14 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import shortid from 'shortid';
 import { Store } from 'antd/lib/form/interface';
+import { DeleteFilled } from '@ant-design/icons';
 import { styled, t } from '@superset-ui/core';
-import { Button, Form, Icon } from 'src/common/components';
+import { Button, Form } from 'src/common/components';
+import Icon from 'src/components/Icon';
 import { StyledModal } from 'src/common/components/Modal';
-import Tabs from 'src/common/components/Tabs';
+import { LineEditableTabs } from 'src/common/components/Tabs';
 import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
 import { useFilterConfigMap, useFilterConfiguration } from './state';
 import FilterConfigForm from './FilterConfigForm';
@@ -80,6 +82,13 @@ export function FilterConfigModal({
   const [removedFilters, setRemovedFilters] = useState<Record<string, boolean>>(
     {},
   );
+  const [formValues, setFormValues] = useState<NativeFiltersForm>({
+    filters: {},
+  });
+
+  useEffect(() => {
+    form.setFieldsValue({ filters: {} });
+  }, [form, filterConfig]);
 
   function resetForm() {
     form.resetFields();
@@ -101,8 +110,9 @@ export function FilterConfigModal({
   }
 
   function getFilterTitle(id: string) {
-    // TODO use edited name from the form here
-    return filterConfigMap[id]?.name ?? 'New Filter';
+    return (
+      formValues.filters[id]?.name ?? filterConfigMap[id]?.name ?? 'New Filter'
+    );
   }
 
   async function onOk() {
@@ -144,6 +154,7 @@ export function FilterConfigModal({
     <StyledModal
       visible={isOpen}
       title={t('Filter Configuration and Scoping')}
+      width="55%"
       onCancel={() => {
         resetForm();
         onCancel();
@@ -153,31 +164,34 @@ export function FilterConfigModal({
       cancelText={t('Cancel')}
     >
       <StyledModalBody>
-        <Form>
-          <Tabs
-            type="editable-card"
+        <Form
+          form={form}
+          onValuesChange={(changes, values) => setFormValues(values)}
+        >
+          <LineEditableTabs
+            tabPosition="left"
             onChange={setCurrentFilterId}
             activeKey={currentFilterId}
             onEdit={onTabEdit}
           >
             {filterIds.map(id => (
-              <Tabs.TabPane
+              <LineEditableTabs.TabPane
                 tab={
                   <RemovedStatus removed={!!removedFilters[id]}>
                     {getFilterTitle(id)}
                   </RemovedStatus>
                 }
                 key={id}
-                closeIcon={<Icon name="trash" />}
+                closeIcon={<DeleteFilled />}
               >
                 <FilterConfigForm
                   form={form}
                   filterId={id}
                   filterToEdit={filterConfigMap[id]}
                 />
-              </Tabs.TabPane>
+              </LineEditableTabs.TabPane>
             ))}
-          </Tabs>
+          </LineEditableTabs>
         </Form>
       </StyledModalBody>
     </StyledModal>