dashfolders: add help popover. Add folder title for inherited permissions

public/app/core/angular_wrappers.ts

@@ -20,5 +20,5 @@ export function registerAngularDirectives() {
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
   react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'handlePicked']);
-  react2AngularDirective('dashboardPermissions', DashboardPermissions, ['backendSrv', 'dashboardId']);
+  react2AngularDirective('dashboardPermissions', DashboardPermissions, ['backendSrv', 'dashboardId', 'folderTitle']);
 }

public/app/core/components/Permissions/DashboardPermissions.tsx

@@ -5,6 +5,7 @@ import Permissions from 'app/core/components/Permissions/Permissions';
 
 export interface IProps {
   dashboardId: number;
+  folderTitle: string;
   backendSrv: any;
 }
 
@@ -18,10 +19,16 @@ class DashboardPermissions extends Component<IProps, any> {
   }
 
   render() {
-    const { dashboardId, backendSrv } = this.props;
+    const { dashboardId, folderTitle, backendSrv } = this.props;
 
     return (
-      <Permissions permissions={this.permissions} isFolder={false} dashboardId={dashboardId} backendSrv={backendSrv} />
+      <Permissions
+        permissions={this.permissions}
+        isFolder={false}
+        dashboardId={dashboardId}
+        folderTitle={folderTitle}
+        backendSrv={backendSrv}
+      />
     );
   }
 }

public/app/core/components/Permissions/Permissions.tsx

@@ -25,6 +25,7 @@ export interface DashboardAcl {
 
 export interface IProps {
   dashboardId: number;
+  folderTitle?: string;
   permissions?: any;
   isFolder: boolean;
   backendSrv: any;
@@ -86,7 +87,7 @@ class Permissions extends Component<IProps, any> {
   }
 
   render() {
-    const { permissions, backendSrv } = this.props;
+    const { permissions, folderTitle, backendSrv } = this.props;
 
     return (
       <div className="gf-form-group">
@@ -95,6 +96,7 @@ class Permissions extends Component<IProps, any> {
           removeItem={this.removeItem}
           permissionChanged={this.permissionChanged}
           fetching={permissions.fetching}
+          folderTitle={folderTitle}
         />
         <div className="gf-form-inline">
           <form name="addPermission" className="gf-form-group">
@@ -144,8 +146,8 @@ class Permissions extends Component<IProps, any> {
           <div className="grafana-info-box">
             <h5>What are Permissions?</h5>
             <p>
-              An Access Control List (ACL) model is used for to limit access to Dashboard Folders. A user or a Team can
-              be assigned permissions for a folder or for a single dashboard.
+              An Access Control List (ACL) model is used to limit access to Dashboard Folders. A user or a Team can be
+              assigned permissions for a folder or for a single dashboard.
             </p>
             <p>The permissions that can be assigned for a folder/dashboard are:</p>
             <p>View, Edit and Admin.</p>

public/app/core/components/Permissions/PermissionsList.tsx

@@ -8,12 +8,13 @@ export interface IProps {
   removeItem: any;
   permissionChanged: any;
   fetching: boolean;
+  folderTitle: string;
 }
 
 @observer
 class PermissionsList extends Component<IProps, any> {
   render() {
-    const { permissions, removeItem, permissionChanged, fetching } = this.props;
+    const { permissions, removeItem, permissionChanged, fetching, folderTitle } = this.props;
 
     return (
       <table className="filter-table gf-form-group">
@@ -34,38 +35,10 @@ class PermissionsList extends Component<IProps, any> {
                 itemIndex={idx}
                 removeItem={removeItem}
                 permissionChanged={permissionChanged}
+                folderTitle={folderTitle}
               />
             );
           })}
-          {/* <tr ng-repeat="acl in ctrl.items" ng-class="{'gf-form-disabled': acl.inherited}">
-              <td><!-- 100% -->
-                <i className="{{acl.icon}}"></i>
-                <span ng-bind-html="acl.nameHtml"></span>
-              </td>
-              <td>
-                <em className="muted no-wrap" ng-show="acl.inherited">Inherited from folder</em>
-              </td>
-              <td className="query-keyword">Can</td>
-              <td>
-                <div className="gf-form-select-wrapper">
-                  <select className="gf-form-input gf-size-auto"
-                    ng-model="acl.permission"
-                    ng-options="p.value as p.text for p in ctrl.permissionOptions"
-                    ng-change="ctrl.permissionChanged(acl)"
-                    ng-disabled="acl.inherited"></select>
-                </div>
-              </td>
-              <td>
-                <a className="btn btn-inverse btn-small" ng-click="ctrl.removeItem($index)" ng-hide="acl.inherited">
-                  <i className="fa fa-remove"></i>
-                </a>
-              </td>
-            </tr>
-            <tr ng-show="ctrl.aclItems.length === 0">
-              <td colSpan={4}>
-                <em>No permissions are set. Will only be accessible by admins.</em>
-              </td>
-            </tr> */}
           {fetching === true && permissions.length < 1 ? (
             <tr>
               <td colSpan={4}>

public/app/core/components/Permissions/PermissionsListItem.tsx

@@ -6,7 +6,7 @@ const setClassNameHelper = inherited => {
   return inherited ? 'gf-form-disabled' : '';
 };
 
-export default observer(({ item, removeItem, permissionChanged, itemIndex }) => {
+export default observer(({ item, removeItem, permissionChanged, itemIndex, folderTitle }) => {
   const handleRemoveItem = evt => {
     evt.preventDefault();
     removeItem(itemIndex);
@@ -26,7 +26,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) =>
         <i className={item.icon} />
         <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
       </td>
-      <td>{item.inherited ? <em className="muted no-wrap">Inherited from folder</em> : null}</td>
+      <td>{item.inherited ? <em className="muted no-wrap">Inherited from folder {folderTitle} </em> : null}</td>
       <td className="query-keyword">Can</td>
       <td>
         <div className="gf-form-select-wrapper">
@@ -44,12 +44,6 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex }) =>
               );
             })}
           </select>
-
-          {/* <select className="gf-form-input gf-size-auto"
-                        ng-model="acl.permission"
-                        ng-options="p.value as p.text for p in ctrl.permissionOptions"
-                        ng-change="ctrl.permissionChanged(acl)"
-                        ng-disabled="acl.inherited" /> */}
         </div>
       </td>
       <td>

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

@@ -96,11 +96,19 @@
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
-  <h3 class="dashboard-settings__header">Permissions</h3>
+  <h3 class="dashboard-settings__header">Permissions
+    <info-popover mode="left-normal">
+      What are Permissions?
+      <br /><br />
+      An Access Control List (ACL) model is used to limit access to Dashboard Folders. A user or a Team can be assigned permissions for a folder or for a single dashboard.
+    </info-popover>
+  </h3>
+
   <dashboard-permissions ng-if="ctrl.dashboard"
     dashboardId="ctrl.dashboard.id"
-    backendSrv="ctrl.backendSrv">
-  </dashboard-permissions>
+    backendSrv="ctrl.backendSrv"
+    folderTitle="ctrl.dashboard.meta.folderTitle"
+  />
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === '404'">