Feature: Redesign CLI console messages and user interactions. (#734)

* Add new cli options.

* Fix spinners.

* Fix technology spinners.

* Update validators for cli.

* Remove use of validators.

* Small changes.

* Add tests for validators.

* Change limit to number-of-urls.

* Delete validateArgs file.

* Fix sitemap error messages.

* Remove extra logging.

* Correct validator.
Add write permission validator to outDirectory validation.

* Add cli e2e test.

* Temporarily skip tests.

* Fix spinnies.

* skip test.

* Comment out code.

* Update test.

* Add shared config for testing cli.

* Fix spinners.

* Fix error messages.

* Correct verbose logs.

* Add chalk package and paint red the error messages.

* Add reusbale function to use update spinner text.
Add indentation for the verbose spinner text.
Make uniform grammar.

* Change wording to locale.

* Use spinnies instead of chalk.

* Fix messages in spinnies.

* Fix tech analysis.

* Fix spinnies.

* Remove fullstop.

* Fix failing tests.
Use console.log instead of console.error.

* Change messaging.

* Fix indentation.

* Add spinnies type.

* Add spinnies type.

* Add spinnies to main package.json file.

* Conditionally update usage text.

* Remove validation for access.
Remove fullstop from message.

* Add help text at the end of help command.

* Configure help message.

* Capatialise error message.

* Fix utl validator to accomodate the URL argument.

* Remove default options.

* Fix option name to use make CLI readable.

* Fix package.json.

* Fix eslint.

* Fix condition.

* Fix indent.

* Make a redLogger for cli errors

* Fix non provision of argument.
Remove optional website argument.

* If argument consists of flags then display error.

* Add back ensureDir

---------

Co-authored-by: sayedtaqui <sayedwp@gmail.com>

package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"build-storybook": "storybook build",
 		"build:all": "npm-run-all **:build ",
-		"build-cli": "npm run cli-dashboard:build && npm run cli:build",
+		"build-cli": "npm run i18n:build && npm run common:build && npm run design-system:build && npm run library-detection:build && npm run analysis-utils:build && npm run cli-dashboard:build && npm run cli:build",
 		"publish:all:local": "npm run build:all && npm run publish:local --workspaces",
 		"unpublish:all:local": "npm run unpublish:local --workspaces",
 		"publish:all:remote": "npm run build:all && npm run publish:remote --workspaces",
@@ -45,7 +45,8 @@
 		"prepare": "husky install",
 		"rws-json:update": "node scripts/update-rws-json.cjs",
 		"storybook": "storybook dev -p 6006",
-		"test": "jest --config=tests/jest.config.cjs",
+		"test": "jest --config=tests/unitTest.jest.config.cjs",
+		"test:e2e": "jest --config=tests/cli.jest.config.cjs",
 		"test:coverage": "npm run test -- --collectCoverage && open coverage/lcov-report/index.html",
 		"serve": "webpack serve"
 	},
@@ -80,6 +81,7 @@
 		"@types/react": "^18.2.9",
 		"@types/react-dom": "^18.2.4",
 		"@types/sinon-chrome": "^2.2.11",
+		"@types/spinnies": "^0.5.3",
 		"@typescript-eslint/eslint-plugin": "^5.59.9",
 		"@typescript-eslint/parser": "^5.59.9",
 		"autoprefixer": "^10.4.14",

packages/analysis-utils/package.json

@@ -37,6 +37,7 @@
   "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool",
   "dependencies": {
     "@google-psat/common": "*",
+    "chalk": "^5.3.0",
     "puppeteer": "^22.10.0",
     "simple-cookie": "^1.0.15",
     "tldts": "^6.0.14",

packages/analysis-utils/src/browserManagement/index.ts

@@ -54,12 +54,15 @@ export class BrowserManagement {
   pageRequests: Record<string, Record<string, RequestData>>;
   pageResourcesMaps: Record<string, Record<string, ScriptTagUnderCheck>>;
   shouldLogDebug: boolean;
-
+  spinnies: Spinnies | undefined;
+  indent = 0;
   constructor(
     viewportConfig: ViewportConfig,
     isHeadless: boolean,
     pageWaitTime: number,
-    shouldLogDebug: boolean
+    shouldLogDebug: boolean,
+    indent: number,
+    spinnies?: Spinnies
   ) {
     this.viewportConfig = viewportConfig;
     this.browser = null;
@@ -71,11 +74,19 @@ export class BrowserManagement {
     this.pageRequests = {};
     this.shouldLogDebug = shouldLogDebug;
     this.pageResourcesMaps = {};
+    this.spinnies = spinnies;
+    this.indent = indent;
   }
 
   debugLog(msg: any) {
-    if (this.shouldLogDebug) {
-      console.log(msg);
+    if (this.shouldLogDebug && this.spinnies) {
+      this.spinnies.add(msg, {
+        text: msg,
+        //@ts-ignore
+        succeedColor: 'white',
+        status: 'non-spinnable',
+        indent: this.indent,
+      });
     }
   }
 
@@ -94,14 +105,14 @@ export class BrowserManagement {
       headless: this.isHeadless,
       args,
     });
-    this.debugLog('browser intialized');
+    this.debugLog('Browser intialized');
   }
 
   async clickOnAcceptBanner(url: string) {
     const page = this.pages[url];
 
     if (!page) {
-      throw new Error('no page with the provided id was found');
+      throw new Error('No page with the provided id was found');
     }
 
     await page.evaluate(() => {
@@ -167,14 +178,14 @@ export class BrowserManagement {
       throw new Error('no page with the provided id was found');
     }
 
-    this.debugLog(`starting navigation to url ${url}`);
+    this.debugLog(`Starting navigation to URL: ${url}`);
 
     try {
       await page.goto(url, { timeout: 10000 });
-      this.debugLog(`done with navigation to url:${url}`);
+      this.debugLog(`Navigation completed to URL: ${url}`);
     } catch (error) {
       this.debugLog(
-        `navigation did not finish in 10 seconds moving on to scrolling`
+        `Navigation did not finish in 10 seconds moving on to scrolling`
       );
       //ignore
     }
@@ -192,11 +203,11 @@ export class BrowserManagement {
         window.scrollBy(0, 10000);
       });
     } catch (error) {
-      this.debugLog(`scrolling the page to the end.`);
+      this.debugLog('Scrolled to end of page');
       //ignore
     }
 
-    this.debugLog(`scrolling on url:${url}`);
+    this.debugLog(`Scrolling on URL: ${url}`);
   }
 
   responseEventListener(pageId: string, response: HTTPResponse) {
@@ -461,6 +472,8 @@ export class BrowserManagement {
       throw new Error(`no page with the provided id was found:${pageId}`);
     }
 
+    this.debugLog('Attaching network event listeners to page');
+
     const cdpSession = await page.createCDPSession();
 
     await cdpSession.send('Target.setAutoAttach', {
@@ -501,7 +514,7 @@ export class BrowserManagement {
       this.pageFrameAttachedListener(pageId, ev)
     );
 
-    this.debugLog('done attaching network event listeners');
+    this.debugLog('Finished attaching network event listeners');
   }
 
   async getJSCookies(page: Page) {

packages/analysis-utils/src/procedures/analyzeCookiesUrlsAndFetchResources.ts

@@ -36,7 +36,10 @@ export const analyzeCookiesUrlsAndFetchResources = async (
   isHeadless: boolean,
   delayTime: number,
   cookieDictionary: CookieDatabase,
-  shouldSkipAcceptBanner: boolean
+  shouldSkipAcceptBanner: boolean,
+  verbose: boolean,
+  spinnies?: Spinnies,
+  indent = 4
 ) => {
   const browser = new BrowserManagement(
     {
@@ -46,7 +49,9 @@ export const analyzeCookiesUrlsAndFetchResources = async (
     },
     isHeadless,
     delayTime,
-    false
+    verbose,
+    indent,
+    spinnies
   );
 
   await browser.initializeBrowser(true);