[SIEM] Enable eslint prefer-template rule (#53983) (#54157)

.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',

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 👍');

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 }>`

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 = ({
                         <DragEffects>
                           <DraggableFieldBadge
                             fieldId={header.id}
-                            fieldWidth={header.width + 'px'}
+                            fieldWidth={`${header.width}px`}
                           />
                         </DragEffects>
                       )}

x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx

@@ -30,7 +30,7 @@ export const DataDrivenColumns = React.memo<Props>(
     return (
       <EventsTdGroupData data-test-subj="data-driven-columns">
         {columnHeaders.map((header, index) => (
-          <EventsTd key={header.id} style={{ flexBasis: header.width + 'px' }}>
+          <EventsTd key={header.id} style={{ flexBasis: `${header.width}px` }}>
             <EventsTdContent data-test-subj="cell-container">
               {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
                 columnName: header.id,

x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx

@@ -116,7 +116,7 @@ export const Body = React.memo<BodyProps>(
           <EventsTable
             data-test-subj="events-table"
             // 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={{ minWidth: columnWidths + 'px' }}
+            style={{ minWidth: `${columnWidths}px` }}
           >
             <ColumnHeaders
               actionsColumnWidth={actionsColumnWidth}

x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx

@@ -30,7 +30,7 @@ export const TimelineBodyGlobalStyle = createGlobalStyle`
 export const TimelineBody = styled.div.attrs(({ className }) => ({
   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';

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)];