dashfolders: Use grafana's question mark instead of FA's and use the react tooltip instead of angular's #10275

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -4,7 +4,8 @@ import { toJS } from 'mobx';
 import IContainerProps from 'app/containers/IContainerProps';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import Permissions from 'app/core/components/Permissions/Permissions';
-
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
 @inject('nav', 'folder', 'view', 'permissions')
 @observer
 export class FolderPermissions extends Component<IContainerProps, any> {
@@ -33,7 +34,13 @@ export class FolderPermissions extends Component<IContainerProps, any> {
       <div>
         <PageHeader model={nav as any} />
         <div className="page-container page-body">
-          <h2 className="page-sub-heading">Folder Permissions</h2>
+          <div className="page-sub-heading">
+            <h2 className="d-inline-block">Folder Permissions</h2>
+            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
+              <i className="gicon gicon-question gicon--has-hover" />
+            </Tooltip>
+          </div>
+
           <Permissions permissions={permissions} isFolder={true} dashboardId={dashboardId} backendSrv={backendSrv} />
         </div>
       </div>

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

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { store } from 'app/stores/store';
 import Permissions from 'app/core/components/Permissions/Permissions';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
 
 export interface IProps {
   dashboardId: number;
@@ -20,13 +22,21 @@ class DashboardPermissions extends Component<IProps, any> {
     const { dashboardId, folderTitle, backendSrv } = this.props;
 
     return (
-      <Permissions
-        permissions={this.permissions}
-        isFolder={false}
-        dashboardId={dashboardId}
-        folderTitle={folderTitle}
-        backendSrv={backendSrv}
-      />
+      <div>
+        <div className="dashboard-settings__header">
+          <h3 className="d-inline-block">Permissions</h3>
+          <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
+            <i className="gicon gicon-question gicon--has-hover" />
+          </Tooltip>
+        </div>
+        <Permissions
+          permissions={this.permissions}
+          isFolder={false}
+          dashboardId={dashboardId}
+          folderTitle={folderTitle}
+          backendSrv={backendSrv}
+        />
+      </div>
     );
   }
 }

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

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import UserPicker, { User } from 'app/core/components/Picker/UserPicker';
 import TeamPicker, { Team } from 'app/core/components/Picker/TeamPicker';
 import { aclTypes } from 'app/stores/PermissionsStore/PermissionsStore';
-
+import PermissionsInfo from './PermissionsInfo';
 export interface DashboardAcl {
   id?: number;
   dashboardId?: number;
@@ -142,22 +142,6 @@ class Permissions extends Component<IProps, any> {
             </div>
           ) : null}
         </div>
-        {/* <div className="empty-list-cta m-t-3">
-          <div className="grafana-info-box">
-            <h5>What are Permissions?</h5>
-            <p>
-              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>
-            Checkout the{' '}
-            <a className="external-link" target="_blank" href="http://docs.grafana.org/reference/dashboard_folders/">
-              Dashboard Folders documentation
-            </a>{' '}
-            for more information.
-          </div>
-        </div> */}
       </div>
     );
   }

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div className="">
+      <h5>What are Permissions?</h5>
+      <p>
+        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>
+    </div>
+  );
+};

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

@@ -96,14 +96,6 @@
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
-  <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"