@commercetools-frontend/application-cli 1.4.0 → 1.6.0

package/src/commands/compile-deployments.js

@@ -1,283 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import Listr from 'listr';
-import { execa } from 'execa';
-import { cosmiconfig } from 'cosmiconfig';
-import { findRootSync } from '@manypkg/find-root';
-import ListrVerboseRenderer from 'listr-verbose-renderer';
-import resolveInApplication from '../utils/resolve-in-application.js';
-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 writeUploadScriptFile({ fileName, fileContent, filePath }) {
-  fs.writeFileSync(path.join(filePath, fileName), fileContent, {
-    // Make the script executable
-    mode: 0o755,
-    encoding: 'utf8',
-  });
-}
-
-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.
- *
- *  1. Static assets are uploaded to `:bucketRegion/:prNumber?/:applicationName`
- *  2. The application index is uploaded to `:bucketRegion/:prNumber?/:applicationName/:cloudEnvironment`
- *
- *  This allows all cloud environments sharing the same static assets while each application's index
- *  is uploaded with different headers (e.g. CSP rules).
- */
-function getApplicationAssetsBucketUrl({
-  bucketRegion,
-  prNumber,
-  applicationName,
-}) {
-  const applicationAssetsBucketUrl = [
-    `gs://${bucketRegion}`,
-    getBucketNamespace(prNumber),
-    applicationName,
-  ].filter(Boolean);
-
-  return applicationAssetsBucketUrl.join('/');
-}
-function getApplicationIndexBucketUrl({
-  bucketRegion,
-  prNumber,
-  applicationName,
-  cloudEnvironment,
-}) {
-  const applicationAssetsBucketUrl = getApplicationAssetsBucketUrl({
-    bucketRegion,
-    prNumber,
-    applicationName,
-  });
-  const applicationIndexBucketUrl = `${applicationAssetsBucketUrl}/${cloudEnvironment}`;
-
-  return applicationIndexBucketUrl;
-}
-function getCdnUrl({ bucketRegion, prNumber, applicationName }) {
-  return [
-    `https://storage.googleapis.com/${bucketRegion}`,
-    getBucketNamespace(prNumber),
-    applicationName,
-  ]
-    .filter(Boolean)
-    .join('/');
-}
-
-async function compileApplicationAssets({ cliFlags, bucketRegion, paths }) {
-  const applicationAssetsUploadScriptContent =
-    createApplicationAssetsUploadScript({
-      bucketUrl: getApplicationAssetsBucketUrl({
-        bucketRegion,
-        prNumber: cliFlags['pr-number'],
-        applicationName: cliFlags['application-name'],
-      }),
-      assetsPath: paths.assetsPath,
-      skipMenu: cliFlags['skip-menu'],
-    });
-  const parsedApplicationAssetsUploadScriptFile = path.parse(
-    cliFlags['application-assets-upload-script-out-file']
-  );
-  const applicationAssetsUploadScriptFileName = `${parsedApplicationAssetsUploadScriptFile.name}-${bucketRegion}${parsedApplicationAssetsUploadScriptFile.ext}`;
-
-  writeUploadScriptFile({
-    fileName: applicationAssetsUploadScriptFileName,
-    fileContent: applicationAssetsUploadScriptContent,
-    filePath: paths.deploymentsPath,
-  });
-}
-
-async function compileEnvironmentApplicationIndexes({
-  cliFlags,
-  paths,
-  bucketRegion,
-  cloudEnvironment,
-}) {
-  const cloudEnvironmentDeploymentPath = path.join(
-    paths.deploymentsPath,
-    cloudEnvironment
-  );
-  // Ensure the folder exists
-  const createDeploymentsFolderResult = await execa(
-    'mkdir',
-    ['-p', cloudEnvironmentDeploymentPath],
-    { encoding: 'utf8' }
-  );
-  if (createDeploymentsFolderResult.failed) {
-    throw new Error(createDeploymentsFolderResult.stderr);
-  }
-
-  // Construct the proper CDN URL for the specific application
-  const cdnUrl = getCdnUrl({
-    bucketRegion,
-    prNumber: cliFlags['pr-number'],
-    applicationName: cliFlags['application-name'],
-  });
-
-  const environmentVariablesForCompilation = {
-    ...loadDotenvFiles({
-      dotenvPath: paths.dotenvPath,
-      cloudEnvironment,
-    }),
-    // The trailing slash is important to indicate to the CSP directive that all the resources
-    // under that path should be allowed.
-    MC_CDN_URL: `${cdnUrl}/`,
-    ...(cliFlags['mc-url']
-      ? {
-          MC_URL: cliFlags['mc-url'],
-        }
-      : {}),
-    ...(cliFlags['mc-api-url']
-      ? {
-          MC_API_URL: cliFlags['mc-api-url'],
-        }
-      : {}),
-    // Will be used by the Application Kit for Sentry and exposed on `window.app.revision`.
-    REVISION: cliFlags['build-revision'],
-  };
-
-  /// Sentry and GTM is disabled on branch deployments
-  if (cliFlags['pr-number']) {
-    process.env.TRACKING_SENTRY = null;
-    process.env.TRACKING_GTM = null;
-    environmentVariablesForCompilation.TRACKING_SENTRY = null;
-    environmentVariablesForCompilation.TRACKING_GTM = null;
-  }
-
-  // Compile the application using the loaded environment values
-  const compileResult = await execa('mc-scripts', ['compile-html'], {
-    encoding: 'utf8',
-    preferLocal: true,
-    extendEnv: true,
-    env: environmentVariablesForCompilation,
-  });
-
-  if (compileResult.failed) {
-    throw new Error(compileResult.stderr);
-  }
-
-  const applicationIndexUploadScriptContent =
-    createApplicationIndexUploadScript({
-      packageManagerName: cliFlags['package-manager-name'],
-      bucketUrl: getApplicationIndexBucketUrl({
-        bucketRegion,
-        prNumber: cliFlags['pr-number'],
-        applicationName: cliFlags['application-name'],
-        cloudEnvironment,
-      }),
-      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'],
-    fileContent: applicationIndexUploadScriptContent,
-    filePath: cloudEnvironmentDeploymentPath,
-  });
-
-  // Move the compiled `index.html` to the deployments folder of the related cloud environment.
-  const moveResult = await execa('mv', [
-    path.join(paths.publicAssetsPath, 'index.html'),
-    path.join(
-      cloudEnvironmentDeploymentPath,
-      cliFlags['application-index-out-file']
-    ),
-  ]);
-
-  if (moveResult.failed) {
-    throw new Error(moveResult.stderr);
-  }
-}
-
-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();
-  } 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`.'
-    );
-  }
-  const applicationDirectory = getApplicationDirectory(cwd);
-  let assetsPath;
-  if (cliFlags['ci-assets-root-path'] && isCI()) {
-    assetsPath = applicationDirectory.replace(
-      '/home/circleci/',
-      cliFlags['ci-assets-root-path']
-    );
-  } else {
-    assetsPath = applicationDirectory;
-  }
-
-  const monorepoRoot = findRootSync(cwd);
-  const paths = {
-    publicAssetsPath: resolveInApplication('public', cwd),
-    deploymentsPath: resolveInApplication('deployments', cwd),
-    dotenvPath:
-      cliFlags['dotenv-folder'] &&
-      path.join(monorepoRoot.rootDir, cliFlags['dotenv-folder']),
-    assetsPath,
-  };
-
-  async function execute() {
-    const taskList = new Listr(
-      Object.entries(cloudEnvironmentsGroupedByBucketRegions.config).map(
-        ([bucketRegion, cloudEnvironments]) => ({
-          title: `Compiling application for bucket ${bucketRegion}`,
-          task: () =>
-            new Listr(
-              cloudEnvironments
-                .map((cloudEnvironment) => ({
-                  title: `Compiling ${cloudEnvironment} application index`,
-                  task: async () => {
-                    await compileEnvironmentApplicationIndexes({
-                      cliFlags,
-                      paths,
-                      bucketRegion,
-                      cloudEnvironment,
-                    });
-                    return 'Done';
-                  },
-                }))
-                .concat({
-                  title: `Compiling application assets`,
-                  task: () => {
-                    compileApplicationAssets({
-                      cliFlags,
-                      bucketRegion,
-                      paths,
-                    });
-                  },
-                })
-            ),
-        })
-      ),
-      {
-        renderer: isCI() ? ListrVerboseRenderer : 'default',
-        nonTTYRenderer: ListrVerboseRenderer,
-      }
-    );
-    await taskList.run();
-  }
-
-  await execute();
-}
-
-export default command;

package/src/commands/compile-menu.js

@@ -1,126 +0,0 @@
-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 monorepoRoot = findRootSync(cwd);
-  const dotenvPath =
-    cliFlags['dotenv-folder'] &&
-    path.join(monorepoRoot.rootDir, 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/commands/create-version.js

@@ -1,43 +0,0 @@
-import fetch from 'node-fetch';
-import fs from 'fs';
-
-async function command(cliFlags) {
-  const numberOfRollbacks = cliFlags.rollbacks - 1;
-
-  let nextRollbacks;
-  try {
-    // The last build's JSON becomes the first rollback
-    // while all previous rollbacks remain but are sliced.
-    const lastVersionResponse = await fetch(cliFlags['version-url']);
-    const lastVersionJson = await lastVersionResponse.json();
-
-    const previousBuild = lastVersionJson && {
-      buildNumber: lastVersionJson.buildNumber,
-      revision: lastVersionJson.revision,
-      deployedAt: lastVersionJson.deployedAt,
-    };
-
-    nextRollbacks = [previousBuild, ...lastVersionJson.rollbacks]
-      .filter(Boolean)
-      .slice(0, numberOfRollbacks);
-  } catch (error) {
-    nextRollbacks = [];
-  }
-
-  const nextBuild = {
-    buildNumber: cliFlags['build-number'],
-    revision: cliFlags['build-revision'],
-    deployedAt: new Date().toISOString(),
-    rollbacks: nextRollbacks,
-  };
-  const formattedJson = JSON.stringify(nextBuild, null, 2);
-  // Logging to stdout which is from where it will be picked
-  // up by the caller (a bash script).
-  if (cliFlags['out-file']) {
-    fs.writeFileSync(cliFlags['out-file'], formattedJson, { encoding: 'utf8' });
-  } else {
-    console.log(formattedJson);
-  }
-}
-
-export default command;

package/src/commands/validate-menu.js

@@ -1,33 +0,0 @@
-import fs from 'fs';
-import { Validator } from 'jsonschema';
-import { navbarMenuSchema, appbarMenuSchema } from '../schema.js';
-
-export function validateMenu(menuJson, schema = navbarMenuSchema) {
-  const validator = new Validator();
-  const result = validator.validate(menuJson, schema);
-  if (result.valid) {
-    return menuJson;
-  } else {
-    throw new Error('menu.json validation failed\n' + result.errors);
-  }
-}
-
-async function command(cliFlags, cwd) {
-  const menuJsonPath = cliFlags['input-file'];
-  const isAppbarMenu = cliFlags['navigation'] === 'top';
-
-  if (!menuJsonPath)
-    throw new Error(
-      `--input-file cannot be empty. please provide the path of compiled menu.json`
-    );
-  if (!fs.existsSync(menuJsonPath))
-    throw new Error(`The menu.json file doesn't exist: ${menuJsonPath}`);
-  const menuJson = fs.readFileSync(menuJsonPath, 'utf-8');
-
-  return validateMenu(
-    JSON.parse(menuJson),
-    isAppbarMenu ? appbarMenuSchema : navbarMenuSchema
-  );
-}
-
-export default command;

package/src/commands/validate-menu.spec.js

@@ -1,43 +0,0 @@
-import { validateMenu } from './validate-menu.js';
-
-describe('validate menu', () => {
-  test.each([
-    123,
-    '{value:123}',
-    {},
-    { uriPath: 'products', icon: 'ProductsIcon', submenu: [] },
-    {
-      uriPath: 123,
-      intlMessage: 123,
-      icon: 123,
-      permissions: '',
-      submenu: {},
-      key: {},
-      labelAllLocales: {},
-    },
-  ])('should return null for invalid menu configs', (json) => {
-    try {
-      expect(validateMenu(json)).toEqual([]);
-    } catch (error) {
-      // catch block is required otherwise the test fails
-      //  due to `validateMenu` throwing error for invalid menu
-    }
-  });
-  it('should return menu json for valid menu configs', async () => {
-    const menuJson = {
-      uriPath: 'products',
-      intlMessage: 'Products',
-      icon: 'ProductsIcon',
-      permissions: ['ViewProducts'],
-      submenu: [],
-      key: 'product',
-      labelAllLocales: [
-        {
-          locale: 'en',
-          value: 'product',
-        },
-      ],
-    };
-    expect(validateMenu(menuJson)).toEqual(menuJson);
-  });
-});

package/src/schema.js

@@ -1,112 +0,0 @@
-const baseMenuProperties = {
-  key: {
-    type: 'string',
-  },
-  uriPath: {
-    type: 'string',
-  },
-  icon: {
-    type: 'string',
-  },
-  featureToggle: {
-    type: ['string', 'null'],
-  },
-  labelAllLocales: {
-    type: 'array',
-    items: [
-      {
-        type: 'object',
-        properties: {
-          locale: { type: 'string' },
-          value: { type: 'string' },
-        },
-        required: ['locale', 'value'],
-      },
-    ],
-  },
-  menuVisibility: {
-    type: ['string', 'null'],
-  },
-  permissions: {
-    type: 'array',
-    items: {
-      type: 'string',
-    },
-  },
-  dataFences: {
-    type: ['array', 'null'],
-    items: [
-      {
-        type: ['object'],
-        properties: {
-          group: {
-            type: 'string',
-          },
-          name: {
-            type: 'string',
-          },
-          type: {
-            type: 'string',
-          },
-        },
-      },
-    ],
-  },
-  actionRights: {
-    type: ['array', 'null'],
-    items: [
-      {
-        type: ['object'],
-        properties: {
-          group: {
-            type: 'string',
-          },
-          name: {
-            type: 'string',
-          },
-        },
-      },
-    ],
-  },
-};
-
-export const navbarMenuSchema = {
-  $schema: 'https://json-schema.org/draft/2020-12/schema',
-  // "$id":""
-  title: 'NavbarMenu',
-  type: 'object',
-  properties: {
-    ...baseMenuProperties,
-    submenu: {
-      type: 'array',
-      items: [
-        {
-          type: 'object',
-          properties: baseMenuProperties,
-        },
-      ],
-    },
-  },
-  required: [
-    'icon',
-    'key',
-    'labelAllLocales',
-    'permissions',
-    'submenu',
-    'uriPath',
-  ],
-};
-
-export const appbarMenuSchema = {
-  $schema: 'https://json-schema.org/draft/2020-12/schema',
-  // "$id":""
-  title: 'AppbarMenu',
-  type: 'array',
-  items: [
-    {
-      type: 'object',
-      properties: baseMenuProperties,
-      required: ['key', 'labelAllLocales', 'permissions', 'uriPath'],
-    },
-  ],
-};

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

@@ -1,62 +0,0 @@
-function createApplicationAssetsUploadScript({
-  bucketUrl,
-  assetsPath,
-  skipMenu,
-}) {
-  const uploadScriptContent = `#!/usr/bin/env bash
-
-set -e
-
-# NOTES:
-# https://cloud.google.com/storage/docs/gsutil/commands/cp#options
-#     1. The '-z' option triggers compressing the assets before
-#        uploading them and sets the 'Content-Encoding' to 'gzip'.
-#     2. The 'Accept-encoding: gzip' is set automatically by the 'gsutils'.
-#     3. The 'max-age' is set to 1 year which is considered the maximum
-#        "valid" lifetime of an asset to be cached.
-#     5. The '-n' will skip uploading existing files and prevents them to
-#        be overwritten
-echo "Uploading static assets to bucket ${bucketUrl}"
-
-gsutil -m \\
-  -h "Cache-Control: public, max-age=31536000, no-transform" \\
-  cp -z js,css \\
-  -n \\
-  ${assetsPath}/public/{*.css,*.js,*.js.map,*.png,*.html,robots.txt} \\
-  "${bucketUrl}"
-
-if ${skipMenu}; then
-  echo "Skipping menu.json upload"
-else
-  echo "Uploading menu.json to bucket ${bucketUrl}"
-  # NOTE: somehow the 'cache-control:private' doesn't work.
-  # I mean, the file is uploaded with the correct metadata but when I fetch
-  # the file the response contains the header
-  # 'cache-control: public, max-age=31536000, no-transform', even though the
-  # documentation clearly states that by marking the header as 'private' will
-  # disable the cache (for publicly readable objects).
-  # https://cloud.google.com/storage/docs/gsutil/addlhelp/WorkingWithObjectMetadata#cache-control
-  # However, I found out that, by requesting the file with any RANDOM
-  # query parameter, will instruct the storage to return a 'fresh' object
-  # (without any cache control).
-  # Unofficial source: https://stackoverflow.com/a/49052895
-  # This seems to be the 'easiest' option to 'disable' the cache for public
-  # objects. Other alternative approaces are:
-  #   * make the object private with some simple ACL (private objects are not cached)
-  #   * suffix the file name with e.g. the git SHA, so we have different files
-  #   for each upload ('index.html.template-\${CIRCLE_SHA1}'). The server knows
-  #   the git SHA on runtime and can get the correct file when it starts.
-  #   * find out why the 'private' cache control does not work
-  gsutil \\
-    -h "Content-Type: application/json" \\
-    -h "Cache-Control: private, max-age=0, no-transform" \\
-    cp -z json \\
-    ${assetsPath}/menu.json \\
-    ${bucketUrl}
-fi
-`;
-
-  return uploadScriptContent;
-}
-
-export default createApplicationAssetsUploadScript;