[feature][dashboard] Show/hide filter indicator on the applicable charts when filter options are open/close (#8166)

* show ellipsis for long filter name in tooltip

* show filter indicator color bar when filter is applied

* show/hide filter indicator when filter is showing/hiding options

* use component local state to hide/show chart outline

* fix review comments + unit tests

superset/assets/spec/javascripts/dashboard/reducers/dashboardState_spec.js

@@ -22,6 +22,7 @@ import {
   ON_SAVE,
   REMOVE_SLICE,
   SET_EDIT_MODE,
+  SET_FOCUSED_FILTER_FIELD,
   SET_MAX_UNDO_HISTORY_EXCEEDED,
   SET_UNSAVED_CHANGES,
   TOGGLE_EXPAND_SLICE,
@@ -131,4 +132,38 @@ describe('dashboardState reducer', () => {
       updatedColorScheme: false,
     });
   });
+
+  it('should clear focused filter field', () => {
+    // dashboard only has 1 focused filter field at a time,
+    // but when user switch different filter boxes,
+    // browser didn't always fire onBlur and onFocus events in order.
+    // so in redux state focusedFilterField prop is a queue,
+    // we always shift first element in the queue
+
+    // init state: has 1 focus field
+    const initState = {
+      focusedFilterField: [
+        {
+          chartId: 1,
+          column: 'column_1',
+        },
+      ],
+    };
+    // when user switching filter,
+    // browser focus on new filter first,
+    // then blur current filter
+    const step1 = dashboardStateReducer(initState, {
+      type: SET_FOCUSED_FILTER_FIELD,
+      chartId: 2,
+      column: 'column_2',
+    });
+    const step2 = dashboardStateReducer(step1, {
+      type: SET_FOCUSED_FILTER_FIELD,
+    });
+
+    expect(step2.focusedFilterField.slice(-1).pop()).toEqual({
+      chartId: 2,
+      column: 'column_2',
+    });
+  });
 });