[cli] Add vc project connect command (vercel#8014)

This PR adds a new subcommand, `vc project connect`, which connects a Git provider repository to the current project. Previously, this could only be done via the Dashboard.

This is the first part of a larger project—the goal is to include this functionality within `vc link`, so that you never have to leave the CLI if you want to set up a new Vercel project that's connected to Git.

### 📋 Checklist

<!--
  Please keep your PR as a Draft until the checklist is complete
-->

#### Tests

- [x] The code changed/added as part of this PR has been covered with tests
- [x] All tests pass locally with `yarn test-unit`

#### Code Review

- [ ] This PR has a concise title and thorough description useful to a reviewer
- [ ] Issue from task tracker has a link to this PR

Author: MatthewStanciu

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

@@ -64,7 +64,7 @@ import { help } from './args';
 import { getDeploymentChecks } from '../../util/deploy/get-deployment-checks';
 import parseTarget from '../../util/deploy/parse-target';
 import getPrebuiltJson from '../../util/deploy/get-prebuilt-json';
-import { createGitMeta } from '../../util/deploy/create-git-meta';
+import { createGitMeta } from '../../util/create-git-meta';
 
 export default async (client: Client) => {
   const { output } = client;

packages/cli/src/commands/projects.ts

@@ -10,6 +10,20 @@ import getScope from '../util/get-scope';
 import getCommandFlags from '../util/get-command-flags';
 import { getPkgName, getCommandName } from '../util/pkg-name';
 import Client from '../util/client';
+import validatePaths from '../util/validate-paths';
+import { ensureLink } from '../util/ensure-link';
+import { parseGitConfig, pluckRemoteUrl } from '../util/create-git-meta';
+import {
+  connectGitProvider,
+  disconnectGitProvider,
+  formatProvider,
+  parseRepoUrl,
+} from '../util/projects/connect-git-provider';
+import { join } from 'path';
+import { Team, User } from '../types';
+import confirm from '../util/input/confirm';
+import { Output } from '../util/output';
+import link from '../util/output/link';
 
 const e = encodeURIComponent;
 
@@ -20,6 +34,7 @@ const help = () => {
   ${chalk.dim('Commands:')}
 
     ls                               Show all projects in the selected team/user
+    connect                          Connect a Git provider to your project
     add      [name]                  Add a new project
     rm       [name]                  Remove a project
 
@@ -54,6 +69,7 @@ const main = async (client: Client) => {
     argv = getArgs(client.argv.slice(2), {
       '--next': Number,
       '-N': '--next',
+      '--yes': Boolean,
     });
   } catch (error) {
     handleError(error);
@@ -71,10 +87,10 @@ const main = async (client: Client) => {
 
   const { output } = client;
 
-  let contextName = null;
+  let scope = null;
 
   try {
-    ({ contextName } = await getScope(client));
+    scope = await getScope(client);
   } catch (err) {
     if (err.code === 'NOT_AUTHORIZED' || err.code === 'TEAM_DELETED') {
       output.error(err.message);
@@ -84,17 +100,12 @@ const main = async (client: Client) => {
     throw err;
   }
 
-  try {
-    await run({ client, contextName });
-  } catch (err) {
-    handleError(err);
-    exit(1);
-  }
+  return await run({ client, scope });
 };
 
 export default async (client: Client) => {
   try {
-    await main(client);
+    return await main(client);
   } catch (err) {
     handleError(err);
     process.exit(1);
@@ -103,16 +114,148 @@ export default async (client: Client) => {
 
 async function run({
   client,
-  contextName,
+  scope,
 }: {
   client: Client;
-  contextName: string;
+  scope: {
+    contextName: string;
+    team: Team | null;
+    user: User;
+  };
 }) {
   const { output } = client;
+  const { contextName, team } = scope;
   const args = argv._.slice(1);
 
   const start = Date.now();
 
+  if (subcommand === 'connect') {
+    const yes = Boolean(argv['--yes']);
+    if (args.length !== 0) {
+      output.error(
+        `Invalid number of arguments. Usage: ${chalk.cyan(
+          `${getCommandName('project connect')}`
+        )}`
+      );
+      return exit(2);
+    }
+
+    let paths = [process.cwd()];
+
+    const validate = await validatePaths(client, paths);
+    if (!validate.valid) {
+      return validate.exitCode;
+    }
+    const { path } = validate;
+
+    const linkedProject = await ensureLink(
+      'project connect',
+      client,
+      path,
+      yes
+    );
+    if (typeof linkedProject === 'number') {
+      return linkedProject;
+    }
+
+    const { project, org } = linkedProject;
+    const gitProviderLink = project.link;
+
+    client.config.currentTeam = org.type === 'team' ? org.id : undefined;
+
+    // get project from .git
+    const gitConfigPath = join(path, '.git/config');
+    const gitConfig = await parseGitConfig(gitConfigPath, output);
+    if (!gitConfig) {
+      output.error(
+        `No local git repo found. Run ${chalk.cyan(
+          '`git clone <url>`'
+        )} to clone a remote Git repository first.`
+      );
+      return 1;
+    }
+    const remoteUrl = pluckRemoteUrl(gitConfig);
+    if (!remoteUrl) {
+      output.error(
+        `No remote origin URL found in your Git config. Make sure you've connected your local Git repo to a Git provider first.`
+      );
+      return 1;
+    }
+    const parsedUrl = parseRepoUrl(remoteUrl);
+    if (!parsedUrl) {
+      output.error(
+        `Failed to parse Git repo data from the following remote URL in your Git config: ${link(
+          remoteUrl
+        )}`
+      );
+      return 1;
+    }
+    const { provider, org: gitOrg, repo } = parsedUrl;
+    const repoPath = `${gitOrg}/${repo}`;
+    let connectedRepoPath;
+
+    if (!gitProviderLink) {
+      const connect = await connectGitProvider(
+        client,
+        team,
+        project.id,
+        provider,
+        repoPath
+      );
+      if (typeof connect === 'number') {
+        return connect;
+      }
+    } else {
+      const connectedProvider = gitProviderLink.type;
+      const connectedOrg = gitProviderLink.org;
+      const connectedRepo = gitProviderLink.repo;
+      connectedRepoPath = `${connectedOrg}/${connectedRepo}`;
+
+      const isSameRepo =
+        connectedProvider === provider &&
+        connectedOrg === gitOrg &&
+        connectedRepo === repo;
+      if (isSameRepo) {
+        output.log(
+          `${chalk.cyan(
+            connectedRepoPath
+          )} is already connected to your project.`
+        );
+        return 1;
+      }
+
+      const shouldReplaceRepo = await confirmRepoConnect(
+        client,
+        output,
+        yes,
+        connectedRepoPath
+      );
+      if (!shouldReplaceRepo) {
+        return 0;
+      }
+
+      await disconnectGitProvider(client, team, project.id);
+      const connect = await connectGitProvider(
+        client,
+        team,
+        project.id,
+        provider,
+        repoPath
+      );
+      if (typeof connect === 'number') {
+        return connect;
+      }
+    }
+
+    output.log(
+      `Connected ${formatProvider(provider)} repository ${chalk.cyan(
+        repoPath
+      )}!`
+    );
+
+    return 0;
+  }
+
   if (subcommand === 'ls' || subcommand === 'list') {
     if (args.length !== 0) {
       console.error(
@@ -271,7 +414,7 @@ async function run({
     return;
   }
 
-  console.error(error('Please specify a valid subcommand: ls | add | rm'));
+  output.error('Please specify a valid subcommand: ls | connect | add | rm');
   help();
   exit(2);
 }
@@ -281,6 +424,28 @@ process.on('uncaughtException', err => {
   exit(1);
 });
 
+async function confirmRepoConnect(
+  client: Client,
+  output: Output,
+  yes: boolean,
+  connectedRepoPath: string
+) {
+  let shouldReplaceProject = yes;
+  if (!shouldReplaceProject) {
+    shouldReplaceProject = await confirm(
+      client,
+      `Looks like you already have a repository connected: ${chalk.cyan(
+        connectedRepoPath
+      )}. Do you want to replace it?`,
+      true
+    );
+    if (!shouldReplaceProject) {
+      output.log(`Aborted. Repo not connected.`);
+    }
+  }
+  return shouldReplaceProject;
+}
+
 function readConfirmation(projectName: string) {
   return new Promise(resolve => {
     process.stdout.write(

packages/cli/src/types.ts

@@ -248,12 +248,34 @@ export interface ProjectEnvVariable {
   gitBranch?: string;
 }
 
+export interface DeployHook {
+  createdAt: number;
+  id: string;
+  name: string;
+  ref: string;
+  url: string;
+}
+
+export interface ProjectLinkData {
+  type: string;
+  repo: string;
+  repoId: number;
+  org?: string;
+  gitCredentialId: string;
+  productionBranch?: string | null;
+  sourceless: boolean;
+  createdAt: number;
+  updatedAt: number;
+  deployHooks?: DeployHook[];
+}
+
 export interface Project extends ProjectSettings {
   id: string;
   name: string;
   accountId: string;
   updatedAt: number;
   createdAt: number;
+  link?: ProjectLinkData;
   alias?: ProjectAliasTarget[];
   latestDeployments?: Partial<Deployment>[];
 }

packages/cli/src/util/deploy/create-git-meta.ts packages/cli/src/util/create-git-meta.ts

@@ -3,8 +3,8 @@ import { join } from 'path';
 import ini from 'ini';
 import git from 'git-last-commit';
 import { exec } from 'child_process';
-import { GitMetadata } from '../../types';
-import { Output } from '../output';
+import { GitMetadata } from '../types';
+import { Output } from './output';
 
 export function isDirty(directory: string): Promise<boolean> {
   return new Promise((resolve, reject) => {
@@ -33,21 +33,31 @@ function getLastCommit(directory: string): Promise<git.Commit> {
   });
 }
 
-export async function getRemoteUrl(
-  configPath: string,
-  output: Output
-): Promise<string | null> {
-  let gitConfig;
+export async function parseGitConfig(configPath: string, output: Output) {
   try {
-    gitConfig = ini.parse(await fs.readFile(configPath, 'utf-8'));
+    return ini.parse(await fs.readFile(configPath, 'utf-8'));
   } catch (error) {
     output.debug(`Error while parsing repo data: ${error.message}`);
   }
+}
+
+export function pluckRemoteUrl(gitConfig: {
+  [key: string]: any;
+}): string | undefined {
+  // Assuming "origin" is the remote url that the user would want to use
+  return gitConfig['remote "origin"']?.url;
+}
+
+export async function getRemoteUrl(
+  configPath: string,
+  output: Output
+): Promise<string | null> {
+  let gitConfig = await parseGitConfig(configPath, output);
   if (!gitConfig) {
     return null;
   }
 
-  const originUrl: string = gitConfig['remote "origin"']?.url;
+  const originUrl = pluckRemoteUrl(gitConfig);
   if (originUrl) {
     return originUrl;
   }

packages/cli/src/util/input/select-org.ts

@@ -1,4 +1,3 @@
-import inquirer from 'inquirer';
 import Client from '../client';
 import getUser from '../get-user';
 import getTeams from '../teams/get-teams';
@@ -43,7 +42,7 @@ export default async function selectOrg(
     return choices[defaultOrgIndex].value;
   }
 
-  const answers = await inquirer.prompt({
+  const answers = await client.prompt({
     type: 'list',
     name: 'org',
     message: question,