Interactive pages publish prompts (#891)

* Store account_id and project_name in config cache

* Interactive prompts for 'wrangler pages publish' and related commands

* Use logger instead of console

* Fix grep for current git branch

* Truncate file hashing to 32 chars

* Add changeset for interactive prompts

* Fix tests for 'wrangler pages publish'

.changeset/ten-rules-destroy.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+feat: Adds interactive prompts for the 'wrangler pages publish' and related commands.
+
+Additionally, those commands now read from `node_modules/.cache/wrangler/pages.json` to persist users' account IDs and project names.

packages/wrangler/src/__tests__/config-cache.test.ts

@@ -1,31 +1,36 @@
 import { getConfigCache, saveToConfigCache } from "../config-cache";
 import { runInTempDir } from "./helpers/run-in-tmp";
 
+interface PagesConfigCache {
+  account_id: string;
+  pages_project_name: string;
+}
+
 describe("config cache", () => {
   runInTempDir();
 
   const pagesConfigCacheFilename = "pages-config-cache.json";
 
   it("should return an empty config if no file exists", () => {
-    expect(getConfigCache(pagesConfigCacheFilename)).toMatchInlineSnapshot(
-      `Object {}`
-    );
+    expect(
+      getConfigCache<PagesConfigCache>(pagesConfigCacheFilename)
+    ).toMatchInlineSnapshot(`Object {}`);
   });
 
   it("should read and write values without overriding old ones", () => {
-    saveToConfigCache(pagesConfigCacheFilename, {
+    saveToConfigCache<PagesConfigCache>(pagesConfigCacheFilename, {
       account_id: "some-account-id",
       pages_project_name: "foo",
     });
-    expect(getConfigCache(pagesConfigCacheFilename).account_id).toEqual(
-      "some-account-id"
-    );
+    expect(
+      getConfigCache<PagesConfigCache>(pagesConfigCacheFilename).account_id
+    ).toEqual("some-account-id");
 
-    saveToConfigCache(pagesConfigCacheFilename, {
+    saveToConfigCache<PagesConfigCache>(pagesConfigCacheFilename, {
       pages_project_name: "bar",
     });
-    expect(getConfigCache(pagesConfigCacheFilename).account_id).toEqual(
-      "some-account-id"
-    );
+    expect(
+      getConfigCache<PagesConfigCache>(pagesConfigCacheFilename).account_id
+    ).toEqual("some-account-id");
   });
 });

packages/wrangler/src/__tests__/pages.test.ts

@@ -155,32 +155,7 @@ describe("pages", () => {
       unsetAllMocks();
     });
 
-    it("should create a project with a the default production branch", async () => {
-      setMockResponse(
-        "/accounts/:accountId/pages/projects",
-        ([_url, accountId], init) => {
-          expect(accountId).toEqual("some-account-id");
-          expect(init.method).toEqual("POST");
-          const body = JSON.parse(init.body as string);
-          expect(body).toEqual({
-            name: "a-new-project",
-            production_branch: "production",
-          });
-          return {
-            name: "a-new-project",
-            subdomain: "a-new-project.pages.dev",
-            production_branch: "production",
-          };
-        }
-      );
-      await runWrangler("pages project create a-new-project");
-      expect(std.out).toMatchInlineSnapshot(`
-        "✨ Successfully created the 'a-new-project' project. It will be available at https://a-new-project.pages.dev/ once you create your first deployment.
-        To deploy a folder of assets, run 'wrangler pages publish [directory]'."
-      `);
-    });
-
-    it("should create a project with a the default production branch", async () => {
+    it("should create a project with a production branch", async () => {
       setMockResponse(
         "/accounts/:accountId/pages/projects",
         ([_url, accountId], init) => {
@@ -250,7 +225,7 @@ describe("pages", () => {
       ];
 
       const requests = mockListRequest(deployments);
-      await runWrangler("pages deployment list --project=images");
+      await runWrangler("pages deployment list --project-name=images");
 
       expect(requests.count).toBe(1);
     });
@@ -292,7 +267,7 @@ describe("pages", () => {
               --legacy-env  Use legacy environments  [boolean]
 
         Options:
-              --project         The name of the project you want to list deployments for  [string]
+              --project-name    The name of the project you want to list deployments for  [string]
               --branch          The branch of the project you want to list deployments for  [string]
               --commit-hash     The branch of the project you want to list deployments for  [string]
               --commit-message  The branch of the project you want to list deployments for  [string]
@@ -316,7 +291,7 @@ describe("pages", () => {
           expect(logoPNGFile.name).toEqual("logo.png");
 
           return {
-            id: "2082190357cfd3617ccfe04f340c6247d4b47484797840635feb491447bcd81c",
+            id: "2082190357cfd3617ccfe04f340c6247",
           };
         }
       );
@@ -330,7 +305,7 @@ describe("pages", () => {
           const manifest = JSON.parse(body.get("manifest") as string);
           expect(manifest).toMatchInlineSnapshot(`
             Object {
-              "logo.png": "2082190357cfd3617ccfe04f340c6247d4b47484797840635feb491447bcd81c",
+              "logo.png": "2082190357cfd3617ccfe04f340c6247",
             }
           `);
 
@@ -340,7 +315,7 @@ describe("pages", () => {
         }
       );
 
-      await runWrangler("pages publish . --project=foo");
+      await runWrangler("pages publish . --project-name=foo");
 
       // TODO: Unmounting somehow loses this output
 

packages/wrangler/src/config-cache.ts

@@ -1,4 +1,4 @@
-import { mkdirSync, readFileSync, writeFileSync } from "fs";
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
 import { dirname, join } from "path";
 
 let cacheMessageShown = false;
@@ -14,9 +14,7 @@ const showCacheMessage = () => {
   }
 };
 
-export const getConfigCache = <T extends Record<string, unknown>>(
-  fileName: string
-): Partial<T> => {
+export const getConfigCache = <T>(fileName: string): Partial<T> => {
   try {
     const configCacheLocation = join(cacheFolder, fileName);
     const configCache = JSON.parse(readFileSync(configCacheLocation, "utf-8"));
@@ -27,7 +25,7 @@ export const getConfigCache = <T extends Record<string, unknown>>(
   }
 };
 
-export const saveToConfigCache = <T extends Record<string, unknown>>(
+export const saveToConfigCache = <T>(
   fileName: string,
   newValues: Partial<T>
 ) => {
@@ -41,3 +39,7 @@ export const saveToConfigCache = <T extends Record<string, unknown>>(
   );
   showCacheMessage();
 };
+
+export const purgeConfigCaches = () => {
+  rmSync(cacheFolder, { recursive: true, force: true });
+};

packages/wrangler/src/dialogs.tsx

@@ -43,12 +43,13 @@ export function confirm(text: string): Promise<boolean> {
 
 type PromptProps = {
   text: string;
+  defaultValue?: string;
   type?: "text" | "password";
   onSubmit: (text: string) => void;
 };
 
 function Prompt(props: PromptProps) {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(props.defaultValue || "");
 
   return (
     <Box>
@@ -65,11 +66,16 @@ function Prompt(props: PromptProps) {
   );
 }
 
-export async function prompt(text: string, type: "text" | "password" = "text") {
+export async function prompt(
+  text: string,
+  type: "text" | "password" = "text",
+  defaultValue?: string
+): Promise<string> {
   return new Promise((resolve) => {
     const { unmount } = render(
       <Prompt
         text={text}
+        defaultValue={defaultValue}
         type={type}
         onSubmit={(inputText) => {
           unmount();