feat(models): validate plugin icons using portal-client package

Author: matejchalk

esbuild.config.js

@@ -12,9 +12,13 @@ esbuild.build({
         build.onEnd(result => {
           if (result.errors.length > 0) return;
 
-          execSync(
-            `tsc --emitDeclarationOnly --project packages/${project}/tsconfig.lib.json --outDir dist`,
-          );
+          try {
+            execSync(
+              `tsc --emitDeclarationOnly --project packages/${project}/tsconfig.lib.json --outDir dist`,
+            );
+          } catch (err) {
+            console.error(err);
+          }
         });
       },
     },

package-lock.json

@@ -11,6 +11,7 @@
     "node": ">=18.16"
   },
   "dependencies": {
+    "@code-pushup/portal-client": "^0.1.2",
     "bundle-require": "^4.0.1",
     "chalk": "^5.3.0",
     "cliui": "^8.0.1",

package.json

@@ -1,11 +1,11 @@
+import { CollectOptions } from '@quality-metrics/utils';
 import { join } from 'path';
 import { describe, expect, it } from 'vitest';
 import { yargsCli } from './cli';
-import { middlewares } from './middlewares';
-import { options as defaultOptions } from './options';
-import { CollectOptions } from '@quality-metrics/core';
 import { getDirname } from './implementation/helper.mock';
+import { middlewares } from './middlewares';
 import { GlobalOptions } from './model';
+import { options as defaultOptions } from './options';
 
 const __dirname = getDirname(import.meta.url);
 const withDirName = (path: string) => join(__dirname, path);

packages/cli/src/lib/cli.spec.ts

@@ -16,6 +16,7 @@ module.exports = {
       },
       slug: 'execute-plugin',
       title: 'execute plugin',
+      icon: 'javascript',
     },
   ],
 };

packages/cli/src/lib/implementation/mock/cli-config.mock.js

@@ -1,5 +1,5 @@
 module.exports = {
-  persist: { outputPath: 'cjs-out.json' },
+  persist: { outputPath: 'tmp/cjs-out.json' },
   plugins: [],
   categories: [],
 };

packages/cli/src/lib/implementation/mock/config-middleware-config.mock.cjs

@@ -1,5 +1,5 @@
 export default {
-  persist: { outputPath: 'mjs-out.json' },
+  persist: { outputPath: 'tmp/mjs-out.json' },
   plugins: [],
   categories: [],
 };

packages/cli/src/lib/implementation/mock/config-middleware-config.mock.mjs

@@ -3,9 +3,9 @@ import {
   PluginOutput,
   auditOutputsSchema,
 } from '@quality-metrics/models';
+import { ProcessObserver, executeProcess } from '@quality-metrics/utils';
 import { readFile } from 'fs/promises';
 import { join } from 'path';
-import { executeProcess, ProcessObserver } from '@quality-metrics/utils';
 
 /**
  * Error thrown when plugin output is invalid.
@@ -48,7 +48,7 @@ export async function executePlugin(
   pluginConfig: PluginConfig,
   observer?: ProcessObserver,
 ): Promise<PluginOutput> {
-  const { slug, title, description, docsUrl, version, packageName } =
+  const { slug, title, icon, description, docsUrl, version, packageName } =
     pluginConfig;
   const { args, command } = pluginConfig.runner;
 
@@ -73,6 +73,7 @@ export async function executePlugin(
       packageName,
       slug,
       title,
+      icon,
       description,
       docsUrl,
       date,

packages/core/src/lib/execute-plugin.ts

@@ -6,7 +6,6 @@ import { CollectOptions, collect } from './collect';
 const baseOptions: CollectOptions = {
   ...mockCoreConfig(),
   configPath: '',
-  interactive: true,
   verbose: false,
 };
 

packages/core/src/lib/index.spec.ts

@@ -2,6 +2,7 @@
   "name": "@quality-metrics/models",
   "version": "0.0.1",
   "dependencies": {
+    "@code-pushup/portal-client": "^0.1.2",
     "zod": "^3.22.1"
   }
 }

packages/models/package.json

@@ -1,3 +1,4 @@
+import { MATERIAL_ICONS, MaterialIcon } from '@code-pushup/portal-client';
 import { z } from 'zod';
 import {
   executionMetaSchema,
@@ -17,6 +18,11 @@ import {
   hasMissingStrings,
 } from './implementation/utils';
 
+export const materialIconSchema = z.enum(
+  MATERIAL_ICONS as [MaterialIcon, MaterialIcon, ...MaterialIcon[]],
+  { description: 'Icon from VSCode Material Icons extension' },
+);
+
 export const pluginSchema = packageVersionSchema({
   optional: true,
 })
@@ -31,9 +37,7 @@ export const pluginSchema = packageVersionSchema({
   .merge(
     z.object({
       slug: slugSchema('References plugin. ID (unique within core config)'),
-      icon: z.union([z.unknown(), z.string()], {
-        description: 'Icon from VSCode Material Icons extension',
-      }),
+      icon: materialIconSchema,
     }),
   );
 

packages/models/src/lib/plugin-config.ts

@@ -59,6 +59,7 @@ export function mockPluginConfig(opt?: {
     },
     slug: pluginSlug,
     title: 'execute plugin',
+    icon: 'nrwl',
     description: 'Plugin description for ' + pluginSlug,
     docsUrl: 'https://my-plugin.docs.dev?' + pluginSlug,
   };
@@ -204,7 +205,7 @@ export function mockPluginReport(opt?: {
     title: 'Title of ' + pluginSlug,
     description: 'Plugin description of ' + pluginSlug,
     docsUrl: `http://plugin.io/docs/${pluginSlug}`,
-    icon: 'socket',
+    icon: 'nrwl',
     version: '0.0.1',
     packageName: '@' + pluginSlug,
     audits: Array.isArray(auditSlug)
@@ -256,7 +257,7 @@ export function mockUploadConfig(opt?: Partial<UploadConfig>): UploadConfig {
 
 export function mockAuditOutputs(opt?: {
   auditSlug: string | string[];
-}): AuditOutputs {
+}): AuditOutput[] {
   let { auditSlug } = opt || {};
   auditSlug = auditSlug || 'mock-audit-output-slug';
   return Array.isArray(auditSlug)

packages/models/test/schema.mock.ts

@@ -10,6 +10,7 @@ export const lighthousePlugin: () => PluginConfig = () =>
     },
     slug: 'lighthouse',
     title: 'lighthouse',
+    icon: 'lighthouse',
     description: '',
     docsUrl: `https://github.com/GoogleChrome/lighthouse/tree/main/README.md`,
     groups: [],

packages/models/test/test-data/config-and-report-lighthouse.mock.ts

@@ -10,6 +10,7 @@ export const nxValidatorsPlugin: () => PluginConfig = (): PluginConfig =>
     },
     slug: 'nx-validators',
     title: 'NxValidatorsPlugin',
+    icon: 'nrwl',
     docsUrl: `https://github.com/BioPhoton/nx-validators/tree/main/README.md`,
     groups: [
       {

packages/models/test/test-data/config-and-report-nx-validators.mock.ts

@@ -33,5 +33,6 @@ export function eslintPlugin(_: ESLintPluginConfig): PluginConfig {
     },
     slug: 'eslint',
     title: 'execute plugin',
+    icon: 'eslint',
   };
 }

packages/plugin-eslint/src/lib/eslint-plugin.ts

@@ -33,5 +33,6 @@ export function lighthousePlugin(_: LighthousePluginConfig): PluginConfig {
     },
     slug: 'lighthouse',
     title: 'ChromeDevTools Lighthouse',
+    icon: 'lighthouse',
   };
 }

packages/plugin-lighthouse/src/lib/lighthouse-plugin.ts

@@ -178,7 +178,7 @@ export function mockPluginReport(opt?: {
     slug: pluginSlug,
     docsUrl: `http://plugin.io/docs/${pluginSlug}`,
     title: 'Mock plugin Name',
-    icon: 'socket',
+    icon: 'nrwl',
     audits: Array.isArray(auditSlug)
       ? auditSlug.map(a => mockAuditReport({ auditSlug: a }))
       : [mockAuditReport({ auditSlug })],