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"

public/sass/base/_icons.scss

@@ -11,6 +11,14 @@
   vertical-align: middle;
 }
 
+.gicon--has-hover {
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .mini {
   width: 0.8em;
   height: 0.8em;

public/sass/components/_popper.scss

@@ -1,8 +1,9 @@
 .popper {
   position: absolute;
+  z-index: $zindex-tooltip;
   background: $tooltipBackground;
   color: $tooltipColor;
-  width: 150px;
+  max-width: 400px;
   border-radius: 3px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 10px;

public/sass/layout/_page.scss

@@ -66,9 +66,7 @@
 }
 
 .sidebar-content {
-  width: calc(
-    100% - #{$page-sidebar-width + $page-sidebar-margin}
-  ); // sidebar width + margin
+  width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
 }
 
 .sidebar-container {
@@ -90,6 +88,12 @@
   margin-bottom: $spacer;
 }
 
+.page-sub-heading-icon {
+  margin-left: $spacer;
+  vertical-align: 6px;
+  font-size: 13px;
+}
+
 .page-sidebar {
   color: $text-color-weak;
   h4 {

public/sass/utils/_utils.scss

@@ -74,3 +74,7 @@ button.close {
 .affix {
   position: fixed;
 }
+
+.d-inline-block {
+  display: inline-block;
+}