improve error messages in blueprint-icon-components lint rule

packages/tslint-config/src/rules/blueprintIconComponentsRule.ts

@@ -31,8 +31,8 @@ export class Rule extends Lint.Rules.AbstractRule {
         typescriptOnly: false,
     };
 
-    public static COMPONENT_MESSAGE = "use <NamedIcon /> component for icon prop";
-    public static LITERAL_MESSAGE = "use IconName string literal for icon prop";
+    public static componentMessage = (component: string) => `Replace icon literal with component: ${component}`;
+    public static literalMessage = (literal: string) => `Replace icon component with literal: ${literal}`;
 
     public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
         const [option = OPTION_COMPONENT] = this.ruleArguments;
@@ -46,20 +46,24 @@ function walk(ctx: Lint.WalkContext<string>): void {
             const { initializer } = node;
             const option = ctx.options;
             if (ts.isStringLiteral(initializer) && option === OPTION_COMPONENT) {
-                addFailure(ctx, node, Rule.COMPONENT_MESSAGE, `icon={<${pascalCase(initializer.text)}Icon />}`);
+                // "tick" -> <TickIcon />
+                const iconName = `<${pascalCase(initializer.text)}Icon />`;
+                addFailure(ctx, node, Rule.componentMessage(iconName), `{${iconName}}`);
             } else if (ts.isJsxExpression(initializer) && option === OPTION_LITERAL) {
+                // <TickIcon /> -> "tick"
                 const match = /<(\w+)Icon /.exec(initializer.getText());
-                const literal = match == null ? undefined : `icon="${dashCase(match[1])}"`;
-                addFailure(ctx, node, Rule.LITERAL_MESSAGE, literal);
+                const literal = match == null ? undefined : `"${dashCase(match[1])}"`;
+                addFailure(ctx, node, Rule.literalMessage(literal), literal);
             }
         }
         return ts.forEachChild(node, cb);
     });
 }
 
 function addFailure(ctx: Lint.WalkContext<string>, node: ts.Declaration, message: string, replacement?: string) {
-    const start = node.getStart(ctx.sourceFile);
-    const width = node.getWidth(ctx.sourceFile);
+    const offsetLength = "icon=".length;
+    const start = node.getStart(ctx.sourceFile) + offsetLength;
+    const width = node.getWidth(ctx.sourceFile) - offsetLength;
     const fixer = replacement == null ? undefined : new Lint.Replacement(start, width, replacement);
     ctx.addFailureAt(start, width, message, fixer);
 }

packages/tslint-config/test/rules/blueprint-icon-components/component/test.tsx.lint

@@ -1,5 +1,7 @@
 <Button icon="tick" />
-        ~~~~~~~~~~~    [use <NamedIcon /> component for icon prop]
+             ~~~~~~    [err % ("<TickIcon />")]
 
 <Button icon={<TickIcon />} />
 <InputGroup rightElement={<Button />} />
+
+[err]: Replace icon literal with component: %s

packages/tslint-config/test/rules/blueprint-icon-components/literal/test.tsx.lint

@@ -1,5 +1,7 @@
 <Button icon={<TickIcon />} />
-        ~~~~~~~~~~~~~~~~~~~    [use IconName string literal for icon prop]
+             ~~~~~~~~~~~~~~    [err % ('"tick"')]
 
 <Button icon="tick" />
 <InputGroup rightElement={<Button />} />
+
+[err]: Replace icon component with literal: %s

packages/tslint-config/test/rules/blueprint-icon-components/true/test.tsx.lint

@@ -1,5 +1,7 @@
 <Button icon="tick" />
-        ~~~~~~~~~~~    [use <NamedIcon /> component for icon prop]
+             ~~~~~~    [err % ("<TickIcon />")]
 
 <Button icon={<TickIcon />} />
 <InputGroup rightElement={<Button />} />
+
+[err]: Replace icon literal with component: %s