ux: dashboard settings progress

public/app/features/dashboard/settings/settings.html

@@ -86,7 +86,6 @@
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'delete'">
   <h3 class="dashboard-settings__header">Delete dashboard</h3>
 
-  <div ng-if="ctrl.dashboard.meta.canSave">
   <div class="p-b-2" ng-if="ctrl.alertCount > 1">
     <h5>This dashboard contains {{ctrl.alertCount}} alerts. Deleting this dashboard will also delete those alerts</h5>
     <input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type DELETE to confirm" ng-model="ctrl.confirmText" ng-change="ctrl.confirmTextChanged()">
@@ -96,10 +95,21 @@
     <i class="fa fa-trash"></i>
     Delete
   </button>
-  </div>
+</div>
 
-  <div ng-if="!ctrl.dashboard.meta.canSave">
-    <h5>You cannot delete this dashboard</h5>
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === '404'">
+  <h3 class="dashboard-settings__header">Settings view not found</h3>
+
+  <div>
+    <h5>The settings page could not be found or you do not have permission to access it</h5>
   </div>
+</div>
 
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'make_editable'">
+  <h3 class="dashboard-settings__header">Make Editable</h3>
+
+  <button class="btn btn-success" ng-click="ctrl.makeEditable()">
+    Make Editable
+  </button>
 </div>
+

public/app/features/dashboard/settings/settings.ts

-import {coreModule, appEvents} from 'app/core/core';
-import {DashboardModel} from '../dashboard_model';
+import { coreModule, appEvents, contextSrv } from 'app/core/core';
+import { DashboardModel } from '../dashboard_model';
 import $ from 'jquery';
 import _ from 'lodash';
 
@@ -11,17 +11,7 @@ export class SettingsCtrl {
   alertCount: number;
   confirmValid: boolean;
   confirmText: string;
-
-  sections: any[] = [
-    {title: 'General',     id: 'settings', icon: "fa fa-fw fa-sliders"},
-    {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
-    {title: 'Variables',   id: 'templating', icon: "fa fa-fw fa-dollar"},
-    {title: 'Links',       id: 'links', icon: "fa fa-fw fa-external-link"},
-    {title: 'Versions',    id: 'versions', icon: "fa fa-fw fa-history"},
-    {title: 'View JSON',   id: 'view_json', icon: "fa fa-fw fa-code"},
-    {title: 'Save As',     id: 'save_as', icon: "fa fa-fw fa-copy"},
-    {title: 'Delete',      id: 'delete', icon: "fa fa-fw fa-trash"},
-  ];
+  sections: any[];
 
   /** @ngInject */
   constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) {
@@ -29,17 +19,9 @@ export class SettingsCtrl {
     // that rely on inherited scope
     $scope.dashboard = this.dashboard;
 
-    const params = this.$location.search();
-    const url = $location.path();
-
-    for (let section of this.sections) {
-      const sectionParams = _.defaults({editview: section.id}, params);
-      section.url = url + '?' + $.param(sectionParams);
-    }
-
     this.$scope.$on('$destroy', () => {
       this.dashboard.updateSubmenuVisibility();
-      this.$rootScope.$broadcast("refresh");
+      this.$rootScope.$broadcast('refresh');
     });
 
     this.alertCount = _.sumBy(this.dashboard.panels, panel => {
@@ -47,9 +29,54 @@ export class SettingsCtrl {
     });
 
     this.confirmValid = this.alertCount === 0;
-
     this.onRouteUpdated();
-    $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
+    this.buildSectionList();
+
+    $rootScope.onAppEvent('$routeUpdate', this.onRouteUpdated.bind(this), $scope);
+  }
+
+  buildSectionList() {
+    this.sections = [];
+    if (this.dashboard.meta.canEdit) {
+      this.sections.push({ title: 'General', id: 'settings', icon: 'fa fa-fw fa-sliders' });
+      this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'fa fa-fw fa-comment-o' });
+      this.sections.push({ title: 'Variables', id: 'templating', icon: 'fa fa-fw fa-dollar' });
+      this.sections.push({ title: 'Links', id: 'links', icon: 'fa fa-fw fa-external-link' });
+
+      if (this.dashboard.id) {
+        this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' });
+      }
+    }
+
+    if (contextSrv.isEditor && !this.dashboard.editable) {
+      this.sections.push({ title: 'Make Editable', icon: 'fa fa-fw fa-edit', id: 'make_editable' });
+      this.viewId = 'make_editable';
+    }
+
+    this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'fa fa-fw fa-code' });
+
+    if (contextSrv.isEditor) {
+      this.sections.push({ title: 'Save As', id: 'save_as', icon: 'fa fa-fw fa-copy' });
+    }
+
+    if (this.dashboard.meta.canSave) {
+      this.sections.push({ title: 'Delete', id: 'delete', icon: 'fa fa-fw fa-trash' });
+    }
+
+    const params = this.$location.search();
+    const url = this.$location.path();
+
+    for (let section of this.sections) {
+      const sectionParams = _.defaults({ editview: section.id }, params);
+      section.url = url + '?' + $.param(sectionParams);
+    }
+
+    const currentSection = _.find(this.sections, { id: this.viewId });
+    if (!currentSection) {
+      this.sections.unshift({ title: 'Not found', id: '404', icon: 'fa fa-fw fa-warning' });
+      this.viewId = '404';
+      return;
+    }
   }
 
   onRouteUpdated() {
@@ -73,14 +100,14 @@ export class SettingsCtrl {
   makeEditable() {
     this.dashboard.editable = true;
 
-    return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => {
+    return this.dashboardSrv.saveDashboard({ makeEditable: true, overwrite: false }).then(() => {
       // force refresh whole page
       window.location.href = window.location.href;
     });
   }
 
   confirmTextChanged() {
-    this.confirmValid = this.confirmText === "DELETE";
+    this.confirmValid = this.confirmText === 'DELETE';
   }
 
   deleteDashboard() {
@@ -93,7 +120,7 @@ export class SettingsCtrl {
   onFolderChange(folder) {
     this.dashboard.folderId = folder.id;
     this.dashboard.meta.folderId = folder.id;
-    this.dashboard.meta.folderTitle= folder.title;
+    this.dashboard.meta.folderTitle = folder.title;
   }
 }
 
@@ -105,7 +132,7 @@ export function dashboardSettings() {
     bindToController: true,
     controllerAs: 'ctrl',
     transclude: true,
-    scope: { dashboard: "=" }
+    scope: { dashboard: '=' },
   };
 }
 

public/app/partials/confirm_modal.html

@@ -21,7 +21,6 @@
 			</div>
 		</div>
 
-
 		<div class="modal-content-confirm-text" ng-if="confirmText">
 			<input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type {{confirmText}} to confirm" ng-model="confirmInput" ng-change="updateConfirmText(confirmInput)">
 		</div>