[WIP][dashboard scoped filter] part 1: scope selector modal

superset/assets/package.json

@@ -116,6 +116,7 @@
     "react-bootstrap": "^0.31.5",
     "react-bootstrap-dialog": "^0.10.0",
     "react-bootstrap-slider": "2.1.5",
+    "react-checkbox-tree": "^1.5.1",
     "react-color": "^2.13.8",
     "react-datetime": "^2.14.0",
     "react-dnd": "^2.5.4",

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

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { filterId } from './mockSliceEntities';
+import { DASHBOARD_FILTER_SCOPE_GLOBAL } from '../../../../src/dashboard/reducers/dashboardFilters';
 
 export const emptyFilters = {};
 
@@ -33,7 +34,9 @@ export const dashboardFilters = {
       'ROW-l6PrlhwSjh',
       'CHART-rwDfbGqeEn',
     ],
-    scope: 'ROOT_ID',
+    scopes: {
+      region: DASHBOARD_FILTER_SCOPE_GLOBAL,
+    },
     isDateFilter: false,
     isInstantFilter: true,
     columns: {

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

@@ -204,6 +204,6 @@ export const filterComponent = {
     chartId: filterId,
     width: 3,
     height: 10,
-    chartName: 'Filter',
+    sliceName: 'Filter',
   },
 };

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

@@ -22,7 +22,9 @@ import {
   REMOVE_FILTER,
   CHANGE_FILTER,
 } from '../../../../src/dashboard/actions/dashboardFilters';
-import dashboardFiltersReducer from '../../../../src/dashboard/reducers/dashboardFilters';
+import dashboardFiltersReducer, {
+  DASHBOARD_FILTER_SCOPE_GLOBAL,
+} from '../../../../src/dashboard/reducers/dashboardFilters';
 import {
   emptyFilters,
   dashboardFilters,
@@ -33,7 +35,6 @@ import {
   column,
 } from '../fixtures/mockSliceEntities';
 import { filterComponent } from '../fixtures/mockDashboardLayout';
-import { DASHBOARD_ROOT_ID } from '../../../../src/dashboard/util/constants';
 
 describe('dashboardFilters reducer', () => {
   const form_data = sliceEntitiesForDashboard.slices[filterId].form_data;
@@ -54,7 +55,7 @@ describe('dashboardFilters reducer', () => {
         chartId: filterId,
         componentId: component.id,
         directPathToFilter,
-        scope: DASHBOARD_ROOT_ID,
+        filterName: component.meta.sliceName,
         isDateFilter: false,
         isInstantFilter: !!form_data.instant_filtering,
         columns: {
@@ -63,6 +64,9 @@ describe('dashboardFilters reducer', () => {
         labels: {
           [column]: column,
         },
+        scopes: {
+          [column]: DASHBOARD_FILTER_SCOPE_GLOBAL,
+        },
       },
     });
   });
@@ -83,7 +87,6 @@ describe('dashboardFilters reducer', () => {
         chartId: filterId,
         componentId: component.id,
         directPathToFilter,
-        scope: DASHBOARD_ROOT_ID,
         isDateFilter: false,
         isInstantFilter: !!form_data.instant_filtering,
         columns: {
@@ -93,6 +96,9 @@ describe('dashboardFilters reducer', () => {
         labels: {
           [column]: column,
         },
+        scopes: {
+          [column]: DASHBOARD_FILTER_SCOPE_GLOBAL,
+        },
       },
     });
   });
@@ -113,7 +119,6 @@ describe('dashboardFilters reducer', () => {
         chartId: filterId,
         componentId: component.id,
         directPathToFilter,
-        scope: DASHBOARD_ROOT_ID,
         isDateFilter: false,
         isInstantFilter: !!form_data.instant_filtering,
         columns: {
@@ -123,6 +128,9 @@ describe('dashboardFilters reducer', () => {
         labels: {
           [column]: column,
         },
+        scopes: {
+          [column]: DASHBOARD_FILTER_SCOPE_GLOBAL,
+        },
       },
     });
   });

superset/assets/src/components/ChartIcon.jsx

@@ -0,0 +1,30 @@
+/**
+ * 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 React from 'react';
+
+const ChartIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="17" height="17" rx="2.5" fill="#EFF9F9" stroke="#B3DADC" />
+    <rect x="8" y="4" width="2" height="10" rx="1" fill="#B3DADC" />
+    <rect x="12" y="10" width="2" height="4" rx="1" fill="#B3DADC" />
+    <rect x="4" y="6" width="2" height="8" rx="1" fill="#B3DADC" />
+  </svg>
+);
+
+export default ChartIcon;

superset/assets/src/components/CheckboxIcons.jsx

@@ -0,0 +1,40 @@
+/**
+ * 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 React from 'react';
+
+export const CheckboxChecked = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.11 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0Z" fill="#00A699" />
+    <path d="M7 14L2 9L3.41 7.59L7 11.17L14.59 3.58L16 5L7 14Z" fill="white" />
+  </svg>
+);
+
+export const CheckboxHalfChecked = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z" fill="#999999" />
+    <path d="M14 10H4V8H14V10Z" fill="white" />
+  </svg>
+);
+
+export const CheckboxUnchecked = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z" fill="#CCCCCC" />
+    <path d="M16 2V16H2V2H16V2Z" fill="white" />
+  </svg>
+);

superset/assets/src/components/ModalTrigger.jsx

@@ -24,6 +24,7 @@ import cx from 'classnames';
 import Button from './Button';
 
 const propTypes = {
+  dialogClassName: PropTypes.string,
   animation: PropTypes.bool,
   triggerNode: PropTypes.node.isRequired,
   modalTitle: PropTypes.node,
@@ -72,6 +73,7 @@ export default class ModalTrigger extends React.Component {
   renderModal() {
     return (
       <Modal
+        dialogClassName={this.props.dialogClassName}
         animation={this.props.animation}
         show={this.state.showModal}
         onHide={this.close}

superset/assets/src/dashboard/components/DeleteComponentModal.jsx

@@ -57,14 +57,14 @@ export default class DeleteComponentModal extends React.PureComponent {
         ref={this.setModalRef}
         triggerNode={this.props.triggerNode}
         modalBody={
-          <div className="delete-component-modal">
+          <div className="dashboard-modal delete">
             <h1>{t('Delete dashboard tab?')}</h1>
             <div>
               Deleting a tab will remove all content within it. You may still
               reverse this action with the <b>undo</b> button (cmd + z) until
               you save your changes.
             </div>
-            <div className="delete-modal-actions-container">
+            <div className="dashboard-modal-actions-container">
               <Button onClick={this.close}>{t('Cancel')}</Button>
               <Button bsStyle="primary" onClick={this.deleteTab}>
                 {t('Delete')}

superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx

@@ -23,10 +23,8 @@ import { isEmpty } from 'lodash';
 import FilterIndicator from './FilterIndicator';
 import FilterIndicatorGroup from './FilterIndicatorGroup';
 import { FILTER_INDICATORS_DISPLAY_LENGTH } from '../util/constants';
-import {
-  getFilterColorKey,
-  getFilterColorMap,
-} from '../util/dashboardFiltersColorMap';
+import { getDashboardFilterKey } from '../util/getDashboardFilterKey';
+import { getFilterColorMap } from '../util/dashboardFiltersColorMap';
 
 const propTypes = {
   // from props
@@ -92,7 +90,10 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
           !filterImmuneSlices.includes(currentChartId)
         ) {
           Object.keys(columns).forEach(name => {
-            const colorMapKey = getFilterColorKey(chartId, name);
+            const colorMapKey = getDashboardFilterKey({
+              chartId,
+              column: name,
+            });
             const directPathToLabel = directPathToFilter.slice();
             directPathToLabel.push(`LABEL-${name}`);
             const indicator = {

superset/assets/src/dashboard/components/Header.jsx

@@ -26,6 +26,7 @@ import HeaderActionsDropdown from './HeaderActionsDropdown';
 import EditableTitle from '../../components/EditableTitle';
 import Button from '../../components/Button';
 import FaveStar from '../../components/FaveStar';
+import FilterScopeModal from './filterscope/FilterScopeModal';
 import PublishedStatus from './PublishedStatus';
 import UndoRedoKeylisteners from './UndoRedoKeylisteners';
 
@@ -347,7 +348,7 @@ class Header extends React.PureComponent {
                   bsSize="small"
                   onClick={this.onInsertComponentsButtonClick}
                 >
-                  {t('Insert components')}
+                  {t('Components')}
                 </Button>
               )}
 
@@ -361,6 +362,12 @@ class Header extends React.PureComponent {
                 </Button>
               )}
 
+              {editMode && (
+                <FilterScopeModal
+                  triggerNode={<Button bsSize="small">{t('Filters')}</Button>}
+                />
+              )}
+
               {editMode && hasUnsavedChanges && (
                 <Button
                   bsSize="small"

superset/assets/src/dashboard/components/filterscope/FilterFieldItem.jsx

@@ -0,0 +1,44 @@
+/**
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import FilterBadgeIcon from '../../../components/FilterBadgeIcon';
+
+const propTypes = {
+  label: PropTypes.string.isRequired,
+  colorCode: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+};
+
+export default function FilterFieldItem({ label, colorCode, isSelected }) {
+  return (
+    <a
+      className={cx('filter-field-item filter-container', {
+        'is-selected': isSelected,
+      })}
+    >
+      <FilterBadgeIcon colorCode={colorCode} />
+      <label htmlFor={label}>{label}</label>
+    </a>
+  );
+}
+
+FilterFieldItem.propTypes = propTypes;