Made dashboard view state srv panel view state obsolete

public/app/core/services/keybindingSrv.ts

@@ -104,7 +104,7 @@ export class KeybindingSrv {
     }
 
     if (search.fullscreen) {
-      this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
+      appEvents.emit('panel-change-view', { fullscreen: false, edit: false });
       return;
     }
 
@@ -174,7 +174,7 @@ export class KeybindingSrv {
     // edit panel
     this.bind('e', () => {
       if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
-        this.$rootScope.appEvent('panel-change-view', {
+        appEvents.emit('panel-change-view', {
           fullscreen: true,
           edit: true,
           panelId: dashboard.meta.focusPanelId,
@@ -186,7 +186,7 @@ export class KeybindingSrv {
     // view panel
     this.bind('v', () => {
       if (dashboard.meta.focusPanelId) {
-        this.$rootScope.appEvent('panel-change-view', {
+        appEvents.emit('panel-change-view', {
           fullscreen: true,
           edit: null,
           panelId: dashboard.meta.focusPanelId,

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -94,7 +94,7 @@ export class DashboardPage extends PureComponent<Props, State> {
     // }
 
     // Sync url state with model
-    if (urlFullscreen !== dashboard.meta.isFullscreen || urlEdit !== dashboard.meta.isEditing) {
+    if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) {
       // entering fullscreen/edit mode
       if (urlPanelId) {
         const panel = dashboard.getPanelById(parseInt(urlPanelId, 10));
@@ -102,6 +102,7 @@ export class DashboardPage extends PureComponent<Props, State> {
         if (panel) {
           dashboard.setViewMode(panel, urlFullscreen, urlEdit);
           this.setState({ isEditing: urlEdit, isFullscreen: urlFullscreen, fullscreenPanel: panel });
+          this.setPanelFullscreenClass(urlFullscreen);
         } else {
           this.handleFullscreenPanelNotFound(urlPanelId);
         }
@@ -110,10 +111,9 @@ export class DashboardPage extends PureComponent<Props, State> {
         if (this.state.fullscreenPanel) {
           dashboard.setViewMode(this.state.fullscreenPanel, urlFullscreen, urlEdit);
         }
-        this.setState({ isEditing: urlEdit, isFullscreen: urlFullscreen, fullscreenPanel: null });
+        this.setState({ isEditing: false, isFullscreen: false, fullscreenPanel: null });
+        this.setPanelFullscreenClass(false);
       }
-
-      this.setPanelFullscreenClass(urlFullscreen);
     }
   }
 

public/app/features/dashboard/services/DashboardSrv.ts

@@ -10,6 +10,7 @@ export class DashboardSrv {
   constructor(private backendSrv, private $rootScope, private $location) {
     appEvents.on('save-dashboard', this.saveDashboard.bind(this), $rootScope);
     appEvents.on('save-dashboard', this.saveDashboard.bind(this), $rootScope);
+    appEvents.on('panel-change-view', this.onPanelChangeView);
   }
 
   create(dashboard, meta) {
@@ -24,6 +25,44 @@ export class DashboardSrv {
     return this.dash;
   }
 
+  onPanelChangeView = (options) => {
+    const urlParams = this.$location.search();
+
+    // handle toggle logic
+    if (options.fullscreen === urlParams.fullscreen) {
+      // I hate using these truthy converters (!!) but in this case
+      // I think it's appropriate. edit can be null/false/undefined and
+      // here i want all of those to compare the same
+      if (!!options.edit === !!urlParams.edit) {
+        delete urlParams.fullscreen;
+        delete urlParams.edit;
+        delete urlParams.panelId;
+        this.$location.search(urlParams);
+        return;
+      }
+    }
+
+    if (options.fullscreen) {
+      urlParams.fullscreen = true;
+    } else {
+      delete urlParams.fullscreen;
+    }
+
+    if (options.edit) {
+      urlParams.edit = true;
+    } else {
+      delete urlParams.edit;
+    }
+
+    if (options.panelId) {
+      urlParams.panelId = options.panelId;
+    } else {
+      delete urlParams.panelId;
+    }
+
+    this.$location.search(urlParams);
+  };
+
   handleSaveDashboardError(clone, options, err) {
     options = options || {};
     options.overwrite = true;

public/app/features/dashboard/services/DashboardViewStateSrv.test.ts

@@ -1,64 +0,0 @@
-import config from 'app/core/config';
-import { DashboardViewStateSrv } from './DashboardViewStateSrv';
-import { DashboardModel } from '../state/DashboardModel';
-
-describe('when updating view state', () => {
-  const location = {
-    replace: jest.fn(),
-    search: jest.fn(),
-  };
-
-  const $scope = {
-    appEvent: jest.fn(),
-    onAppEvent: jest.fn(() => {}),
-    dashboard: new DashboardModel({
-      panels: [{ id: 1 }],
-    }),
-  };
-
-  let viewState;
-
-  beforeEach(() => {
-    config.bootData = {
-      user: {
-        orgId: 1,
-      },
-    };
-  });
-
-  describe('to fullscreen true and edit true', () => {
-    beforeEach(() => {
-      location.search = jest.fn(() => {
-        return { fullscreen: true, edit: true, panelId: 1 };
-      });
-      viewState = new DashboardViewStateSrv($scope, location, {});
-    });
-
-    it('should update querystring and view state', () => {
-      const updateState = { fullscreen: true, edit: true, panelId: 1 };
-
-      viewState.update(updateState);
-
-      expect(location.search).toHaveBeenCalledWith({
-        edit: true,
-        editview: null,
-        fullscreen: true,
-        orgId: 1,
-        panelId: 1,
-      });
-      expect(viewState.dashboard.meta.fullscreen).toBe(true);
-      expect(viewState.state.fullscreen).toBe(true);
-    });
-  });
-
-  describe('to fullscreen false', () => {
-    beforeEach(() => {
-      viewState = new DashboardViewStateSrv($scope, location, {});
-    });
-    it('should remove params from query string', () => {
-      viewState.update({ fullscreen: true, panelId: 1, edit: true });
-      viewState.update({ fullscreen: false });
-      expect(viewState.state.fullscreen).toBe(null);
-    });
-  });
-});

public/app/features/dashboard/services/DashboardViewStateSrv.ts

@@ -30,7 +30,7 @@ export class DashboardViewStateSrv {
     });
 
     $scope.onAppEvent('panel-change-view', (evt, payload) => {
-      self.update(payload);
+      // self.update(payload);
     });
 
     // this marks changes to location during this digest cycle as not to add history item

public/app/features/dashboard/state/DashboardModel.ts

@@ -132,6 +132,8 @@ export class DashboardModel {
     meta.canEdit = meta.canEdit !== false;
     meta.showSettings = meta.canEdit;
     meta.canMakeEditable = meta.canSave && !this.editable;
+    meta.fullscreen = false;
+    meta.isEditing = false;
 
     if (!this.editable) {
       meta.canEdit = false;