create an event broadcast which allows us to update our navbar dashboard...

create an event broadcast which allows us to update our navbar dashboard listing whenever someone creates or deletes a dashboard from other places in the app, this way you avoid cases where the navbar dash listing is out of sync with the users known reality.

resources/frontend_client/app/card/card.controllers.js

@@ -67,8 +67,8 @@ CardControllers.controller('CardList', ['$scope', '$location', 'Card', function(
 }]);
 
 CardControllers.controller('CardDetail', [
-    '$scope', '$routeParams', '$location', '$q', '$window', 'Card', 'Dashboard', 'CorvusFormGenerator', 'Metabase', 'VisualizationSettings', 'QueryUtils',
-    function($scope, $routeParams, $location, $q, $window, Card, Dashboard, CorvusFormGenerator, Metabase, VisualizationSettings, QueryUtils) {
+    '$rootScope', '$scope', '$routeParams', '$location', '$q', '$window', 'Card', 'Dashboard', 'CorvusFormGenerator', 'Metabase', 'VisualizationSettings', 'QueryUtils',
+    function($rootScope, $scope, $routeParams, $location, $q, $window, Card, Dashboard, CorvusFormGenerator, Metabase, VisualizationSettings, QueryUtils) {
 
         // =====  Controller local objects
 
@@ -108,12 +108,16 @@ CardControllers.controller('CardDetail', [
             },
             cardJson = JSON.stringify(card);
 
+
         // =====  REACT component models
 
         var headerModel = {
             card: null,
             cardApi: Card,
             dashboardApi: Dashboard,
+            broadcastEventFn: function(eventName, value) {
+                $rootScope.$broadcast(eventName, value);
+            },
             notifyCardChangedFn: function(modifiedCard) {
                 // these are the only things we let the header change
                 card.name = modifiedCard.name;

resources/frontend_client/app/dashboard/dashboard.controllers.js

@@ -7,13 +7,27 @@ var DashboardControllers = angular.module('corvus.dashboard.controllers', []);
 DashboardControllers.controller('DashList', ['$scope', '$location', 'Dashboard', function($scope, $location, Dashboard) {
     $scope.dashboards = [];
 
-    Dashboard.list({
-        'filterMode': 'all'
-    }, function (dashes) {
-        $scope.dashboards = dashes;
-    }, function (error) {
-        console.log('error getting dahsboards list', error);
+    var refreshListing = function() {
+        Dashboard.list({
+            'filterMode': 'all'
+        }, function (dashes) {
+            $scope.dashboards = dashes;
+        }, function (error) {
+            console.log('error getting dahsboards list', error);
+        });
+    };
+
+    $scope.$on("dashboard:create", function(event, dashboardId) {
+        refreshListing();
     });
+
+    $scope.$on("dashboard:delete", function(event, dashboardId) {
+        refreshListing();
+    });
+
+    // always initialize with a fresh listing
+    refreshListing();
+
 }]);
 
 DashboardControllers.controller('DashDetail', ['$scope', '$routeParams', '$location', 'Dashboard', 'DashCard', function($scope, $routeParams, $location, Dashboard, DashCard) {

resources/frontend_client/app/dashboard/dashboard.directives.js

@@ -8,70 +8,74 @@ var DashboardDirectives = angular.module('corvus.dashboard.directives', [
 ]);
 
 
-DashboardDirectives.directive('mbDashboardSaver', ['CorvusCore', 'Dashboard', '$modal', '$location', function(CorvusCore, Dashboard, $modal, $location) {
-    function link(scope, element, attrs) {
-
-        var openModal = function() {
-            var modalInstance = $modal.open({
-                templateUrl: '/app/dashboard/partials/modal_dashboard_saver.html',
-                controller: ['$scope', '$modalInstance',
-                    function($scope, $modalInstance) {
-                        $scope.dashboard = angular.copy(scope.dashboard);
-                        $scope.permOptions = CorvusCore.perms;
-
-                        $scope.save = function(dash) {
-                            $scope.$broadcast("form:reset");
-
-                            Dashboard.update(dash, function (result) {
-                                // trigger our callback if we have one
-                                if (scope.callback) {
-                                    scope.callback(result);
-                                }
+DashboardDirectives.directive('mbDashboardSaver', ['CorvusCore', 'Dashboard', '$modal', '$location', '$rootScope',
+    function(CorvusCore, Dashboard, $modal, $location, $rootScope) {
+        function link(scope, element, attrs) {
+
+            var openModal = function() {
+                var modalInstance = $modal.open({
+                    templateUrl: '/app/dashboard/partials/modal_dashboard_saver.html',
+                    controller: ['$scope', '$modalInstance',
+                        function($scope, $modalInstance) {
+                            $scope.dashboard = angular.copy(scope.dashboard);
+                            $scope.permOptions = CorvusCore.perms;
+
+                            $scope.save = function(dash) {
+                                $scope.$broadcast("form:reset");
+
+                                Dashboard.update(dash, function (result) {
+                                    // trigger our callback if we have one
+                                    if (scope.callback) {
+                                        scope.callback(result);
+                                    }
 
-                                // just close out the modal now that we're done
-                                $modalInstance.close();
+                                    // just close out the modal now that we're done
+                                    $modalInstance.close();
 
-                            }, function (error) {
-                                $scope.$broadcast("form:api-error", error);
-                            });
-                        };
+                                }, function (error) {
+                                    $scope.$broadcast("form:api-error", error);
+                                });
+                            };
 
-                        $scope.delete = function() {
-                            $scope.$broadcast("form:reset");
+                            $scope.delete = function() {
+                                $scope.$broadcast("form:reset");
 
-                            Dashboard.delete({
-                                'dashId': scope.dashboard.id
-                            }, function (result) {
-                                $modalInstance.close();
+                                Dashboard.delete({
+                                    'dashId': scope.dashboard.id
+                                }, function (result) {
+                                    $rootScope.$broadcast("dashboard:delete", scope.dashboard.id);
 
-                                // send people home after deleting a dashboard
-                                $location.path('/');
+                                    $modalInstance.close();
 
-                            }, function (error) {
-                                $scope.$broadcast("form:api-error", error);
-                            });
-                        };
+                                    // send people home after deleting a dashboard
+                                    $location.path('/');
 
-                        $scope.close = function() {
-                            $modalInstance.dismiss('cancel');
-                        };
-                    }
-                ]
-            });
-        };
+                                }, function (error) {
+                                    $scope.$broadcast("form:api-error", error);
+                                });
+                            };
 
-        element.bind('click', openModal);
-    }
+                            $scope.close = function() {
+                                $modalInstance.dismiss('cancel');
+                            };
+                        }
+                    ]
+                });
+            };
 
-    return {
-        restrict: 'A',
-        link: link,
-        scope: {
-            callback: '=',
-            dashboard: '='
+            element.bind('click', openModal);
         }
-    };
-}]);
+
+        return {
+            restrict: 'A',
+            link: link,
+            scope: {
+                callback: '=',
+                dashboard: '='
+            }
+        };
+    }
+]);
 
 
 DashboardDirectives.directive('mbDashcard', ['Card', 'Metabase', 'VisualizationSettings', '$timeout', function(Card, Metabase, VisualizationSettings, $timeout) {

resources/frontend_client/app/query_builder/add_to_dashboard.react.js

@@ -39,6 +39,7 @@ export default React.createClass({
                     <AddToDashboardPopover
                         card={this.props.card}
                         dashboardApi={this.props.dashboardApi}
+                        broadcastEventFn={this.props.broadcastEventFn}
                         closePopoverFn={this.toggleModal}
                     />
                 </Popover>

resources/frontend_client/app/query_builder/add_to_dashboard_popover.react.js

@@ -101,6 +101,9 @@ export default React.createClass({
         var component = this;
         this.props.dashboardApi.create(newDash, function(result) {
             component.addToExistingDash(result, true);
+
+            // send out a notice that we created a new dashboard
+            component.props.broadcastEventFn("dashboard:create", result.id);
         }, function(error) {
             component.setState({
                 errors: error

resources/frontend_client/app/query_builder/header.react.js

@@ -240,6 +240,7 @@ export default React.createClass({
                     <AddToDashboard
                         card={this.props.card}
                         dashboardApi={this.props.dashboardApi}
+                        broadcastEventFn={this.props.broadcastEventFn}
                     />
                     {saveButton}
                     {queryModeToggle}