From b7ca52a19f68e3ee907c7c72de669c7c40a0f34a Mon Sep 17 00:00:00 2001 From: patrykkopycinski Date: Wed, 8 Jan 2020 05:49:31 +0100 Subject: [PATCH] [SIEM] Enable eslint prefer-template rule (#53983) (#54157) --- .eslintrc.js | 3 +-- .../dev_tools/circular_deps/run_check_circular_deps_cli.js | 4 +--- .../public/components/filters_global/filters_global.tsx | 2 +- .../components/timeline/body/column_headers/index.tsx | 4 ++-- .../components/timeline/body/data_driven_columns/index.tsx | 2 +- .../plugins/siem/public/components/timeline/body/index.tsx | 2 +- .../plugins/siem/public/components/timeline/styles.tsx | 6 +++--- .../plugins/siem/scripts/convert_saved_search_to_rules.js | 2 +- 8 files changed, 11 insertions(+), 14 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 02205ca73d975..433b314ba4a88 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -752,8 +752,7 @@ module.exports = { 'prefer-promise-reject-errors': 'error', 'prefer-rest-params': 'error', 'prefer-spread': 'error', - // This style will be turned on after most bugs are fixed - // 'prefer-template': 'warn', + 'prefer-template': 'error', 'react/boolean-prop-naming': 'error', 'react/button-has-type': 'error', 'react/display-name': 'error', diff --git a/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js b/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js index a4a9532f0e8e4..7d76b1dd921aa 100644 --- a/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js +++ b/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js @@ -24,9 +24,7 @@ run( // We can only care about SIEM code, we should not be penalyze for others if (circularFound.filter(cf => cf.includes('siem')).length !== 0) { throw createFailError( - 'SIEM circular dependencies of imports has been found:' + - '\n - ' + - circularFound.join('\n - ') + `SIEM circular dependencies of imports has been found:\n - ${circularFound.join('\n - ')}` ); } else { log.success('No circular deps 👍'); diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx index edf6f7f01ab2e..b4d8c790002b2 100644 --- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx +++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx @@ -13,7 +13,7 @@ import { gutterTimeline } from '../../lib/helpers'; const offsetChrome = 49; -const disableSticky = 'screen and (max-width: ' + euiLightVars.euiBreakpoints.s + ')'; +const disableSticky = `screen and (max-width: ${euiLightVars.euiBreakpoints.s})`; const disableStickyMq = window.matchMedia(disableSticky); const Wrapper = styled.aside<{ isSticky?: boolean }>` diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx index 340d828834efd..52495c2e3c816 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx @@ -165,7 +165,7 @@ export const ColumnHeadersComponent = ({ position="relative" // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291 style={{ - flexBasis: header.width + 'px', + flexBasis: `${header.width}px`, ...dragProvided.draggableProps.style, }} > @@ -186,7 +186,7 @@ export const ColumnHeadersComponent = ({ )} diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx index 191d152108abc..37b6e30215056 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx @@ -30,7 +30,7 @@ export const DataDrivenColumns = React.memo( return ( {columnHeaders.map((header, index) => ( - + {getColumnRenderer(header.id, columnRenderers, data).renderColumn({ columnName: header.id, diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx index 23406f1b5f35f..c4ad532f76fc4 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx @@ -116,7 +116,7 @@ export const Body = React.memo( ({ className: `siemTimeline__body ${className}`, }))<{ bodyHeight: number }>` - height: ${({ bodyHeight }) => bodyHeight + 'px'}; + height: ${({ bodyHeight }) => `${bodyHeight}px`}; overflow: auto; scrollbar-width: thin; @@ -89,7 +89,7 @@ export const EventsThGroupActions = styled.div.attrs(({ className }) => ({ className: `siemEventsTable__thGroupActions ${className}`, }))<{ actionsColumnWidth: number; justifyContent: string }>` display: flex; - flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'}; + flex: 0 0 ${({ actionsColumnWidth }) => `${actionsColumnWidth}px`}; justify-content: ${({ justifyContent }) => justifyContent}; min-width: 0; `; @@ -182,7 +182,7 @@ export const EventsTdGroupActions = styled.div.attrs(({ className }) => ({ }))<{ actionsColumnWidth: number }>` display: flex; justify-content: space-between; - flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'}; + flex: 0 0 ${({ actionsColumnWidth }) => `${actionsColumnWidth}px`}; min-width: 0; `; EventsTdGroupActions.displayName = 'EventsTdGroupActions'; diff --git a/x-pack/legacy/plugins/siem/scripts/convert_saved_search_to_rules.js b/x-pack/legacy/plugins/siem/scripts/convert_saved_search_to_rules.js index 9e24e93b0c391..0da44eec3aaa3 100644 --- a/x-pack/legacy/plugins/siem/scripts/convert_saved_search_to_rules.js +++ b/x-pack/legacy/plugins/siem/scripts/convert_saved_search_to_rules.js @@ -61,7 +61,7 @@ const allRulesNdJson = 'index.ts'; const walk = dir => { const list = fs.readdirSync(dir); return list.reduce((accum, file) => { - const fileWithDir = dir + '/' + file; + const fileWithDir = `${dir}/${file}`; const stat = fs.statSync(fileWithDir); if (stat && stat.isDirectory()) { return [...accum, ...walk(fileWithDir)];