typescript-eslint · armano2 · Jun 12, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 11, 2022
diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
@@ -13,9 +13,12 @@
   margin: 0;
 }
 
-.fixer {
-  margin: 0.5rem 1.5rem;
+.fixerContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+.fixer {
+  margin: 0.5rem 0 0.5rem 1.5rem;
+}
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type Monaco from 'monaco-editor';
-import type { ErrorItem } from './types';
+import clsx from 'clsx';
 
+import type { ErrorItem, ErrorGroup } from './types';
+import IconExternalLink from '@theme/IconExternalLink';
 import styles from './ErrorsViewer.module.css';
 
 export interface ErrorsViewerProps {
-  readonly value?: ErrorItem[];
+  readonly value?: ErrorGroup[];
 }
 
 export interface ErrorBlockProps {
@@ -14,6 +16,12 @@ export interface ErrorBlockProps {
   readonly isLocked: boolean;
 }
 
+export interface FixButtonProps {
+  readonly fix: () => void;
+  readonly setIsLocked: (value: boolean) => void;
+  readonly disabled: boolean;
+}
+
 function severityClass(severity: Monaco.MarkerSeverity): string {
   switch (severity) {
     case 8:
@@ -26,16 +34,19 @@ function severityClass(severity: Monaco.MarkerSeverity): string {
   return 'info';
 }
 
-function groupErrorItems(items: ErrorItem[]): [string, ErrorItem[]][] {
-  return Object.entries(
-    items.reduce<Record<string, ErrorItem[]>>((acc, obj) => {
-      if (!acc[obj.group]) {
-        acc[obj.group] = [];
-      }
-      acc[obj.group].push(obj);
-      return acc;
-    }, {}),
-  ).sort(([a], [b]) => a.localeCompare(b));
+function FixButton(props: FixButtonProps): JSX.Element {
+  return (
+    <button
+      className="button button--primary button--sm"
+      disabled={props.disabled}
+      onClick={(): void => {
+        props.fix();
+        props.setIsLocked(true);
+      }}
+    >
+      fix
+    </button>
+  );
 }
 
 function ErrorBlock({
@@ -46,30 +57,35 @@ function ErrorBlock({
   return (
     <div className={`admonition alert alert--${severityClass(item.severity)}`}>
       <div className="admonition-content">
-        <div className="row row--no-gutters">
-          <div className="col col--12">
+        <div className={clsx(!!item.fixer && styles.fixerContainer)}>
+          <div>
             {item.message} {item.location}
           </div>
-          {item.hasFixers && (
-            <div className="col col--12">
-              {item.fixers.map((fixer, index) => (
-                <div key={index} className={styles.fixer}>
-                  <span>&gt; {fixer.message}</span>
-                  <button
-                    className="button button--primary button--sm"
-                    disabled={isLocked}
-                    onClick={(): void => {
-                      fixer.fix();
-                      setIsLocked(true);
-                    }}
-                  >
-                    fix
-                  </button>
-                </div>
-              ))}
-            </div>
+          {item.fixer && (
+            <FixButton
+              disabled={isLocked}
+              fix={item.fixer.fix}
+              setIsLocked={setIsLocked}
+            />
           )}
         </div>
+        {item.suggestions.length > 0 && (
+          <div>
+            {item.suggestions.map((fixer, index) => (
+              <div
+                key={index}
+                className={clsx(styles.fixerContainer, styles.fixer)}
+              >
+                <span>&gt; {fixer.message}</span>
+                <FixButton
+                  disabled={isLocked}
+                  fix={fixer.fix}
+                  setIsLocked={setIsLocked}
+                />
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -78,11 +94,6 @@ function ErrorBlock({
 export default function ErrorsViewer({
   value,
 }: ErrorsViewerProps): JSX.Element {
-  const model = useMemo(
-    () => (value ? groupErrorItems(value) : undefined),
-    [value],
-  );
-
   const [isLocked, setIsLocked] = useState(false);
 
   useEffect(() => {
@@ -91,11 +102,21 @@ export default function ErrorsViewer({
 
   return (
     <div className={styles.list}>
-      {model?.map(([group, data]) => {
+      {value?.map(({ group, uri, items }) => {
         return (
           <div className="margin-top--sm" key={group}>
-            <h4>{group}</h4>
-            {data.map((item, index) => (
+            <h4>
+              {group}
+              {uri && (
+                <>
+                  {' - '}
+                  <a href={uri} target="_blank">
+                    docs <IconExternalLink width={13.5} height={13.5} />
+                  </a>
+                </>
+              )}
+            </h4>
+            {items.map((item, index) => (
               <ErrorBlock
                 isLocked={isLocked}
                 setIsLocked={setIsLocked}

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -18,7 +18,7 @@ import ASTViewerTS from './ASTViewerTS';
 import type {
   RuleDetails,
   SelectedRange,
-  ErrorItem,
+  ErrorGroup,
   TabType,
   ConfigModel,
 } from './types';
@@ -66,7 +66,7 @@ function Playground(): JSX.Element {
   const [esAst, setEsAst] = useState<TSESTree.Program | null>();
   const [tsAst, setTsAST] = useState<SourceFile | null>();
   const [scope, setScope] = useState<Record<string, unknown> | null>();
-  const [markers, setMarkers] = useState<ErrorItem[]>();
+  const [markers, setMarkers] = useState<ErrorGroup[]>();
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -129,7 +129,9 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
 
       const messages = webLinter.lint(code);
 
-      const markers = parseLintResults(messages, codeActions);
+      const markers = parseLintResults(messages, codeActions, ruleId =>
+        sandboxInstance.monaco.Uri.parse(webLinter.rulesUrl.get(ruleId) ?? ''),
+      );
 
       sandboxInstance.monaco.editor.setModelMarkers(
         tabs.code,

diff --git a/packages/website/src/components/editor/createProvideCodeActions.ts b/packages/website/src/components/editor/createProvideCodeActions.ts
@@ -28,9 +28,10 @@ export function createProvideCodeActions(
         const messages = fixes.get(createURI(marker)) ?? [];
         for (const message of messages) {
           actions.push({
-            title: message.message,
+            title: message.message + (message.code ? ` (${message.code})` : ''),
             diagnostics: [marker],
             kind: 'quickfix',
+            isPreferred: message.isPreferred,
             edit: {
               edits: [
                 {

diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
@@ -1,5 +1,5 @@
 import type Monaco from 'monaco-editor';
-import type { ConfigModel, SelectedRange, ErrorItem, TabType } from '../types';
+import type { ConfigModel, SelectedRange, ErrorGroup, TabType } from '../types';
 import type { TSESTree } from '@typescript-eslint/utils';
 import type { SourceFile } from 'typescript';
 
@@ -11,6 +11,6 @@ export interface CommonEditorProps extends ConfigModel {
   readonly onTsASTChange: (value: undefined | SourceFile) => void;
   readonly onEsASTChange: (value: undefined | TSESTree.Program) => void;
   readonly onScopeChange: (value: undefined | Record<string, unknown>) => void;
-  readonly onMarkersChange: (value: ErrorItem[]) => void;
+  readonly onMarkersChange: (value: ErrorGroup[]) => void;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }
diff --git a/packages/website/src/components/linter/WebLinter.ts b/packages/website/src/components/linter/WebLinter.ts
@@ -35,7 +35,8 @@ export class WebLinter {
   private lintUtils: LintUtils;
   private rules: TSESLint.Linter.RulesRecord = {};
 
-  public ruleNames: { name: string; description?: string }[];
+  public readonly ruleNames: { name: string; description?: string }[] = [];
+  public readonly rulesUrl = new Map<string, string | undefined>();
 
   constructor(
     system: System,
@@ -54,11 +55,12 @@ export class WebLinter {
       },
     });
 
-    this.ruleNames = Array.from(this.linter.getRules()).map(value => {
-      return {
-        name: value[0],
-        description: value[1]?.meta?.docs?.description,
-      };
+    this.linter.getRules().forEach((item, name) => {
+      this.ruleNames.push({
+        name: name,
+        description: item.meta?.docs?.description,
+      });
+      this.rulesUrl.set(name, item.meta?.docs?.url);
     });
   }