Add spinner when checking for NativeScript components versions

Currently when doctor command is executed, NativeScript components versions information is displayed as table. With this PR NativeScript components versions will be displayed with terminal spinners.

In case when component is up to date with latest available version, success spinner will be displayed.
In case when for component update is available, warn spinner will be displayed.
In case when component is not installed, fail spinner will be displayed.

This PR changes also the behaviour of `tns info` command. When `tns info` command is executed,  NativeScript components versions information also will be displayed with terminal spinners.

Author: Fatme

lib/common

@@ -698,23 +698,17 @@ interface IVersionsService {
 	 */
 	getRuntimesVersions(): Promise<IVersionInformation[]>;
 
-	/**
-	 * Checks version information about the nativescript components and prints available updates if any.
-	 */
-	checkComponentsForUpdate(): Promise<void>;
-
 	/**
 	 * Gets versions information about all nativescript components.
 	 * @return {Promise<IVersionInformation[]>} The version information.
 	 */
 	getAllComponentsVersions(): Promise<IVersionInformation[]>;
 
 	/**
-	 * Creates table with versions information.
-	 * @param {IVersionInformation[]} The versions information to push in the table.
-	 * @return {any} The created table.
+	 * Checks version information about the nativescript components and prints versions information.
+	 * @return {Promise<void>}
 	 */
-	createTableWithVersionsInformation(versionsInformation: IVersionInformation[]): any;
+	printVersionsInformation(): Promise<void>;
 }
 
 /**

lib/declarations.d.ts

@@ -45,7 +45,7 @@ class DoctorService implements IDoctorService {
 		}
 
 		try {
-			await this.$versionsService.checkComponentsForUpdate();
+			await this.$versionsService.printVersionsInformation();
 		} catch (err) {
 			this.$logger.error("Cannot get the latest versions information from npm. Please try again later.");
 		}

lib/services/doctor-service.ts

@@ -1,14 +1,8 @@
 export class InfoService implements IInfoService {
-	constructor(private $versionsService: IVersionsService,
-		private $logger: ILogger) { }
+	constructor(private $versionsService: IVersionsService) { }
 
-	public async printComponentsInfo(): Promise<void> {
-		const allComponentsInfo = await this.$versionsService.getAllComponentsVersions();
-
-		const table: any = this.$versionsService.createTableWithVersionsInformation(allComponentsInfo);
-
-		this.$logger.out("All NativeScript components versions information");
-		this.$logger.out(table.toString());
+	public printComponentsInfo(): Promise<void> {
+		return this.$versionsService.printVersionsInformation();
 	}
 }
 

lib/services/info-service.ts

@@ -1,22 +1,28 @@
-import { EOL } from "os";
 import * as constants from "../constants";
+import * as helpers from "../common/helpers";
 import * as semver from "semver";
 import * as path from "path";
-import { createTable } from "../common/helpers";
+
+export enum VersionInformationType {
+	UpToDate,
+	UpdateAvailable,
+	NotInstalled
+}
 
 class VersionsService implements IVersionsService {
-	private static UP_TO_DATE_MESSAGE = "Up to date".green.toString();
-	private static UPDATE_AVAILABLE_MESSAGE = "Update available".yellow.toString();
-	private static NOT_INSTALLED_MESSAGE = "Not installed".grey.toString();
+	private static UP_TO_DATE_MESSAGE = "up to date";
+	private static UPDATE_AVAILABLE_MESSAGE = "Update available";
+	private static NOT_INSTALLED_MESSAGE = "not installed";
 
 	private projectData: IProjectData;
 
 	constructor(private $fs: IFileSystem,
 		private $npmInstallationManager: INpmInstallationManager,
 		private $injector: IInjector,
+		private $logger: ILogger,
 		private $staticConfig: Config.IStaticConfig,
 		private $pluginsService: IPluginsService,
-		private $logger: ILogger) {
+		private $terminalSpinnerService: ITerminalSpinnerService) {
 		this.projectData = this.getProjectData();
 	}
 
@@ -86,30 +92,6 @@ class VersionsService implements IVersionsService {
 		return runtimesVersions;
 	}
 
-	public async checkComponentsForUpdate(): Promise<void> {
-		const allComponents: IVersionInformation[] = await this.getAllComponentsVersions();
-		const componentsForUpdate: IVersionInformation[] = [];
-
-		_.forEach(allComponents, (component: IVersionInformation) => {
-			if (component.currentVersion && this.hasUpdate(component)) {
-				componentsForUpdate.push(component);
-			}
-		});
-
-		this.printVersionsInformation(componentsForUpdate, allComponents);
-	}
-
-	private printVersionsInformation(versionsInformation: IVersionInformation[], allComponents: IVersionInformation[]): void {
-		if (versionsInformation && versionsInformation.length) {
-			const table: any = this.createTableWithVersionsInformation(versionsInformation);
-
-			this.$logger.warn("Updates available");
-			this.$logger.out(table.toString() + EOL);
-		} else {
-			this.$logger.out(`Your components are up-to-date: ${EOL}${allComponents.map(component => component.componentName)}${EOL}`);
-		}
-	}
-
 	public async getAllComponentsVersions(): Promise<IVersionInformation[]> {
 		let allComponents: IVersionInformation[] = [];
 
@@ -127,30 +109,50 @@ class VersionsService implements IVersionsService {
 
 		allComponents = allComponents.concat(runtimesVersions);
 
-		return allComponents;
+		return allComponents
+			.map(componentInformation => {
+				if (componentInformation.currentVersion) {
+					if (this.hasUpdate(componentInformation)) {
+						componentInformation.type = VersionInformationType.UpdateAvailable;
+						componentInformation.message = `${VersionsService.UPDATE_AVAILABLE_MESSAGE} for component ${componentInformation.componentName}. Your current version is ${componentInformation.currentVersion} and the latest available version is ${componentInformation.latestVersion}.`;
+					} else {
+						componentInformation.type = VersionInformationType.UpToDate;
+						componentInformation.message = `Component ${componentInformation.componentName} has ${componentInformation.currentVersion} version and is ${VersionsService.UP_TO_DATE_MESSAGE}.`;
+					}
+				} else {
+					componentInformation.type = VersionInformationType.NotInstalled;
+					componentInformation.message = `Component ${componentInformation.componentName} is ${VersionsService.NOT_INSTALLED_MESSAGE}.`;
+				}
+
+				return componentInformation;
+			});
 	}
 
-	public createTableWithVersionsInformation(versionsInformation: IVersionInformation[]): any {
-		const headers = ["Component", "Current version", "Latest version", "Information"];
-		const data: string[][] = [];
-
-		_.forEach(versionsInformation, (componentInformation: IVersionInformation) => {
-			const row: string[] = [
-				componentInformation.componentName,
-				componentInformation.currentVersion,
-				componentInformation.latestVersion
-			];
-
-			if (componentInformation.currentVersion) {
-				semver.lt(componentInformation.currentVersion, componentInformation.latestVersion) ? row.push(VersionsService.UPDATE_AVAILABLE_MESSAGE) : row.push(VersionsService.UP_TO_DATE_MESSAGE);
-			} else {
-				row.push(VersionsService.NOT_INSTALLED_MESSAGE);
+	public async printVersionsInformation(): Promise<void> {
+		const versionsInformation = await this.$terminalSpinnerService.execute<IVersionInformation[]>({
+			text: `Getting NativeScript components versions information...`
+		}, () => this.getAllComponentsVersions());
+
+		if (!helpers.isInteractive()) {
+			versionsInformation.map(componentInformation => this.$logger.out(componentInformation.message));
+		}
+
+		_.forEach(versionsInformation, componentInformation => {
+			const spinner = this.$terminalSpinnerService.createSpinner();
+			spinner.text = componentInformation.message;
+
+			if (componentInformation.type === VersionInformationType.UpToDate) {
+				spinner.succeed();
 			}
 
-			data.push(row);
-		});
+			if (componentInformation.type === VersionInformationType.UpdateAvailable) {
+				spinner.warn();
+			}
 
-		return createTable(headers, data);
+			if (componentInformation.type === VersionInformationType.NotInstalled) {
+				spinner.fail();
+			}
+		});
 	}
 
 	private getProjectData(): IProjectData {