Allow specifying an environment for variables (#883)

Shopify · May 19, 2023 · 24b82fc · 24b82fc
1 parent a8d5fef
commit 24b82fc
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 17 deletions.
diff --git a/.changeset/pink-gorillas-train.md b/.changeset/pink-gorillas-train.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Adds the ability to specify an Environment's branch name to interact with Hydrogen storefront environment variables
diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json
diff --git a/packages/cli/src/commands/hydrogen/dev.ts b/packages/cli/src/commands/hydrogen/dev.ts
@@ -50,6 +50,7 @@ export default class Dev extends Command {
       default: false,
     }),
     host: deprecated('--host')(),
+    ['env-branch']: commonFlags['env-branch'],
   };
 
   async run(): Promise<void> {
@@ -71,6 +72,7 @@ async function runDev({
   codegenConfigPath,
   disableVirtualRoutes,
   shop,
+  envBranch,
   debug = false,
 }: {
   port?: number;
@@ -79,6 +81,7 @@ async function runDev({
   codegenConfigPath?: string;
   disableVirtualRoutes?: boolean;
   shop?: string;
+  envBranch?: string;
   debug?: false;
 }) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development';
@@ -109,7 +112,11 @@ async function runDev({
 
   const hasLinkedStorefront = !!(await getConfig(root))?.storefront?.id;
   const environmentVariables = hasLinkedStorefront
-    ? await combinedEnvironmentVariables({root, shop})
+    ? await combinedEnvironmentVariables({
+        root,
+        shop,
+        envBranch,
+      })
     : undefined;
 
   let miniOxygenStarted = false;

diff --git a/packages/cli/src/commands/hydrogen/env/pull.test.ts b/packages/cli/src/commands/hydrogen/env/pull.test.ts
@@ -13,7 +13,6 @@ import {renderConfirmationPrompt} from '@shopify/cli-kit/node/ui';
 import {getAdminSession} from '../../../lib/admin-session.js';
 import {pullRemoteEnvironmentVariables} from '../../../lib/pull-environment-variables.js';
 import {getConfig} from '../../../lib/shopify-config.js';
-import {linkStorefront} from '../link.js';
 
 import {pullVariables} from './pull.js';
 
@@ -71,10 +70,11 @@ describe('pullVariables', () => {
 
   it('calls pullRemoteEnvironmentVariables', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await pullVariables({path: tmpDir});
+      await pullVariables({path: tmpDir, envBranch: 'staging'});
 
       expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
         root: tmpDir,
+        envBranch: 'staging',
       });
     });
   });

diff --git a/packages/cli/src/commands/hydrogen/env/pull.ts b/packages/cli/src/commands/hydrogen/env/pull.ts
@@ -5,7 +5,7 @@ import {outputSuccess, outputWarn} from '@shopify/cli-kit/node/output';
 import {fileExists, writeFile} from '@shopify/cli-kit/node/fs';
 import {resolvePath} from '@shopify/cli-kit/node/path';
 
-import {commonFlags} from '../../../lib/flags.js';
+import {commonFlags, flagsToCamelObject} from '../../../lib/flags.js';
 import {pullRemoteEnvironmentVariables} from '../../../lib/pull-environment-variables.js';
 import {getConfig} from '../../../lib/shopify-config.js';
 
@@ -16,29 +16,37 @@ export default class Pull extends Command {
   static hidden = true;
 
   static flags = {
+    ['env-branch']: commonFlags['env-branch'],
     path: commonFlags.path,
     shop: commonFlags.shop,
     force: commonFlags.force,
   };
 
   async run(): Promise<void> {
     const {flags} = await this.parse(Pull);
-    await pullVariables(flags);
+    await pullVariables({...flagsToCamelObject(flags)});
   }
 }
 
 interface Flags {
+  envBranch?: string;
   force?: boolean;
   path?: string;
   shop?: string;
 }
 
-export async function pullVariables({force, path, shop: flagShop}: Flags) {
+export async function pullVariables({
+  envBranch,
+  force,
+  path,
+  shop: flagShop,
+}: Flags) {
   const actualPath = path ?? process.cwd();
 
   const environmentVariables = await pullRemoteEnvironmentVariables({
     root: actualPath,
     flagShop,
+    envBranch,
   });
 
   if (!environmentVariables.length) {

diff --git a/packages/cli/src/lib/combined-environment-variables.test.ts b/packages/cli/src/lib/combined-environment-variables.test.ts
@@ -35,9 +35,14 @@ describe('combinedEnvironmentVariables()', () => {
 
   test('calls pullRemoteEnvironmentVariables', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await combinedEnvironmentVariables({root: tmpDir, shop: 'my-shop'});
+      await combinedEnvironmentVariables({
+        envBranch: 'main',
+        root: tmpDir,
+        shop: 'my-shop',
+      });
 
       expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
+        envBranch: 'main',
         root: tmpDir,
         flagShop: 'my-shop',
         silent: true,

diff --git a/packages/cli/src/lib/combined-environment-variables.ts b/packages/cli/src/lib/combined-environment-variables.ts
@@ -12,14 +12,20 @@ import {pullRemoteEnvironmentVariables} from './pull-environment-variables.js';
 import {getConfig} from './shopify-config.js';
 
 interface Arguments {
+  envBranch?: string;
   root: string;
   shop?: string;
 }
-export async function combinedEnvironmentVariables({root, shop}: Arguments) {
+export async function combinedEnvironmentVariables({
+  envBranch,
+  root,
+  shop,
+}: Arguments) {
   const remoteEnvironmentVariables = await pullRemoteEnvironmentVariables({
     root,
     flagShop: shop,
     silent: true,
+    envBranch,
   });
 
   const formattedRemoteVariables = remoteEnvironmentVariables?.reduce(

diff --git a/packages/cli/src/lib/flags.ts b/packages/cli/src/lib/flags.ts
@@ -29,6 +29,13 @@ export const commonFlags = {
     env: 'SHOPIFY_SHOP',
     parse: async (input) => normalizeStoreFqdn(input),
   }),
+  ['env-branch']: Flags.string({
+    description:
+      "Specify an environment's branch name when using remote environment variables.",
+    env: 'SHOPIFY_HYDROGEN_ENVIRONMENT_BRANCH',
+    char: 'e',
+    hidden: true,
+  }),
 };
 
 export function flagsToCamelObject(obj: Record<string, any>) {

diff --git a/packages/cli/src/lib/graphql/admin/pull-variables.ts b/packages/cli/src/lib/graphql/admin/pull-variables.ts
@@ -1,8 +1,8 @@
 export const PullVariablesQuery = `#graphql
-  query ListStorefronts($id: ID!) {
+  query PullVariables($id: ID!, $branch: String) {
     hydrogenStorefront(id: $id) {
       id
-      environmentVariables {
+      environmentVariables(branchName: $branch) {
         id
         isSecret
         key

diff --git a/packages/cli/src/lib/pull-environment-variables.test.ts b/packages/cli/src/lib/pull-environment-variables.test.ts
@@ -78,13 +78,17 @@ describe('pullRemoteEnvironmentVariables', () => {
 
   it('makes a GraphQL call to fetch environment variables', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await pullRemoteEnvironmentVariables({root: tmpDir});
+      await pullRemoteEnvironmentVariables({
+        root: tmpDir,
+        envBranch: 'staging',
+      });
 
       expect(adminRequest).toHaveBeenCalledWith(
         PullVariablesQuery,
         ADMIN_SESSION,
         {
           id: 'gid://shopify/HydrogenStorefront/2',
+          branch: 'staging',
         },
       );
     });
@@ -116,9 +120,7 @@ describe('pullRemoteEnvironmentVariables', () => {
 
         await pullRemoteEnvironmentVariables({root: tmpDir});
 
-        expect(outputMock.info()).toMatch(
-          /No Preview environment variables found\./,
-        );
+        expect(outputMock.info()).toMatch(/No environment variables found\./);
       });
     });
 

diff --git a/packages/cli/src/lib/pull-environment-variables.ts b/packages/cli/src/lib/pull-environment-variables.ts
@@ -22,6 +22,7 @@ import {
 } from './graphql/admin/pull-variables.js';
 
 interface Arguments {
+  envBranch?: string;
   root: string;
   /**
    * Optional shop override that developers would have passed using the --shop
@@ -36,6 +37,7 @@ interface Arguments {
 }
 
 export async function pullRemoteEnvironmentVariables({
+  envBranch,
   root,
   flagShop,
   silent,
@@ -78,14 +80,16 @@ export async function pullRemoteEnvironmentVariables({
 
   if (!silent) {
     outputInfo(
-      `Fetching Preview environment variables from ${configStorefront.title}...`,
+      `Fetching environment variables from ${configStorefront.title}...`,
     );
   }
+
   const result: PullVariablesSchema = await adminRequest(
     PullVariablesQuery,
     adminSession,
     {
       id: configStorefront.id,
+      branch: envBranch,
     },
   );
 
@@ -117,7 +121,7 @@ export async function pullRemoteEnvironmentVariables({
 
   if (!storefront.environmentVariables.length) {
     if (!silent) {
-      outputInfo(`No Preview environment variables found.`);
+      outputInfo(`No environment variables found.`);
     }
     return [];
   }