33 lines
1008 B
TypeScript
33 lines
1008 B
TypeScript
import React from 'react';
|
|
import { Button, Icon, HorizontalGroup } from '@grafana/ui';
|
|
import { LinkSettingsMode } from '../DashboardSettings/LinksSettings';
|
|
|
|
type LinkSettingsHeaderProps = {
|
|
onNavClick: () => void;
|
|
onBtnClick: () => void;
|
|
mode: LinkSettingsMode;
|
|
hasLinks: boolean;
|
|
};
|
|
|
|
export const LinkSettingsHeader: React.FC<LinkSettingsHeaderProps> = ({ onNavClick, onBtnClick, mode, hasLinks }) => {
|
|
const isEditing = mode !== 'list';
|
|
|
|
return (
|
|
<div className="dashboard-settings__header">
|
|
<HorizontalGroup align="center" justify="space-between">
|
|
<h3>
|
|
<span onClick={onNavClick} className={isEditing ? 'pointer' : ''}>
|
|
Dashboard Links
|
|
</span>
|
|
{isEditing && (
|
|
<span>
|
|
<Icon name="angle-right" /> {mode === 'new' ? 'New' : 'Edit'}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
{!isEditing && hasLinks ? <Button onClick={onBtnClick}>New</Button> : null}
|
|
</HorizontalGroup>
|
|
</div>
|
|
);
|
|
};
|