Omnibar (#6745)

* add starter workspace

* move code into omni container

* 🚢

* add logger

* removed jquert

* remove example ref

* moved all the code into Fragments

* adressed comments

* 🚢

* remove ref

* remove unneeded code

* added featureflag

* change prompt text

* fix omni location

* cleanup comment

superset/assets/package.json

@@ -93,6 +93,7 @@
     "mousetrap": "^1.6.1",
     "mustache": "^2.2.1",
     "nvd3": "1.8.6",
+    "omnibar": "^2.1.1",
     "prop-types": "^15.6.0",
     "re-resizable": "^4.3.1",
     "react": "^16.4.1",

superset/assets/src/components/OmniContainer.jsx

@@ -0,0 +1,102 @@
+/**
+ * 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 { Modal } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
+import { SupersetClient } from '@superset-ui/connection';
+import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
+import Omnibar from 'omnibar';
+import {
+  Logger,
+  ActionLog,
+  LOG_ACTIONS_OMNIBAR_TRIGGERED,
+} from '../logger';
+
+const propTypes = {
+  impressionId: PropTypes.string.isRequired,
+  dashboardId: PropTypes.number.isRequired,
+};
+
+const getDashboards = query =>
+  // todo: Build a dedicated endpoint for dashboard searching
+  // i.e. superset/v1/api/dashboards?q=${query}
+   SupersetClient.get({
+        endpoint: `/dashboardasync/api/read?_oc_DashboardModelViewAsync=changed_on&_od_DashboardModelViewAsync=desc&_flt_2_dashboard_title=${query}`,
+      })
+        .then(({ json }) => json.result.map(item => ({
+            title: item.dashboard_title,
+            ...item,
+          }),
+        ))
+        .catch(() => ({
+            title: t('An error occurred while fethching Dashboards'),
+        }));
+
+class OmniContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOmni: false,
+    };
+    this.handleKeydown = this.handleKeydown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeydown);
+  }
+
+  handleKeydown(event) {
+    const controlOrCommand = event.ctrlKey || event.metaKey;
+    if (controlOrCommand && isFeatureEnabled(FeatureFlag.OMNIBAR)) {
+      const isK = event.key === 'k' || event.keyCode === 83;
+      if (isK) {
+        this.setState({ showOmni: !this.state.showOmni });
+
+        document
+          .getElementsByClassName('Omnibar')[0]
+          .focus();
+
+        Logger.send(
+          new ActionLog({
+            impressionId: this.props.impressionId, // impo
+            source: 'dashboard',
+            sourceId: this.props.dashboardId, // sourceId: this.props.dashboardId
+            eventNames: LOG_ACTIONS_OMNIBAR_TRIGGERED,
+          }),
+        );
+      }
+    }
+  }
+
+  render() {
+      return (
+        <Modal show={this.state.showOmni} style={{ marginTop: '25%' }}>
+          <Omnibar className="Omnibar" placeholder="Search all dashboards" extensions={[getDashboards]} />
+        </Modal>
+      );
+  }
+}
+
+OmniContainer.propTypes = propTypes;
+export default OmniContainer;

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

@@ -39,6 +39,7 @@ import {
   LOG_ACTIONS_LOAD_DASHBOARD_PANE,
   LOG_ACTIONS_FIRST_DASHBOARD_LOAD,
 } from '../../logger';
+import OmniContianer from '../../components/OmniContainer';
 
 import '../stylesheets/index.less';
 
@@ -232,7 +233,17 @@ class Dashboard extends React.PureComponent {
   }
 
   render() {
-    return <DashboardBuilder />;
+    const {
+      impressionId,
+      dashboardInfo: { id },
+    } = this.props;
+
+    return (
+      <React.Fragment>
+        <OmniContianer impressionId={impressionId} dashboardId={id} />
+        <DashboardBuilder />
+      </React.Fragment>
+    );
   }
 }
 

superset/assets/src/featureFlags.ts

@@ -20,6 +20,7 @@
 // check into source control. We're hardcoding the supported flags for now.
 export enum FeatureFlag {
   SCOPED_FILTER = 'SCOPED_FILTER',
+  OMNIBAR = 'OMNIBAR',
 }
 
 export type FeatureFlagMap = {

superset/assets/src/logger.js

@@ -158,6 +158,7 @@ export const LOG_ACTIONS_REFRESH_DASHBOARD = 'force_refresh_dashboard';
 export const LOG_ACTIONS_EXPLORE_DASHBOARD_CHART = 'explore_dashboard_chart';
 export const LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART = 'export_csv_dashboard_chart';
 export const LOG_ACTIONS_CHANGE_DASHBOARD_FILTER = 'change_dashboard_filter';
+export const LOG_ACTIONS_OMNIBAR_TRIGGERED = 'omnibar_dashboard_triggered';
 
 export const DASHBOARD_EVENT_NAMES = [
   LOG_ACTIONS_MOUNT_DASHBOARD,
@@ -170,6 +171,7 @@ export const DASHBOARD_EVENT_NAMES = [
   LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART,
   LOG_ACTIONS_CHANGE_DASHBOARD_FILTER,
   LOG_ACTIONS_REFRESH_DASHBOARD,
+  LOG_ACTIONS_OMNIBAR_TRIGGERED,
 ];
 
 export const EXPLORE_EVENT_NAMES = [