Custom Application Registration Client Value Overwriting

[kristerslinde]

Hello,
We are working on a service and we ran into some questions.

We have some values in the config file, most importantly entryPointUriPath.
Currently, as I understand it, the value gets overwritten by what is passed by the client during the custom application registration. Is it so? Is it possible to somehow disallow this and use the values from the 'custom-application-config.mjs'?

The second question comes out of the first one. In our local build, we managed to set the 'config.icon' to a custom icon, and it worked properly and ended up in the production build. But again, during the application registration, the end user is required to select an icon from the dropdown menu inside the Merchant Center, is it possible to override this?

If it is not possible to override these values, then what would you suggest to do so these values are, say 'hardcoded'?

Best Regards,
Kristers Linde

[CarlosCortizasCT]

Hello @kristerslinde ✋

Thanks for reaching out 👍

Let me start with the icon question.
You can provide a custom SVG from your configuration file (reference), which seems you already did, and then sync your local configuration file to the Merchant Center using the mc-scripts config:sync command.
This is the only way we currently support for using a custom icon in the Merchant Center navigation sidebar.

Regarding the entry-point, we're not sure we understand what are your requirements.
Can you maybe share more context about what setup you are looking for so we get a better understanding? 🙏

Thanks!

[kristerslinde]

Hello @CarlosCortizasCT

Regarding the icon, won't the client/user be able to override this in the application registration?
Or I am understanding wrong and the mc-scripts config:sync makes it for every instance the same icon?

It's a similar issue as with the icon, we want to make sure the user/client can't edit the entryPointUriPath and it would be, for example, 'my-integration-application' in the config file and they couldn't edit it. Is that even possible?

Best Regards,
Kristers

[CarlosCortizasCT]

Hello Kristers,

The Custom Application configuration can be edited in the Merchant Center by anyone who is an administrator of the organization where it has been configured.

So, if I understand correctly your questions:

• icon: yes, an admin user would be able to change the configured icon from the Custom Application config file
• entryPointUriPath: no, this field can't be modified once the Custom Application is first configured

Hope this helps.

[kristerslinde]

Hey Carlos,

Maybe there is an option to disable creating a custom entryPointUriPath for the client and make it static always?
So the client can't change it to something else in the Merchant Center.

Best Regards,
Kristers

[CarlosCortizasCT]

Hello Kristers,

I'm sorry but I'm not sure I'm understanding your point.
Once a Custom Application is first configured in the Merchant Center, its entryPointUriPath can't be changed.
Admin users won't be able to change in the Merchant Center and if a developer changes it in the Custom Application configuration file, it won't work anymore.

Does this answer your question?

[serge-dynamic]

Hi there @CarlosCortizasCT!

I'll make sure to try to elaborate.

We are working on the custom application (https://docs.commercetools.com/custom-applications/getting-started) we created using the template.

Our connector app works, but currently, we have the entryPointUriPath hardcoded inside the /mc-app/src/constants.js, the same way it is in the template.

I'm trying to extract the entryPointUriPath into the environment variables so that the end use of this Connector Application can configure it himself.

But when I try to request a preview of the Connector App - it gets rejected.

The only difference between the accepted Connector App and the rejected is the mc-app config.

Here are some code snippets:

connect.yaml

deployAs:
  - name: mc-app
    applicationType: merchant-center-custom-application
    endpoint: /
    configuration:
      standardConfiguration:
        - key: ENTRY_POINT
          description: Application entry point URI path should be the same value as specified during the Custom Application Registration
          required: true
        - key: APPLICATION_ID
          description: The Custom Application ID is provided when you add a Custom Application in the Merchant Center
          required: true
        - key: CLOUD_IDENTIFIER
          description: The identifier of the cloud Region that the Custom Application uses to connect to Composable Commerce. The values map to the actual Merchant Center API URL for that Region
          required: true
        - key: SERVICE_URL
          description: The URL of the deployed service
          required: true

custom-application-config.mjs:

import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';

export const entryPointUriPath = '${env:ENTRY_POINT}';
export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);

/**
 * @type {import('@commercetools-frontend/application-config').ConfigOptionsForCustomApplication}
 */
const config = {
  name: 'Dynamic Yield',
  entryPointUriPath,
  cloudIdentifier: '${env:CLOUD_IDENTIFIER}',
  env: {
    development: {
      initialProjectKey: 'dy-integration-test',
    },
    production: {
      applicationId: '${env:APPLICATION_ID}',
      url: '${env:APPLICATION_URL}',
    },
  },
  oAuthScopes: {
    // * Permissions needed to access the custom objects
    // * https://docs.commercetools.com/api/projects/custom-objects
    view: ['view_products', 'view_orders', 'view_customers', 'view_key_value_documents'],
    manage: ['manage_products', 'manage_orders', 'manage_customers', 'manage_key_value_documents'],
  },
  icon: '${path:./src/assets/dy_icon.svg}',
  mainMenuLink: {
    defaultLabel: 'Dynamic Yield',
    labelAllLocales: [],
    permissions: [PERMISSIONS.View],
  },
  // * https://docs.commercetools.com/custom-applications/api-reference/application-config#additionalenv
  additionalEnv: {
    // * Makes the env variable available via the useApplicationContext hook
    // * https://docs.commercetools.com/custom-applications/api-reference/application-config#runtime-application-environment
    serviceURL: '${env:SERVICE_URL}',
  },
  headers: {
    csp: {
      'connect-src': ['${env:SERVICE_URL}'],
    },
  },
  submenuLinks: [
    {
      uriPath: 'product-sync',
      defaultLabel: 'Product Catalog Sync',
      labelAllLocales: [],
      permissions: [PERMISSIONS.View],
    },
  ],
};

export default config;

I should mention that locally the app works just fine, mc-scripts start, npm run compile-html:local && mc-scripts serve, mc-scripts build, mc-scripts compile-html, jest --config jest.test.config.js --passWithNoTests, all the commands are exited successfully.

We would really appreciate it if you could help us with this.

[serge-dynamic]

Hi @CarlosCortizasCT,

The goal is to create a public Connector App that would sync the products from the Commercetools Merchant Center to Dynamic Yield admin panel.

Do you want customers outside your organization to deploy it and use it: yes, the customers should be able to install this connector app into their Merchant Center.

Could you share what process are you referring to?: I'm referring to the Request Preview functionality from Connect -> Manage connectors -> Organization connectors

[serge-dynamic]

What's the rejection reason you get back:

I'm not aware of how to check the logs in more detail, here is what I see in the Preview Report

Information
Image security analysis check skipped
Information
SAST and SCA analysis check skipped
Information
Connector specification file validation check succeeded

[CarlosCortizasCT]

Hi @serge-dynamic

We're still not sure your expectations on this regard:

Do you want customers outside your organization to deploy it and use it: yes, the customers should be able to install this connector app into their Merchant Center.

Currently Custom Applications have an owner. This is the one who configures it in the Merchant Center.
This means the owner builds and deploys the Custom Application and lets Merchant Center know about it.

The owner is Merchant Center user which is part of the Administrators team of an specific organization and configuring The Custom Application means that organization is its owner, meaning it can be installed in all projects of that organization.
Also, if a user is part of the Administrators team of several organizations, s/he will be able to install the Custom Application in the projects of all those organizations.

Based on the information you shared with us so far, we think you might be looking for a different scenario where you want to distribute your Custom Applications so different (external to your organization) users would be able to configure it in their organizations.

Could you maybe clarify this point and explain a little further how you would like to distribute your Custom Application?

Thanks.

[serge-dynamic]

@kristerslinde, just so you don't miss this.

[kristerslinde]

Hello @CarlosCortizasCT

We want to make the entryPointUriPath dynamic as you mentioned, so the users/clients from different organizations can configure their entry points.
This is an App that would sync the products from the Commercetools Merchant Center to the Dynamic Yield admin panel which then is used to insert products into product recommendations. This is to make the experience more user-friendly and automatically parse/sync the existing product feed.

Right now it is static which is 'dynamic-yield-custom-application' in the constants.js and if we make it dynamic like above, it sends the error previously mentioned.

Best Regards,
Kristers