feat: improve supabase integrations ux (#29)

maneike · web-flow · commit 3e0970ab1b58 · 2024-11-13T13:49:12.000+01:00
diff --git a/packages/core/installMachine/installSteps/payload/install.ts b/packages/core/installMachine/installSteps/payload/install.ts
@@ -31,7 +31,7 @@ export const preparePayload = async () => {
 
   // Install Payload
   execSync(`echo y | npx create-payload-app@beta --db postgres --db-connection-string ${process.env.DB_URL}`, {
-    stdio: 'inherit',
+    stdio: ['inherit', 'ignore', 'inherit'],
   });
 
   // Payload doesn't work with Turbopack yet
diff --git a/packages/core/installMachine/installSteps/supabase/connectProject.ts b/packages/core/installMachine/installSteps/supabase/connectProject.ts
@@ -1,72 +1,146 @@
 import { exec, execSync } from 'child_process';
-import inquirer from 'inquirer';
 import { promisify } from 'util';
 import chalk from 'chalk';
-import { continueOnAnyKeypress } from '../../../utils/continueOnKeypress';
+import boxen from 'boxen';
 import { getSupabaseKeys, parseProjectsList } from './utils';
-import { logWithColoredPrefix } from '../../../utils/logWithColoredPrefix';
+import { logger } from '../../../utils/logWithColoredPrefix';
+import { getVercelTokenFromAuthFile } from '../../../utils/getVercelTokenFromAuthFile';
+import { getProjectIdFromVercelConfig } from '../../../utils/getProjectIdFromVercelConfig';
 
 const execAsync = promisify(exec);
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const connectSupabaseProject = async (projectName: string, currentDir: string) => {
   try {
-    logWithColoredPrefix('supabase', 'Getting information about newly created project...');
-    const { stdout: projectsList } = await execAsync('npx supabase projects list');
-    const projects = parseProjectsList(projectsList);
-    const newProject = projects.find((project) => project.name === projectName);
-
-    if (!newProject || !newProject.refId) {
-      throw new Error(
-        `Could not find Supabase project "${projectName}". Please ensure the project exists and you have the correct permissions.`,
-      );
-    }
+    // Get project information
+    const newProject = await logger.withSpinner('supabase', 'Getting project information...', async (spinner) => {
+      const { stdout: projectsList } = await execAsync('npx supabase projects list');
+      const projects = parseProjectsList(projectsList);
+      const project = projects.find((p) => p.name === projectName);
+
+      if (!project || !project.refId) {
+        spinner.fail('Project not found');
+        throw new Error(
+          `Could not find Supabase project "${projectName}". Please ensure the project exists and you have the correct permissions.`,
+        );
+      }
+
+      spinner.succeed('Project found!');
+      return project;
+    });
+
+    // Get API keys
+    const { anonKey, serviceRoleKey } = await logger.withSpinner(
+      'supabase',
+      'Getting project API keys...',
+      async (spinner) => {
+        const { stdout: projectAPIKeys } = await execAsync(
+          `npx supabase projects api-keys --project-ref ${newProject.refId}`,
+        );
+
+        const keys = getSupabaseKeys(projectAPIKeys);
+        if (!keys.anonKey || !keys.serviceRoleKey) {
+          spinner.fail('Failed to retrieve API keys');
+          throw new Error('Failed to retrieve Supabase API keys. Please check your project configuration.');
+        }
 
-    logWithColoredPrefix('supabase', 'Getting project keys...');
-    const { stdout: projectAPIKeys } = await execAsync(
-      `npx supabase projects api-keys --project-ref ${newProject.refId}`,
+        spinner.succeed('API keys retrieved!');
+        return keys;
+      },
     );
 
-    const { anonKey, serviceRoleKey } = getSupabaseKeys(projectAPIKeys);
+    // Link project
+    logger.log('supabase', 'Linking project...');
+    execSync(`npx supabase link --project-ref ${newProject.refId}`, {
+      stdio: 'inherit',
+    });
 
-    if (!anonKey || !serviceRoleKey) {
-      throw new Error('Failed to retrieve Supabase API keys. Please check your project configuration.');
-    }
+    // Display integration instructions
+    console.log(
+      boxen(
+        chalk.bold('Supabase Integration Setup\n\n') +
+          chalk.hex('#3ABC82')('1.') +
+          ' You will be redirected to your project dashboard\n' +
+          chalk.hex('#3ABC82')('2.') +
+          ' Connect Vercel: "Add new project connection"\n' +
+          chalk.hex('#3ABC82')('3.') +
+          ' (Optional) Connect GitHub: "Add new project connection"\n\n' +
+          chalk.dim('Tip: Keep this terminal open to track the integration status'),
+        {
+          padding: 1,
+          margin: 1,
+          borderStyle: 'round',
+          borderColor: '#3ABC82',
+        },
+      ),
+    );
 
-    logWithColoredPrefix('supabase', 'Linking project...');
-    execSync(`npx supabase link --project-ref ${newProject.refId}`, { stdio: 'inherit' });
+    // Countdown and open dashboard
+    const spinner = logger.createSpinner('supabase', 'Preparing to open dashboard');
+    spinner.start();
 
-    logWithColoredPrefix('supabase', [
-      chalk.bold('=== Instructions for integration with GitHub and Vercel ==='),
-      '\n1. You will be redirected to your project dashboard',
-      '\n2. Find the "GitHub" section and click "Connect".',
-      '\n   - Follow the prompts to connect with your GitHub repository.',
-      '\n3. Then, find the "Vercel" section and click "Connect".',
-      '\n   - Follow the prompts to connect with your Vercel project.',
-      chalk.italic('\nNOTE: These steps require manual configuration in the Supabase interface.'),
-    ]);
+    for (let i = 3; i > 0; i--) {
+      spinner.text = `Opening dashboard in ${chalk.hex('#3ABC82')(i)}...`;
+      await delay(1000);
+    }
 
-    await continueOnAnyKeypress('When you are ready to be redirected to the Supabase page press any key');
+    spinner.text = 'Opening dashboard in your browser...';
     await execAsync(`open https://supabase.com/dashboard/project/${newProject.refId}/settings/integrations`);
+    spinner.succeed('Dashboard opened.');
 
-    const { isIntegrationReady } = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'isIntegrationReady',
-        message: 'Have you completed the GitHub and Vercel integration setup?',
-        default: false,
-      },
-    ]);
+    // Check Vercel integration
+    await logger.withSpinner('vercel', 'Checking integration...', async (spinner) => {
+      const token = await getVercelTokenFromAuthFile();
+      const vercelProjectId = await getProjectIdFromVercelConfig();
 
-    if (!isIntegrationReady) {
-      logWithColoredPrefix(
-        'supabase',
-        `You can access your project dashboard at: https://supabase.com/dashboard/project/${newProject.refId}/settings/integrations`,
-      ),
-        process.exit(1);
-    }
+      let attempts = 0;
+      const maxAttempts = 30;
+      const interval = 5000;
+
+      while (attempts < maxAttempts) {
+        try {
+          const response = await fetch(`https://api.vercel.com/v9/projects/${vercelProjectId}/env`, {
+            headers: { Authorization: `Bearer ${token}` },
+            method: 'get',
+          });
+
+          const envVarsSet = await response.json();
+          const supabaseUrl = envVarsSet.envs.find((env: { key: string }) => env.key === 'SUPABASE_URL')?.value;
+
+          if (supabaseUrl) {
+            spinner.succeed('Integration complete!');
+            return true;
+          }
+
+          attempts++;
+          spinner.text = `Checking integration status ${chalk.hex('#3ABC82')(`[${attempts}/${maxAttempts}]`)}`;
+          await delay(interval);
+        } catch (error) {
+          spinner.fail('Failed to check Vercel integration status');
+          throw error;
+        }
+      }
+
+      // Timeout reached
+      spinner.warn('Integration check timed out');
+      console.log(
+        boxen(
+          chalk.yellow('Integration Status Unknown\n\n') +
+            'You can manually verify the integration at:\n' +
+            chalk.hex('#3ABC82')(`https://supabase.com/dashboard/project/${newProject.refId}/settings/integrations`),
+          {
+            padding: 1,
+            margin: 1,
+            borderStyle: 'round',
+            borderColor: 'yellow',
+          },
+        ),
+      );
+
+      return false;
+    });
   } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
-    console.error('Error connecting Supabase project:', errorMessage);
+    logger.log('error', error instanceof Error ? error.message : 'An unknown error occurred');
     throw error;
   }
 };
diff --git a/packages/core/installMachine/installSteps/vercel/updateProjectSettings.ts b/packages/core/installMachine/installSteps/vercel/updateProjectSettings.ts
@@ -1,40 +1,11 @@
-import fs from 'fs/promises';
-import path from 'path';
-import { getGlobalPathConfig } from './utils/getGlobalPathConfig';
 import { logWithColoredPrefix } from '../../../utils/logWithColoredPrefix';
-
-const getTokenFromAuthFile = async (filePath: string): Promise<string | null> => {
-  try {
-    const data = await fs.readFile(filePath, 'utf-8');
-    const jsonData = JSON.parse(data);
-    return jsonData.token || null;
-  } catch (error) {
-    console.error('Failed to read or parse auth.json:', `\n${error}`);
-    process.exit(1);
-  }
-};
-
-const getProjectIdFromVercelConfig = async (): Promise<string | null> => {
-  const data = await fs.readFile('.vercel/project.json', 'utf-8');
-  try {
-    const jsonData = JSON.parse(data);
-    return jsonData.projectId;
-  } catch (error) {
-    console.error('Failed to read or parse vercel.json:', `\n${error}`);
-    process.exit(1);
-  }
-};
+import { getProjectIdFromVercelConfig } from '../../../utils/getProjectIdFromVercelConfig';
+import { getVercelTokenFromAuthFile } from '../../../utils/getVercelTokenFromAuthFile';
 
 export const updateVercelProjectSettings = async () => {
   logWithColoredPrefix('vercel', 'Changing project settings...');
-  const globalPath = await getGlobalPathConfig();
-  if (!globalPath) {
-    console.error('Global path not found. Cannot update project properties.');
-    process.exit(1);
-  }
-  const filePath = path.join(globalPath, 'auth.json');
 
-  const token = await getTokenFromAuthFile(filePath);
+  const token = await getVercelTokenFromAuthFile();
   if (!token) {
     console.error('Token not found. Cannot update project properties.');
     process.exit(1);
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -8,11 +8,13 @@
     "dev": "tsc -w"
   },
   "dependencies": {
+    "boxen": "^8.0.1",
     "chalk": "^5.3.0",
     "fs-extra": "^11.2.0",
     "gradient-string": "^3.0.0",
-    "xstate": "^5.18.2",
-    "inquirer": "^10.2.2"
+    "inquirer": "^10.2.2",
+    "ora": "^8.1.1",
+    "xstate": "^5.18.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
diff --git a/packages/core/utils/continueOnKeypress.ts b/packages/core/utils/continueOnKeypress.ts
diff --git a/packages/core/utils/getGlobalPathConfig.ts b/packages/core/utils/getGlobalPathConfig.ts
@@ -0,0 +1,53 @@
+import { homedir } from 'os';
+import fs from 'fs';
+import path from 'path';
+
+const getXDGPaths = (appName: string) => {
+  const homeDir = homedir();
+
+  if (process.platform === 'win32') {
+    // Windows paths, typically within %AppData%
+    return {
+      dataDirs: [path.join(process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming'), appName)],
+      configDirs: [path.join(process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming'), appName)],
+      cacheDir: path.join(process.env.LOCALAPPDATA || path.join(homeDir, 'AppData', 'Local'), appName, 'Cache'),
+    };
+  } else if (process.platform === 'darwin') {
+    // macOS paths, typically in ~/Library/Application Support
+    return {
+      dataDirs: [path.join(homeDir, 'Library', 'Application Support', appName)],
+      configDirs: [path.join(homeDir, 'Library', 'Application Support', appName)],
+      cacheDir: path.join(homeDir, 'Library', 'Caches', appName),
+    };
+  } else {
+    // Linux/Unix paths, following the XDG Base Directory Specification
+    return {
+      dataDirs: [process.env.XDG_DATA_HOME || path.join(homeDir, '.local', 'share', appName)],
+      configDirs: [process.env.XDG_CONFIG_HOME || path.join(homeDir, '.config', appName)],
+      cacheDir: process.env.XDG_CACHE_HOME || path.join(homeDir, '.cache', appName),
+    };
+  }
+};
+
+// Returns whether a directory exists
+const isDirectory = (path: string): boolean => {
+  try {
+    return fs.lstatSync(path).isDirectory();
+  } catch (_) {
+    // We don't care which kind of error occured, it isn't a directory anyway.
+    return false;
+  }
+};
+
+// Returns in which directory the config should be present
+export const getGlobalPathConfig = async (appName: string): Promise<string> => {
+  const vercelDirectories = getXDGPaths(appName).dataDirs;
+
+  const possibleConfigPaths = [
+    ...vercelDirectories, // latest vercel directory
+    path.join(homedir(), '.now'), // legacy config in user's home directory
+    ...getXDGPaths('now').dataDirs, // legacy XDG directory
+  ];
+
+  return possibleConfigPaths.find((configPath) => isDirectory(configPath)) || vercelDirectories[0];
+};
diff --git a/packages/core/utils/getProjectIdFromVercelConfig.ts b/packages/core/utils/getProjectIdFromVercelConfig.ts
@@ -0,0 +1,12 @@
+import fs from 'fs/promises';
+
+export const getProjectIdFromVercelConfig = async (): Promise<string | null> => {
+  const data = await fs.readFile('.vercel/project.json', 'utf-8');
+  try {
+    const jsonData = JSON.parse(data);
+    return jsonData.projectId;
+  } catch (error) {
+    console.error('Failed to read or parse vercel.json:', `\n${error}`);
+    process.exit(1);
+  }
+};
diff --git a/packages/core/utils/getVercelTokenFromAuthFile.ts b/packages/core/utils/getVercelTokenFromAuthFile.ts
@@ -0,0 +1,22 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { getGlobalPathConfig } from './getGlobalPathConfig';
+
+export const getVercelTokenFromAuthFile = async (): Promise<string | null> => {
+  const globalPath = await getGlobalPathConfig('com.vercel.cli');
+  if (!globalPath) {
+    console.error('Global path not found. Cannot update project properties.');
+    process.exit(1);
+  }
+
+  const filePath = path.join(globalPath, 'auth.json');
+
+  try {
+    const data = await fs.readFile(filePath, 'utf-8');
+    const jsonData = JSON.parse(data);
+    return jsonData.token || null;
+  } catch (error) {
+    console.error('Failed to read or parse auth.json:', `\n${error}`);
+    process.exit(1);
+  }
+};
diff --git a/packages/core/utils/logWithColoredPrefix.ts b/packages/core/utils/logWithColoredPrefix.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
