@commercetools-frontend/application-cli 0.0.2 → 1.0.1

package/README.md

@@ -57,6 +57,16 @@ Depending on the environment you are deploying to, you need to:
 
 Additionally, when specifying the `--dotenv-folder` option, you can specify a dotenv file for each environment (for example `.env.gcp-production-eu`) and a single `.env.production` dotenv file. These files are then loaded when compiling the application for the respective environment.
 
+### Command: `compile-menu`
+
+This command compiles the menu configuration [defined in the application config](https://docs.commercetools.com/custom-applications/api-reference/application-config#mainmenulink) into a `menu.json` file.
+
+> This is mostly useful for internal Merchant Center applications.
+
+```bash
+yarn application-cli compile-menu
+```
+
 ### Command: `create-version`
 
 This command outputs a JSON string containing a list of deployed versions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/application-cli",
-  "version": "0.0.2",
+  "version": "1.0.1",
   "description": "Internal CLI to manage Merchant Center application deployments across various environments.",
   "keywords": [
     "commercetools",
@@ -12,9 +12,7 @@
   },
   "license": "MIT",
   "type": "module",
-  "bin": {
-    "application-cli": "./src/bin/cli.js"
-  },
+  "bin": "./src/bin/cli.js",
   "files": [
     "src",
     "package.json",
@@ -22,18 +20,19 @@
     "README.md"
   ],
   "dependencies": {
+    "@commercetools-frontend/application-config": "21.3.4",
     "@manypkg/find-root": "1.1.0",
-    "@manypkg/get-packages": "1.1.1",
-    "cosmiconfig": "7.0.0",
-    "dotenv": "9.0.1",
-    "execa": "5.0.0",
+    "@manypkg/get-packages": "1.1.3",
+    "cosmiconfig": "7.0.1",
+    "dotenv": "16.0.0",
+    "execa": "6.1.0",
     "listr": "0.14.3",
     "listr-verbose-renderer": "0.6.0",
     "lodash.lowerfirst": "4.3.1",
-    "mri": "1.1.6",
-    "node-fetch": "2.6.1",
-    "prettier": "2.2.1",
-    "prompts": "2.4.1",
+    "mri": "1.2.0",
+    "node-fetch": "2.6.7",
+    "prettier": "2.6.2",
+    "prompts": "2.4.2",
     "rcfile": "1.0.3"
   },
   "engines": {

package/src/bin/cli.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
 import mri from 'mri';
-import createVersion from '../commands/create-version.js';
 import compileDeployments from '../commands/compile-deployments.js';
+import compileMenu from '../commands/compile-menu.js';
+import createVersion from '../commands/create-version.js';
 
 const cwd = process.cwd();
 
@@ -46,6 +47,12 @@ Options:
   --application-assets-upload-script-out-file  <path>    (optional) The name of the the assets upload script file. Defaults to upload-assets.sh.
   --ci-assets-root-path                        <path>    (optional) A replacement value for the scripts root path only used on CI (e.g. '--ci-assets-root-path=/root/') used in generated scripts.
 
+Command:
+  compile-menu   Compile the menu links of an application into a 'menu.json'. This is only required for internal applications
+
+Options:
+  --dotenv-folder                              <string>  (optional) The path to a folder containing a dotenv file '.env.production' and a cloud-environment specific dotenv file (for example '.env.gcp-production-eu'). Those values are parsed and merged together to be used by the application config.
+
 Command:
   create-version  Output a JSON string about the information in the 'version.json' for a deployment, including the updated list of rollbacks.
 
@@ -66,6 +73,10 @@ Options:
         await compileDeployments(cliFlags, cwd);
         process.exit(0);
         break;
+      case 'compile-menu':
+        await compileMenu(cliFlags, cwd);
+        process.exit(0);
+        break;
       case 'create-version':
         await createVersion(cliFlags, cwd);
         process.exit(0);

package/src/commands/compile-deployments.js

@@ -1,8 +1,7 @@
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
 import Listr from 'listr';
-import execa from 'execa';
-import dotenv from 'dotenv';
+import { execa } from 'execa';
 import { cosmiconfig } from 'cosmiconfig';
 import { findRootSync } from '@manypkg/find-root';
 import ListrVerboseRenderer from 'listr-verbose-renderer';
@@ -11,45 +10,10 @@ import getApplicationDirectory from '../utils/get-application-directory.js';
 import isCI from '../utils/is-ci.js';
 import createApplicationIndexUploadScript from '../utils/create-application-index-upload-script.js';
 import createApplicationAssetsUploadScript from '../utils/create-application-assets-upload-script.js';
+import loadDotenvFiles from '../utils/load-dotenv-files.js';
 
 const buckedConfigExplorer = cosmiconfig('google-storage-buckets');
 
-function loadDotenvFiles({ cliFlags, dotenvPath, cloudEnvironment }) {
-  // No dotenv folder specified
-  if (!cliFlags['dotenv-folder']) return {};
-
-  // Load the environment values
-  const sharedDotenvFile = '.env.production';
-  const cloudDotenvFile = `.env.${cloudEnvironment}`;
-
-  // The shared dotenv file across environments is optional
-  const sharedProductionEnvironment = dotenv.config({
-    encoding: 'utf8',
-    path: path.join(dotenvPath, sharedDotenvFile),
-  });
-
-  const cloudSpecificProductionEnvironment = dotenv.config({
-    encoding: 'utf8',
-    path: path.join(dotenvPath, cloudDotenvFile),
-  });
-
-  if (cloudSpecificProductionEnvironment.error) {
-    throw new Error(
-      `Failed loading '${cloudDotenvFile}' in '${dotenvPath}'. Make sure it exists.`
-    );
-  }
-  if (sharedProductionEnvironment.error) {
-    throw new Error(
-      `Failed loading '${sharedDotenvFile}' in '${dotenvPath}'. Make sure it exists.`
-    );
-  }
-
-  return {
-    ...sharedProductionEnvironment.parsed,
-    ...cloudSpecificProductionEnvironment.parsed,
-  };
-}
-
 function writeUploadScriptFile({ fileName, fileContent, filePath }) {
   fs.writeFileSync(path.join(filePath, fileName), fileContent, {
     // Make the script executable
@@ -58,6 +22,12 @@ function writeUploadScriptFile({ fileName, fileContent, filePath }) {
   });
 }
 
+function getBucketNamespace(prNumber) {
+  if (!prNumber) return;
+  if (prNumber === 'merchant-center-preview') return prNumber;
+  return `mc-${prNumber}`;
+}
+
 /**
  *  Construct the storage bucket URL for the specific application and cloud environment.
  *
@@ -74,7 +44,7 @@ function getApplicationAssetsBucketUrl({
 }) {
   const applicationAssetsBucketUrl = [
     `gs://${bucketRegion}`,
-    prNumber && `mc-${prNumber}`,
+    getBucketNamespace(prNumber),
     applicationName,
   ].filter(Boolean);
 
@@ -98,7 +68,7 @@ function getApplicationIndexBucketUrl({
 function getCdnUrl({ bucketRegion, prNumber, applicationName }) {
   return [
     `https://storage.googleapis.com/${bucketRegion}`,
-    prNumber && `mc-${prNumber}`,
+    getBucketNamespace(prNumber),
     applicationName,
   ]
     .filter(Boolean)
@@ -106,16 +76,15 @@ function getCdnUrl({ bucketRegion, prNumber, applicationName }) {
 }
 
 async function compileApplicationAssets({ cliFlags, bucketRegion, paths }) {
-  const applicationAssetsUploadScriptContent = createApplicationAssetsUploadScript(
-    {
+  const applicationAssetsUploadScriptContent =
+    createApplicationAssetsUploadScript({
       bucketUrl: getApplicationAssetsBucketUrl({
         bucketRegion,
         prNumber: cliFlags['pr-number'],
         applicationName: cliFlags['application-name'],
       }),
       assetsPath: paths.assetsPath,
-    }
-  );
+    });
   const parsedApplicationAssetsUploadScriptFile = path.parse(
     cliFlags['application-assets-upload-script-out-file']
   );
@@ -162,7 +131,6 @@ async function compileEnvironmentApplicationIndexes({
     extendEnv: true,
     env: {
       ...loadDotenvFiles({
-        cliFlags,
         dotenvPath: paths.dotenvPath,
         cloudEnvironment,
       }),
@@ -188,24 +156,21 @@ async function compileEnvironmentApplicationIndexes({
     throw new Error(compileResult.stderr);
   }
 
-  const compiledHeadersJson = JSON.parse(compileResult.stdout);
-  const applicationIndexUploadScriptContent = createApplicationIndexUploadScript(
-    {
+  const applicationIndexUploadScriptContent =
+    createApplicationIndexUploadScript({
       bucketUrl: getApplicationIndexBucketUrl({
         bucketRegion,
         prNumber: cliFlags['pr-number'],
         applicationName: cliFlags['application-name'],
         cloudEnvironment,
       }),
-      compiledHeadersJson,
       cdnUrl,
       cloudEnvironment,
       buildRevision: cliFlags['build-revision'],
       buildNumber: cliFlags['build-number'],
       applicationIndexOutFile: cliFlags['application-index-out-file'],
       versionJsonOutFile: cliFlags['version-json-out-file'],
-    }
-  );
+    });
   // Generate bash scripts to run the `gsutil` upload command.
   writeUploadScriptFile({
     fileName: cliFlags['application-index-upload-script-out-file'],
@@ -231,7 +196,8 @@ async function command(cliFlags, cwd) {
   let cloudEnvironmentsGroupedByBucketRegions;
   try {
     // This is the list of the supported cloud environments and their related bucket location.
-    cloudEnvironmentsGroupedByBucketRegions = await buckedConfigExplorer.search();
+    cloudEnvironmentsGroupedByBucketRegions =
+      await buckedConfigExplorer.search();
   } catch (e) {
     throw new Error(
       'Failed loading a Google Bucket configuration. Create a cosmiconfig for `google-storage-buckets` for example `google-storage-buckets.config.cjs`.'

package/src/commands/compile-menu.js

@@ -0,0 +1,126 @@
+import fs from 'fs';
+import path from 'path';
+import { findRootSync } from '@manypkg/find-root';
+import { processConfig } from '@commercetools-frontend/application-config';
+import getApplicationDirectory from '../utils/get-application-directory.js';
+import loadDotenvFiles from '../utils/load-dotenv-files.js';
+
+// The menu links are only parsed from the config in development mode.
+process.env.NODE_ENV = 'development';
+
+const supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
+
+const mapLabelAllLocalesWithDefaults = (labelAllLocales, defaultLabel) => {
+  let mappedLabelAllLocales = labelAllLocales;
+  if (defaultLabel) {
+    // Map all supported locales with the given localized labels.
+    // If a locale is not defined in the config, we use the `default` label as the value.
+    // This is only needed for development as we're trying to map two different schemas.
+    mappedLabelAllLocales = supportedLocales.map((supportedLocale) => {
+      const existingField = labelAllLocales.find(
+        (field) => field.locale === supportedLocale
+      );
+      if (existingField) return existingField;
+      return {
+        locale: supportedLocale,
+        value: defaultLabel,
+      };
+    });
+  }
+  return mappedLabelAllLocales;
+};
+
+/**
+ * Transform menu links defined in the `custom-application-config.json` to the format
+ * used by the HTTP Proxy GraphQL API.
+ */
+const mapApplicationMenuConfigToGraqhQLMenuJson = (config) => {
+  const entryPointUriPath = config.entryPointUriPath;
+  const accountLinks = config.__DEVELOPMENT__.accountLinks;
+
+  if (accountLinks) {
+    return accountLinks.map((menuLink) => ({
+      key: menuLink.uriPath,
+      uriPath: menuLink.uriPath,
+      labelAllLocales: mapLabelAllLocalesWithDefaults(
+        menuLink.labelAllLocales,
+        menuLink.defaultLabel
+      ),
+      permissions: menuLink.permissions ?? [],
+      featureToggle: menuLink.featureToggle ?? null,
+    }));
+  }
+
+  const menuLinks = config.__DEVELOPMENT__.menuLinks;
+  return {
+    key: entryPointUriPath,
+    uriPath: entryPointUriPath,
+    icon: menuLinks.icon,
+    labelAllLocales: mapLabelAllLocalesWithDefaults(
+      menuLinks.labelAllLocales,
+      menuLinks.defaultLabel
+    ),
+    permissions: menuLinks.permissions,
+    featureToggle: menuLinks.featureToggle ?? null,
+    menuVisibility: menuLinks.menuVisibility ?? null,
+    actionRights: menuLinks.actionRights ?? null,
+    dataFences: menuLinks.dataFences ?? null,
+    submenu: menuLinks.submenuLinks.map((submenuLink) => ({
+      key: submenuLink.uriPath.replace('/', '-'),
+      uriPath: submenuLink.uriPath,
+      labelAllLocales: mapLabelAllLocalesWithDefaults(
+        submenuLink.labelAllLocales,
+        submenuLink.defaultLabel
+      ),
+      permissions: submenuLink.permissions,
+      featureToggle: submenuLink.featureToggle ?? null,
+      menuVisibility: submenuLink.menuVisibility ?? null,
+      actionRights: submenuLink.actionRights ?? null,
+      dataFences: submenuLink.dataFences ?? null,
+    })),
+    shouldRenderDivider: menuLinks.shouldRenderDivider ?? false,
+  };
+};
+
+async function command(cliFlags, cwd) {
+  const applicationDirectory = getApplicationDirectory(cwd);
+
+  const dotenvPath =
+    cliFlags['dotenv-folder'] &&
+    path.join(findRootSync(cwd), cliFlags['dotenv-folder']);
+
+  const processEnv = {
+    ...loadDotenvFiles({
+      dotenvPath,
+      // The env itself is not important for the menu. However, the application config
+      // uses environment placeholders and therefore we need to provide the variables for it.
+      cloudEnvironment: 'ctp-gcp-staging',
+    }),
+    // Again, make sure that the environment is "development", otherwise
+    // the menu config won't be available.
+    NODE_ENV: 'development',
+    MC_APP_ENV: 'development',
+    // Something random, just to have environment variable defined.
+    REVISION: '123',
+  };
+
+  const applicationRuntimeConfig = processConfig({
+    disableCache: true,
+    applicationPath: applicationDirectory,
+    processEnv,
+  });
+
+  const applicationMenu = mapApplicationMenuConfigToGraqhQLMenuJson(
+    applicationRuntimeConfig.env
+  );
+
+  const formattedJson = JSON.stringify(applicationMenu, null, 2);
+
+  fs.writeFileSync(
+    path.join(applicationDirectory, 'menu.json'),
+    formattedJson,
+    { encoding: 'utf8' }
+  );
+}
+
+export default command;

package/src/utils/create-application-index-upload-script.js

@@ -1,6 +1,5 @@
 function createApplicationIndexUploadScript({
   bucketUrl,
-  compiledHeadersJson,
   cdnUrl,
   cloudEnvironment,
   buildRevision,
@@ -15,12 +14,6 @@ echo "Uploading compiled ${applicationIndexOutFile} to bucket ${bucketUrl}"
 gsutil \\
 -h "Content-Type: text/html" \\
 -h "Cache-Control: public, max-age=0, no-transform" \\
-${Object.entries(compiledHeadersJson)
-  .map(
-    ([headerKey, headerValue]) =>
-      `  -h "x-goog-meta-mc-${headerKey}: ${headerValue}" \\`
-  )
-  .join('\n')}
 cp -z html \\
 "$(dirname "$0")/${applicationIndexOutFile}" \\
 "${bucketUrl}/"

package/src/utils/load-dotenv-files.js

@@ -0,0 +1,48 @@
+import fs from 'fs';
+import path from 'path';
+import dotenv from 'dotenv';
+
+function loadDotenvFiles({ dotenvPath, cloudEnvironment }) {
+  // No path requested, skip.
+  if (!dotenvPath) {
+    return {};
+  }
+
+  // Check if the given path exists.
+  if (!fs.existsSync(dotenvPath)) {
+    throw new Error(`The dotenv folder path does not exist: "${dotenvPath}".`);
+  }
+
+  // Load the environment values
+  const sharedDotenvFile = '.env.production';
+  const cloudDotenvFile = `.env.${cloudEnvironment}`;
+
+  // The shared dotenv file across environments is optional
+  const sharedProductionEnvironment = dotenv.config({
+    encoding: 'utf8',
+    path: path.join(dotenvPath, sharedDotenvFile),
+  });
+
+  const cloudSpecificProductionEnvironment = dotenv.config({
+    encoding: 'utf8',
+    path: path.join(dotenvPath, cloudDotenvFile),
+  });
+
+  if (cloudSpecificProductionEnvironment.error) {
+    throw new Error(
+      `Failed loading '${cloudDotenvFile}' in '${dotenvPath}'. Make sure it exists.`
+    );
+  }
+  if (sharedProductionEnvironment.error) {
+    throw new Error(
+      `Failed loading '${sharedDotenvFile}' in '${dotenvPath}'. Make sure it exists.`
+    );
+  }
+
+  return {
+    ...sharedProductionEnvironment.parsed,
+    ...cloudSpecificProductionEnvironment.parsed,
+  };
+}
+
+export default loadDotenvFiles;

package/CHANGELOG.md

@@ -1,11 +0,0 @@
-# @commercetools-frontend/application-cli
-
-## 0.0.2
-
-### Patch Changes
-
-- [#10810](https://github.com/commercetools/merchant-center-frontend/pull/10810) [`736eaca1a0`](https://github.com/commercetools/merchant-center-frontend/commit/736eaca1a03a9504890b961a32a3d0552157b231) Thanks [@tdeekens](https://github.com/tdeekens)! - Adds an `--assets-root-path` option to the application-cli.
-
-- [#10808](https://github.com/commercetools/merchant-center-frontend/pull/10808) [`d755a6ea25`](https://github.com/commercetools/merchant-center-frontend/commit/d755a6ea257f150bc82eb3c8c7a78b94b1489284) Thanks [@tdeekens](https://github.com/tdeekens)! - Refactors CLIs to only use execa and drop shelljs
-
-- [#10813](https://github.com/commercetools/merchant-center-frontend/pull/10813) [`5a3b8993bf`](https://github.com/commercetools/merchant-center-frontend/commit/5a3b8993bf1ecee0f107fab039fc06ae19846773) Thanks [@tdeekens](https://github.com/tdeekens)! - Defaults the revision to CircleCI env variable `CIRCLE_SHA1` for the `--revision` option.