address feedback

Author: cryptodev-2s

jest.config.cjs

@@ -59,7 +59,7 @@ module.exports = {
     '/node_modules/',
     '/src/cli.ts',
     '/src/command-line-arguments.ts',
-    '/src/interactive-ui.ts',
+    '/src/ui.ts',
     '/src/dirname.ts',
   ],
 

src/main.test.ts

@@ -3,17 +3,17 @@ import { buildMockProject } from '../tests/unit/helpers.js';
 import { main } from './main.js';
 import * as initialParametersModule from './initial-parameters.js';
 import * as monorepoWorkflowOperations from './monorepo-workflow-operations.js';
-import * as interactiveUi from './interactive-ui.js';
+import * as ui from './ui.js';
 
 jest.mock('./initial-parameters');
 jest.mock('./monorepo-workflow-operations');
-jest.mock('./interactive-ui');
+jest.mock('./ui');
 jest.mock('./dirname', () => ({
   getCurrentDirectoryPath: jest.fn().mockReturnValue('/path/to/somewhere'),
 }));
 
 describe('main', () => {
-  it('executes the monorepo workflow if the project is a monorepo', async () => {
+  it('executes the CLI monorepo workflow if the project is a monorepo and interactive is false', async () => {
     const project = buildMockProject({ isMonorepo: true });
     const stdout = fs.createWriteStream('/dev/null');
     const stderr = fs.createWriteStream('/dev/null');
@@ -50,7 +50,7 @@ describe('main', () => {
     });
   });
 
-  it('executes the interactive UI workflow if the project is a monorepo', async () => {
+  it('executes the interactive UI monorepo workflow if the project is a monorepo and interactive is true', async () => {
     const project = buildMockProject({ isMonorepo: true });
     const stdout = fs.createWriteStream('/dev/null');
     const stderr = fs.createWriteStream('/dev/null');
@@ -65,9 +65,7 @@ describe('main', () => {
         interactive: true,
         port: 3000,
       });
-    const startInteractiveUISpy = jest
-      .spyOn(interactiveUi, 'startInteractiveUI')
-      .mockResolvedValue();
+    const startUISpy = jest.spyOn(ui, 'startUI').mockResolvedValue();
 
     await main({
       argv: [],
@@ -76,7 +74,7 @@ describe('main', () => {
       stderr,
     });
 
-    expect(startInteractiveUISpy).toHaveBeenCalledWith({
+    expect(startUISpy).toHaveBeenCalledWith({
       project,
       releaseType: 'backport',
       defaultBranch: 'main',

src/main.ts

@@ -1,7 +1,7 @@
 import type { WriteStream } from 'fs';
 import { determineInitialParameters } from './initial-parameters.js';
 import { followMonorepoWorkflow } from './monorepo-workflow-operations.js';
-import { startInteractiveUI } from './interactive-ui.js';
+import { startUI } from './ui.js';
 
 /**
  * The main function for this tool. Designed to not access `process.argv`,
@@ -42,8 +42,8 @@ export async function main({
     );
 
     if (interactive) {
-      stdout.write(`Starting interactive UI on port ${port}...\n`);
-      await startInteractiveUI({
+      stdout.write(`Starting UI on port ${port}...\n`);
+      await startUI({
         project,
         releaseType,
         defaultBranch,

src/interactive-ui.ts renamed to src/ui.ts

@@ -28,7 +28,7 @@ import { getCurrentDirectoryPath } from './dirname.js';
 
 const UI_BUILD_DIR = join(getCurrentDirectoryPath(), 'ui');
 
-type InteractiveUIOptions = {
+type UIOptions = {
   project: Project;
   releaseType: 'ordinary' | 'backport';
   defaultBranch: string;
@@ -38,24 +38,24 @@ type InteractiveUIOptions = {
 };
 
 /**
- * Starts the interactive UI for the release process.
+ * Starts the UI for the release process.
  *
- * @param options - The options for the interactive UI.
+ * @param options - The options for the UI.
  * @param options.project - The project object.
  * @param options.releaseType - The type of release.
  * @param options.defaultBranch - The default branch name.
  * @param options.port - The port number for the server.
  * @param options.stdout - The stdout stream.
  * @param options.stderr - The stderr stream.
  */
-export async function startInteractiveUI({
+export async function startUI({
   project,
   releaseType,
   defaultBranch,
   port,
   stdout,
   stderr,
-}: InteractiveUIOptions): Promise<void> {
+}: UIOptions): Promise<void> {
   const { version: newReleaseVersion, firstRun } = await createReleaseBranch({
     project,
     releaseType,
@@ -69,6 +69,59 @@ export async function startInteractiveUI({
     );
   }
 
+  const app = createApp({
+    project,
+    defaultBranch,
+    stderr,
+    version: newReleaseVersion,
+    closeServer: () => {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      server.close();
+      stdout.write('Release process completed. Server shutdown.\n');
+    },
+  });
+
+  const server = app.listen(port, async () => {
+    const url = `http://localhost:${port}`;
+    stdout.write(`UI server running at ${url}\n`);
+  });
+
+  return new Promise((resolve, reject) => {
+    server.on('error', (error) => {
+      stderr.write(`Failed to start server: ${error}\n`);
+      reject(error);
+    });
+
+    server.on('close', () => {
+      resolve();
+    });
+  });
+}
+
+/**
+ * Creates an Express application for the UI server.
+ *
+ * @param options - The options for creating the app.
+ * @param options.project - The project object.
+ * @param options.defaultBranch - The default branch name.
+ * @param options.stderr - The stderr stream.
+ * @param options.version - The release version.
+ * @param options.closeServer - The function to close the server.
+ * @returns The Express application.
+ */
+function createApp({
+  project,
+  defaultBranch,
+  stderr,
+  version,
+  closeServer,
+}: {
+  project: Project;
+  defaultBranch: string;
+  stderr: Pick<WriteStream, 'write'>;
+  version: string;
+  closeServer: () => void;
+}): express.Application {
   const app = express();
 
   app.use(express.static(UI_BUILD_DIR));
@@ -223,22 +276,20 @@ export async function startInteractiveUI({
         const releasePlan = await planRelease({
           project,
           releaseSpecificationPackages,
-          newReleaseVersion,
+          newReleaseVersion: version,
         });
         await executeReleasePlan(project, releasePlan, stderr);
         await fixConstraints(project.directoryPath);
         await updateYarnLockfile(project.directoryPath);
         await deduplicateDependencies(project.directoryPath);
         await commitAllChanges(
           project.directoryPath,
-          `Update Release ${newReleaseVersion}`,
+          `Update Release ${version}`,
         );
 
         res.json({ status: 'success' });
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        server.close(() => {
-          stdout.write('Release process completed. Server shutdown.\n');
-        });
+
+        closeServer();
       } catch (error) {
         stderr.write(`Release error: ${error}\n`);
         res.status(400).send('Invalid request');
@@ -250,14 +301,5 @@ export async function startInteractiveUI({
     res.sendFile(join(UI_BUILD_DIR, 'index.html'));
   });
 
-  const server = app.listen(port, () => {
-    stdout.write(`Interactive UI server running at http://localhost:${port}\n`);
-  });
-
-  return new Promise((_, reject) => {
-    server.on('error', (error) => {
-      stderr.write(`Failed to start server: ${error}\n`);
-      reject(error);
-    });
-  });
+  return app;
 }

src/ui/App.tsx

@@ -6,7 +6,6 @@ import { PackageItem } from './PackageItem.js';
 import { Package, ReleaseType } from './types.js';
 
 type SubmitButtonProps = {
-  isSubmitting: boolean;
   selections: Record<string, string>;
   packageDependencyErrors: Record<
     string,
@@ -16,13 +15,11 @@ type SubmitButtonProps = {
 };
 
 function SubmitButton({
-  isSubmitting,
   selections,
   packageDependencyErrors,
   onSubmit,
 }: SubmitButtonProps) {
   const isDisabled =
-    isSubmitting ||
     Object.keys(selections).length === 0 ||
     Object.keys(packageDependencyErrors).length > 0 ||
     Object.values(selections).every((value) => value === 'intentionally-skip');
@@ -37,9 +34,7 @@ function SubmitButton({
           : 'bg-blue-500 hover:bg-blue-600'
       } text-white`}
     >
-      {isSubmitting
-        ? 'Processing Release (This may take a few minutes)...'
-        : 'Submit Release Selections'}
+      Create Release Branch
     </button>
   );
 }
@@ -75,7 +70,7 @@ function App() {
     fetch('/api/packages')
       .then((res) => {
         if (!res.ok) {
-          throw new Error('Failed to fetch packages');
+          throw new Error(`Received ${res.status}`);
         }
         return res.json();
       })
@@ -172,19 +167,18 @@ function App() {
     packageName: string,
     value: ReleaseType | '',
   ): void => {
-    setSelections((prev) => {
-      if (value === '') {
-        const { [packageName]: _, ...rest } = prev;
-        const { [packageName]: __, ...remainingErrors } =
-          packageDependencyErrors;
-        setPackageDependencyErrors(remainingErrors);
-        return rest;
-      }
-      return {
-        ...prev,
+    if (value === '') {
+      const { [packageName]: _, ...rest } = selections;
+      setSelections(rest);
+
+      const { [packageName]: __, ...remainingErrors } = packageDependencyErrors;
+      setPackageDependencyErrors(remainingErrors);
+    } else {
+      setSelections({
+        ...selections,
         [packageName]: value,
-      };
-    });
+      });
+    }
   };
 
   const handleSubmit = async (): Promise<void> => {
@@ -279,10 +273,10 @@ function App() {
     return (
       <div className="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50">
         <div className="text-center p-8">
-          <h2 className="text-2xl font-bold mb-4">Processing Release</h2>
+          <h2 className="text-2xl font-bold mb-4">Create Release Branch</h2>
           <p className="mb-6">
-            Please wait while we process your release. This may take a few
-            minutes...
+            Please wait while we create the release branch with your selections.
+            This may take a few minutes...
           </p>
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
         </div>
@@ -294,24 +288,18 @@ function App() {
     return (
       <div className="fixed inset-0 bg-white flex items-center justify-center">
         <div className="text-center p-8">
-          <h2 className="text-2xl font-bold mb-4">Release Successful!</h2>
+          <h2 className="text-2xl font-bold mb-4">
+            Release Branch Successfully Created!
+          </h2>
           <p className="mb-6">You can now close this window.</p>
-          <button
-            onClick={() => window.close()}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-          >
-            Close Window
-          </button>
         </div>
       </div>
     );
   }
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">
-        Create Release Branch Interactive UI
-      </h1>
+      <h1 className="text-3xl font-bold mb-6">Create New Core Release</h1>
 
       {selectedPackages.size > 0 && (
         <div className="mb-4 p-4 bg-gray-100 rounded">
@@ -353,7 +341,6 @@ function App() {
 
       {packages.length > 0 && (
         <SubmitButton
-          isSubmitting={isSubmitting}
           selections={selections}
           packageDependencyErrors={packageDependencyErrors}
           onSubmit={handleSubmit}

src/ui/PackageItem.tsx

@@ -47,7 +47,7 @@ export function PackageItem({
       id={`package-${pkg.name}`}
       className={`border p-4 rounded-lg ${
         selections[pkg.name] && selections[pkg.name] !== 'intentionally-skip'
-          ? 'border-gray-500'
+          ? 'border-2'
           : 'border-gray-200'
       } ${
         packageDependencyErrors[pkg.name] &&

src/ui/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Create Release Branch Interactive UI</title>
+    <title>Create New Core Release</title>
     <link
       rel="icon"
       href="https://metamask.github.io/test-dapp/metamask-fox.svg"
@@ -20,10 +20,7 @@
         }
       }
     </script>
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
   </head>
   <body>
     <div id="root"></div>