@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/commands/hydrogen/link.js

@@ -1,24 +1,22 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { basename } from '@shopify/cli-kit/node/path';
-import { renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderTextPrompt, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { renderSuccess, renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderTextPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { commonFlags } from '../../lib/flags.js';
-import { getHydrogenShop } from '../../lib/shop.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
+import { setStorefront } from '../../lib/shopify-config.js';
 import { createStorefront } from '../../lib/graphql/admin/create-storefront.js';
 import { waitForJob } from '../../lib/graphql/admin/fetch-job.js';
-import { getConfig, setStorefront } from '../../lib/shopify-config.js';
-import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
 import { titleize } from '../../lib/string.js';
 import { getCliCommand } from '../../lib/shell.js';
-import { renderUserErrors, renderError } from '../../lib/user-errors.js';
+import { login } from '../../lib/auth.js';
 
 class Link extends Command {
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
   static flags = {
     force: commonFlags.force,
     path: commonFlags.path,
-    shop: commonFlags.shop,
     storefront: Flags.string({
       description: `The name of a Hydrogen Storefront (e.g. "Jane's Apparel")`,
       env: "SHOPIFY_HYDROGEN_STOREFRONT"
@@ -26,35 +24,54 @@ class Link extends Command {
   };
   async run() {
     const { flags } = await this.parse(Link);
-    await linkStorefront(flags);
+    await runLink(flags);
   }
 }
-const CREATE_NEW_STOREFRONT_ID = "NEW_STOREFRONT";
-async function linkStorefront({
+async function runLink({
   force,
-  path,
-  shop: flagShop,
-  storefront: flagStorefront,
-  silent = false
+  path: root = process.cwd(),
+  storefront: flagStorefront
 }) {
-  const shop = await getHydrogenShop({ path, shop: flagShop });
-  const { storefront: configStorefront } = await getConfig(path ?? process.cwd());
-  if (configStorefront && !force) {
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(root),
+    getCliCommand()
+  ]);
+  const linkedStore = await linkStorefront(root, session, config, {
+    force,
+    flagStorefront,
+    cliCommand
+  });
+  if (!linkedStore)
+    return;
+  renderSuccess({
+    body: [{ userInput: linkedStore.title }, "is now linked"],
+    nextSteps: [
+      [
+        "Run",
+        { command: `${cliCommand} dev` },
+        "to start your local development server and start building"
+      ]
+    ]
+  });
+}
+async function linkStorefront(root, session, config, {
+  force = false,
+  flagStorefront,
+  cliCommand
+}) {
+  if (!config.shop) {
+    throw new AbortError("No shop found in local config, login first.");
+  }
+  if (config.storefront?.id && !force) {
     const overwriteLink = await renderConfirmationPrompt({
-      message: `Your project is currently linked to ${configStorefront.title}. Do you want to link to a different Hydrogen storefront on Shopify?`
+      message: `Your project is currently linked to ${config.storefront.title}. Do you want to link to a different Hydrogen storefront on Shopify?`
     });
     if (!overwriteLink) {
       return;
     }
   }
-  const { storefronts, adminSession } = await getStorefronts(shop);
-  if (storefronts.length === 0) {
-    logMissingStorefronts(adminSession);
-    return;
-  }
+  const storefronts = await getStorefronts(session);
   let selectedStorefront;
-  let selectCreateNewStorefront = false;
-  const cliCommand = await getCliCommand();
   if (flagStorefront) {
     selectedStorefront = storefronts.find(
       ({ title }) => title === flagStorefront
@@ -66,7 +83,7 @@ async function linkStorefront({
           "There's no storefront matching",
           { userInput: flagStorefront },
           "on your",
-          { userInput: shop },
+          { userInput: config.shop },
           "shop. To see all available Hydrogen storefronts, run",
           {
             command: `${cliCommand} list`
@@ -76,36 +93,36 @@ async function linkStorefront({
       return;
     }
   } else {
-    const choices = storefronts.map(({ id, title, productionUrl }) => ({
-      value: id,
-      label: `${title} (${productionUrl})`
-    }));
+    const choices = [
+      {
+        label: "Create a new storefront",
+        value: null
+      },
+      ...storefronts.map(({ id, title, productionUrl }) => ({
+        label: `${title} (${productionUrl})`,
+        value: id
+      }))
+    ];
     const storefrontId = await renderSelectPrompt({
-      message: "Choose a Hydrogen storefront to link",
+      message: "Select a Hydrogen storefront to link",
       choices
     });
-    if (storefrontId === CREATE_NEW_STOREFRONT_ID) {
-      selectCreateNewStorefront = true;
-    } else {
+    if (storefrontId) {
       selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
+    } else {
+      selectedStorefront = await createNewStorefront(root, session);
     }
   }
-  if (selectCreateNewStorefront) {
-    const storefront = await createNewStorefront(path, shop);
-    if (!storefront) {
-      return;
-    }
-    selectedStorefront = storefront;
-  }
   if (selectedStorefront) {
-    await linkExistingStorefront(path, selectedStorefront, silent, cliCommand);
+    await setStorefront(root, selectedStorefront);
   }
+  return selectedStorefront;
 }
-async function createNewStorefront(path, shop) {
-  const projectDirectory = path && basename(path);
+async function createNewStorefront(root, session) {
+  const projectDirectory = basename(root);
   const projectName = await renderTextPrompt({
-    message: "What do you want to name the Hydrogen storefront on Shopify?",
-    defaultValue: titleize(projectDirectory) || "Hydrogen Storefront"
+    message: "New storefront name",
+    defaultValue: titleize(projectDirectory)
   });
   let storefront;
   let jobId;
@@ -113,45 +130,29 @@ async function createNewStorefront(path, shop) {
     {
       title: "Creating storefront",
       task: async () => {
-        const result = await createStorefront(shop, projectName);
+        const result = await createStorefront(session, projectName);
         storefront = result.storefront;
         jobId = result.jobId;
-        if (result.userErrors.length > 0) {
-          renderUserErrors(result.userErrors);
-        }
       }
     },
     {
       title: "Creating API tokens",
       task: async () => {
         try {
-          await waitForJob(shop, jobId);
+          await waitForJob(session, jobId);
         } catch (_err) {
           storefront = void 0;
-          renderError(
-            "Please try again or contact support if the error persists."
-          );
         }
       },
       skip: () => !jobId
     }
   ]);
-  return storefront;
-}
-async function linkExistingStorefront(path, selectedStorefront, silent, cliCommand) {
-  await setStorefront(path ?? process.cwd(), selectedStorefront);
-  if (!silent) {
-    renderSuccess({
-      body: [{ userInput: selectedStorefront.title }, "is now linked"],
-      nextSteps: [
-        [
-          "Run",
-          { command: `${cliCommand} dev` },
-          "to start your local development server and start building"
-        ]
-      ]
-    });
+  if (!storefront) {
+    throw new AbortError(
+      "Unknown error ocurred. Please try again or contact support if the error persists."
+    );
   }
+  return storefront;
 }
 
-export { Link as default, linkStorefront };
+export { Link as default, linkStorefront, runLink };

package/dist/commands/hydrogen/link.test.js

@@ -1,19 +1,13 @@
 import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { adminRequest } from '../../lib/graphql.js';
+import { login } from '../../lib/auth.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
+import { runLink } from './link.js';
 import { createStorefront } from '../../lib/graphql/admin/create-storefront.js';
 import { waitForJob } from '../../lib/graphql/admin/fetch-job.js';
-import { getConfig, setStorefront } from '../../lib/shopify-config.js';
-import { renderUserErrors, renderError } from '../../lib/user-errors.js';
-import { linkStorefront } from './link.js';
+import { setStorefront } from '../../lib/shopify-config.js';
 
-const SHOP = "my-shop";
-const ADMIN_SESSION = {
-  token: "abc123",
-  storeFqdn: SHOP
-};
 vi.mock("@shopify/cli-kit/node/ui", async () => {
   const original = await vi.importActual("@shopify/cli-kit/node/ui");
   return {
@@ -23,41 +17,62 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
     renderTextPrompt: vi.fn()
   };
 });
-vi.mock("../../lib/graphql.js");
+vi.mock("../../lib/auth.js");
 vi.mock("../../lib/shopify-config.js");
 vi.mock("../../lib/graphql/admin/link-storefront.js");
 vi.mock("../../lib/graphql/admin/create-storefront.js");
 vi.mock("../../lib/graphql/admin/fetch-job.js");
-vi.mock("../../lib/user-errors.js");
-vi.mock("../../lib/shop.js", () => ({
-  getHydrogenShop: () => SHOP
-}));
-vi.mock("../../lib/shell.js", () => ({
-  getCliCommand: () => "h2"
-}));
+vi.mock("../../lib/shell.js", () => ({ getCliCommand: () => "h2" }));
 describe("link", () => {
   const outputMock = mockAndCaptureOutput();
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  const FULL_SHOPIFY_CONFIG = {
+    shop: "my-shop.myshopify.com",
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Hydrogen"
+    }
+  };
+  const UNLINKED_SHOPIFY_CONFIG = {
+    ...FULL_SHOPIFY_CONFIG,
+    storefront: void 0
+  };
   beforeEach(async () => {
-    vi.mocked(getStorefronts).mockResolvedValue({
-      adminSession: ADMIN_SESSION,
-      storefronts: [
-        {
-          id: "gid://shopify/HydrogenStorefront/1",
-          parsedId: "1",
-          title: "Hydrogen",
-          productionUrl: "https://example.com"
-        }
-      ]
-    });
-    vi.mocked(getConfig).mockResolvedValue({});
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: UNLINKED_SHOPIFY_CONFIG
+    });
+    vi.mocked(getStorefronts).mockResolvedValue([
+      {
+        ...FULL_SHOPIFY_CONFIG.storefront,
+        parsedId: "1",
+        productionUrl: "https://example.com"
+      }
+    ]);
+    vi.mocked(renderSelectPrompt).mockResolvedValue(FULL_SHOPIFY_CONFIG.shop);
   });
   afterEach(() => {
     vi.resetAllMocks();
     outputMock.clear();
   });
-  it("makes a GraphQL call to fetch the storefronts", async () => {
-    await linkStorefront({});
-    expect(getStorefronts).toHaveBeenCalledWith(SHOP);
+  it("fetches the storefronts", async () => {
+    await runLink({});
+    expect(getStorefronts).toHaveBeenCalledWith(ADMIN_SESSION);
+  });
+  it("renders a list of choices and forwards the selection to setStorefront", async () => {
+    vi.mocked(renderSelectPrompt).mockResolvedValue(
+      FULL_SHOPIFY_CONFIG.storefront.id
+    );
+    await runLink({ path: "my-path" });
+    expect(setStorefront).toHaveBeenCalledWith(
+      "my-path",
+      expect.objectContaining(FULL_SHOPIFY_CONFIG.storefront)
+    );
   });
   describe("when you want to link an existing Hydrogen storefront", () => {
     beforeEach(async () => {
@@ -66,141 +81,91 @@ describe("link", () => {
       );
     });
     it("renders a list of choices and forwards the selection to setStorefront", async () => {
-      await linkStorefront({ path: "my-path" });
+      vi.mocked(renderSelectPrompt).mockResolvedValue(
+        FULL_SHOPIFY_CONFIG.storefront.id
+      );
+      await runLink({ path: "my-path" });
       expect(setStorefront).toHaveBeenCalledWith(
         "my-path",
-        expect.objectContaining({
-          id: "gid://shopify/HydrogenStorefront/1",
-          title: "Hydrogen"
-        })
+        expect.objectContaining(FULL_SHOPIFY_CONFIG.storefront)
       );
     });
     it("renders a success message", async () => {
-      await linkStorefront({ path: "my-path" });
-      expect(outputMock.info()).toMatch(/Hydrogen is now linked/g);
-      expect(outputMock.info()).toMatch(
-        /Run `h2 dev` to start your local development server and start building/g
+      vi.mocked(renderSelectPrompt).mockResolvedValue(
+        FULL_SHOPIFY_CONFIG.storefront.id
       );
+      await runLink({ path: "my-path" });
+      expect(outputMock.info()).toMatch(/is now linked/i);
+      expect(outputMock.info()).toMatch(/Run `h2 dev`/i);
     });
   });
   describe("when you want to link a new Hydrogen storefront", () => {
     const expectedStorefrontName = "New Storefront";
     const expectedJobId = "gid://shopify/Job/1";
     beforeEach(async () => {
-      vi.mocked(renderSelectPrompt).mockResolvedValue("NEW_STOREFRONT");
+      vi.mocked(renderSelectPrompt).mockResolvedValue(null);
       vi.mocked(createStorefront).mockResolvedValue({
-        adminSession: ADMIN_SESSION,
         storefront: {
           id: "gid://shopify/HydrogenStorefront/1",
           title: expectedStorefrontName,
           productionUrl: "https://example.com"
         },
-        userErrors: [],
         jobId: expectedJobId
       });
     });
     it("chooses to create a new storefront given the directory path", async () => {
-      await linkStorefront({ path: "my-path" });
+      await runLink({ path: "my-path" });
       expect(renderTextPrompt).toHaveBeenCalledWith({
         message: expect.stringMatching(/name/i),
         defaultValue: "My Path"
       });
     });
-    it("chooses to create a new storefront without directory path", async () => {
-      await linkStorefront({});
-      expect(renderTextPrompt).toHaveBeenCalledWith({
-        message: expect.stringMatching(/name/i),
-        defaultValue: "Hydrogen Storefront"
-      });
-    });
     it("handles the successful creation of the storefront on Admin", async () => {
-      await linkStorefront({});
-      expect(waitForJob).toHaveBeenCalledWith(SHOP, expectedJobId);
+      await runLink({});
+      expect(waitForJob).toHaveBeenCalledWith(ADMIN_SESSION, expectedJobId);
       expect(outputMock.info()).toContain(
         `${expectedStorefrontName} is now linked`
       );
     });
-    it("handles the user-errors when creating the storefront on Admin", async () => {
-      const expectedUserErrors = [
-        {
-          code: "INVALID",
-          field: [],
-          message: "Bad thing happend."
-        }
-      ];
-      vi.mocked(createStorefront).mockResolvedValue({
-        adminSession: ADMIN_SESSION,
-        storefront: void 0,
-        userErrors: expectedUserErrors,
-        jobId: void 0
-      });
-      await linkStorefront({});
-      expect(waitForJob).not.toHaveBeenCalled();
-      expect(renderUserErrors).toHaveBeenCalledWith(expectedUserErrors);
-    });
     it("handles the job errors when creating the storefront on Admin", async () => {
       vi.mocked(waitForJob).mockRejectedValue(void 0);
-      await linkStorefront({});
-      expect(renderError).toHaveBeenCalled();
-    });
-  });
-  describe("when there are no Hydrogen storefronts", () => {
-    it("renders a message and returns early", async () => {
-      vi.mocked(getStorefronts).mockResolvedValue({
-        adminSession: ADMIN_SESSION,
-        storefronts: []
-      });
-      await linkStorefront({});
-      expect(outputMock.info()).toMatch(
-        /There are no Hydrogen storefronts on your Shop/g
-      );
-      expect(renderSelectPrompt).not.toHaveBeenCalled();
-      expect(setStorefront).not.toHaveBeenCalled();
-    });
-  });
-  describe("when no storefront gets selected", () => {
-    it("does not call setStorefront", async () => {
-      vi.mocked(renderSelectPrompt).mockResolvedValue("");
-      await linkStorefront({});
-      expect(setStorefront).not.toHaveBeenCalled();
+      await expect(runLink({})).rejects.toThrow(Error);
     });
   });
   describe("when a linked storefront already exists", () => {
     beforeEach(() => {
-      vi.mocked(getConfig).mockResolvedValue({
-        storefront: {
-          id: "gid://shopify/HydrogenStorefront/2",
-          title: "Existing Link"
-        }
+      vi.mocked(login).mockResolvedValue({
+        session: ADMIN_SESSION,
+        config: FULL_SHOPIFY_CONFIG
       });
     });
     it("prompts the user to confirm", async () => {
       vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
-      await linkStorefront({});
+      await runLink({});
       expect(renderConfirmationPrompt).toHaveBeenCalledWith({
         message: expect.stringMatching(
-          /Do you want to link to a different Hydrogen storefront on Shopify\?/
+          /link to a different Hydrogen storefront/i
         )
       });
     });
     describe("and the user cancels", () => {
       it("returns early", async () => {
         vi.mocked(renderConfirmationPrompt).mockResolvedValue(false);
-        await linkStorefront({});
-        expect(adminRequest).not.toHaveBeenCalled();
+        await runLink({});
+        expect(getStorefronts).not.toHaveBeenCalled();
         expect(setStorefront).not.toHaveBeenCalled();
       });
     });
     describe("and the --force flag is provided", () => {
       it("does not prompt the user to confirm", async () => {
-        await linkStorefront({ force: true });
+        await runLink({ force: true });
         expect(renderConfirmationPrompt).not.toHaveBeenCalled();
       });
     });
   });
   describe("when the --storefront flag is provided", () => {
     it("does not prompt the user to make a selection", async () => {
-      await linkStorefront({ path: "my-path", storefront: "Hydrogen" });
+      await runLink({ path: "my-path", storefront: "Hydrogen" });
       expect(renderSelectPrompt).not.toHaveBeenCalled();
       expect(setStorefront).toHaveBeenCalledWith(
         "my-path",
@@ -213,7 +178,7 @@ describe("link", () => {
     describe("and there is no matching storefront", () => {
       it("renders a warning message and returns early", async () => {
         const outputMock2 = mockAndCaptureOutput();
-        await linkStorefront({ storefront: "Does not exist" });
+        await runLink({ storefront: "Does not exist" });
         expect(setStorefront).not.toHaveBeenCalled();
         expect(outputMock2.warn()).toMatch(/Couldn\'t find Does not exist/g);
       });

package/dist/commands/hydrogen/list.js

@@ -2,32 +2,33 @@ import Command from '@shopify/cli-kit/node/base-command';
 import { pluralize } from '@shopify/cli-kit/common/string';
 import colors from '@shopify/cli-kit/node/colors';
 import { outputNewline, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
+import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { commonFlags } from '../../lib/flags.js';
-import { getHydrogenShop } from '../../lib/shop.js';
-import { parseGid } from '../../lib/graphql.js';
+import { parseGid } from '../../lib/gid.js';
 import { getStorefrontsWithDeployment } from '../../lib/graphql/admin/list-storefronts.js';
-import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
+import { newHydrogenStorefrontUrl } from '../../lib/admin-urls.js';
+import { login } from '../../lib/auth.js';
+import { getCliCommand } from '../../lib/shell.js';
 
 class List extends Command {
   static description = "Returns a list of Hydrogen storefronts available on a given shop.";
   static flags = {
-    path: commonFlags.path,
-    shop: commonFlags.shop
+    path: commonFlags.path
   };
   async run() {
     const { flags } = await this.parse(List);
-    await listStorefronts(flags);
+    await runList(flags);
   }
 }
-async function listStorefronts({ path, shop: flagShop }) {
-  const shop = await getHydrogenShop({ path, shop: flagShop });
-  const { storefronts, adminSession } = await getStorefrontsWithDeployment(shop);
+async function runList({ path: root = process.cwd() }) {
+  const { session } = await login(root);
+  const storefronts = await getStorefrontsWithDeployment(session);
   if (storefronts.length > 0) {
     outputNewline();
     outputInfo(
       pluralizedStorefronts({
         storefronts,
-        shop
+        shop: session.storeFqdn
       }).toString()
     );
     storefronts.forEach(
@@ -53,7 +54,16 @@ async function listStorefronts({ path, shop: flagShop }) {
       }
     );
   } else {
-    logMissingStorefronts(adminSession);
+    renderInfo({
+      headline: "Hydrogen storefronts",
+      body: "There are no Hydrogen storefronts on your Shop.",
+      nextSteps: [
+        `Ensure you are logged in to the correct shop (currently: ${session.storeFqdn})`,
+        `Create a new Hydrogen storefront: Run \`${await getCliCommand(
+          root
+        )} link\` or visit ${newHydrogenStorefrontUrl(session)}`
+      ]
+    });
   }
 }
 const dateFormat = new Intl.DateTimeFormat("default", {
@@ -84,4 +94,4 @@ const pluralizedStorefronts = ({
   );
 };
 
-export { List as default, formatDeployment, listStorefronts };
+export { List as default, formatDeployment, runList };