Browse Source

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

pull/7888/head
Max Schmitt 2 months ago
committed by GitHub
parent
commit
74cd7584ac
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      package.json
  2. 24
      src/web/components/source.tsx
  3. 4
      src/web/components/splitView.tsx
  4. 4
      src/web/recorder/callLog.tsx
  5. 8
      src/web/recorder/recorder.tsx
  6. 2
      src/web/traceViewer/index.tsx
  7. 3
      src/web/traceViewer/ui/actionList.tsx
  8. 50
      src/web/traceViewer/ui/callTab.tsx
  9. 12
      src/web/traceViewer/ui/snapshotTab.tsx
  10. 7
      src/web/traceViewer/ui/tabbedPane.tsx
  11. 2
      src/web/traceViewer/ui/timeline.tsx
  12. 2
      src/web/traceViewer/ui/workbench.tsx

2
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",

24
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) => {
const lineNumber = index + 1;
const lineHighlight = highlight.find(h => h.line === lineNumber);
const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line';
return <div key={lineNumber} className={lineClass} ref={revealLine === lineNumber ? revealedLineRef : null}>
<div className='source-line-number'>{lineNumber}</div>
<div className='source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
</div>;
})
}</div>
lines.map((markup, index) => {
const lineNumber = index + 1;
const lineHighlight = highlight.find(h => h.line === lineNumber);
const lineClass = lineHighlight ? `source-line source-line-${lineHighlight.type}` : 'source-line';
return <div key={lineNumber} className={lineClass} ref={revealLine === lineNumber ? revealedLineRef : null}>
<div className='source-line-number'>{lineNumber}</div>
<div className='source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
</div>;
})
}</div>;
};

4
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

4
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>;

8
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 => {

2
src/web/traceViewer/index.tsx

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

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

50
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='codicon codicon-issues'/>
{error}
</div>
<div className='call-line'>{action.metadata.apiName}</div>
{ !!paramKeys.length && <div className='call-section'>Parameters</div> }
{
!!paramKeys.length && paramKeys.map(name => renderLine(action.metadata, name, params[name]))
}
{ !!action.metadata.result && <div className='call-section'>Return value</div> }
{
!!action.metadata.result && Object.keys(action.metadata.result).map(name =>
renderLine(action.metadata, name, action.metadata.result[name])
)
}
<div className='call-section'>Log</div>
{
logs.map((logLine, index) => {
return <div key={index} className='call-line'>
{logLine}
</div>;
})
}
</div>;
<div className='call-error' key='error' hidden={!error}>
<div className='codicon codicon-issues'/>
{error}
</div>
<div className='call-line'>{action.metadata.apiName}</div>
{ !!paramKeys.length && <div className='call-section'>Parameters</div> }
{
!!paramKeys.length && paramKeys.map(name => renderLine(action.metadata, name, params[name]))
}
{ !!action.metadata.result && <div className='call-section'>Return value</div> }
{
!!action.metadata.result && Object.keys(action.metadata.result).map(name =>
renderLine(action.metadata, name, action.metadata.result[name])
)
}
<div className='call-section'>Log</div>
{
logs.map((logLine, index) => {
return <div key={index} className='call-line'>
{logLine}
</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 } {

12
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)
snapshotIndex = snapshots.length - 1;
React.useEffect(() => {
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'>

7
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 => {
return <div className={'tab-element ' + (selectedTab === tab.id ? 'selected' : '')}
tabs.map(tab => (
<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>
{

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

2
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;

Loading…
Cancel
Save