feat(dashboard): leaner filter indicator panel with wrapped text (#11592)

* feat(dashboard): leaner filter indicator panel with wrapped text

* remove summary from filter indicator panel

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { t, tn, useTheme } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import {
   SearchOutlined,
   MinusCircleFilled,
@@ -25,7 +25,15 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons';
 import { Collapse, Popover } from 'src/common/components/index';
-import { Indent, Item, ItemIcon, Panel, Reset, Title, Summary } from './Styles';
+import {
+  Indent,
+  Item,
+  ItemIcon,
+  Panel,
+  Reset,
+  Title,
+  FilterValue,
+} from './Styles';
 import { Indicator } from './selectors';
 
 export interface IndicatorProps {
@@ -39,11 +47,14 @@ const Indicator = ({
 }: IndicatorProps) => {
   return (
     <Item onClick={() => onClick([...path, `LABEL-${column}`])}>
-      <ItemIcon>
+      <Title bold>
-        <SearchOutlined />
+        <ItemIcon>
-      </ItemIcon>
+          <SearchOutlined />
-      <Title bold>{name.toUpperCase()}</Title>
+        </ItemIcon>
-      {value.length ? `: ${value.join(', ')}` : ''}
+        {name.toUpperCase()}
+        {value.length ? ': ' : ''}
+      </Title>
+      <FilterValue>{value.length ? value.join(', ') : ''}</FilterValue>
     </Item>
   );
 };
@@ -93,16 +104,8 @@ const DetailsPanelPopover = ({
     }
   }
 
-  const total =
-    appliedIndicators.length +
-    incompatibleIndicators.length +
-    unsetIndicators.length;
-
   const content = (
     <Panel>
-      <Summary>
-        {tn('%d Scoped Filter', '%d Scoped Filters', total, total)}
-      </Summary>
       <Reset>
         <Collapse
           ghost
@@ -115,7 +118,7 @@ const DetailsPanelPopover = ({
               header={
                 <Title bold>
                   <CheckCircleFilled color={theme.colors.success.base} />{' '}
-                  {t('Applied (%d)', appliedIndicators.length)}
+                  {t('Applied Filters (%d)', appliedIndicators.length)}
                 </Title>
               }
             >
@@ -136,7 +139,10 @@ const DetailsPanelPopover = ({
               header={
                 <Title bold>
                   <ExclamationCircleFilled color={theme.colors.alert.base} />{' '}
-                  {t('Incompatible (%d)', incompatibleIndicators.length)}
+                  {t(
+                    'Incompatible Filters (%d)',
+                    incompatibleIndicators.length,
+                  )}
                 </Title>
               }
             >
@@ -157,7 +163,7 @@ const DetailsPanelPopover = ({
               header={
                 <Title bold>
                   <MinusCircleFilled />{' '}
-                  {t('Unset (%d)', unsetIndicators.length)}
+                  {t('Unset Filters (%d)', unsetIndicators.length)}
                 </Title>
               }
               disabled={!unsetIndicators.length}

superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx

@@ -87,17 +87,14 @@ export interface TitleProps {
 }
 
 export const Title = styled.span<TitleProps>`
+  position: relative;
+  margin-right: ${({ theme }) => theme.gridUnit}px;
   font-weight: ${({ bold, theme }) => {
     return bold ? theme.typography.weights.bold : 'auto';
   }};
 `;
 
-export const Summary = styled.div`
-  font-weight: ${({ theme }) => theme.typography.weights.bold};
-`;
-
 export const ItemIcon = styled.i`
-  display: none;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -106,20 +103,26 @@ export const ItemIcon = styled.i`
 
 export const Item = styled.button`
   cursor: pointer;
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
+  text-align: left;
   padding: 0;
   border: none;
   background: none;
-  white-space: nowrap;
-  position: relative;
   outline: none;
+  width: 100%;
 
   &::-moz-focus-inner {
     border: 0;
   }
 
-  &:hover > i {
+  & i svg {
-    display: block;
+    color: transparent;
+    margin-right: ${({ theme }) => theme.gridUnit}px;
+  }
+
+  &:hover i svg {
+    color: inherit;
   }
 `;
 
@@ -134,6 +137,12 @@ export const Indent = styled.div`
 
 export const Panel = styled.div`
   min-width: 200px;
-  max-width: 400px;
+  max-width: 300px;
   overflow-x: hidden;
 `;
+
+export const FilterValue = styled.div`
+  max-width: 100%;
+  flex-grow: 1;
+  overflow: auto;
+`;