feat(cli): simplify sticker hints

Author: matejchalk

e2e/cli-e2e/tests/__snapshots__/help.e2e.test.ts.snap

@@ -8,7 +8,7 @@ Commands:
                                                                        [default]
   code-pushup autorun       Shortcut for running collect followed by upload
 
-  code-pushup collect       Run Plugins and collect results
+  code-pushup collect       Run plugins and collect results
   code-pushup upload        Upload report results to the portal
   code-pushup history       Collect reports for commit history
   code-pushup compare       Compare 2 report files and create a diff file

packages/cli/src/lib/autorun/autorun-command.ts

@@ -9,8 +9,8 @@ import { logger } from '@code-pushup/utils';
 import {
   collectSuccessfulLog,
   printCliCommand,
-  renderConfigureCategoriesHint,
-  renderIntegratePortalHint,
+  renderCategoriesHint,
+  renderPortalHint,
   uploadSuccessfulLog,
 } from '../implementation/logging.js';
 
@@ -40,8 +40,10 @@ export function yargsAutorunCommandObject() {
       await collectAndPersistReports(optionsWithFormat);
       collectSuccessfulLog();
 
-      if (!options.categories || options.categories.length === 0) {
-        renderConfigureCategoriesHint();
+      if (!options.categories?.length) {
+        logger.newline();
+        renderCategoriesHint();
+        logger.newline();
       }
 
       if (options.upload) {
@@ -50,8 +52,9 @@ export function yargsAutorunCommandObject() {
           uploadSuccessfulLog(report.url);
         }
       } else {
-        logger.warn('Upload skipped because configuration is not set.');
-        renderIntegratePortalHint();
+        logger.warn('Upload skipped because Portal is not configured.');
+        logger.newline();
+        renderPortalHint();
       }
     },
   } satisfies CommandModule;

packages/cli/src/lib/collect/collect-command.ts

@@ -1,25 +1,22 @@
-import ansis from 'ansis';
 import type { ArgumentsCamelCase, CommandModule } from 'yargs';
 import {
   type CollectAndPersistReportsOptions,
   collectAndPersistReports,
 } from '@code-pushup/core';
-import {
-  formatAsciiLink,
-  formatAsciiSticker,
-  logger,
-} from '@code-pushup/utils';
+import { logger } from '@code-pushup/utils';
 import {
   collectSuccessfulLog,
   printCliCommand,
-  renderConfigureCategoriesHint,
+  renderCategoriesHint,
+  renderPortalHint,
+  renderUploadHint,
 } from '../implementation/logging.js';
 
 export function yargsCollectCommandObject(): CommandModule {
   const command = 'collect';
   return {
     command,
-    describe: 'Run Plugins and collect results',
+    describe: 'Run plugins and collect results',
     handler: async <T>(args: ArgumentsCamelCase<T>) => {
       printCliCommand(command);
 
@@ -28,36 +25,21 @@ export function yargsCollectCommandObject(): CommandModule {
       await collectAndPersistReports(options);
       collectSuccessfulLog();
 
-      if (!options.categories || options.categories.length === 0) {
-        renderConfigureCategoriesHint();
+      if (!options.categories?.length) {
+        logger.newline();
+        renderCategoriesHint();
       }
 
-      const { upload = {} } = args as unknown as Record<
+      const { upload } = args as unknown as Record<
         'upload',
         object | undefined
       >;
-      if (Object.keys(upload).length === 0) {
-        renderUploadAutorunHint();
+      logger.newline();
+      if (upload) {
+        renderUploadHint();
+      } else {
+        renderPortalHint();
       }
     },
   } satisfies CommandModule;
 }
-
-export function renderUploadAutorunHint(): void {
-  logger.info(
-    formatAsciiSticker([
-      ansis.bold.gray('💡 Visualize your reports'),
-      '',
-      `${ansis.gray('❯')} npx code-pushup upload - ${ansis.gray(
-        'Run upload to upload the created report to the server',
-      )}`,
-      `  ${formatAsciiLink(
-        'https://github.com/code-pushup/cli/tree/main/packages/cli#upload-command',
-      )}`,
-      `${ansis.gray('❯')} npx code-pushup autorun - ${ansis.gray('Run collect & upload')}`,
-      `  ${formatAsciiLink(
-        'https://github.com/code-pushup/cli/tree/main/packages/cli#autorun-command',
-      )}`,
-    ]),
-  );
-}

packages/cli/src/lib/implementation/logging.ts

@@ -6,17 +6,9 @@ import {
 } from '@code-pushup/utils';
 
 export function printCliCommand(command: string): void {
-  logger.debug(`Running ${ansis.bold(command)} command\n`);
+  logger.debug(`Running ${ansis.bold(command)} command`);
 }
 
-export function renderConfigureCategoriesHint(): void {
-  logger.debug(
-    `💡 Configure categories to see the scores in an overview table. See: ${formatAsciiLink(
-      'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md',
-    )}`,
-    { force: true },
-  );
-}
 export function uploadSuccessfulLog(url: string): void {
   logger.info(ansis.green('Upload successful!'));
   logger.info(formatAsciiLink(url));
@@ -26,23 +18,35 @@ export function collectSuccessfulLog(): void {
   logger.info(ansis.green('Collecting report successful!'));
 }
 
-export function renderIntegratePortalHint(): void {
+export function renderCategoriesHint(): void {
+  logger.info(
+    formatAsciiSticker([
+      ansis.bold.gray('💡 Configure categories'),
+      '',
+      ansis.gray('❯ Aggregate audit scores to get a high-level overview'),
+      `${ansis.gray('❯')} ${formatAsciiLink('https://www.npmjs.com/package/@code-pushup/cli')}`,
+    ]),
+  );
+}
+
+export function renderPortalHint(): void {
+  logger.info(
+    formatAsciiSticker([
+      ansis.bold.gray('💡 Upload report to Portal'),
+      '',
+      ansis.gray('❯ Visualize reports in an interactive UI'),
+      ansis.gray('❯ Track long-term progress via reports history'),
+      `${ansis.gray('❯')} ${formatAsciiLink('https://code-pushup.dev/')}`,
+    ]),
+  );
+}
+
+export function renderUploadHint(): void {
   logger.info(
     formatAsciiSticker([
-      ansis.bold.gray('💡 Integrate the portal'),
+      ansis.bold.gray('💡 Upload report to Portal'),
       '',
-      `${ansis.gray('❯')} Upload a report to the server - ${ansis.gray(
-        'npx code-pushup upload',
-      )}`,
-      `  ${formatAsciiLink(
-        'https://github.com/code-pushup/cli/tree/main/packages/cli#upload-command',
-      )}`,
-      `${ansis.gray('❯')} ${ansis.gray('Portal Integration')} - ${formatAsciiLink(
-        'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#portal-integration',
-      )}`,
-      `${ansis.gray('❯')} ${ansis.gray('Upload Command')} - ${formatAsciiLink(
-        'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#portal-integration',
-      )}`,
+      `${ansis.gray('❯')} npx code-pushup upload`,
     ]),
   );
 }

packages/cli/src/lib/upload/upload-command.ts

@@ -1,8 +1,9 @@
 import type { ArgumentsCamelCase, CommandModule } from 'yargs';
 import { type UploadOptions, upload } from '@code-pushup/core';
+import { logger } from '@code-pushup/utils';
 import {
   printCliCommand,
-  renderIntegratePortalHint,
+  renderPortalHint,
   uploadSuccessfulLog,
 } from '../implementation/logging.js';
 
@@ -16,8 +17,10 @@ export function yargsUploadCommandObject() {
 
       const options = args as unknown as UploadOptions;
       if (options.upload == null) {
-        renderIntegratePortalHint();
-        throw new Error('Upload configuration not set');
+        logger.newline();
+        renderPortalHint();
+        logger.newline();
+        throw new Error('Upload to Portal is missing configuration');
       }
       const report = await upload(options);
       if (report?.url) {