chore: enable linting with ESLint for TSX files (#7885)

package.json

@@ -17,7 +17,7 @@
     "etest": "npm run basetest -- --config=tests/config/electron.config.ts",
     "ttest": "npm run basetest -- --config=tests/playwright-test/playwright-test.config.ts",
     "test": "npm run basetest -- --config=tests/config/default.config.ts",
-    "eslint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe --ext ts . || eslint --ext ts .",
+    "eslint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe --ext ts,tsx . || eslint --ext ts,tsx .",
     "tsc": "tsc -p .",
     "build-installer": "babel -s --extensions \".ts\" --out-dir lib/utils/ src/utils",
     "doc": "node utils/doclint/cli.js",

src/web/components/source.tsx

@@ -47,23 +47,23 @@ export const Source: React.FC<SourceProps> = ({
       result.push(highlighted.value);
     }
     return result;
-  }, [text]);
+  }, [text, language]);
 
   const revealedLineRef = React.createRef<HTMLDivElement>();
   React.useLayoutEffect(() => {
     if (typeof revealLine === 'number' && revealedLineRef.current)
       revealedLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' });
-  }, [revealedLineRef]);
+  }, [revealedLineRef, revealLine]);
 
   return <div className='source'>{
-      lines.map((markup, index) => {
+    lines.map((markup, index) => {
-        const lineNumber = index + 1;
+      const lineNumber = index + 1;
-        const lineHighlight = highlight.find(h => h.line === lineNumber);
+      const lineHighlight = highlight.find(h => h.line === lineNumber);
-        const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line';
+      const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line';
-        return <div key={lineNumber} className={lineClass} ref={revealLine === lineNumber ? revealedLineRef : null}>
+      return <div key={lineNumber} className={lineClass} ref={revealLine === lineNumber ? revealedLineRef : null}>
-          <div className='source-line-number'>{lineNumber}</div>
+        <div className='source-line-number'>{lineNumber}</div>
-          <div className='source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
+        <div className='source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
-        </div>;
+      </div>;
-      })
+    })
-    }</div>
+  }</div>;
 };

src/web/components/splitView.tsx

@@ -33,7 +33,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
   orientation = 'vertical',
   children
 }) => {
-  let [size, setSize] = React.useState<number>(Math.max(kMinSidebarSize, sidebarSize));
+  const [size, setSize] = React.useState<number>(Math.max(kMinSidebarSize, sidebarSize));
   const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
 
   const childrenArray = React.Children.toArray(children);
@@ -44,7 +44,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
       resizerStyle = { top: resizing ? 0 : size - 4, bottom: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 };
     else
       resizerStyle = { bottom: resizing ? 0 : size - 4, top: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 };
-} else {
+  } else {
     if (sidebarIsFirst)
       resizerStyle = { left: resizing ? 0 : size - 4, right: resizing ? 0 : undefined, width: resizing ? 'initial' : 8 };
     else

src/web/recorder/callLog.tsx

@@ -31,7 +31,7 @@ export const CallLogView: React.FC<CallLogProps> = ({
   React.useLayoutEffect(() => {
     if (log.find(callLog => callLog.reveal))
       messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
-  }, [messagesEndRef]);
+  }, [messagesEndRef, log]);
   return <div className='call-log' style={{flex: 'auto'}}>
     {log.map(callLog => {
       const expandOverride = expandOverrides.get(callLog.id);
@@ -55,7 +55,7 @@ export const CallLogView: React.FC<CallLogProps> = ({
           </div>;
         })}
         { !!callLog.error && <div className='call-log-message error' hidden={!isExpanded}>{ callLog.error.error?.message }</div> }
-      </div>
+      </div>;
     })}
     <div ref={messagesEndRef}></div>
   </div>;

src/web/recorder/recorder.tsx

@@ -80,7 +80,7 @@ export const Recorder: React.FC<RecorderProps> = ({
 
   return <div className='recorder'>
     <Toolbar>
-      <ToolbarButton icon='record' title='Record' toggled={mode == 'recording'} onClick={() => {
+      <ToolbarButton icon='record' title='Record' toggled={mode === 'recording'} onClick={() => {
         window.dispatch({ event: 'setMode', params: { mode: mode === 'recording' ? 'none' : 'recording' }});
       }}>Record</ToolbarButton>
       <ToolbarButton icon='files' title='Copy' disabled={!source || !source.text} onClick={() => {
@@ -98,8 +98,8 @@ export const Recorder: React.FC<RecorderProps> = ({
       <div style={{flex: 'auto'}}></div>
       <div>Target:</div>
       <select className='recorder-chooser' hidden={!sources.length} value={file} onChange={event => {
-          setFile(event.target.selectedOptions[0].value);
+        setFile(event.target.selectedOptions[0].value);
-        }}>{
+      }}>{
           sources.map(s => {
             const title = s.file.replace(/.*[/\\]([^/\\]+)/, '$1');
             return <option key={s.file} value={s.file}>{title}</option>;
@@ -114,7 +114,7 @@ export const Recorder: React.FC<RecorderProps> = ({
       <SourceView text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine}></SourceView>
       <div className='vbox'>
         <Toolbar>
-          <ToolbarButton icon='microscope' title='Explore' toggled={mode == 'inspecting'} onClick={() => {
+          <ToolbarButton icon='microscope' title='Explore' toggled={mode === 'inspecting'} onClick={() => {
             window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' }}).catch(() => { });
           }}>Explore</ToolbarButton>
           <input ref={selectorInputRef} className='selector-input' placeholder='Playwright Selector' value={selector} disabled={mode !== 'none'} onChange={event => {

src/web/traceViewer/index.tsx

@@ -1,4 +1,4 @@
-1;/**
+/**
  * Copyright (c) Microsoft Corporation.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");

src/web/traceViewer/ui/actionList.tsx

@@ -41,7 +41,7 @@ export const ActionList: React.FC<ActionListProps> = ({
 
   React.useEffect(() => {
     actionListRef.current?.focus();
-  }, [selectedAction]);
+  }, [selectedAction, actionListRef]);
 
   return <div className='action-list vbox'>
     <div className='.action-list-title tab-strip'>
@@ -75,7 +75,6 @@ export const ActionList: React.FC<ActionListProps> = ({
         const { metadata } = action;
         const selectedSuffix = action === selectedAction ? ' selected' : '';
         const highlightedSuffix = action === highlightedAction ? ' highlighted' : '';
-        const page = modelUtil.page(action);
         const { errors, warnings } = modelUtil.stats(action);
         return <div
           className={'action-entry' + selectedSuffix + highlightedSuffix}

src/web/traceViewer/ui/callTab.tsx

@@ -32,30 +32,30 @@ export const CallTab: React.FunctionComponent<{
   delete params.info;
   const paramKeys = Object.keys(params);
   return <div className='call-tab'>
-      <div className='call-error' key='error' hidden={!error}>
+    <div className='call-error' key='error' hidden={!error}>
-        <div className='codicon codicon-issues'/>
+      <div className='codicon codicon-issues'/>
-        {error}
+      {error}
-      </div>
+    </div>
-      <div className='call-line'>{action.metadata.apiName}</div>
+    <div className='call-line'>{action.metadata.apiName}</div>
-      { !!paramKeys.length && <div className='call-section'>Parameters</div> }
+    { !!paramKeys.length && <div className='call-section'>Parameters</div> }
-      {
+    {
-        !!paramKeys.length && paramKeys.map(name => renderLine(action.metadata, name, params[name]))
+      !!paramKeys.length && paramKeys.map(name => renderLine(action.metadata, name, params[name]))
-      }
+    }
-      { !!action.metadata.result && <div className='call-section'>Return value</div> }
+    { !!action.metadata.result && <div className='call-section'>Return value</div> }
-      {
+    {
-        !!action.metadata.result && Object.keys(action.metadata.result).map(name =>
+      !!action.metadata.result && Object.keys(action.metadata.result).map(name =>
-          renderLine(action.metadata, name, action.metadata.result[name])
+        renderLine(action.metadata, name, action.metadata.result[name])
-        )
+      )
-      }
+    }
-      <div className='call-section'>Log</div>
+    <div className='call-section'>Log</div>
-      {
+    {
-        logs.map((logLine, index) => {
+      logs.map((logLine, index) => {
-          return <div key={index} className='call-line'>
+        return <div key={index} className='call-line'>
-            {logLine}
+          {logLine}
-          </div>;
+        </div>;
-        })
+      })
-      }
+    }
-    </div>;
+  </div>;
 };
 
 function renderLine(metadata: CallMetadata, name: string, value: any) {
@@ -63,7 +63,7 @@ function renderLine(metadata: CallMetadata, name: string, value: any) {
   let text = trimRight(title.replace(/\n/g, '↵'), 80);
   if (type === 'string')
     text = `"${text}"`;
-  return <div className='call-line'>{name}: <span className={type} title={title}>{text}</span></div>
+  return <div className='call-line'>{name}: <span className={type} title={title}>{text}</span></div>;
 }
 
 function toString(metadata: CallMetadata, name: string, value: any): { title: string, type: string } {

src/web/traceViewer/ui/snapshotTab.tsx

@@ -27,7 +27,7 @@ export const SnapshotTab: React.FunctionComponent<{
   snapshotSize: Size,
 }> = ({ action, snapshotSize }) => {
   const [measure, ref] = useMeasure<HTMLDivElement>();
-  let [snapshotIndex, setSnapshotIndex] = React.useState(0);
+  const [snapshotIndex, setSnapshotIndex] = React.useState(0);
 
   const snapshotMap = new Map<string, { title: string, snapshotName: string }>();
   for (const snapshot of action?.metadata.snapshots || [])
@@ -35,8 +35,10 @@ export const SnapshotTab: React.FunctionComponent<{
   const actionSnapshot = snapshotMap.get('action') || snapshotMap.get('after');
   const snapshots = [actionSnapshot ? { ...actionSnapshot, title: 'action' } : undefined, snapshotMap.get('before'), snapshotMap.get('after')].filter(Boolean) as { title: string, snapshotName: string }[];
 
-  if (snapshotIndex >= snapshots.length)
+  React.useEffect(() => {
-    snapshotIndex = snapshots.length - 1;
+    if (snapshotIndex >= snapshots.length)
+      setSnapshotIndex(snapshots.length - 1);
+  }, [snapshotIndex, snapshots]);
 
   const iframeRef = React.createRef<HTMLIFrameElement>();
   React.useEffect(() => {
@@ -57,7 +59,7 @@ export const SnapshotTab: React.FunctionComponent<{
       (iframeRef.current.contentWindow as any).showSnapshot(snapshotUrl, { point });
     } catch (e) {
     }
-  }, [action, snapshotIndex]);
+  }, [action, snapshotIndex, iframeRef, snapshots]);
 
   const scale = Math.min(measure.width / snapshotSize.width, measure.height / snapshotSize.height);
   const scaledSize = {
@@ -79,7 +81,7 @@ export const SnapshotTab: React.FunctionComponent<{
           onClick={() => setSnapshotIndex(index)}
           key={snapshot.title}>
           <div className='tab-label'>{renderTitle(snapshot.title)}</div>
-        </div>
+        </div>;
       })}
     </div>
     <div ref={ref} className='snapshot-wrapper'>

src/web/traceViewer/ui/tabbedPane.tsx

@@ -16,7 +16,6 @@
 
 import './tabbedPane.css';
 import * as React from 'react';
-import { count } from 'console';
 
 export interface TabbedPaneTab {
   id: string;
@@ -34,14 +33,14 @@ export const TabbedPane: React.FunctionComponent<{
     <div className='vbox'>
       <div className='hbox' style={{ flex: 'none' }}>
         <div className='tab-strip'>{
-          tabs.map(tab => {
+          tabs.map(tab => (
-            return <div className={'tab-element ' + (selectedTab === tab.id ? 'selected' : '')}
+            <div className={'tab-element ' + (selectedTab === tab.id ? 'selected' : '')}
               onClick={() => setSelectedTab(tab.id)}
               key={tab.id}>
               <div className='tab-label'>{tab.title}</div>
               <div className='tab-count'>{tab.count || ''}</div>
             </div>
-          })
+          ))
         }</div>
       </div>
       {

src/web/traceViewer/ui/timeline.tsx

@@ -58,8 +58,6 @@ export const Timeline: React.FunctionComponent<{
     const bars: TimelineBar[] = [];
     for (const page of context.pages) {
       for (const entry of page.actions) {
-        if (!entry.metadata.params)
-          console.log(entry);
         let detail = trimRight(entry.metadata.params.selector || '', 50);
         if (entry.metadata.method === 'goto')
           detail = trimRight(entry.metadata.params.url || '', 50);

src/web/traceViewer/ui/workbench.tsx

@@ -39,7 +39,7 @@ export const Workbench: React.FunctionComponent<{
   const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEvent | undefined>();
   const [selectedTab, setSelectedTab] = React.useState<string>('logs');
 
-  let context = useAsyncMemo(async () => {
+  const context = useAsyncMemo(async () => {
     if (!debugName)
       return emptyContext;
     const context = (await fetch(`/context/${debugName}`).then(response => response.json())) as ContextEntry;