Refactor top nav config generation (#9726)

* Incorporate refactors to prep for view-edit mode

* code review comments

- Get rid of top nav config factory function refactor as it makes the
parameters less clear.
- Remove the watch on topNavMenu since it isn’t necessary for this PR.
Will bring a better variation back in the view/edit mode PR.

Note that these changes look somewhat pointless in and of themselves,
but the refactor will be useful for the view/edit mode when the top nav
configuration will change based on the dashboard mode, and then the
refactored functions, which are all only being used one currently, will
be called multiple times.

src/core_plugins/kibana/public/dashboard/get_top_nav_config.js

@@ -0,0 +1,89 @@
+
+/**
+ * @param kbnUrl - used to change the url.
+ * @return {Array<kbnTopNavConfig>} - Returns an array of objects for a top nav configuration.
+ * Note that order matters and the top nav will be displayed in the same order.
+ */
+export function getTopNavConfig(kbnUrl) {
+  return [
+    getNewConfig(kbnUrl),
+    getAddConfig(),
+    getSaveConfig(),
+    getOpenConfig(),
+    getShareConfig(),
+    getOptionsConfig()];
+}
+
+/**
+ *
+ * @param kbnUrl
+ * @returns {kbnTopNavConfig}
+ */
+function getNewConfig(kbnUrl) {
+  return {
+    key: 'new',
+    description: 'New Dashboard',
+    testId: 'dashboardNewButton',
+    run: () => { kbnUrl.change('/dashboard', {}); }
+  };
+}
+
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getAddConfig() {
+  return {
+    key: 'add',
+    description: 'Add a panel to the dashboard',
+    testId: 'dashboardAddPanelButton',
+    template: require('plugins/kibana/dashboard/partials/pick_visualization.html')
+  };
+}
+
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getSaveConfig() {
+  return {
+    key: 'save',
+    description: 'Save Dashboard',
+    testId: 'dashboardSaveButton',
+    template: require('plugins/kibana/dashboard/partials/save_dashboard.html')
+  };
+}
+
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getOpenConfig() {
+  return {
+    key: 'open',
+    description: 'Open Saved Dashboard',
+    testId: 'dashboardOpenButton',
+    template: require('plugins/kibana/dashboard/partials/load_dashboard.html')
+  };
+}
+
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getShareConfig() {
+  return {
+    key: 'share',
+    description: 'Share Dashboard',
+    testId: 'dashboardShareButton',
+    template: require('plugins/kibana/dashboard/partials/share.html')
+  };
+}
+
+/**
+ * @returns {kbnTopNavConfig}
+ */
+function getOptionsConfig() {
+  return {
+    key: 'options',
+    description: 'Options',
+    testId: 'dashboardOptionsButton',
+    template: require('plugins/kibana/dashboard/partials/options.html')
+  };
+}

src/core_plugins/kibana/public/dashboard/index.html

@@ -10,7 +10,7 @@
       >
         <span
           ng-show="dash.id"
-          ng-bind="dash.lastSavedTitle"
+          ng-bind="getDashTitle()"
         ></span>
       </div>
 
@@ -54,7 +54,7 @@
   <!-- Filters. -->
   <filter-bar state="state"></filter-bar>
 
-  <div ng-show="!state.panels.length" class="text-center start-screen">
+  <div ng-show="showEditHelpText()" class="text-center start-screen">
     <h2>Ready to get started?</h2>
     <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize" title="Visualize">"Visualize"</a> tab to create your first visualization.</p>
   </div>

src/core_plugins/kibana/public/dashboard/index.js

@@ -17,8 +17,10 @@ import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';
 import indexTemplate from 'plugins/kibana/dashboard/index.html';
 import { savedDashboardRegister } from 'plugins/kibana/dashboard/services/saved_dashboard_register';
+import { getTopNavConfig } from './get_top_nav_config';
 import { createPanelState } from 'plugins/kibana/dashboard/components/panel/lib/panel_state';
 import { DashboardConstants } from './dashboard_constants';
+
 require('ui/saved_objects/saved_object_registry').register(savedDashboardRegister);
 
 const app = uiModules.get('app/dashboard', [
@@ -105,37 +107,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
       $scope.$watch('state.options.darkTheme', setDarkTheme);
 
-      $scope.topNavMenu = [{
-        key: 'new',
-        description: 'New Dashboard',
-        run: function () { kbnUrl.change('/dashboard', {}); },
-        testId: 'dashboardNewButton',
-      }, {
-        key: 'add',
-        description: 'Add a panel to the dashboard',
-        template: require('plugins/kibana/dashboard/partials/pick_visualization.html'),
-        testId: 'dashboardAddPanelButton',
-      }, {
-        key: 'save',
-        description: 'Save Dashboard',
-        template: require('plugins/kibana/dashboard/partials/save_dashboard.html'),
-        testId: 'dashboardSaveButton',
-      }, {
-        key: 'open',
-        description: 'Open Saved Dashboard',
-        template: require('plugins/kibana/dashboard/partials/load_dashboard.html'),
-        testId: 'dashboardOpenButton',
-      }, {
-        key: 'share',
-        description: 'Share Dashboard',
-        template: require('plugins/kibana/dashboard/partials/share.html'),
-        testId: 'dashboardShareButton',
-      }, {
-        key: 'options',
-        description: 'Options',
-        template: require('plugins/kibana/dashboard/partials/options.html'),
-        testId: 'dashboardOptionsButton',
-      }];
+      $scope.topNavMenu = getTopNavConfig(kbnUrl);
 
       $scope.refresh = _.bindKey(courier, 'fetch');
 
@@ -229,6 +201,10 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       // update data when filters fire fetch event
       $scope.$listen(queryFilter, 'fetch', $scope.refresh);
 
+      $scope.getDashTitle = function () {
+        return dash.lastSavedTitle;
+      };
+
       $scope.newDashboard = function () {
         kbnUrl.change('/dashboard', {});
       };
@@ -314,6 +290,10 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       };
 
       init();
+
+      $scope.showEditHelpText = () => {
+        return !$scope.state.panels.length;
+      };
     }
   };
 });

src/ui/public/kbn_top_nav/kbn_top_nav.js

@@ -1,3 +1,20 @@
+/**
+ * A configuration object for a top nav component.
+ * @typedef {Object} KbnTopNavConfig
+ * @type Object
+ * @property {string} key - A display string which will be shown in the top nav for this option.
+ * @property {string} [description] - optional, used for the screen-reader description of this
+ *  menu. Defaults to "Toggle ${key} view" for templated menu items and just "${key}" for
+ *  programmatic menu items
+ * @property {string} testId - for testing purposes, can be used to retrieve this item.
+ * @property {Object} [template] - an html template that will be shown when this item is clicked.
+ *  If template is not given then run should be supplied.
+ * @property {function} [run] - an optional function that will be run when the nav item is clicked.
+ *  Either this or template parameter should be specified.
+ * @param {boolean} [hideButton] - optional, set to true to prevent a menu item from being created.
+ *  This allow injecting templates into the navbar that don't have an associated template
+ */
+
 /**
  * kbnTopNav directive
  *
@@ -9,27 +26,11 @@
  *
  * Menu items/templates are passed to the kbnTopNav via the config attribute
  * and should be defined as an array of objects. Each object represents a menu
- * item and should have the following properties:
+ * item and should be of type kbnTopNavConfig.
  *
- * @param {Array<Object>|KbnTopNavController} config
- * @param {string} config[].key
- *        - the uniq key for this menu item.
- * @param {string} [config[].label]
- *        - optional, string that will be displayed for the menu button.
- *        Defaults to the key
- * @param {string} [config[].description]
- *        - optional, used for the screen-reader description of this menu
- *        item, defaults to "Toggle ${key} view" for templated menu items
- *        and just "${key}" for programatic menu items
- * @param {boolean} [config[].hideButton]
- *        - optional, set to true to prevent a menu item from being created.
- *        This allow injecting templates into the navbar that don't have
- *        an associated template
- * @param {function} [config[].run]
- *        - optional, function to call when the menu item is clicked, defaults
- *        to toggling the template
+ * @param {Array<kbnTopNavConfig>|KbnTopNavController} config
  *
- * Programatic control of the navbar can be acheived one of two ways
+ * Programmatic control of the navbar can be achieved one of two ways
  */
 
 import _ from 'lodash';
@@ -99,6 +100,7 @@ module.directive('kbnTopNav', function (Private) {
       });
 
       const extensions = getNavbarExtensions($attrs.name);
+
       let controls = _.get($scope, $attrs.config, []);
       if (controls instanceof KbnTopNavController) {
         controls.addItems(extensions);