@commercetools-frontend/mc-scripts 21.4.0 → 21.7.0

package/build/bin/cli.js

@@ -1,5 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
@@ -176,7 +180,7 @@ const applicationDirectory = fs.realpathSync(process.cwd());
 
 function getArgsForCommand(allowedFlags = []) {
   return Object.keys(flags).reduce((allArgs, flagKey) => {
-    if (allowedFlags.includes(flagKey)) {
+    if ((0, _includes.default)(allowedFlags).call(allowedFlags, flagKey)) {
       return allArgs.concat([`--${flagKey}`, flags[flagKey]]);
     }
 

package/build/commands/build-vite.js

@@ -40,12 +40,8 @@ const execute = async () => {
 
   fs.writeFileSync(paths.appIndexHtml, html, {
     encoding: 'utf8'
-  }); // TODO: allow to pass additional config options.
-  // * `define`
-  // * `plugins`
-
+  });
   await build({
-    configFile: false,
     root: paths.appRoot,
     define: {
       'process.env.DEBUG': JSON.stringify(false),

package/build/commands/config-sync.js

@@ -21,7 +21,7 @@ const {
   fetchUserOrganizations
 } = require('../utils/graphql-requests');
 
-const updateApplicationIdInCustomApplicationConfig = require('../utils/update-application-id-in-custom-application-config');
+const getConfigDiff = require('../utils/get-config-diff');
 
 const flags = mri(process.argv.slice(2), {
   boolean: ['dry-run']
@@ -122,21 +122,27 @@ const configSync = async () => {
       token,
       organizationId,
       data
-    }); // update applicationID in the custom-application-config file
-
-    updateApplicationIdInCustomApplicationConfig(createdCustomApplication.id);
+    });
     const customAppLink = getMcUrlLink(mcApiUrl, organizationId, createdCustomApplication.id);
-    console.log(chalk.green(`Custom Application created.\nThe "applicationId" in your local Custom Application config file has been updated with the application ID.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+    console.log(chalk.green(`Custom Application created.\nThe "applicationId" in your local Custom Application config file should be updated with the application ID: ${createdCustomApplication.id}.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
     return;
-  } // TODO: show diff (followup task)
+  }
+
+  const customAppLink = getMcUrlLink(mcApiUrl, fetchedCustomApplication.organizationId, fetchedCustomApplication.application.id);
+  const configDiff = getConfigDiff(fetchedCustomApplication.application, localCustomAppData);
 
+  if (!configDiff) {
+    console.log(chalk.green(`Custom Application is already up to date.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+    return;
+  }
 
+  console.log(configDiff);
   const {
     confirmation
   } = await prompts({
     type: 'text',
     name: 'confirmation',
-    message: `You are about to update the Custom Application "${localCustomAppData.entryPointUriPath}" in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
+    message: `You are about to update the Custom Application "${localCustomAppData.entryPointUriPath}" with the changes above, in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
     initial: 'yes'
   });
 
@@ -161,7 +167,6 @@ const configSync = async () => {
     data: omit(localCustomAppData, ['id']),
     applicationId: fetchedCustomApplication.application.id
   });
-  const customAppLink = getMcUrlLink(mcApiUrl, fetchedCustomApplication.organizationId, fetchedCustomApplication.application.id);
   console.log(chalk.green(`Custom Application updated.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
 };
 

package/build/commands/start-vite.js

@@ -22,7 +22,9 @@ const {
   generateTemplate
 } = require('@commercetools-frontend/mc-html-template');
 
-const devAuthentication = require('@commercetools-frontend/mc-dev-authentication');
+const {
+  createMcDevAuthenticationMiddleware
+} = require('@commercetools-frontend/mc-dev-authentication');
 
 const {
   packageLocation: applicationStaticAssetsPath
@@ -57,7 +59,7 @@ const pluginCustomApplication = applicationConfig => {
           next();
         }); // Handle auth routes for internal local development.
 
-        server.middlewares.use(devAuthentication.middlewares.createMcDevAuthenticationMiddleware(applicationConfig));
+        server.middlewares.use(createMcDevAuthenticationMiddleware(applicationConfig));
       };
     },
 
@@ -102,12 +104,8 @@ const execute = async () => {
 
   fs.writeFileSync(paths.appIndexHtml, html, {
     encoding: 'utf8'
-  }); // TODO: allow to pass additional config options.
-  // * `define`
-  // * `plugins`
-
+  });
   const server = await createServer({
-    configFile: false,
     root: paths.appRoot,
     define: {
       'process.env.DEBUG': JSON.stringify(false),

package/build/config/webpack-dev-server.config.js

@@ -8,7 +8,9 @@ const {
   processHeaders
 } = require('@commercetools-frontend/mc-html-template');
 
-const devAuthentication = require('@commercetools-frontend/mc-dev-authentication');
+const {
+  createMcDevAuthenticationMiddleware
+} = require('@commercetools-frontend/mc-dev-authentication');
 
 const applicationConfig = processConfig();
 const compiledHeaders = processHeaders(applicationConfig);
@@ -55,14 +57,12 @@ module.exports = ({
   https: false,
   port,
 
-  // Enable HTTPS if the HTTPS environment variable is set to 'true'
-  // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
   setupMiddlewares(middlewares, devServer) {
     if (!devServer) {
       throw new Error('webpack-dev-server is not defined');
     }
 
-    middlewares.push(devAuthentication.middlewares.createMcDevAuthenticationMiddleware(applicationConfig));
+    devServer.app.use(createMcDevAuthenticationMiddleware(applicationConfig));
     return middlewares;
   }
 

package/build/utils/fetch-custom-application.settings.graphql

@@ -16,6 +16,7 @@ query FetchCustomApplicationFromCli($entryPointUriPath: String!) {
       }
       mainMenuLink {
         defaultLabel
+        permissions
         labelAllLocales {
           locale
           value

package/build/utils/get-config-diff.js

@@ -0,0 +1,308 @@
+"use strict";
+
+const chalk = require('chalk'); // Since not all terminal supports colors, to make things more consistent for testing purposes,
+// during tests the color used is appended before the string instead of coloring it.
+
+
+const isTest = process.env.NODE_ENV === 'test';
+
+const red = str => {
+  if (isTest) return `<color-red>${str}</color-red>`;
+  return chalk.red(str);
+};
+
+const green = str => {
+  if (isTest) return `<color-green>${str}</color-green>`;
+  return chalk.green(str);
+}; // Two spaces are used for indentation.
+
+
+const indent = indentLevel => '  '.repeat(indentLevel);
+
+const getStringDiff = ({
+  previousValue,
+  nextValue,
+  label,
+  indentLevel = 0
+}) => {
+  if (!previousValue && nextValue) {
+    return `${indent(indentLevel)}${label} added: ${green(nextValue)}`;
+  }
+
+  if (previousValue && !nextValue) {
+    return `${indent(indentLevel)}${label} removed: ${red(previousValue)}`;
+  }
+
+  if (previousValue && nextValue && previousValue !== nextValue) {
+    return `${indent(indentLevel)}${label} changed: ${red(previousValue)} => ${green(nextValue)}`;
+  }
+
+  return null;
+}; // NOTE: this assumes that the array values are scalar values (not objects).
+
+
+const getArrayDiff = ({
+  previousValue,
+  nextValue,
+  label,
+  indentLevel = 0
+}) => {
+  const oldArraySet = new Set(previousValue);
+  const arrayDiff = [];
+  nextValue === null || nextValue === void 0 ? void 0 : nextValue.forEach(item => {
+    if (oldArraySet.has(item)) {
+      oldArraySet.delete(item);
+    } else {
+      arrayDiff.push(getStringDiff({
+        nextValue: item,
+        label,
+        indentLevel
+      }));
+    }
+  });
+  oldArraySet.forEach(item => {
+    arrayDiff.push(getStringDiff({
+      previousValue: item,
+      label,
+      indentLevel
+    }));
+  });
+  return arrayDiff.join('\n');
+};
+
+const getPermissionsDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const permissionDiff = ['permissions changed'];
+  const mappedOldPermissions = previousValue.reduce((previousPermission, {
+    name,
+    oAuthScopes
+  }) => ({ ...previousPermission,
+    [name]: oAuthScopes
+  }), {});
+  const indentLevel = 1;
+  nextValue.forEach(newPermission => {
+    const currentDiff = [`${indent(indentLevel)}"${newPermission.name}" changed`]; // if the permission name is not in the old config, it means it is a new addition.
+
+    if (!mappedOldPermissions[newPermission.name]) {
+      permissionDiff.push(`${indent(indentLevel)}"${green(newPermission.name)}" was added`);
+    } // if permission name is in the old config, now we check if there was a change
+    else {
+      currentDiff.push(getArrayDiff({
+        previousValue: mappedOldPermissions[newPermission.name],
+        nextValue: newPermission.oAuthScopes,
+        label: 'oauth scope',
+        indentLevel: 2
+      }));
+      delete mappedOldPermissions[newPermission.name];
+    }
+
+    currentDiff.filter(Boolean).length > 1 && permissionDiff.push(currentDiff.join('\n'));
+  }); // if there are old permissions left, it means they were deleted in the new Permissions.
+
+  Object.keys(mappedOldPermissions).forEach(oldPermissionName => {
+    permissionDiff.push(`${indent(indentLevel)}"${red(oldPermissionName)}" was removed`);
+  });
+  if (permissionDiff.length > 1) return permissionDiff.join('\n');
+};
+
+const getLabelAllLocalesDiff = ({
+  previousValue,
+  nextValue,
+  indentLevel = 0
+}) => {
+  const labelAllLocalesDiff = [`${indent(indentLevel - 1)}labelAllLocales changed`];
+  const mappedOldLabelAllLocales = (previousValue === null || previousValue === void 0 ? void 0 : previousValue.reduce((previousLabelAllLocale, {
+    locale,
+    value
+  }) => ({ ...previousLabelAllLocale,
+    [locale]: value
+  }), {})) ?? {};
+  nextValue === null || nextValue === void 0 ? void 0 : nextValue.forEach(newLabelAllLocale => {
+    if (newLabelAllLocale.locale in mappedOldLabelAllLocales) {
+      const oldLocaleValue = mappedOldLabelAllLocales[newLabelAllLocale.locale];
+
+      if (oldLocaleValue !== newLabelAllLocale.value) {
+        labelAllLocalesDiff.push(`${indent(indentLevel)}locale "${newLabelAllLocale.locale}" changed: ${red(oldLocaleValue)} => ${green(newLabelAllLocale.value)}`);
+      }
+
+      delete mappedOldLabelAllLocales[newLabelAllLocale.locale];
+    } else {
+      labelAllLocalesDiff.push(getStringDiff({
+        nextValue: newLabelAllLocale.locale,
+        label: 'locale',
+        indentLevel
+      }));
+    }
+  });
+  Object.keys(mappedOldLabelAllLocales).forEach(key => {
+    labelAllLocalesDiff.push(getStringDiff({
+      previousValue: key,
+      label: 'locale',
+      indentLevel
+    }));
+  });
+  if (labelAllLocalesDiff.length > 1) return labelAllLocalesDiff.join('\n');
+};
+
+const getMainMenuLinkDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const mainMenuLinkDiff = ['mainMenuLink changed'];
+  mainMenuLinkDiff.push(getStringDiff({
+    previousValue: previousValue.defaultLabel,
+    nextValue: nextValue.defaultLabel,
+    label: 'defaultLabel',
+    indentLevel: 1
+  }));
+  const mainMenuLinkPermissionsDiff = getArrayDiff({
+    previousValue: previousValue.permissions,
+    nextValue: nextValue.permissions,
+    label: 'applied permission',
+    indentLevel: 2
+  });
+
+  if (mainMenuLinkPermissionsDiff.length > 0) {
+    mainMenuLinkDiff.push(`${indent(1)}permissions changed`);
+    mainMenuLinkDiff.push(mainMenuLinkPermissionsDiff);
+  }
+
+  mainMenuLinkDiff.push(getLabelAllLocalesDiff({
+    previousValue: previousValue.labelAllLocales,
+    nextValue: nextValue.labelAllLocales,
+    indentLevel: 2
+  }));
+  const filteredMainMenuLinkDiff = mainMenuLinkDiff.filter(Boolean);
+  if (filteredMainMenuLinkDiff.length > 1) return filteredMainMenuLinkDiff.join('\n');
+};
+
+const getSubmenuLinksDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const submenuLinksDiff = ['submenuLink changed'];
+  const mappedSubmenuLinks = previousValue.reduce((previousSubmenuLink, currentSubmenuLink) => ({ ...previousSubmenuLink,
+    [currentSubmenuLink.uriPath]: currentSubmenuLink
+  }), {});
+  nextValue.forEach(newSubmenuLink => {
+    const oldSubMenuLink = mappedSubmenuLinks[newSubmenuLink.uriPath];
+
+    if (newSubmenuLink.uriPath in mappedSubmenuLinks) {
+      const submenuLinkDiff = [`${indent(1)}menu link "${newSubmenuLink.uriPath}" changed`];
+      Object.keys(mappedSubmenuLinks[newSubmenuLink.uriPath]).forEach(key => {
+        switch (key) {
+          case 'defaultLabel':
+            {
+              submenuLinkDiff.push(getStringDiff({
+                previousValue: oldSubMenuLink.defaultLabel,
+                nextValue: newSubmenuLink.defaultLabel,
+                label: 'defaultLabel',
+                indentLevel: 2
+              }));
+              break;
+            }
+
+          case 'permissions':
+            {
+              const submenuLinkPermissionsDiff = getArrayDiff({
+                previousValue: oldSubMenuLink.permissions,
+                nextValue: newSubmenuLink.permissions,
+                label: 'applied permission',
+                indentLevel: 3
+              });
+
+              if (submenuLinkPermissionsDiff.length > 0) {
+                submenuLinkDiff.push(`${indent(2)}permissions changed`);
+                submenuLinkDiff.push(submenuLinkPermissionsDiff);
+              }
+
+              break;
+            }
+
+          case 'labelAllLocales':
+            {
+              submenuLinkDiff.push(getLabelAllLocalesDiff({
+                previousValue: oldSubMenuLink.labelAllLocales,
+                nextValue: newSubmenuLink.labelAllLocales,
+                indentLevel: 3
+              }));
+              break;
+            }
+
+          default:
+            break;
+        }
+      });
+      delete mappedSubmenuLinks[newSubmenuLink.uriPath];
+      const filteredSubmenuLinksDiff = submenuLinkDiff.filter(Boolean);
+
+      if (filteredSubmenuLinksDiff.length > 1) {
+        submenuLinksDiff.push(filteredSubmenuLinksDiff.join('\n'));
+      }
+    } else {
+      submenuLinksDiff.push(getStringDiff({
+        nextValue: newSubmenuLink.uriPath,
+        label: 'menu link',
+        indentLevel: 1
+      }));
+    }
+  });
+  Object.keys(mappedSubmenuLinks).forEach(key => {
+    submenuLinksDiff.push(getStringDiff({
+      previousValue: key,
+      label: 'menu link',
+      indentLevel: 1
+    }));
+  });
+  if (submenuLinksDiff.length > 1) return submenuLinksDiff.join('\n');
+}; // Compute diff changes of the Custom Application config.
+// NOTE: Only known keys are evaluated.
+
+
+const getConfigDiff = (oldConfig, newConfig) => {
+  const diff = []; // Name
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.name,
+    nextValue: newConfig.name,
+    label: 'name'
+  })); // Description
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.description,
+    nextValue: newConfig.description,
+    label: 'description'
+  })); // URL
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.url,
+    nextValue: newConfig.url,
+    label: 'url'
+  })); // Icon
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.icon,
+    nextValue: newConfig.icon,
+    label: 'icon'
+  })); // Permissions
+
+  diff.push(getPermissionsDiff({
+    previousValue: oldConfig.permissions,
+    nextValue: newConfig.permissions
+  })); // Main menu link
+
+  diff.push(getMainMenuLinkDiff({
+    previousValue: oldConfig.mainMenuLink,
+    nextValue: newConfig.mainMenuLink
+  })); // Submenu links
+
+  diff.push(getSubmenuLinksDiff({
+    previousValue: oldConfig.submenuLinks,
+    nextValue: newConfig.submenuLinks
+  }));
+  return diff.filter(Boolean).join('\n');
+};
+
+module.exports = getConfigDiff;

package/build/utils/get-config-diff.spec.js

@@ -0,0 +1,285 @@
+"use strict";
+
+const getConfigDiff = require('./get-config-diff');
+
+const createTestConfig = customConfig => ({
+  entryPointUriPath: 'my-test-app',
+  name: 'test name',
+  description: 'test description',
+  url: 'https://test.com',
+  icon: '<svg><path fill="#000000"></path></svg>',
+  permissions: [],
+  mainMenuLink: {},
+  submenuLinks: [],
+  ...customConfig
+});
+
+describe('when there are no changes', () => {
+  it('should display no diff', () => {
+    expect(getConfigDiff(createTestConfig(), createTestConfig())).toBe('');
+  });
+});
+describe('when there are changes', () => {
+  it('should display diff if "name", "description", "icon", "url" changed', () => {
+    const newConfig = createTestConfig({
+      name: 'updated test name',
+      description: 'updated description',
+      url: 'https://updated-test.com',
+      icon: '<svg><path fill="#ffffff"></path></svg>'
+    });
+    expect(getConfigDiff(createTestConfig(), newConfig)).toMatchInlineSnapshot(`
+      "name changed: <color-red>test name</color-red> => <color-green>updated test name</color-green>
+      description changed: <color-red>test description</color-red> => <color-green>updated description</color-green>
+      url changed: <color-red>https://test.com</color-red> => <color-green>https://updated-test.com</color-green>
+      icon changed: <color-red><svg><path fill=\\"#000000\\"></path></svg></color-red> => <color-green><svg><path fill=\\"#ffffff\\"></path></svg></color-green>"
+    `);
+  });
+  it('should display diff if "description" is removed', () => {
+    const newConfig = createTestConfig({
+      description: undefined
+    });
+    expect(getConfigDiff(createTestConfig(), newConfig)).toMatchInlineSnapshot(`"description removed: <color-red>test description</color-red>"`);
+  });
+  it('should display diff for "permissions"', () => {
+    const oldConfig = createTestConfig({
+      permissions: [{
+        oAuthScopes: ['manage_product'],
+        name: 'manageMyTestApp'
+      }, {
+        oAuthScopes: ['view_products', 'view_customers'],
+        name: 'viewMyTestApp'
+      }]
+    });
+    const newConfig = createTestConfig({
+      permissions: [{
+        oAuthScopes: ['manage_customer'],
+        name: 'manageMyTestApp'
+      }, {
+        oAuthScopes: ['view_products', 'view_customers', 'view_orders'],
+        name: 'viewMyTestApp'
+      }]
+    });
+    expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+      "permissions changed
+        \\"manageMyTestApp\\" changed
+          oauth scope added: <color-green>manage_customer</color-green>
+          oauth scope removed: <color-red>manage_product</color-red>
+        \\"viewMyTestApp\\" changed
+          oauth scope added: <color-green>view_orders</color-green>"
+    `);
+  });
+  describe('for "mainMenuLink"', () => {
+    it('should display diff for "mainMenuLink" when assigning new permissions', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          permissions changed
+            applied permission added: <color-green>ViewMyTestApp</color-green>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when removing permissions', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          permissions changed
+            applied permission removed: <color-red>ViewMyTestApp</color-red>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when assigning new labels', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }]
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          labelAllLocales changed
+            locale added: <color-green>de</color-green>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when removing labels', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }]
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          labelAllLocales changed
+            locale removed: <color-red>de</color-red>"
+      `);
+    });
+    it('should display multiple diff for changes of existing "mainMenuLink"', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }, {
+            locale: 'en',
+            value: 'The Avengers'
+          }]
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Justice League',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Justice League'
+          }, {
+            locale: 'it',
+            value: 'La Justice League'
+          }]
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          defaultLabel changed: <color-red>Avengers</color-red> => <color-green>Justice League</color-green>
+          permissions changed
+            applied permission added: <color-green>ManageMyTestApp</color-green>
+            applied permission removed: <color-red>ViewMyTestApp</color-red>
+          labelAllLocales changed
+            locale \\"de\\" changed: <color-red>Die Avengers</color-red> => <color-green>Die Justice League</color-green>
+            locale added: <color-green>it</color-green>
+            locale removed: <color-red>en</color-red>"
+      `);
+    });
+  });
+  describe('for "submenuLinks"', () => {
+    it('should display diff for "submenuLinks" when adding a new menu link', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: []
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }]
+        }]
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link added: <color-green>my-test-app/new</color-green>"
+      `);
+    });
+    it('should display diff for "submenuLinks" when removing a menu link', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }]
+        }]
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: []
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link removed: <color-red>my-test-app/new</color-red>"
+      `);
+    });
+    it('should display multiple diff for changes of existing "submenuLinks"', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }, {
+            locale: 'en',
+            value: 'Add Avenger'
+          }]
+        }]
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'Add Avenger',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Avenger hinzufügen'
+          }, {
+            locale: 'it',
+            value: 'Nuovo Avenger'
+          }]
+        }]
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link \\"my-test-app/new\\" changed
+            defaultLabel changed: <color-red>New Avenger</color-red> => <color-green>Add Avenger</color-green>
+            permissions changed
+              applied permission removed: <color-red>ManageMyTestApp</color-red>
+            labelAllLocales changed
+              locale \\"de\\" changed: <color-red>Neu Avenger</color-red> => <color-green>Avenger hinzufügen</color-green>
+              locale added: <color-green>it</color-green>
+              locale removed: <color-red>en</color-red>"
+      `);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.4.0",
+  "version": "21.7.0",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -29,18 +29,18 @@
     "@babel/core": "^7.17.9",
     "@babel/runtime": "^7.17.9",
     "@babel/runtime-corejs3": "^7.17.9",
-    "@commercetools-frontend/application-config": "21.3.4",
+    "@commercetools-frontend/application-config": "21.7.0",
     "@commercetools-frontend/assets": "21.0.0",
     "@commercetools-frontend/babel-preset-mc-app": "21.3.4",
     "@commercetools-frontend/constants": "21.3.4",
-    "@commercetools-frontend/mc-dev-authentication": "21.4.0",
-    "@commercetools-frontend/mc-html-template": "21.4.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@commercetools-frontend/mc-dev-authentication": "21.7.0",
+    "@commercetools-frontend/mc-html-template": "21.7.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@rollup/plugin-graphql": "1.1.0",
     "@svgr/webpack": "6.2.1",
-    "@vitejs/plugin-react": "1.3.0",
+    "@vitejs/plugin-react": "1.3.2",
     "autoprefixer": "^10.4.4",
-    "babel-loader": "8.2.4",
+    "babel-loader": "8.2.5",
     "browserslist": "^4.20.2",
     "chalk": "4.1.2",
     "core-js": "^3.21.1",
@@ -48,7 +48,7 @@
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "16.0.0",
     "dotenv-expand": "8.0.3",
-    "fs-extra": "10.0.1",
+    "fs-extra": "10.1.0",
     "graphql-request": "^4.2.0",
     "graphql-tag": "^2.12.6",
     "html-webpack-plugin": "5.5.0",
@@ -56,7 +56,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.2.0",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "12.1.4",
     "postcss-import": "14.1.0",
@@ -66,8 +66,8 @@
     "prompts": "^2.4.2",
     "querystring-es3": "^0.2.1",
     "rcfile": "1.0.3",
-    "react-dev-utils": "12.0.0",
-    "react-refresh": "0.11.0",
+    "react-dev-utils": "12.0.1",
+    "react-refresh": "0.13.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
     "style-loader": "3.3.1",
@@ -75,10 +75,10 @@
     "terser-webpack-plugin": "5.3.1",
     "thread-loader": "3.0.4",
     "url": "^0.11.0",
-    "vite": "2.9.1",
+    "vite": "2.9.8",
     "webpack": "5.72.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-server": "4.8.1",
+    "webpack-dev-server": "4.9.0",
     "webpackbar": "5.0.2"
   },
   "devDependencies": {

package/build/utils/update-application-id-in-custom-application-config.js

@@ -1,60 +0,0 @@
-"use strict";
-
-const fs = require('fs');
-
-const rcfile = require('rcfile');
-
-const prettier = require('prettier');
-
-const babel = require('@babel/core');
-
-const {
-  getConfigPath
-} = require('@commercetools-frontend/application-config');
-
-function updateApplicationIdInCustomApplicationConfig(applicationId) {
-  const filePath = getConfigPath();
-
-  if (filePath.endsWith('.json')) {
-    const customApplicationConfig = require(filePath);
-
-    customApplicationConfig.env.production.applicationId = applicationId;
-    const prettierConfig = rcfile('prettier');
-    const formattedData = prettier.format(JSON.stringify(customApplicationConfig), { ...prettierConfig,
-      parser: 'json'
-    });
-    fs.writeFileSync(filePath, formattedData, {
-      encoding: 'utf8'
-    });
-    return;
-  }
-
-  const result = babel.transformFileSync(filePath, {
-    plugins: [function replaceCustomApplicationConfig() {
-      return {
-        visitor: {
-          Identifier(nodePath) {
-            if (nodePath.isIdentifier({
-              name: 'applicationId'
-            })) {
-              if (nodePath.findParent(parentPath => parentPath.get('key').isIdentifier({
-                name: 'env'
-              }))) {
-                nodePath.parent.value = babel.types.stringLiteral(applicationId);
-              }
-            }
-          }
-
-        }
-      };
-    }],
-    retainLines: true
-  });
-  const prettierConfig = rcfile('prettier');
-  const formattedData = prettier.format(result.code, prettierConfig);
-  fs.writeFileSync(filePath, formattedData, {
-    encoding: 'utf8'
-  });
-}
-
-module.exports = updateApplicationIdInCustomApplicationConfig;