mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
c9eff1892e
* chore(dashboardsettings): introduce deep-diff for diffing dashboard models * feat(dashboardsettings): initial commit of diff comparision react migration * feat(dashboardsettings): wip - use json-source-map and monaco editor * chore(deps): add react-diff-viewer to package.json * feat(dashboardsettings): take the simplistic road for diff view * refactor(dashboardsettings): clean up Version Settings components * chore: delete angular historyListCtrl code * refactor(dashboardsettings): styling fixes * Small color tweaks * refactor(versionhistory): fix issues around summary text. write tests * test(versionhistory): add test for jsonDiff * refactor(versionhistory): cleanup utils and reduce dom elements * test(versionsettings): add tests for comparision view * test(versionsettings): finialise tests for version history comparison view * test(versionsettings): remove debug Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { css } from 'emotion';
|
|
import ReactDiffViewer, { ReactDiffViewerProps, DiffMethod } from 'react-diff-viewer';
|
|
import { useTheme } from '@grafana/ui';
|
|
import tinycolor from 'tinycolor2';
|
|
|
|
export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
|
|
const theme = useTheme();
|
|
|
|
const styles = {
|
|
variables: {
|
|
// the light theme supplied by ReactDiffViewer is very similar to grafana
|
|
// the dark theme needs some tweaks.
|
|
dark: {
|
|
diffViewerBackground: theme.colors.dashboardBg,
|
|
diffViewerColor: theme.colors.text,
|
|
addedBackground: tinycolor(theme.palette.greenShade).setAlpha(0.3).toString(),
|
|
addedColor: 'white',
|
|
removedBackground: tinycolor(theme.palette.redShade).setAlpha(0.3).toString(),
|
|
removedColor: 'white',
|
|
wordAddedBackground: tinycolor(theme.palette.greenBase).setAlpha(0.4).toString(),
|
|
wordRemovedBackground: tinycolor(theme.palette.redBase).setAlpha(0.4).toString(),
|
|
addedGutterBackground: tinycolor(theme.palette.greenShade).setAlpha(0.2).toString(),
|
|
removedGutterBackground: tinycolor(theme.palette.redShade).setAlpha(0.2).toString(),
|
|
gutterBackground: theme.colors.bg1,
|
|
gutterBackgroundDark: theme.colors.bg1,
|
|
highlightBackground: tinycolor(theme.colors.bgBlue1).setAlpha(0.4).toString(),
|
|
highlightGutterBackground: tinycolor(theme.colors.bgBlue2).setAlpha(0.2).toString(),
|
|
codeFoldGutterBackground: theme.colors.bg2,
|
|
codeFoldBackground: theme.colors.bg2,
|
|
emptyLineBackground: theme.colors.bg2,
|
|
gutterColor: theme.colors.textFaint,
|
|
addedGutterColor: theme.colors.text,
|
|
removedGutterColor: theme.colors.text,
|
|
codeFoldContentColor: theme.colors.textFaint,
|
|
diffViewerTitleBackground: theme.colors.bg2,
|
|
diffViewerTitleColor: theme.colors.textFaint,
|
|
diffViewerTitleBorderColor: theme.colors.border3,
|
|
},
|
|
},
|
|
codeFold: {
|
|
fontSize: theme.typography.size.sm,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={css`
|
|
font-size: ${theme.typography.size.sm};
|
|
// prevent global styles interfering with diff viewer
|
|
pre {
|
|
all: revert;
|
|
}
|
|
`}
|
|
>
|
|
<ReactDiffViewer
|
|
styles={styles}
|
|
oldValue={oldValue}
|
|
newValue={newValue}
|
|
splitView={false}
|
|
compareMethod={DiffMethod.CSS}
|
|
useDarkTheme={theme.isDark}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|