Merge branch 'main' into add/vc-open

- Extract parts of the command into separate functions
- Defer requests until they are needed
- Small cleanup

packages/cli/package.json

@@ -52,6 +52,7 @@
     "@vercel/remix": "1.0.6",
     "@vercel/ruby": "1.3.13",
     "@vercel/static-build": "1.0.5",
+    "open": "8.4.0",
     "update-notifier": "5.1.0"
   },
   "devDependencies": {

packages/cli/src/commands/bisect/index.ts

@@ -15,7 +15,7 @@ import getArgs from '../../util/get-args';
 import Client from '../../util/client';
 import { getPkgName } from '../../util/pkg-name';
 import { Deployment, PaginationOptions } from '../../types';
-import { normalizeURL } from '../../util/bisect/normalize-url';
+import { normalizeURL } from '../../util/normalize-url';
 
 interface DeploymentV6
   extends Pick<

packages/cli/src/commands/deploy/args.ts

@@ -21,6 +21,7 @@ export const help = () => `
       link                 [path]      Link local directory to a Vercel Project
       login                [email]     Logs into your account or creates a new one
       logout                           Logs out of your account
+      open                 [options]   Opens a Project URL in your browser
       pull                 [path]      Pull your Project Settings from the cloud
       switch               [scope]     Switches between teams and your personal account
       help                 [cmd]       Displays complete help for [cmd]

packages/cli/src/commands/index.ts

@@ -25,6 +25,7 @@ export default new Map([
   ['logout', 'logout'],
   ['logs', 'logs'],
   ['ls', 'list'],
+  ['open', 'open'],
   ['project', 'projects'],
   ['projects', 'projects'],
   ['pull', 'pull'],

packages/cli/src/commands/open.ts

@@ -0,0 +1,319 @@
+import chalk from 'chalk';
+import Client from '../util/client';
+import getArgs from '../util/get-args';
+import getScope from '../util/get-scope';
+import handleError from '../util/handle-error';
+import logo from '../util/output/logo';
+import { getCommandName, getPkgName } from '../util/pkg-name';
+import validatePaths from '../util/validate-paths';
+import { ensureLink } from '../util/ensure-link';
+import list from '../util/input/list';
+import { Org, Project, Team } from '../types';
+import { stringify } from 'querystring';
+import openUrl from 'open';
+import link from '../util/output/link';
+import { getDeployment } from '../util/get-deployment';
+import { normalizeURL } from '../util/normalize-url';
+import { emoji, prependEmoji } from '../util/emoji';
+
+const help = () => {
+  console.log(`
+  ${chalk.bold(`${logo} ${getPkgName()} open`)} [options]
+
+  ${chalk.dim('Options:')}
+
+    -h, --help                     Output usage information
+    --confirm                      Skip confirmation prompts
+    --prod                         Filter for production deployments
+    dash                           Open the dashboard in a browser
+    latest                         Open the latest preview deployment URL in a browser
+    [url]                          Open the specified deployment URL in a browser
+    -A ${chalk.bold.underline('FILE')}, --local-config=${chalk.bold.underline(
+    'FILE'
+  )}   Path to the local ${'`vercel.json`'} file
+    -Q ${chalk.bold.underline('DIR')}, --global-config=${chalk.bold.underline(
+    'DIR'
+  )}    Path to the global ${'`.vercel`'} directory
+
+  ${chalk.dim('Examples:')}
+
+  ${chalk.gray('–')} View all options
+
+    ${chalk.cyan(`$ ${getPkgName()} open`)}
+
+  ${chalk.gray('–')} Open the dashboard for the current project
+
+    ${chalk.cyan(`$ ${getPkgName()} open dash`)}
+
+  ${chalk.gray('–')} Open the latest preview deployment URL
+
+    ${chalk.cyan(`$ ${getPkgName()} open latest`)}
+
+  ${chalk.gray('–')} Open the latest production deployment URL
+
+    ${chalk.cyan(`$ ${getPkgName()} open latest --prod`)}
+
+  ${chalk.gray('–')} Open the dashboard for the latest preview deployment
+
+    ${chalk.cyan(`$ ${getPkgName()} open dash latest`)}
+
+  ${chalk.gray('–')} Open the dashboard for the latest production deployment
+
+    ${chalk.cyan(`$ ${getPkgName()} open dash latest --prod`)}
+
+  ${chalk.gray('–')} Open the dashboard for a specific deployment URL
+  
+    ${chalk.cyan(`$ ${getPkgName()} open dash [url]`)}
+`);
+};
+
+export default async function open(
+  client: Client,
+  test: Boolean
+): Promise<number> {
+  const { output } = client;
+  let argv;
+  let subcommand: string | string[];
+  let narrow: string | string[];
+
+  try {
+    argv = getArgs(client.argv.slice(2), {
+      '--confirm': Boolean,
+      '--prod': Boolean,
+    });
+  } catch (error) {
+    handleError(error);
+    return 1;
+  }
+
+  argv._ = argv._.slice(1);
+  subcommand = argv._[0];
+  narrow = argv._[1];
+
+  if (argv['--help']) {
+    help();
+    return 2;
+  }
+
+  const confirm = argv['--confirm'] || false;
+  const prod = argv['--prod'] || false;
+
+  let scope = null;
+
+  try {
+    scope = await getScope(client);
+  } catch (err) {
+    if (err.code === 'NOT_AUTHORIZED' || err.code === 'TEAM_DELETED') {
+      output.error(err.message);
+      return 1;
+    }
+
+    throw err;
+  }
+
+  const { team, contextName } = scope;
+
+  let paths = [process.cwd()];
+
+  const validate = await validatePaths(client, paths);
+  if (!validate.valid) {
+    return validate.exitCode;
+  }
+  const { path } = validate;
+
+  const linkedProject = await ensureLink('open', client, path, confirm);
+  if (typeof linkedProject === 'number') {
+    return linkedProject;
+  }
+
+  const { project, org } = linkedProject;
+  client.config.currentTeam = org.type === 'team' ? org.id : undefined;
+
+  const choice = await getChoice(
+    subcommand,
+    narrow,
+    contextName,
+    client,
+    project,
+    org,
+    team,
+    prod
+  );
+  if (typeof choice === 'number') {
+    return choice;
+  }
+
+  if (choice === 'not_found') {
+    output.log(
+      `No deployments found. Run ${chalk.cyan(
+        getCommandName('deploy')
+      )} to create a deployment.`
+    );
+    return 1;
+  }
+  if (choice === '') {
+    // User aborted
+    return 0;
+  }
+
+  if (!test) openUrl(choice);
+  output.log(`🪄 Opened ${link(choice)}`);
+  return 0;
+}
+
+async function getChoice(
+  subcommand: string,
+  narrow: string,
+  contextName: string,
+  client: Client,
+  project: Project,
+  org: Org,
+  team: Team | null,
+  prod: Boolean
+): Promise<string | number> {
+  if (subcommand === 'dash' || subcommand === 'dashboard') {
+    if (narrow === 'latest') {
+      return await getInspectorUrl(client, project, org, team, prod);
+    } else if (narrow) {
+      // Assume they're trying to pass in a deployment URL
+      const deployment = await verifyDeployment(client, narrow, contextName);
+      if (typeof deployment === 'number') {
+        return deployment;
+      }
+
+      return deployment.inspectorUrl;
+    } else {
+      return getDashboardUrl(org, project);
+    }
+  } else if (subcommand === 'latest') {
+    return await getLatestDeploymentUrl(client, project, team, prod);
+  } else {
+    if (subcommand) {
+      client.output.print(
+        prependEmoji('Unknown subcommand.\n', emoji('warning'))
+      );
+    }
+    return await listOptions(client, project, org, team);
+  }
+}
+
+async function listOptions(
+  client: Client,
+  project: Project,
+  org: Org,
+  team: Team | null
+): Promise<string> {
+  return await list(client, {
+    message: 'What do you want to open?',
+    choices: [
+      {
+        name: `Dashboard ${chalk.gray('(vc open dash)')}`,
+        value: getDashboardUrl(org, project),
+        short: 'Dashboard',
+      },
+      {
+        name: `Latest Preview Deployment ${chalk.gray('(vc open latest)')}`,
+        value: await getLatestDeploymentUrl(client, project, team),
+        short: 'Latest Preview Deployment',
+      },
+      {
+        name: `Inspect Latest Preview Deployment ${chalk.gray(
+          '(vc open dash latest)'
+        )}`,
+        value: await getInspectorUrl(client, project, org, team),
+        short: 'Deployment Inspector',
+      },
+      {
+        name: `Latest Production Deployment ${chalk.gray(
+          '(vc open latest --prod)'
+        )}`,
+        value: await getLatestDeploymentUrl(client, project, team, true),
+        short: 'Latest Production Deployment',
+      },
+      {
+        name: `Inspect Latest Production Deployment ${chalk.gray(
+          '(vc open dash latest --prod)'
+        )}`,
+        value: await getInspectorUrl(client, project, org, team, true),
+        short: 'Latest Production Deployment Inspector',
+      },
+    ],
+  });
+}
+
+async function verifyDeployment(
+  client: Client,
+  url: string,
+  contextName: string
+) {
+  try {
+    const deployment = await getDeployment(client, url);
+    return {
+      url: normalizeURL(deployment.url),
+      inspectorUrl: deployment.inspectorUrl || '',
+    };
+  } catch (err) {
+    if (err.status === 404) {
+      client.output.error(
+        `Could not find a deployment with URL ${link(url)} in ${contextName}.`
+      );
+    }
+    return 1;
+  }
+}
+
+function getDashboardUrl(org: Org, project: Project): string {
+  return `https://vercel.com/${org.slug}/${project.name}`;
+}
+async function getInspectorUrl(
+  client: Client,
+  project: Project,
+  org: Org,
+  team: Team | null,
+  prod: Boolean = false
+): Promise<string> {
+  const proj = await getProject(client, project, team);
+  if (proj) {
+    let latestDeploymentId = (
+      prod ? proj?.targets?.production?.id : proj.latestDeployments?.[0]?.id
+    )?.replace('dpl_', '');
+    if (latestDeploymentId) {
+      return `https://vercel.com/${org.slug}/${project.name}/${latestDeploymentId}`;
+    }
+  }
+
+  return 'not_found';
+}
+async function getLatestDeploymentUrl(
+  client: Client,
+  project: Project,
+  team: Team | null,
+  prod: Boolean = false
+): Promise<string> {
+  const proj = await getProject(client, project, team);
+  if (prod && proj?.targets?.production) {
+    return `https://${proj.targets.production.url}`;
+  } else if (proj?.latestDeployments?.[0]?.url) {
+    return `https://${proj.latestDeployments[0].url}`;
+  }
+
+  return 'not_found';
+}
+
+async function getProject(
+  client: Client,
+  project: Project,
+  team: Team | null
+): Promise<Project> {
+  const proj = await client
+    .fetch(
+      `/v9/projects/${project.name}?${stringify({
+        teamId: team?.id,
+      })}`
+    )
+    .catch(err => {
+      client.output.error(err.message);
+      return;
+    });
+  return proj as Project;
+}

packages/cli/src/index.ts

@@ -653,6 +653,9 @@ const main = async () => {
       case 'logout':
         func = require('./commands/logout').default;
         break;
+      case 'open':
+        func = require('./commands/open').default;
+        break;
       case 'projects':
         func = require('./commands/project').default;
         break;

packages/cli/src/types.ts

@@ -117,6 +117,7 @@ export type Cert = {
 
 export type Deployment = {
   uid: string;
+  id?: string;
   url: string;
   name: string;
   type: 'LAMBDAS';
@@ -256,6 +257,9 @@ export interface Project extends ProjectSettings {
   createdAt: number;
   alias?: ProjectAliasTarget[];
   latestDeployments?: Partial<Deployment>[];
+  targets?: {
+    production?: Partial<Deployment>;
+  };
 }
 
 export interface Org {

packages/cli/test/fixtures/unit/commands/open/default/.gitignore

@@ -0,0 +1 @@
+!.vercel

packages/cli/test/fixtures/unit/commands/open/default/.vercel/project.json

@@ -0,0 +1 @@
+{ "projectId": "test-project", "orgId": "team_dashboard" }

packages/cli/test/fixtures/unit/commands/open/default/index.html

@@ -0,0 +1 @@
+<h1>hi</h1>

packages/cli/test/fixtures/unit/commands/open/no-deployments/.gitignore

@@ -0,0 +1 @@
+!.vercel

packages/cli/test/fixtures/unit/commands/open/no-deployments/.vercel/project.json

@@ -0,0 +1 @@
+{ "projectId": "no-deployments", "orgId": "team_dummy" }

packages/cli/test/fixtures/unit/commands/open/no-deployments/index.html

@@ -0,0 +1 @@
+<h1>hi</h1>

packages/cli/test/fixtures/unit/commands/open/preview/.gitignore

@@ -0,0 +1 @@
+!.vercel

packages/cli/test/fixtures/unit/commands/open/preview/.vercel/project.json

@@ -0,0 +1 @@
+{ "projectId": "test-project", "orgId": "team_preview" }

packages/cli/test/fixtures/unit/commands/open/preview/index.html

@@ -0,0 +1 @@
+<h1>hi</h1>

packages/cli/test/fixtures/unit/commands/open/prod/.gitignore

@@ -0,0 +1 @@
+!.vercel

packages/cli/test/fixtures/unit/commands/open/prod/.vercel/project.json

@@ -0,0 +1 @@
+{ "projectId": "test-project", "orgId": "team_prod" }

packages/cli/test/fixtures/unit/commands/open/prod/index.html

@@ -0,0 +1 @@
+<h1>hi</h1>

packages/cli/test/mocks/deployment.ts

@@ -24,6 +24,7 @@ export function useDeployment({
     plan: 'hobby',
     public: false,
     version: 2,
+    buildingAt: Date.now(),
     createdAt,
     createdIn: 'sfo1',
     ownerId: creator.id,

packages/cli/test/mocks/project.ts

@@ -96,7 +96,7 @@ export const defaultProject = {
       requestedAt: 1571239348998,
       target: 'production',
       teamId: null,
-      type: 'LAMBDAS',
+      type: undefined,
       url: 'a-project-name-rjtr4pz3f.vercel.app',
       userId: 'K4amb7K9dAt5R2vBJWF32bmY',
     },
@@ -131,6 +131,9 @@ export function useProject(project: Partial<Project> = defaultProject) {
   client.scenario.get(`/v8/projects/${project.id}`, (_req, res) => {
     res.json(project);
   });
+  client.scenario.get(`/v9/projects/${project.id}`, (_req, res) => {
+    res.json(project);
+  });
   client.scenario.get(
     `/v6/projects/${project.id}/system-env-values`,
     (_req, res) => {

packages/cli/test/unit/commands/open.test.ts

@@ -0,0 +1,208 @@
+import { join } from 'path';
+import { defaultProject, useProject } from '../../mocks/project';
+import { useTeams } from '../../mocks/team';
+import { useUser } from '../../mocks/user';
+import open from '../../../src/commands/open';
+import { client } from '../../mocks/client';
+
+const fixture = (name: string) =>
+  join(__dirname, '../../fixtures/unit/commands/open', name);
+
+describe('open', () => {
+  const originalCwd = process.cwd();
+
+  it('should open the dashboard', async () => {
+    const cwd = fixture('default');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      const team = useTeams('team_dashboard');
+      useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+
+      client.setArgv('open', 'dash');
+      const openPromise = open(client, true);
+      await expect(client.stderr).toOutput(
+        `Opened https://vercel.com/${team[0].slug}/test-project`
+      );
+
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should open the preview inspect url', async () => {
+    const cwd = fixture('preview');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      const team = useTeams('team_preview');
+      const project = useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+      const deploymentId = project?.project?.latestDeployments?.[0].id?.replace(
+        'dpl_',
+        ''
+      );
+
+      client.setArgv('open', 'dash', 'latest');
+      const openPromise = open(client, true);
+      await expect(client.stderr).toOutput(
+        `Opened https://vercel.com/${team[0].slug}/test-project/${deploymentId}`
+      );
+
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should open the production inspect url', async () => {
+    const cwd = fixture('prod');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      const team = useTeams('team_prod');
+      const project = useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+      const deploymentId = project?.project?.targets?.production?.id?.replace(
+        'dpl_',
+        ''
+      );
+
+      client.setArgv('open', 'dash', 'latest', '--prod');
+      const openPromise = open(client, true);
+      await expect(client.stderr).toOutput(
+        `Opened https://vercel.com/${team[0].slug}/test-project/${deploymentId}`
+      );
+
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should open the preview deploy url', async () => {
+    const cwd = fixture('default');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      useTeams('team_dummy');
+      const project = useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+      const url = project?.project?.latestDeployments?.[0]?.url;
+
+      client.setArgv('open', 'latest');
+      const openPromise = open(client, true);
+      await expect(client.stderr).toOutput(`Opened https://${url}`);
+
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should open the production deploy url', async () => {
+    const cwd = fixture('default');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      useTeams('team_dummy');
+      const project = useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+      const url = project?.project?.targets?.production?.url;
+
+      client.setArgv('open', 'latest', '--prod');
+      const openPromise = open(client, true);
+      await expect(client.stderr).toOutput(`Opened https://${url}`);
+
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should open the latest preview deploy url from dropdown', async () => {
+    const cwd = fixture('default');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      useTeams('team_dummy');
+      const project = useProject({
+        ...defaultProject,
+        id: 'test-project',
+        name: 'test-project',
+      });
+      const url = project?.project?.latestDeployments?.[0]?.url;
+
+      client.setArgv('open');
+      const openPromise = open(client, true);
+
+      await expect(client.stderr).toOutput('What do you want to open?');
+      client.stdin.write('\x1B[B'); // down arrow
+      client.stdin.write('\r'); // return
+
+      await expect(client.stderr).toOutput(`Opened https://${url}`);
+      const exitCode = await openPromise;
+      expect(exitCode).toEqual(0);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+  it('should fail when there are no deployments', async () => {
+    const cwd = fixture('no-deployments');
+    try {
+      process.chdir(cwd);
+
+      useUser();
+      useTeams('team_dummy');
+      const project = useProject({
+        ...defaultProject,
+        id: 'no-deployments',
+        name: 'no-deployments',
+      });
+      project.project.latestDeployments = undefined;
+
+      client.setArgv('open', 'dash', 'latest');
+      const openPromiseInspect = open(client, true);
+
+      await expect(client.stderr).toOutput(
+        'No deployments found. Run `vercel deploy` to create a deployment.'
+      );
+      const exitCodeInspect = await openPromiseInspect;
+      expect(exitCodeInspect).toEqual(1);
+
+      client.setArgv('open', 'latest');
+      const openPromiseDeploy = open(client, true);
+
+      await expect(client.stderr).toOutput(
+        'No deployments found. Run `vercel deploy` to create a deployment.'
+      );
+      const exitCodeDeploy = await openPromiseDeploy;
+      expect(exitCodeDeploy).toEqual(1);
+    } finally {
+      process.chdir(originalCwd);
+    }
+  });
+});

packages/cli/test/unit/util/bisect/normalize-url.test.ts

@@ -1,4 +1,4 @@
-import { normalizeURL } from '../../../../src/util/bisect/normalize-url';
+import { normalizeURL } from '../../../../src/util/normalize-url';
 
 describe('normalize-url', () => {
   it('should add https to url without scheme', () => {

packages/client/src/types.ts

@@ -63,6 +63,7 @@ export interface Deployment {
     | 'ERROR';
   createdAt: number;
   createdIn: string;
+  inspectorUrl?: string;
   buildingAt?: number;
   creator?: {
     uid?: string;