[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/components/FilterIndicatorsContainer_spec.jsx

@@ -34,6 +34,7 @@ describe('FilterIndicatorsContainer', () => {
     filterImmuneSlices: [],
     filterImmuneSliceFields: {},
     setDirectPathToChild: () => {},
+    filterFieldOnFocus: {},
   };
 
   colorMap.getFilterColorKey = jest.fn(() => 'id_column');

superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardState.js

@@ -29,4 +29,5 @@ export default {
   isStarred: true,
   isPublished: true,
   css: '',
+  focusedFilterField: [],
 };

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',
+    });
+  });
 });

superset/assets/spec/javascripts/dashboard/util/getChartAndLabelComponentIdFromPath_spec.js

@@ -0,0 +1,38 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import getChartAndLabelComponentIdFromPath from '../../../../src/dashboard/util/getChartAndLabelComponentIdFromPath';
+
+describe('getChartAndLabelComponentIdFromPath', () => {
+  it('should return label and component id', () => {
+    const directPathToChild = [
+      'ROOT_ID',
+      'TABS-aX1uNK-ryo',
+      'TAB-ZRgxfD2ktj',
+      'ROW-46632bc2',
+      'COLUMN-XjlxaS-flc',
+      'CHART-x-RMdAtlDb',
+      'LABEL-region',
+    ];
+
+    expect(getChartAndLabelComponentIdFromPath(directPathToChild)).toEqual({
+      label: 'LABEL-region',
+      chart: 'CHART-x-RMdAtlDb',
+    });
+  });
+});