Skip to content

N
nexpie-grafana-theme
Commit ec904cf6 by Dominik Prokop
Options

Update components to fit updated PopperController API

parent de4e1a91
Showing with 73 additions and 71 deletions
public/app/core/components/Label/Label.tsx
......@@ -14,8 +14,10 @@ export const Label: SFC<Props> = props => {
<span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
<span>{props.children}</span>
{props.tooltip && (
<Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
<i className="gicon gicon-question gicon--has-hover" />
<Tooltip placement="auto" content={props.tooltip}>
<div className="gf-form-help-icon--right-normal">
<i className="gicon gicon-question gicon--has-hover" />
</div>
</Tooltip>
)}
</span>
......
public/app/core/components/Tooltip/Popover.tsx deleted 100644 → 0
import React, { PureComponent } from 'react';
import Popper from './Popper';
import withPopper, { UsingPopperProps } from './withPopper';
class Popover extends PureComponent<UsingPopperProps> {
render() {
const { children, hidePopper, showPopper, className, ...restProps } = this.props;
const togglePopper = restProps.show ? hidePopper : showPopper;
return (
<div className={`popper__manager ${className}`} onClick={togglePopper}>
<Popper {...restProps}>{children}</Popper>
</div>
);
}
}
export default withPopper(Popover);
public/app/core/components/Tooltip/Tooltip.test.tsx
......@@ -6,8 +6,8 @@ describe('Tooltip', () => {
it('renders correctly', () => {
const tree = renderer
.create(
<Tooltip className="test-class" placement="auto" content="Tooltip text">
<a href="http://www.grafana.com">Link with tooltip</a>
<Tooltip placement="auto" content="Tooltip text">
<a className="test-class" href="http://www.grafana.com">Link with tooltip</a>
</Tooltip>
)
.toJSON();
......
public/app/core/components/Tooltip/Tooltip.tsx
import React, { PureComponent } from 'react';
import React, { createRef } from 'react';
import * as PopperJS from 'popper.js';
import Popper from './Popper';
import withPopper, { UsingPopperProps } from './withPopper';
import PopperController, { UsingPopperProps } from './PopperController';
class Tooltip extends PureComponent<UsingPopperProps> {
render() {
const { children, hidePopper, showPopper, className, ...restProps } = this.props;
const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
return (
<div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
<Popper {...restProps}>{children}</Popper>
</div>
);
}
}
return (
<PopperController {...controllerProps}>
{(showPopper, hidePopper, popperProps) => {
return (
<>
<Popper {...popperProps} referenceElement={tooltipTriggerRef.current} />
{React.cloneElement(children, {
ref: tooltipTriggerRef,
onMouseEnter: showPopper,
onMouseLeave: hidePopper,
})}
</>
);
}}
</PopperController>
);
};
export default withPopper(Tooltip);
export default Tooltip;
public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tooltip renders correctly 1`] = `
<div
className="popper__manager test-class"
<a
className="test-class"
href="http://www.grafana.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<div
className="popper_ref "
>
<a
href="http://www.grafana.com"
>
Link with tooltip
</a>
</div>
</div>
Link with tooltip
</a>
`;
public/app/features/dashboard/dashgrid/PanelEditor.tsx
......@@ -138,7 +138,7 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
return (
<div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
<a className={tabClasses}>
<Tooltip content={`${tab.text}`} className="popper__manager--block" placement="auto">
<Tooltip content={`${tab.text}`} placement="auto">
<i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
</Tooltip>
</a>
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
......@@ -78,12 +78,14 @@ export class PanelHeaderCorner extends Component<Props> {
{infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
<Tooltip
content={this.getInfoContent}
className="popper__manager--block"
refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
placement="bottom-start"
>
<i className="fa" />
<span className="panel-info-corner-inner" />
<div
className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
>
<i className="fa" />
<span className="panel-info-corner-inner" />
</div>
</Tooltip>
) : null}
</>
......
public/app/features/dashboard/permissions/DashboardPermissions.tsx
......@@ -70,8 +70,10 @@ export class DashboardPermissions extends PureComponent<Props, State> {
<div className="dashboard-settings__header">
<div className="page-action-bar">
<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 placement="auto" content={PermissionsInfo}>
<div className="page-sub-heading-icon">
<i className="gicon gicon-question gicon--has-hover" />
</div>
</Tooltip>
<div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
......
public/app/features/folders/FolderPermissions.tsx
......@@ -84,8 +84,10 @@ export class FolderPermissions extends PureComponent<Props, State> {
<div className="page-container page-body">
<div className="page-action-bar">
<h3 className="page-sub-heading">Folder Permissions</h3>
<Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
<i className="gicon gicon-question gicon--has-hover" />
<Tooltip placement="auto" content={PermissionsInfo}>
<div className="page-sub-heading-icon">
<i className="gicon gicon-question gicon--has-hover" />
</div>
</Tooltip>
<div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
......
public/app/features/teams/TeamGroupSync.tsx
......@@ -77,8 +77,10 @@ export class TeamGroupSync extends PureComponent<Props, State> {
<div>
<div className="page-action-bar">
<h3 className="page-sub-heading">External group sync</h3>
<Tooltip className="page-sub-heading-icon" placement="auto" content={headerTooltip}>
<i className="gicon gicon-question gicon--has-hover" />
<Tooltip placement="auto" content={headerTooltip}>
<div className="page-sub-heading-icon">
<i className="gicon gicon-question gicon--has-hover" />
</div>
</Tooltip>
<div className="page-action-bar__spacer" />
{groups.length > 0 && (
......
public/app/features/teams/TeamSettings.tsx
......@@ -60,6 +60,7 @@ export class TeamSettings extends React.Component<Props, State> {
onChange={this.onChangeName}
/>
</div>
<div className="gf-form max-width-30">
<Label tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
Email
......
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
......@@ -10,15 +10,18 @@ exports[`Render should render component 1`] = `
>
External group sync
</h3>
<class_1
className="page-sub-heading-icon"
<Tooltip
content="Sync LDAP or OAuth groups with your Grafana teams."
placement="auto"
>
<i
className="gicon gicon-question gicon--has-hover"
/>
</class_1>
<div
className="page-sub-heading-icon"
>
<i
className="gicon gicon-question gicon--has-hover"
/>
</div>
</Tooltip>
<div
className="page-action-bar__spacer"
/>
......@@ -116,15 +119,18 @@ exports[`Render should render groups table 1`] = `
>
External group sync
</h3>
<class_1
className="page-sub-heading-icon"
<Tooltip
content="Sync LDAP or OAuth groups with your Grafana teams."
placement="auto"
>
<i
className="gicon gicon-question gicon--has-hover"
/>
</class_1>
<div
className="page-sub-heading-icon"
>
<i
className="gicon gicon-question gicon--has-hover"
/>
</div>
</Tooltip>
<div
className="page-action-bar__spacer"
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment