refactor(@angular/cli): improve output format for ng cache info command

This commit refactors the output to be more user-friendly and consistent with other commands like `ng version`. It introduces a clean, aligned, two-column layout with colors to improve readability.

- Labels are now bolded for emphasis.
- Values are colored for clarity (cyan for general info, green/red for statuses).
- The layout is padded to ensure vertical alignment, making the information easier to scan.

Author: clydin

packages/angular/cli/src/commands/cache/info/cli.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { tags } from '@angular-devkit/core';
 import * as fs from 'node:fs/promises';
 import { join } from 'node:path';
 import { Argv } from 'yargs';
@@ -15,6 +14,7 @@ import {
   CommandModuleImplementation,
   CommandScope,
 } from '../../../command-builder/command-module';
+import { colors } from '../../../utilities/color';
 import { isCI } from '../../../utilities/environment-options';
 import { getCacheConfig } from '../utilities';
 
@@ -29,15 +29,44 @@ export class CacheInfoCommandModule extends CommandModule implements CommandModu
   }
 
   async run(): Promise<void> {
-    const { path, environment, enabled } = getCacheConfig(this.context.workspace);
-
-    this.context.logger.info(tags.stripIndents`
-      Enabled: ${enabled ? 'yes' : 'no'}
-      Environment: ${environment}
-      Path: ${path}
-      Size on disk: ${await this.getSizeOfDirectory(path)}
-      Effective status on current machine: ${this.effectiveEnabledStatus() ? 'enabled' : 'disabled'}
-    `);
+    const cacheConfig = getCacheConfig(this.context.workspace);
+    const { path, environment, enabled } = cacheConfig;
+
+    const effectiveStatus = this.effectiveEnabledStatus(cacheConfig);
+    const sizeOnDisk = await this.getSizeOfDirectory(path);
+
+    const info: { label: string; value: string }[] = [
+      {
+        label: 'Enabled',
+        value: enabled ? colors.green('Yes') : colors.red('No'),
+      },
+      {
+        label: 'Environment',
+        value: colors.cyan(environment),
+      },
+      {
+        label: 'Path',
+        value: colors.cyan(path),
+      },
+      {
+        label: 'Size on disk',
+        value: colors.cyan(sizeOnDisk),
+      },
+      {
+        label: 'Effective Status',
+        value:
+          (effectiveStatus ? colors.green('Enabled') : colors.red('Disabled')) +
+          ' (current machine)',
+      },
+    ];
+
+    const maxLabelLength = Math.max(...info.map((l) => l.label.length));
+
+    const output = info
+      .map(({ label, value }) => colors.bold(label.padEnd(maxLabelLength + 2)) + `: ${value}`)
+      .join('\n');
+
+    this.context.logger.info(`\n${colors.bold('Cache Information')}\n\n${output}\n`);
   }
 
   private async getSizeOfDirectory(path: string): Promise<string> {
@@ -82,8 +111,8 @@ export class CacheInfoCommandModule extends CommandModule implements CommandModu
     return `${roundedSize.toFixed(fractionDigits)} ${abbreviations[index]}`;
   }
 
-  private effectiveEnabledStatus(): boolean {
-    const { enabled, environment } = getCacheConfig(this.context.workspace);
+  private effectiveEnabledStatus(cacheConfig: { enabled: boolean; environment: string }): boolean {
+    const { enabled, environment } = cacheConfig;
 
     if (enabled) {
       switch (environment) {

tests/legacy-cli/e2e/tests/commands/cache/cache-info.ts

@@ -7,59 +7,31 @@ export default async function () {
   try {
     // Should be enabled by default for local builds.
     await configureTest('0' /** envCI */);
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: enabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Enabled/);
 
     // Should be disabled by default for CI builds.
     await configureTest('1' /** envCI */, { enabled: true });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: disabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Disabled/);
 
     // Should be enabled by when environment is local and env is not CI.
     await configureTest('0' /** envCI */, { environment: 'local' });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: enabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Enabled/);
 
     // Should be disabled by when environment is local and env is CI.
     await configureTest('1' /** envCI */, { environment: 'local' });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: disabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Disabled/);
 
     // Effective status should be enabled when 'environment' is set to 'all' or 'ci'.
     await configureTest('1' /** envCI */, { environment: 'all' });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: enabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Enabled/);
 
     // Effective status should be enabled when 'environment' is set to 'ci' and run is in ci
     await configureTest('1' /** envCI */, { environment: 'ci' });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: enabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Enabled/);
 
     // Effective status should be disabled when 'enabled' is set to false
     await configureTest('1' /** envCI */, { environment: 'all', enabled: false });
-    await execAndWaitForOutputToMatch(
-      'ng',
-      ['cache', 'info'],
-      /Effective status on current machine: disabled/,
-    );
+    await execAndWaitForOutputToMatch('ng', ['cache', 'info'], /Effective Status\s*: Disabled/);
   } finally {
     process.env['CI'] = originalCIValue;
   }