chore: Improves the native filters UI/UX - iteration 2

apache · May 23, 2021 · e52c804 · e52c804
1 parent d71b8b3
commit e52c804
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 169 deletions.
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -90,6 +90,7 @@ const addFilterSetFlow = async () => {
   // check description
   expect(screen.getByText('Filters (1)')).toBeInTheDocument();
   expect(screen.getByText(FILTER_NAME)).toBeInTheDocument();
+
   expect(screen.getAllByText('Last week').length).toBe(2);
 
   // apply filters
@@ -304,7 +305,7 @@ describe('FilterBar', () => {
 
     await addFilterFlow();
 
-    expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
+    expect(screen.getByTestId(getTestId('apply-button'))).toBeEnabled();
   });
 
   it('add and apply filter set', async () => {
@@ -317,6 +318,8 @@ describe('FilterBar', () => {
 
     await addFilterFlow();
 
+    userEvent.click(screen.getByTestId(getTestId('apply-button')));
+
     await addFilterSetFlow();
 
     // change filter
@@ -340,6 +343,7 @@ describe('FilterBar', () => {
       screen.getByTestId(getTestId('filter-set-wrapper')),
     ).not.toHaveAttribute('data-selected', 'true');
     userEvent.click(screen.getByTestId(getTestId('filter-set-wrapper')));
+    userEvent.click(screen.getAllByText('Filters (1)')[1]);
     expect(await screen.findByText('Last week')).toBeInTheDocument();
     userEvent.click(screen.getByTestId(getTestId('apply-button')));
     expect(screen.getByTestId(getTestId('apply-button'))).toBeDisabled();
@@ -355,6 +359,8 @@ describe('FilterBar', () => {
 
     await addFilterFlow();
 
+    userEvent.click(screen.getByTestId(getTestId('apply-button')));
+
     await addFilterSetFlow();
 
     userEvent.click(screen.getByTestId(getTestId('filter-set-menu-button')));

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
@@ -84,31 +84,58 @@ export const FilterTabTitle = styled.span`
 `;
 
 const FilterTabsContainer = styled(LineEditableTabs)`
-  // extra selector specificity:
-  &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
-    min-width: ${FILTER_WIDTH}px;
-    margin: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
-    padding: ${({ theme }) => theme.gridUnit}px
-      ${({ theme }) => theme.gridUnit * 2}px;
-
-    &:hover,
-    &-active {
-      color: ${({ theme }) => theme.colors.grayscale.dark1};
-      border-radius: ${({ theme }) => theme.borderRadius}px;
-      background-color: ${({ theme }) => theme.colors.secondary.light4};
-
-      .ant-tabs-tab-remove > svg {
-        color: ${({ theme }) => theme.colors.grayscale.base};
-        transition: all 0.3s;
+  ${({ theme }) => `
+    height: 100%;
+
+    & > .ant-tabs-content-holder {
+      border-left: 1px solid ${theme.colors.grayscale.light2};
+      margin-right: ${theme.gridUnit * 4}px;
+    }
+    & > .ant-tabs-content-holder ~ .ant-tabs-content-holder {
+      border: none;
+    }
+
+    &.ant-tabs-left
+      > .ant-tabs-content-holder
+      > .ant-tabs-content
+      > .ant-tabs-tabpane {
+      padding-left: ${theme.gridUnit * 4}px;
+      margin-top: ${theme.gridUnit * 4}px;
+    }
+
+    .ant-tabs-nav-list {
+      padding-top: ${theme.gridUnit * 4}px;
+      padding-right: ${theme.gridUnit * 2}px;
+      padding-bottom: ${theme.gridUnit * 4}px;
+      padding-left: ${theme.gridUnit * 3}px;
+    }
+
+    // extra selector specificity:
+    &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+      min-width: ${FILTER_WIDTH}px;
+      margin: 0 ${theme.gridUnit * 2}px 0 0;
+      padding: ${theme.gridUnit}px
+        ${theme.gridUnit * 2}px;
+
+      &:hover,
+      &-active {
+        color: ${theme.colors.grayscale.dark1};
+        border-radius: ${theme.borderRadius}px;
+        background-color: ${theme.colors.secondary.light4};
+
+        .ant-tabs-tab-remove > svg {
+          color: ${theme.colors.grayscale.base};
+          transition: all 0.3s;
+        }
       }
     }
-  }
 
-  .ant-tabs-tab-btn {
-    text-align: left;
-    justify-content: space-between;
-    text-transform: unset;
-  }
+    .ant-tabs-tab-btn {
+      text-align: left;
+      justify-content: space-between;
+      text-transform: unset;
+    }
+  `}
 `;
 
 type FilterTabsProps = {