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

This commit is contained in:
Johannes Schill 2018-01-29 14:45:45 +01:00
parent d9460d0b2b
commit 787b493c00
9 changed files with 61 additions and 38 deletions

View File

@ -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>

View File

@ -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>
);
}
}

View File

@ -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>
);
}

View File

@ -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>
);
};

View File

@ -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"

View File

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

View File

@ -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;

View File

@ -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 {

View File

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