Skip to content

Commit

Permalink
[8.12] [Security Solution] Prebuilt rules diffing style adjustments (#…
Browse files Browse the repository at this point in the history 
…173187) (#173373)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Security Solution] Prebuilt rules diffing style adjustments
(#173187)](#173187)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nikita
Indik","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-12-14T12:09:16Z","message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["enhancement","release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","Feature:Prebuilt Detection
Rules","ci:cloud-deploy","v8.12.0","v8.13.0"],"number":173187,"url":"https://github.com/elastic/kibana/pull/173187","mergeCommit":{"message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173187","number":173187,"mergeCommit":{"message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50"}}]}]
BACKPORT-->

Co-authored-by: Nikita Indik <[email protected]>
  • Loading branch information
@kibanamachine @nikitaindik
kibanamachine and nikitaindik authored Dec 14, 2023
1 parent 15a6cc8 commit df14319
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 21 deletions.
42 changes: 42 additions & 0 deletions ...on/public/detection_engine/rule_management/components/rule_details/json_diff/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

export const TABLE_CLASS_NAME = 'rule-update-diff-table';
export const CODE_CLASS_NAME = 'rule-update-diff-code';
export const GUTTER_CLASS_NAME = 'rule-update-diff-gutter';
export const DARK_THEME_CLASS_NAME = 'rule-update-diff-dark-theme';

export const COLORS = {
light: {
gutterBackground: {
deletion: 'rgb(255, 215, 213)',
insertion: 'rgb(204, 255, 216)',
},
lineBackground: {
deletion: 'rgb(255, 235, 233)',
insertion: 'rgb(230, 255, 236)',
},
characterBackground: {
deletion: 'rgba(255, 129, 130, 0.4)',
insertion: 'rgb(171, 242, 188)',
},
},
dark: {
gutterBackground: {
deletion: 'rgba(248, 81, 73, 0.3)',
insertion: 'rgba(63, 185, 80, 0.3)',
},
lineBackground: {
deletion: 'rgba(248, 81, 73, 0.1)',
insertion: 'rgba(46, 160, 67, 0.15)',
},
characterBackground: {
deletion: 'rgba(248, 81, 73, 0.4)',
insertion: 'rgba(46, 160, 67, 0.4)',
},
},
};
76 changes: 55 additions & 21 deletions ...n/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import React, { useMemo } from 'react';
import classNames from 'classnames';
import { css, Global } from '@emotion/react';
import {
Diff,
Expand All @@ -23,9 +24,16 @@ import type {
HunkTokens,
} from 'react-diff-view';
import unidiff from 'unidiff';
import { useEuiTheme } from '@elastic/eui';
import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui';
import { Hunks } from './hunks';
import { markEdits, DiffMethod } from './mark_edits';
import {
TABLE_CLASS_NAME,
CODE_CLASS_NAME,
GUTTER_CLASS_NAME,
DARK_THEME_CLASS_NAME,
COLORS,
} from './constants';

interface UseExpandReturn {
expandRange: (start: number, end: number) => void;
Expand Down Expand Up @@ -137,53 +145,73 @@ const convertToDiffFile = (oldSource: string, newSource: string) => {
return diffFile;
};

const TABLE_CLASS_NAME = 'rule-update-diff-table';
const CODE_CLASS_NAME = 'rule-update-diff-code';
const GUTTER_CLASS_NAME = 'rule-update-diff-gutter';

const CustomStyles: React.FC = ({ children }) => {
const { euiTheme } = useEuiTheme();

const customCss = css`
.${TABLE_CLASS_NAME} .diff-gutter-col {
width: ${euiTheme.size.xl};
.${CODE_CLASS_NAME}.diff-code {
padding: 0 ${euiTheme.size.l} 0 ${euiTheme.size.m};
}
.${CODE_CLASS_NAME}.diff-code, .${GUTTER_CLASS_NAME}.diff-gutter {
background: transparent;
.${TABLE_CLASS_NAME} .diff-gutter-col {
width: ${euiTheme.size.xl};
}
/* Vertical line separating two sides of the diff view */
.${GUTTER_CLASS_NAME}:nth-child(3) {
border-left: 1px solid ${euiTheme.colors.mediumShade};
}
/* Gutter of a line with deletions */
.${GUTTER_CLASS_NAME}.diff-gutter-delete {
color: ${euiTheme.colors.dangerText};
font-weight: bold;
background: ${COLORS.light.gutterBackground.deletion};
}
.${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-delete {
background: ${COLORS.dark.gutterBackground.deletion};
}
/* Gutter of a line with insertions */
.${GUTTER_CLASS_NAME}.diff-gutter-insert {
color: ${euiTheme.colors.successText};
font-weight: bold;
background: ${COLORS.light.gutterBackground.insertion};
}
.${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-insert {
background: ${COLORS.dark.gutterBackground.insertion};
}
.${CODE_CLASS_NAME}.diff-code {
padding: 0 ${euiTheme.size.l} 0 ${euiTheme.size.m};
/* Background of a line with deletions */
.${CODE_CLASS_NAME}.diff-code-delete {
background: ${COLORS.light.lineBackground.deletion};
}
.${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete {
background: ${COLORS.dark.lineBackground.deletion};
}
.${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit,
.${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
background: transparent;
/* Background of a line with insertions */
.${CODE_CLASS_NAME}.diff-code-insert {
background: ${COLORS.light.lineBackground.insertion};
}
.${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert {
background: ${COLORS.dark.lineBackground.insertion};
}
/* Accented background of removed characters / words */
.${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
color: ${euiTheme.colors.dangerText};
text-decoration: line-through;
font-weight: 700;
background: ${COLORS.light.characterBackground.deletion};
}
.${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
background: ${COLORS.dark.characterBackground.deletion};
}
/* Accented background of inserted characters / words */
.${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
color: ${euiTheme.colors.successText};
text-decoration: underline;
font-weight: 700;
background: ${COLORS.light.characterBackground.insertion};
}
.${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
background: ${COLORS.dark.characterBackground.insertion};
}
`;

Expand Down Expand Up @@ -229,6 +257,12 @@ export const DiffView = ({
*/
const tokens = useTokens(hunks, diffMethod, oldSource);

const { colorMode } = useEuiTheme();

const tableClassName = classNames(TABLE_CLASS_NAME, {
[DARK_THEME_CLASS_NAME]: colorMode === COLOR_MODES_STANDARD.dark,
});

return (
<CustomStyles>
<Diff
Expand All @@ -240,7 +274,7 @@ export const DiffView = ({
hunks={hunks}
renderGutter={renderGutter}
tokens={tokens}
className={TABLE_CLASS_NAME}
className={tableClassName}
gutterClassName={GUTTER_CLASS_NAME}
codeClassName={CODE_CLASS_NAME}
>
Expand Down

0 comments on commit df14319

Please sign in to comment.