Modify styling of CLI output (#1598)

* Update styles in commands

Specifically, replace all instances of chalk.blue with chalk.cyan, which
is more readable in dark mode (the green color we use is basically
unreadable in light mode anyway)

Additionally, this changes some spacing of the service:list command to
allow users to see the URL to navigate to more obviously.

Author: zionts

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `apollo`
   - Add sdl download ability to `client:download-schema`
+  - colors: use cyan instead of blue for text highlighting
 - `apollo-codegen-flow`
   - <First `apollo-codegen-flow` related entry goes here>
 - `apollo-codegen-scala`

packages/apollo/src/commands/client/check.ts

@@ -149,7 +149,7 @@ export default class ClientCheck extends ClientCommand {
   }) => {
     const { name, locationOffset, relativePath } = operation;
     this.log(
-      `${name}: ${chalk.blue(`${relativePath}:${locationOffset.line}`)}\n`
+      `${name}: ${chalk.cyan(`${relativePath}:${locationOffset.line}`)}\n`
     );
 
     const byErrorType = validationResults.reduce(

packages/apollo/src/commands/client/push.ts

@@ -27,9 +27,9 @@ export default class ClientPush extends ClientCommand {
     let result = "";
     try {
       await this.runTasks(({ flags, project, config }) => {
-        const clientBundleInfo = `${chalk.blue(
+        const clientBundleInfo = `${chalk.cyan(
           (config.client && config.client.name) || flags
-        )}${chalk.blue(
+        )}${chalk.cyan(
           (config.client &&
             config.client.version &&
             `@${config.client.version}`) ||
@@ -51,9 +51,9 @@ export default class ClientPush extends ClientCommand {
             }
           },
           {
-            title: `Checked operations against ${chalk.blue(
-              config.name || ""
-            )}@${chalk.blue(config.tag)}`,
+            title: `Checked operations against ${chalk.cyan(
+              config.name + "@" + config.tag
+            )}`,
             task: async () => {}
           },
           {
@@ -115,7 +115,7 @@ export default class ClientPush extends ClientCommand {
                       operation.signature
                     ];
 
-                    result += `\nError in: ${chalk.blue(file)}\n`;
+                    result += `\nError in: ${chalk.cyan(file)}\n`;
                     result += table(
                       [
                         ["Status", "Operation", "Errors"],

packages/apollo/src/commands/service/__tests__/__snapshots__/list.test.ts.snap

@@ -28,7 +28,7 @@ Fetching list of services for graph engine@master [completed]
 ╚═══════════╧═══════════════════════════════╧═══════════════════════════╝
 
 
-
 View full details at: https://engine-staging.apollographql.com/graph/engine/service-list
+
 "
 `;

packages/apollo/src/commands/service/check.ts

@@ -321,9 +321,9 @@ export default class ServiceCheck extends ProjectCommand {
           return [
             {
               enabled: () => !!serviceName,
-              title: `Validate graph composition for service ${chalk.blue(
+              title: `Validate graph composition for service ${chalk.cyan(
                 serviceName || ""
-              )} on graph ${chalk.blue(graphName)}`,
+              )} on graph ${chalk.cyan(graphName)}`,
               task: async (ctx: TasksOutput, task) => {
                 if (!serviceName) {
                   throw new Error(
@@ -337,7 +337,7 @@ export default class ServiceCheck extends ProjectCommand {
                   throw new Error("No SDL found for federated service");
                 }
 
-                task.output = `Attempting to compose graph with ${chalk.blue(
+                task.output = `Attempting to compose graph with ${chalk.cyan(
                   serviceName
                 )} service's partial schema`;
 
@@ -366,7 +366,7 @@ export default class ServiceCheck extends ProjectCommand {
                 task.title = `Found ${pluralize(
                   compositionValidationResult.errors.length,
                   "graph composition error"
-                )} for service ${chalk.blue(serviceName)} on graph ${chalk.blue(
+                )} for service ${chalk.cyan(serviceName)} on graph ${chalk.cyan(
                   graphName
                 )}`;
 
@@ -417,7 +417,7 @@ export default class ServiceCheck extends ProjectCommand {
             {
               title: `Validating ${
                 serviceName ? "composed " : ""
-              }schema against tag ${chalk.blue(tag)} on graph ${chalk.blue(
+              }schema against tag ${chalk.cyan(tag)} on graph ${chalk.cyan(
                 graphName
               )}`,
               // We have already performed validation per operation above if the service is federated
@@ -506,14 +506,14 @@ export default class ServiceCheck extends ProjectCommand {
                   : null;
 
                 task.title = `Compared ${pluralize(
-                  chalk.blue(schemaChanges.length.toString()),
+                  chalk.cyan(schemaChanges.length.toString()),
                   "schema change"
                 )} against ${pluralize(
-                  chalk.blue(numberOfCheckedOperations.toString()),
+                  chalk.cyan(numberOfCheckedOperations.toString()),
                   "operation"
                 )}${
                   hours
-                    ? ` over the last ${chalk.blue(formatTimePeriod(hours))}`
+                    ? ` over the last ${chalk.cyan(formatTimePeriod(hours))}`
                     : ""
                 }`;
               }
@@ -529,10 +529,10 @@ export default class ServiceCheck extends ProjectCommand {
                   breakingSchemaChangeCount;
 
                 task.title = `Found ${pluralize(
-                  chalk.blue(breakingSchemaChangeCount.toString()),
+                  chalk.cyan(breakingSchemaChangeCount.toString()),
                   "breaking change"
                 )} and ${pluralize(
-                  chalk.blue(nonBreakingSchemaChangeCount.toString()),
+                  chalk.cyan(nonBreakingSchemaChangeCount.toString()),
                   "compatible change"
                 )}`;
 

packages/apollo/src/commands/service/list.ts

@@ -81,7 +81,7 @@ function formatHumanReadable({
 
     const serviceListUrlEnding = `/graph/${graphName}/service-list`;
     const targetUrl = `${frontendUrl}${serviceListUrlEnding}`;
-    result += `\n\nView full details at: ${targetUrl}`;
+    result += `\nView full details at: ${chalk.cyan(targetUrl)}\n`;
   }
   return result;
 }
@@ -123,7 +123,7 @@ export default class ServiceList extends ProjectCommand {
 
         return [
           {
-            title: `Fetching list of services for graph ${chalk.blue(
+            title: `Fetching list of services for graph ${chalk.cyan(
               graphName + "@" + variant
             )}`,
             task: async (ctx: TasksOutput, task) => {
@@ -160,7 +160,7 @@ export default class ServiceList extends ProjectCommand {
     const { service } = taskOutput.config;
     if (!service || !taskOutput.config) {
       throw new Error(
-        "Service mising from config. This should have been validated elsewhere"
+        "Service missing from config. This should have been validated elsewhere"
       );
     }
     this.log(