improve bit-dependencies command to show the dependencies graph (textually) (teambit#3987)

It makes it easier to understand the relation between components.

Author: davidfirst

src/api/consumer/lib/dependencies.ts

@@ -1,3 +1,4 @@
+import { BitId } from '@teambit/legacy-bit-id';
 import { loadConsumerIfExist } from '../../../consumer';
 import {
   DependencyResolver,
@@ -6,17 +7,36 @@ import {
 import type { DebugDependencies } from '../../../consumer/component/dependencies/dependency-resolver/dependencies-resolver';
 import type { OverridesDependenciesData } from '../../../consumer/component/dependencies/dependency-resolver/dependencies-data';
 import ConsumerNotFound from '../../../consumer/exceptions/consumer-not-found';
+import DependencyGraph, { DependenciesInfo } from '../../../scope/graph/scope-graph';
 
-export type DependenciesResults = DebugDependencies & OverridesDependenciesData & { coreAspects: string[] };
+export type DependenciesResultsDebug = DebugDependencies & OverridesDependenciesData & { coreAspects: string[] };
 
-export async function dependencies(id: string): Promise<DependenciesResults> {
+export type DependenciesResults = {
+  scopeDependencies: DependenciesInfo[];
+  workspaceDependencies: DependenciesInfo[];
+  id: BitId;
+};
+
+export async function dependencies(
+  id: string,
+  debug: boolean
+): Promise<DependenciesResultsDebug | DependenciesResults> {
   const consumer = await loadConsumerIfExist();
   if (!consumer) throw new ConsumerNotFound(); // @todo: supports this on bare-scope.
   const bitId = consumer.getParsedId(id);
-  const component = await consumer.loadComponent(bitId);
-  const dependencyResolver = new DependencyResolver(component, consumer);
-  const dependenciesData = await dependencyResolver.getDependenciesData({}, undefined);
-  const debugData: DebugDependencies = dependencyResolver.debugDependenciesData;
-  updateDependenciesVersions(consumer, component, debugData.components);
-  return { ...debugData, ...dependenciesData.overridesDependencies, coreAspects: dependenciesData.coreAspects };
+  if (debug) {
+    const component = await consumer.loadComponent(bitId);
+    const dependencyResolver = new DependencyResolver(component, consumer);
+    const dependenciesData = await dependencyResolver.getDependenciesData({}, undefined);
+    const debugData: DebugDependencies = dependencyResolver.debugDependenciesData;
+    updateDependenciesVersions(consumer, component, debugData.components);
+    return { ...debugData, ...dependenciesData.overridesDependencies, coreAspects: dependenciesData.coreAspects };
+  }
+  const scopeGraph = await DependencyGraph.buildGraphFromScope(consumer.scope);
+  const scopeDependencyGraph = new DependencyGraph(scopeGraph);
+  const scopeDependencies = scopeDependencyGraph.getDependenciesInfo(bitId);
+  const workspaceGraph = await DependencyGraph.buildGraphFromWorkspace(consumer, true);
+  const workspaceDependencyGraph = new DependencyGraph(workspaceGraph);
+  const workspaceDependencies = workspaceDependencyGraph.getDependenciesInfo(bitId);
+  return { scopeDependencies, workspaceDependencies, id: bitId };
 }

src/cli/commands/public-cmds/dependencies-cmd.ts

@@ -1,18 +1,42 @@
-import { dependencies } from '../../../api/consumer/lib/dependencies';
-import { DebugDependencies } from '../../../consumer/component/dependencies/dependency-resolver/dependencies-resolver';
+import chalk from 'chalk';
+import { dependencies, DependenciesResultsDebug, DependenciesResults } from '../../../api/consumer/lib/dependencies';
 import { CommandOptions, LegacyCommand } from '../../legacy-command';
+import { generateDependenciesInfoTable } from '../../templates/component-template';
 
 export default class Dependencies implements LegacyCommand {
   name = 'dependencies <id>';
-  description = 'EXPERIMENTAL. show dependencies of the given component and how their version was determined';
+  description = 'EXPERIMENTAL. show dependencies (direct and indirect) of the given component';
   alias = '';
-  opts = [] as CommandOptions;
+  opts = [['d', 'debug', 'show the immediate dependencies and how their version was determined']] as CommandOptions;
 
-  action([id]: [string]): Promise<any> {
-    return dependencies(id);
+  action([id]: [string], { debug = false }: { debug: boolean }): Promise<any> {
+    return dependencies(id, debug);
   }
 
-  report(results: DebugDependencies): string {
+  report(results: DependenciesResultsDebug | DependenciesResults): string {
+    // @ts-ignore
+    if (!results.id) {
+      // it's DependenciesResultsDebug
+      return this.debugReport(results as DependenciesResultsDebug);
+    }
+    return this.nonDebugReport(results as DependenciesResults);
+  }
+
+  private debugReport(results: DependenciesResultsDebug) {
     return JSON.stringify(results, undefined, 4);
   }
+
+  private nonDebugReport(results: DependenciesResults) {
+    if (!results.scopeDependencies.length && !results.workspaceDependencies.length) {
+      return `no dependents found for ${results.id.toString()}.
+try running "bit cat-component ${results.id.toStringWithoutVersion()}" to see whether the component/version exists locally`;
+    }
+    const scopeTable = generateDependenciesInfoTable(results.scopeDependencies, results.id);
+    const workspaceTable = generateDependenciesInfoTable(results.workspaceDependencies, results.id);
+    return `${chalk.bold('Dependents originated from workspace')}
+${workspaceTable || '<none>'}
+
+${chalk.bold('Dependents originated from scope')}
+${scopeTable || '<none>'}`;
+  }
 }

src/cli/templates/component-template.ts

@@ -70,7 +70,7 @@ export default function paintComponent(
     const componentTable = table(rows, tableColumnConfig);
     const dependenciesTableStr = showRemoteVersion ? generateDependenciesTable() : '';
     const dependentsInfoTableStr = generateDependentsInfoTable(dependentsInfo, component.id);
-    const dependenciesInfoTableStr = generateDependenciesInfoTable();
+    const dependenciesInfoTableStr = generateDependenciesInfoTable(dependenciesInfo, component.id);
     return (
       componentTable +
       dependenciesTableStr +
@@ -206,29 +206,6 @@ export default function paintComponent(
     return dependenciesTable;
   }
 
-  function generateDependenciesInfoTable() {
-    if (!dependenciesInfo.length) {
-      return '';
-    }
-
-    const dependenciesHeader = [];
-    dependenciesHeader.push([
-      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
-      c.cyan('Dependency ID'),
-      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
-      c.cyan('Depth'),
-      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
-      c.cyan('Immediate Dependent'),
-      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
-      c.cyan('Dependency type'),
-    ]);
-    const allDependenciesRows = getAllDependenciesRows(dependenciesInfo, component.id);
-
-    // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
-    const dependenciesTable = table(dependenciesHeader.concat(allDependenciesRows));
-    return `\n${c.bold('Dependencies Details')}\n${dependenciesTable}`;
-  }
-
   function calculatePadRightLength(str: string, columnWidth: number): string {
     if (!str) return '';
     const padRightCount = Math.ceil(str.length / columnWidth) * columnWidth;
@@ -247,6 +224,24 @@ function getAllDependenciesRows(dependenciesInfoArray: DependenciesInfo[], id: B
   });
 }
 
+export function generateDependenciesInfoTable(dependenciesInfo: DependenciesInfo[], id: BitId) {
+  if (!dependenciesInfo.length) {
+    return '';
+  }
+
+  const dependenciesHeader: string[][] = [];
+  dependenciesHeader.push([
+    c.cyan('Dependency ID'),
+    c.cyan('Depth'),
+    c.cyan('Immediate Dependent'),
+    c.cyan('Dependency type'),
+  ]);
+  const allDependenciesRows = getAllDependenciesRows(dependenciesInfo, id);
+
+  const dependenciesTable = table(dependenciesHeader.concat(allDependenciesRows));
+  return `\n${c.bold('Dependencies Details')}\n${dependenciesTable}`;
+}
+
 export function generateDependentsInfoTable(dependentsInfo: DependenciesInfo[], id: BitId) {
   if (!dependentsInfo.length) {
     return '';