mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
264645eecd
* Scenes: Support new top nav * Page: Make Page component support new and old dashboard page layouts * Pass scrollbar props * Fixing flex layout for dashboard * Progress on dashboard settings working with topnav * Updated * Annotations working * Starting to work fully * Fix merge issue * Fixed tests * Added buttons to annotations editor * Updating tests * Move Page component to each page * fixed general settings page * Fixed versions * Fixed annotation item page * Variables section working * Fixed tests * Minor fixes to versions * Update * Fixing unit tests * Adding add variable button * Restore annotations edit form so it's the same as before * Fixed semicolon in dashboard permissions * Fixing unit tests * Fixing tests * Minor test update * Fixing unit test * Fixing e2e tests * fix for e2e test * fix a11y issues * Changing places Settings -> General * Trying to fix a11y * I hope this fixes the e2e test * Fixing merge issue * tweak
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { noop } from 'lodash';
|
|
import React from 'react';
|
|
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { Icon, IconButton, useStyles } from '@grafana/ui';
|
|
|
|
type VersionHistoryHeaderProps = {
|
|
onClick?: () => void;
|
|
baseVersion?: number;
|
|
newVersion?: number;
|
|
isNewLatest?: boolean;
|
|
};
|
|
|
|
export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
|
|
onClick = noop,
|
|
baseVersion = 0,
|
|
newVersion = 0,
|
|
isNewLatest = false,
|
|
}) => {
|
|
const styles = useStyles(getStyles);
|
|
|
|
return (
|
|
<h3 className={styles.header}>
|
|
<IconButton name="arrow-left" size="xl" onClick={onClick} />
|
|
<span>
|
|
Comparing {baseVersion} <Icon name="arrows-h" /> {newVersion}{' '}
|
|
{isNewLatest && <cite className="muted">(Latest)</cite>}
|
|
</span>
|
|
</h3>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme) => ({
|
|
header: css`
|
|
font-size: ${theme.typography.heading.h3};
|
|
display: flex;
|
|
gap: ${theme.spacing.md};
|
|
margin-bottom: ${theme.spacing.lg};
|
|
`,
|
|
});
|