make deploy logging prettier and more helpful (#539)

Author: mythmon

src/deploy.ts

@@ -14,7 +14,7 @@ import {
   setDeployConfig
 } from "./observableApiConfig.js";
 import {Telemetry} from "./telemetry.js";
-import {blue} from "./tty.js";
+import {blue, bold, hangingIndentLog, magenta, yellow} from "./tty.js";
 
 export interface DeployOptions {
   config: Config;
@@ -28,6 +28,7 @@ export interface DeployEffects {
   logger: Logger;
   input: NodeJS.ReadableStream;
   output: NodeJS.WritableStream;
+  outputColumns: number;
 }
 
 const defaultEffects: DeployEffects = {
@@ -37,7 +38,8 @@ const defaultEffects: DeployEffects = {
   isTty: isatty(process.stdin.fd),
   logger: console,
   input: process.stdin,
-  output: process.stdout
+  output: process.stdout,
+  outputColumns: process.stdout.columns ?? 80
 };
 
 /** Deploy a project to ObservableHQ */
@@ -84,56 +86,78 @@ export async function deploy({config}: DeployOptions, effects = defaultEffects):
     }
   }
 
+  const deployConfig = await effects.getDeployConfig(config.root);
   if (projectId) {
     // Check last deployed state. If it's not the same project, ask the user if
     // they want to continue anyways. In non-interactive mode just cancel.
-    const deployConfig = await effects.getDeployConfig(config.root);
     const previousProjectId = deployConfig?.projectId;
     if (previousProjectId && previousProjectId !== projectId) {
-      logger.log(
-        `This project was last deployed to a workspace/slug different from @${config.deploy.workspace}/${config.deploy.project}.`
+      const {indent} = hangingIndentLog(
+        effects,
+        magenta("Attention:"),
+        `This project was last deployed to a different project on Observable Cloud from ${bold(
+          `@${config.deploy.workspace}/${config.deploy.project}`
+        )}.`
       );
       if (effects.isTty) {
-        const choice = await promptUserForInput(
-          effects.input,
-          effects.output,
-          `Do you want to deploy to @${config.deploy.workspace}/${config.deploy.project} anyway? [y/N]`
-        );
-        if (choice.trim().toLowerCase().charAt(0) !== "y") {
-          throw new CliError("User cancelled deploy.", {print: false, exitCode: 2});
+        const choice = await promptConfirm(effects, `${indent}Do you want to deploy anyway?`, {default: false});
+        if (!choice) {
+          throw new CliError("User cancelled deploy", {print: false, exitCode: 0});
         }
       } else {
         throw new CliError("Cancelling deploy due to misconfiguration.");
       }
+    } else if (!previousProjectId) {
+      const {indent} = hangingIndentLog(
+        effects,
+        yellow("Warning:"),
+        `There is an existing project on Observable Cloud named ${bold(
+          `@${config.deploy.workspace}/${config.deploy.project}`
+        )} that is not associated with this repository. If you continue, you'll overwrite the existing content of the project.`
+      );
+
+      if (!(await promptConfirm(effects, `${indent}Do you want to continue?`, {default: false}))) {
+        if (effects.isTty) {
+          throw new CliError("Running non-interactively, cancelling deploy", {print: true, exitCode: 1});
+        } else {
+          throw new CliError("User cancelled deploy", {print: true, exitCode: 0});
+        }
+      }
     }
   } else {
     // Project doesn't exist, so ask the user if they want to create it.
-    // In non-interactive mode just cancel.
+    const {indent} = hangingIndentLog(
+      effects,
+      magenta("Attention:"),
+      `There is no project on the Observable Cloud named ${bold(
+        `@${config.deploy.workspace}/${config.deploy.project}`
+      )}`
+    );
     if (effects.isTty) {
-      const choice = await promptUserForInput(effects.input, effects.output, "No project exists. Create it now? [y/N]");
-      if (choice.trim().toLowerCase().charAt(0) !== "y") {
-        throw new CliError("User cancelled deploy.", {print: false, exitCode: 2});
-      }
       if (!config.title) {
         throw new CliError("You haven't configured a project title. Please set title in your configuration.");
       }
-      const currentUserResponse = await apiClient.getCurrentUser();
-      const workspace = currentUserResponse.workspaces.find((w) => w.login === config.deploy?.workspace);
-      if (!workspace) {
-        const availableWorkspaces = currentUserResponse.workspaces.map((w) => w.login).join(", ");
-        throw new CliError(
-          `Workspace ${config.deploy?.workspace} not found. Available workspaces: ${availableWorkspaces}.`
-        );
+      if (!(await promptConfirm(effects, `${indent}Do you want to create it now?`, {default: false}))) {
+        throw new CliError("User cancelled deploy.", {print: false, exitCode: 0});
       }
-      const project = await apiClient.postProject({
-        slug: config.deploy.project,
-        title: config.title,
-        workspaceId: workspace.id
-      });
-      projectId = project.id;
     } else {
       throw new CliError("Cancelling deploy due to non-existent project.");
     }
+
+    const currentUserResponse = await apiClient.getCurrentUser();
+    const workspace = currentUserResponse.workspaces.find((w) => w.login === config.deploy?.workspace);
+    if (!workspace) {
+      const availableWorkspaces = currentUserResponse.workspaces.map((w) => w.login).join(", ");
+      throw new CliError(
+        `Workspace ${config.deploy?.workspace} not found. Available workspaces: ${availableWorkspaces}.`
+      );
+    }
+    const project = await apiClient.postProject({
+      slug: config.deploy.project,
+      title: config.title,
+      workspaceId: workspace.id
+    });
+    projectId = project.id;
   }
 
   await effects.setDeployConfig(config.root, {projectId});
@@ -170,6 +194,27 @@ async function promptUserForInput(
   }
 }
 
+export async function promptConfirm(
+  {input, output}: DeployEffects,
+  question: string,
+  opts: {default: boolean}
+): Promise<boolean> {
+  const rl = readline.createInterface({input, output});
+  const choices = opts.default ? "[Y/n]" : "[y/N]";
+  try {
+    let value: string | null = null;
+    while (true) {
+      value = (await rl.question(`${question} ${choices} `)).toLowerCase();
+      if (value === "") return opts.default;
+      if (value.startsWith("y")) return true;
+      if (value.startsWith("n")) return false;
+      rl.write('Please answer "y" or "n".\n');
+    }
+  } finally {
+    rl.close();
+  }
+}
+
 class DeployBuildEffects implements BuildEffects {
   readonly logger: Logger;
   readonly output: Writer;

src/tty.ts

@@ -1,3 +1,5 @@
+import type {Logger} from "./logger.js";
+
 export const bold = color(1, 22);
 export const faint = color(2, 22);
 export const italic = color(3, 23);
@@ -14,3 +16,47 @@ export type TtyColor = (text: string) => string;
 function color(code: number, reset: number): TtyColor {
   return process.stdout.isTTY ? (text: string) => `\x1b[${code}m${text}\x1b[${reset}m` : String;
 }
+
+export interface TtyEffects {
+  isTty: boolean;
+  logger: Logger;
+  outputColumns: number;
+}
+
+function stripColor(s: string): string {
+  // eslint-disable-next-line no-control-regex
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+export function hangingIndentLog(
+  effects: TtyEffects,
+  prefix: string,
+  message: string
+): {output: string; indent: string} {
+  let output;
+  let indent;
+  if (effects.isTty) {
+    const prefixLength = stripColor(prefix).length + 1;
+    const lineBudget = effects.outputColumns - prefixLength;
+    const tokens = message.split(" ");
+    const lines: string[][] = [[]];
+    indent = " ".repeat(prefixLength);
+    let lastLineLength = 0;
+    for (const token of tokens) {
+      const tokenLength = stripColor(token).length;
+      lastLineLength += tokenLength + 1;
+      if (lastLineLength > lineBudget) {
+        lines.push([]);
+        lastLineLength = tokenLength;
+      }
+      lines.at(-1)?.push(token);
+    }
+    output = prefix + " ";
+    output += lines.map((line) => line.join(" ")).join("\n" + indent);
+  } else {
+    output = `${prefix} ${message}`;
+    indent = "";
+  }
+  effects.logger.log(output);
+  return {output, indent};
+}