feat(vscode): show progress indicator on new commands (#784)

Author: alestiago

extensions/vscode/src/commands/new-middleware.ts

@@ -1,6 +1,6 @@
 const cp = require("child_process");
 
-import { Uri, window, OpenDialogOptions } from "vscode";
+import { Uri, window, OpenDialogOptions, ProgressOptions } from "vscode";
 import { nearestDartFrogProject, normalizeRoutePath } from "../utils";
 
 /**
@@ -45,7 +45,13 @@ export const newMiddleware = async (uri: Uri | undefined): Promise<void> => {
 
   const routePath = normalizeRoutePath(selectedUri, dartFrogProjectPath);
 
-  executeDartFrogNewMiddlewareCommand(routePath, dartFrogProjectPath);
+  const options: ProgressOptions = {
+    location: 15,
+    title: `Creating '${routePath}' middleware...`,
+  };
+  window.withProgress(options, async function () {
+    executeDartFrogNewMiddlewareCommand(routePath, dartFrogProjectPath);
+  });
 };
 
 /**

extensions/vscode/src/commands/new-route.ts

@@ -1,6 +1,12 @@
 const cp = require("child_process");
 
-import { InputBoxOptions, Uri, window, OpenDialogOptions } from "vscode";
+import {
+  InputBoxOptions,
+  Uri,
+  window,
+  OpenDialogOptions,
+  ProgressOptions,
+} from "vscode";
 import { nearestDartFrogProject, normalizeRoutePath } from "../utils";
 
 /**
@@ -55,7 +61,13 @@ export const newRoute = async (uri: Uri | undefined): Promise<void> => {
     return;
   }
 
-  executeDartFrogNewRouteCommand(routePath, dartFrogProjectPath);
+  const options: ProgressOptions = {
+    location: 15,
+    title: `Creating '${routePath}' route...`,
+  };
+  window.withProgress(options, async function () {
+    executeDartFrogNewRouteCommand(routePath, dartFrogProjectPath);
+  });
 };
 
 /**

extensions/vscode/src/test/suite/commands/new-middleware.test.ts

@@ -18,6 +18,7 @@ suite("new-middleware command", () => {
       window: {
         showErrorMessage: sinon.stub(),
         showOpenDialog: sinon.stub(),
+        withProgress: sinon.stub(),
       },
     };
     childProcessStub = {
@@ -120,6 +121,22 @@ suite("new-middleware command", () => {
     }
   );
 
+  test("shows progess on middleware creation", async () => {
+    const routePath = "food/pizza";
+    const selectedUri = {
+      fsPath: `${validUri.fsPath}${routePath}`,
+    };
+    utilsStub.nearestDartFrogProject.returns(selectedUri);
+    utilsStub.normalizeRoutePath.returns(routePath);
+
+    await command.newMiddleware(validUri);
+
+    sinon.assert.calledOnceWithMatch(vscodeStub.window.withProgress, {
+      location: 15,
+      title: `Creating '${routePath}' middleware...`,
+    });
+  });
+
   suite("runs `dart_frog new middleware` command with route", () => {
     test("successfully with non-index route name", async () => {
       const selectedUri = {
@@ -128,6 +145,9 @@ suite("new-middleware command", () => {
       utilsStub.normalizeRoutePath.returns("food");
 
       await command.newMiddleware(validUri);
+      const progressFunction =
+        vscodeStub.window.withProgress.getCall(0).args[1];
+      await progressFunction();
 
       sinon.assert.calledWith(
         childProcessStub.exec,
@@ -143,6 +163,9 @@ suite("new-middleware command", () => {
       utilsStub.normalizeRoutePath.returns(`food/pizza`);
 
       await command.newMiddleware(selectedUri);
+      const progressFunction =
+        vscodeStub.window.withProgress.getCall(0).args[1];
+      await progressFunction();
 
       sinon.assert.calledWith(
         childProcessStub.exec,
@@ -158,6 +181,9 @@ suite("new-middleware command", () => {
       utilsStub.normalizeRoutePath.returns("/");
 
       await command.newMiddleware(validUri);
+      const progressFunction =
+        vscodeStub.window.withProgress.getCall(0).args[1];
+      await progressFunction();
 
       sinon.assert.calledWith(
         childProcessStub.exec,
@@ -173,6 +199,9 @@ suite("new-middleware command", () => {
       utilsStub.normalizeRoutePath.returns("food/italian");
 
       await command.newMiddleware(selectedUri);
+      const progressFunction =
+        vscodeStub.window.withProgress.getCall(0).args[1];
+      await progressFunction();
 
       sinon.assert.calledWith(
         childProcessStub.exec,
@@ -189,6 +218,8 @@ suite("new-middleware command", () => {
     utilsStub.normalizeRoutePath.returns("/");
 
     await command.newMiddleware(validUri);
+    const progressFunction = vscodeStub.window.withProgress.getCall(0).args[1];
+    await progressFunction();
 
     sinon.assert.calledWith(vscodeStub.window.showErrorMessage, error.message);
   });

extensions/vscode/src/test/suite/commands/new-route.test.ts

@@ -20,6 +20,7 @@ suite("new-route command", () => {
         showErrorMessage: sinon.stub(),
         showInputBox: sinon.stub(),
         showOpenDialog: sinon.stub(),
+        withProgress: sinon.stub(),
       },
     };
     childProcessStub = {
@@ -201,12 +202,27 @@ suite("new-route command", () => {
     }
   );
 
+  test("shows progess on route creation", async () => {
+    utilsStub.normalizeRoutePath.returns("/");
+    const routePath = "pizza";
+    vscodeStub.window.showInputBox.returns(routePath);
+
+    await command.newRoute(validUri);
+
+    sinon.assert.calledOnceWithMatch(vscodeStub.window.withProgress, {
+      location: 15,
+      title: `Creating '${routePath}' route...`,
+    });
+  });
+
   test("runs `dart_frog new route` command with prompted route successfully", async () => {
     utilsStub.normalizeRoutePath.returns("/");
     const routePath = "pizza";
     vscodeStub.window.showInputBox.returns(routePath);
 
     await command.newRoute(validUri);
+    const progressFunction = vscodeStub.window.withProgress.getCall(0).args[1];
+    await progressFunction();
 
     sinon.assert.calledWith(
       childProcessStub.exec,
@@ -223,6 +239,8 @@ suite("new-route command", () => {
     childProcessStub.exec.yields(error);
 
     await command.newRoute(validUri);
+    const progressFunction = vscodeStub.window.withProgress.getCall(0).args[1];
+    await progressFunction();
 
     sinon.assert.calledWith(vscodeStub.window.showErrorMessage, error.message);
   });