@commercetools-frontend/mc-scripts 0.0.0-canary-20220401074414 → 0.0.0-canary-20220401092258

package/build/bin/cli.js

@@ -54,6 +54,8 @@ Commands:
 
   login                       Log in to your Merchant Center account through the CLI, using the cloud environment information from the Custom Application config file. An API token is generated and stored in a configuration file for the related cloud environment, and valid for 36 hours.
 
+  config:sync                 Synchronizes the local Custom Application config with the Merchant Center. A new Custom Application will be created if none existed, otherwise it will be updated.
+    --dry-run                 (optional) Executes the command but does not send any mutation request.
   `);
   process.exit(0);
 }
@@ -122,6 +124,18 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           break;
         }
 
+      case 'config:sync':
+        {
+          // Do this as the first thing so that any code reading it knows the right env.
+          process.env.NODE_ENV = 'production'; // Get specific flag for this command.
+
+          const commandArgs = getArgsForCommand(['dry-run']);
+          proxyCommand(command, {
+            commandArgs
+          });
+          break;
+        }
+
       default:
         console.log(`Unknown script "${command}".`);
         console.log('Perhaps you need to update mc-scripts?');

package/build/commands/config:sync.js

@@ -0,0 +1,171 @@
+"use strict";
+
+const omit = require('lodash/omit');
+
+const prompts = require('prompts');
+
+const mri = require('mri');
+
+const chalk = require('chalk');
+
+const {
+  processConfig
+} = require('@commercetools-frontend/application-config');
+
+const CredentialsStorage = require('../utils/credentials-storage');
+
+const {
+  fetchCustomApplication,
+  updateCustomApplication,
+  createCustomApplication,
+  fetchUserOrganizations
+} = require('../utils/graphql-requests');
+
+const updateApplicationIdInCustomApplicationConfig = require('../utils/update-application-id-in-custom-application-config');
+
+const flags = mri(process.argv.slice(2), {
+  boolean: ['dry-run']
+});
+const credentialsStorage = new CredentialsStorage();
+
+const getMcUrlLink = (mcApiUrl, organizationId, applicationId) => {
+  const mcUrl = mcApiUrl.replace('mc-api', 'mc');
+  const customAppLink = `${mcUrl}/account/organizations/${organizationId}/custom-applications/owned/${applicationId}`;
+  return customAppLink;
+};
+
+const configSync = async () => {
+  const applicationConfig = processConfig();
+  const {
+    data: localCustomAppData
+  } = applicationConfig;
+  const {
+    mcApiUrl
+  } = applicationConfig.env;
+
+  if (!credentialsStorage.isSessionValid(mcApiUrl)) {
+    throw new Error(`You don't have a valid session for the ${mcApiUrl} environment. Please, run the "mc-scripts login" command to authenticate yourself.`);
+  }
+
+  const token = credentialsStorage.getToken(mcApiUrl);
+  const fetchedCustomApplication = await fetchCustomApplication({
+    mcApiUrl,
+    token,
+    entryPointUriPath: localCustomAppData.entryPointUriPath
+  });
+
+  if (!fetchedCustomApplication) {
+    const userOrganizations = await fetchUserOrganizations({
+      mcApiUrl,
+      token
+    });
+    let organizationId, organizationName;
+
+    if (userOrganizations.total === 0) {
+      throw new Error(`It seems you are not an admin of any Organization. Please make sure to be part of the Administrators team of the Organization you want the Custom Application to be configured to.`);
+    }
+
+    if (userOrganizations.total === 1) {
+      const [organization] = userOrganizations.results;
+      organizationId = organization.id;
+      organizationName = organization.name;
+    } else {
+      const organizationChoices = userOrganizations.results.map(organization => ({
+        title: organization.name,
+        value: organization.id
+      }));
+      const {
+        organizationId: selectedOrganizationId
+      } = await prompts({
+        type: 'select',
+        name: 'organizationId',
+        message: 'Select Organization',
+        choices: organizationChoices,
+        initial: 0
+      });
+
+      if (!selectedOrganizationId) {
+        throw new Error(`No Organization selected, aborting.`);
+      }
+
+      organizationId = selectedOrganizationId;
+      organizationName = organizationChoices.find(({
+        value
+      }) => value === organizationId).title;
+    }
+
+    const {
+      confirmation
+    } = await prompts({
+      type: 'text',
+      name: 'confirmation',
+      message: `You are about to create a new Custom Application in the "${organizationName}" organization for the ${mcApiUrl} environment. Are you sure you want to proceed?`,
+      initial: 'yes'
+    });
+
+    if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
+      console.log(chalk.red('Aborted.'));
+      return;
+    }
+
+    const data = omit(localCustomAppData, ['id']);
+
+    if (flags['dry-run']) {
+      console.log(chalk.gray('DRY RUN mode'));
+      console.log(`A new Custom Application would be created for the Organization ${organizationName} with the following payload:`);
+      console.log(JSON.stringify(data));
+      return;
+    }
+
+    const createdCustomApplication = await createCustomApplication({
+      mcApiUrl,
+      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}.`));
+    return;
+  } // TODO: show diff (followup task)
+
+
+  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?`,
+    initial: 'yes'
+  });
+
+  if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
+    console.log(chalk.red('Aborted.'));
+    return;
+  }
+
+  const data = omit(localCustomAppData, ['id']);
+
+  if (flags['dry-run']) {
+    console.log(chalk.gray('DRY RUN mode'));
+    console.log(`The Custom Application ${data.name} would be updated with the following payload:`);
+    console.log(JSON.stringify(data));
+    return;
+  }
+
+  await updateCustomApplication({
+    mcApiUrl,
+    token,
+    organizationId: fetchedCustomApplication.organizationId,
+    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}.`));
+};
+
+configSync().catch(error => {
+  console.log(chalk.red(error));
+  process.exit(1);
+});

package/build/commands/login.js

@@ -1,12 +1,8 @@
 "use strict";
 
-const {
-  promisify
-} = require('util');
-
-const read = promisify(require('read'));
+const prompts = require('prompts');
 
-const chalk = require('react-dev-utils/chalk');
+const chalk = require('chalk');
 
 const {
   processConfig
@@ -31,13 +27,25 @@ const login = async () => {
     return;
   }
 
-  const email = await read({
-    prompt: 'Email: '
+  const {
+    email
+  } = await prompts({
+    type: 'text',
+    name: 'email',
+    message: 'Email'
   });
-  const password = await read({
-    prompt: 'Password (hidden): ',
-    silent: true
+  const {
+    password
+  } = await prompts({
+    type: 'invisible',
+    name: 'password',
+    message: 'Password (hidden)'
   });
+
+  if (!email || !password) {
+    throw new Error(`Missing email or password values. Aborting.`);
+  }
+
   const credentials = await getAuthToken(mcApiUrl, {
     email,
     password
@@ -47,6 +55,6 @@ const login = async () => {
 };
 
 login().catch(error => {
-  console.error(error);
+  console.log(chalk.red(error));
   process.exit(1);
 });

package/build/utils/auth.js

@@ -2,18 +2,7 @@
 
 const fetch = require('node-fetch');
 
-const createHttpUserAgent = require('@commercetools/http-user-agent');
-
-const pkgJson = require('../../package.json');
-
-const userAgent = createHttpUserAgent({
-  name: 'cli-login',
-  libraryName: 'mc-scripts',
-  libraryVersion: pkgJson.version,
-  contactUrl: 'https://git.io/fjuyC',
-  // points to the appkit repo issues
-  contactEmail: 'support@commercetools.com'
-});
+const userAgent = require('./user-agent');
 
 const getAuthToken = async (mcApiUrl, payload) => {
   const response = await fetch(`${mcApiUrl}/tokens/cli`, {

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

@@ -0,0 +1,8 @@
+mutation CreateCustomApplicationFromCli(
+  $organizationId: String!
+  $data: CustomApplicationDraftDataInput!
+) {
+  createCustomApplication(organizationId: $organizationId, data: $data) {
+    id
+  }
+}

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

@@ -0,0 +1,35 @@
+query FetchCustomApplicationFromCli($entryPointUriPath: String!) {
+  organizationExtensionForCustomApplication(
+    entryPointUriPath: $entryPointUriPath
+  ) {
+    organizationId
+    application {
+      id
+      entryPointUriPath
+      name
+      description
+      url
+      icon
+      permissions {
+        name
+        oAuthScopes
+      }
+      mainMenuLink {
+        defaultLabel
+        labelAllLocales {
+          locale
+          value
+        }
+      }
+      submenuLinks {
+        uriPath
+        defaultLabel
+        permissions
+        labelAllLocales {
+          locale
+          value
+        }
+      }
+    }
+  }
+}

package/build/utils/fetch-user-organizations.core.graphql

@@ -0,0 +1,9 @@
+query FetchMyOrganizationsFromCli {
+  myOrganizations {
+    total
+    results {
+      id
+      name
+    }
+  }
+}

package/build/utils/graphql-requests.js

@@ -0,0 +1,105 @@
+"use strict";
+
+const {
+  GraphQLClient
+} = require('graphql-request');
+
+const {
+  GRAPHQL_TARGETS
+} = require('@commercetools-frontend/constants');
+
+const userAgent = require('./user-agent');
+
+const requireGraphqlHelper = require('./require-graphql');
+
+const requireGraphql = requireGraphqlHelper(__dirname);
+const FetchCustomApplicationFromCli = requireGraphql('./fetch-custom-application.settings.graphql');
+const UpdateCustomApplicationFromCli = requireGraphql('./update-custom-application.settings.graphql');
+const CreateCustomApplicationFromCli = requireGraphql('./create-custom-application.settings.graphql');
+const FetchMyOrganizationsFromCli = requireGraphql('./fetch-user-organizations.core.graphql');
+
+const graphQLClient = (uri, token, target = GRAPHQL_TARGETS.SETTINGS_SERVICE) => new GraphQLClient(`${uri}/graphql`, {
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    'x-graphql-target': target,
+    'x-mc-cli-access-token': token,
+    'x-user-agent': userAgent
+  }
+});
+
+const fetchCustomApplication = async ({
+  mcApiUrl,
+  token,
+  entryPointUriPath
+}) => {
+  const variables = {
+    entryPointUriPath
+  };
+
+  try {
+    const customAppData = await graphQLClient(mcApiUrl, token).request(FetchCustomApplicationFromCli, variables);
+    return customAppData.organizationExtensionForCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const updateCustomApplication = async ({
+  mcApiUrl,
+  token,
+  applicationId,
+  organizationId,
+  data
+}) => {
+  const variables = {
+    organizationId,
+    applicationId,
+    data
+  };
+
+  try {
+    const updatedCustomAppsData = await graphQLClient(mcApiUrl, token).request(UpdateCustomApplicationFromCli, variables);
+    return updatedCustomAppsData.updateCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const createCustomApplication = async ({
+  mcApiUrl,
+  token,
+  organizationId,
+  data
+}) => {
+  const variables = {
+    organizationId,
+    data
+  };
+
+  try {
+    const createdCustomAppData = await graphQLClient(mcApiUrl, token).request(CreateCustomApplicationFromCli, variables);
+    return createdCustomAppData.createCustomApplication;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+const fetchUserOrganizations = async ({
+  mcApiUrl,
+  token
+}) => {
+  try {
+    const userOrganizations = await graphQLClient(mcApiUrl, token, GRAPHQL_TARGETS.ADMINISTRATION_SERVICE).request(FetchMyOrganizationsFromCli);
+    return userOrganizations.myOrganizations;
+  } catch (error) {
+    throw new Error(error.response.message);
+  }
+};
+
+module.exports = {
+  fetchCustomApplication,
+  updateCustomApplication,
+  createCustomApplication,
+  fetchUserOrganizations
+};

package/build/utils/graphql-requests.spec.js

@@ -0,0 +1,159 @@
+"use strict";
+
+const {
+  graphql
+} = require('msw');
+
+const {
+  setupServer
+} = require('msw/node');
+
+const {
+  createCustomApplication,
+  updateCustomApplication,
+  fetchCustomApplication,
+  fetchUserOrganizations
+} = require('./graphql-requests');
+
+const mockServer = setupServer();
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => mockServer.listen({
+  onUnhandledRequest: 'bypass'
+}));
+afterAll(() => mockServer.close());
+const mcApiUrl = 'https://mc-api.europe-west1.gcp.commercetools.com';
+describe('fetch custom application data', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.query('FetchCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        organizationExtensionForCustomApplication: {
+          id: 'test-id',
+          organizationId: 'org-id',
+          application: {
+            url: 'https://test.com',
+            name: 'Test name',
+            description: 'Test description',
+            entryPointUriPath: 'test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const organizationExtensionForCustomApplication = await fetchCustomApplication({
+      entryPointUriPath: 'test-custom-app',
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(organizationExtensionForCustomApplication.application.entryPointUriPath).toEqual('test-custom-app');
+    expect(organizationExtensionForCustomApplication.id).toEqual('test-id');
+    expect(organizationExtensionForCustomApplication.organizationId).toEqual('org-id');
+  });
+});
+describe('register custom application', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.mutation('CreateCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        createCustomApplication: {
+          id: 'new-test-id',
+          application: {
+            url: 'https://test.com',
+            name: 'New Test name',
+            description: 'Test description',
+            entryPointUriPath: 'new-test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewNewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageNewTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const createdCustomAppsData = await createCustomApplication({
+      entryPointUriPath: 'new-test-custom-app',
+      mcApiUrl,
+      token: 'new-test-token'
+    });
+    expect(createdCustomAppsData.application.entryPointUriPath).toEqual('new-test-custom-app');
+    expect(createdCustomAppsData.id).toEqual('new-test-id');
+  });
+});
+describe('update custom application', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.mutation('UpdateCustomApplicationFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        updateCustomApplication: {
+          id: 'test-id',
+          application: {
+            url: 'https://test.com',
+            name: 'Updated Test name',
+            description: 'Updated Test description',
+            entryPointUriPath: 'updated-test-custom-app',
+            icon: '<svg><path fill="#000000"></path></svg>',
+            submenuLinks: [],
+            mainMenuLink: [],
+            permissions: [{
+              oAuthScopes: ['view_products', 'view_customers'],
+              name: 'viewNewTestCustomApp'
+            }, {
+              oAuthScopes: [],
+              name: 'manageNewTestCustomApp'
+            }]
+          }
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const updatedCustomAppsData = await updateCustomApplication({
+      entryPointUriPath: 'updated-test-custom-app',
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(updatedCustomAppsData.application.name).toEqual('Updated Test name');
+    expect(updatedCustomAppsData.application.description).toEqual('Updated Test description');
+  });
+});
+describe('fetch user organizations', () => {
+  beforeEach(() => {
+    mockServer.use(graphql.query('FetchMyOrganizationsFromCli', (req, res, ctx) => {
+      return res(ctx.data({
+        myOrganizations: {
+          total: 1,
+          results: [{
+            id: 'test-organization-id',
+            name: 'test-organization-name'
+          }]
+        }
+      }));
+    }));
+  });
+  it('should match returned data', async () => {
+    const data = await fetchUserOrganizations({
+      mcApiUrl,
+      token: 'test-token'
+    });
+    expect(data.results[0].id).toEqual('test-organization-id');
+    expect(data.results[0].name).toEqual('test-organization-name');
+  });
+});

package/build/utils/require-graphql.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const path = require('path');
+
+const {
+  readFileSync
+} = require('fs'); // At the moment there is no proper way of loading `.graphql` files
+// in nodejs. This workaround basically uses `readFileSync` to read the file
+// content as a string.
+// https://github.com/apollographql/graphql-tools/issues/273
+
+
+const requireGraphql = folderPath => filePath => readFileSync(path.join(folderPath, filePath), 'utf-8');
+
+module.exports = requireGraphql;

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

@@ -0,0 +1,60 @@
+"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;

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

@@ -0,0 +1,13 @@
+mutation UpdateCustomApplicationFromCli(
+  $organizationId: String!
+  $data: CustomApplicationDraftDataInput!
+  $applicationId: ID!
+) {
+  updateCustomApplication(
+    organizationId: $organizationId
+    data: $data
+    applicationId: $applicationId
+  ) {
+    id
+  }
+}

package/build/utils/user-agent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const createHttpUserAgent = require('@commercetools/http-user-agent');
+
+const pkgJson = require('../../package.json');
+
+const userAgent = createHttpUserAgent({
+  name: 'cli-login',
+  libraryName: 'mc-scripts',
+  libraryVersion: pkgJson.version,
+  contactUrl: 'https://git.io/fjuyC',
+  // points to the appkit repo issues
+  contactEmail: 'support@commercetools.com'
+});
+module.exports = userAgent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "0.0.0-canary-20220401074414",
+  "version": "0.0.0-canary-20220401092258",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -40,28 +40,32 @@
     ]
   },
   "scripts": {
-    "build": "rimraf build && babel src --out-dir build",
+    "build": "rimraf build && babel src --out-dir build && ../../scripts/copy-graphql-files.mjs src build",
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
+    "@babel/core": "^7.17.8",
     "@babel/runtime": "^7.17.8",
     "@babel/runtime-corejs3": "^7.17.8",
-    "@commercetools-frontend/application-config": "0.0.0-canary-20220401074414",
+    "@commercetools-frontend/application-config": "0.0.0-canary-20220401092258",
     "@commercetools-frontend/assets": "21.0.0",
-    "@commercetools-frontend/babel-preset-mc-app": "0.0.0-canary-20220401074414",
+    "@commercetools-frontend/babel-preset-mc-app": "0.0.0-canary-20220401092258",
+    "@commercetools-frontend/constants": "0.0.0-canary-20220401092258",
     "@commercetools-frontend/mc-dev-authentication": "21.0.0",
-    "@commercetools-frontend/mc-html-template": "0.0.0-canary-20220401074414",
+    "@commercetools-frontend/mc-html-template": "0.0.0-canary-20220401092258",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "@svgr/webpack": "6.2.1",
     "autoprefixer": "^10.4.4",
     "babel-loader": "8.2.4",
     "browserslist": "^4.20.2",
+    "chalk": "4.1.2",
     "core-js": "^3.21.1",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "16.0.0",
     "dotenv-expand": "8.0.3",
     "fs-extra": "10.0.1",
+    "graphql-request": "^4.1.0",
     "graphql-tag": "^2.12.6",
     "html-webpack-plugin": "5.5.0",
     "json-loader": "0.5.7",
@@ -74,10 +78,12 @@
     "postcss-import": "14.1.0",
     "postcss-loader": "6.2.1",
     "postcss-reporter": "7.0.5",
+    "prettier": "2.6.1",
+    "prompts": "^2.4.2",
     "querystring-es3": "^0.2.1",
+    "rcfile": "1.0.3",
     "react-dev-utils": "12.0.0",
     "react-refresh": "0.12.0",
-    "read": "^1.0.7",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
     "style-loader": "3.3.1",