1import React from 'react';
2import { useStyles, Icon } from '@grafana/ui';
3import { GrafanaTheme } from '@grafana/data';
4import { css } from '@emotion/css';
5import { Diff, getDiffText } from './utils';
6import { DiffValues } from './DiffValues';
7
8type DiffTitleProps = {
9  diff?: Diff;
10  title: string;
11};
12
13const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
14
15export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
16  const styles = useStyles(getDiffTitleStyles);
17  return diff ? (
18    <>
19      <Icon type="mono" name="circle" className={styles[diff.op]} /> <span className={styles.embolden}>{title}</span>{' '}
20      <span>{getDiffText(diff, diff.path.length > 1)}</span> <DiffValues diff={diff} />
21    </>
22  ) : (
23    <div className={styles.withoutDiff}>
24      <Icon type="mono" name="circle" className={styles.replace} /> <span className={styles.embolden}>{title}</span>{' '}
25      <span>{getDiffText(replaceDiff, false)}</span>
26    </div>
27  );
28};
29
30const getDiffTitleStyles = (theme: GrafanaTheme) => ({
31  embolden: css`
32    font-weight: ${theme.typography.weight.bold};
33  `,
34  add: css`
35    color: ${theme.palette.online};
36  `,
37  replace: css`
38    color: ${theme.palette.warn};
39  `,
40  move: css`
41    color: ${theme.palette.warn};
42  `,
43  copy: css`
44    color: ${theme.palette.warn};
45  `,
46  _get: css`
47    color: ${theme.palette.warn};
48  `,
49  test: css`
50    color: ${theme.palette.warn};
51  `,
52  remove: css`
53    color: ${theme.palette.critical};
54  `,
55  withoutDiff: css`
56    margin-bottom: ${theme.spacing.md};
57  `,
58});
59