refactor: reading applicationId value from custom application config (

#3147)

* refactor: teamId use for local dev

* chore: changeset

* refactor: add teamId and applicationId to window.env.__DEVELOPMENT__ if teamId in the config

.changeset/rare-cups-applaud.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-config': patch
+---
+
+Read `applicationId` from `env.production` rather than `env.development`

packages/application-config/schema.json

@@ -111,9 +111,6 @@
             },
             "teamId": {
               "type": "string"
-            },
-            "applicationId": {
-              "type": "string"
             }
           },
           "additionalProperties": false,

packages/application-config/src/process-config.ts

@@ -128,8 +128,10 @@ const processConfig = ({
               customApplicationData.entryPointUriPath === 'account'
                 ? undefined
                 : appConfig.env.development.initialProjectKey,
-            teamId: appConfig.env.development?.teamId,
-            applicationId: appConfig.env.development?.applicationId,
+            ...(appConfig.env.development?.teamId && {
+              teamId: appConfig.env.development.teamId,
+              applicationId: appConfig.env.production.applicationId,
+            }),
             oAuthScopes: appConfig.oAuthScopes,
             additionalOAuthScopes: appConfig?.additionalOAuthScopes,
           }),

packages/application-config/src/schema.ts

@@ -65,7 +65,6 @@ export interface JSONSchemaForCustomApplicationConfigurationFiles {
        */
       initialProjectKey: string;
       teamId?: string;
-      applicationId?: string;
     };
     production: {
       /**

packages/application-config/test/fixtures/config-oidc-with-team-id.json

@@ -0,0 +1,38 @@
+{
+  "name": "avengers-app",
+  "entryPointUriPath": "avengers",
+  "cloudIdentifier": "gcp-eu",
+  "env": {
+    "development": {
+      "initialProjectKey": "project-key",
+      "teamId": "team-id"
+    },
+    "production": {
+      "applicationId": "app-id-123",
+      "url": "https://avengers.app"
+    }
+  },
+  "oAuthScopes": {
+    "view": ["view_orders", "view_states"],
+    "manage": ["manage_orders"]
+  },
+  "additionalOAuthScopes": [
+    {
+      "name": "movies",
+      "view": ["view_products"],
+      "manage": []
+    },
+    {
+      "name": "merch",
+      "view": [],
+      "manage": ["manage_channels"]
+    }
+  ],
+  "icon": "<svg><path fill=\"#000000\" /></svg>",
+  "mainMenuLink": {
+    "defaultLabel": "Avengers",
+    "labelAllLocales": [],
+    "permissions": []
+  },
+  "submenuLinks": []
+}

packages/application-config/test/fixtures/config-oidc.json

@@ -4,9 +4,7 @@
   "cloudIdentifier": "gcp-eu",
   "env": {
     "development": {
-      "initialProjectKey": "project-key",
-      "teamId": "teamId",
-      "applicationId": "app-id-123"
+      "initialProjectKey": "project-key"
     },
     "production": {
       "applicationId": "app-id-123",

packages/application-config/test/process-config.spec.js

@@ -5,6 +5,7 @@ import fixtureConfigEnvVariables from './fixtures/config-env-variables.json';
 import fixtureConfigFilePathVariables from './fixtures/config-file-path-variables.json';
 import fixtureConfigFull from './fixtures/config-full.json';
 import fixtureConfigIntlVariables from './fixtures/config-intl-variables.json';
+import fixtureConfigOidcWithTeamId from './fixtures/config-oidc-with-team-id.json';
 import fixtureConfigOidc from './fixtures/config-oidc.json';
 import fixtureConfigSimple from './fixtures/config-simple.json';
 
@@ -1141,15 +1142,13 @@ describe('processing a config with OIDC', () => {
       env: {
         __DEVELOPMENT__: {
           oidc: {
-            applicationId: 'app-id-123',
             authorizeUrl:
               'https://mc.europe-west1.gcp.commercetools.com/login/authorize',
             initialProjectKey: 'project-key',
             oAuthScopes: {
               manage: ['manage_orders'],
               view: ['view_orders', 'view_states'],
             },
-            teamId: 'teamId',
             additionalOAuthScopes: [
               {
                 name: 'movies',
@@ -1325,6 +1324,115 @@ describe('when app URL has non-root path without ending backslash', () => {
   });
 });
 
+describe('processing a config with OIDC with teamId', () => {
+  beforeEach(() => {
+    loadConfig.mockReturnValue(fixtureConfigOidcWithTeamId);
+  });
+  it('should process the config and prepare the application environment and headers, as well as the __DEVELOPMENT__ object', () => {
+    const result = processConfig(
+      createTestOptions({
+        processEnv: {
+          APP_URL: 'https://avengers.app',
+          CLOUD_IDENTIFIER: 'gcp-eu',
+          NODE_ENV: 'test',
+        },
+      })
+    );
+    expect(result).toEqual({
+      data: {
+        id: 'app-id-123',
+        name: 'avengers-app',
+        description: undefined,
+        entryPointUriPath: 'avengers',
+        url: 'https://avengers.app',
+        permissions: [
+          {
+            name: 'viewAvengers',
+            oAuthScopes: ['view_orders', 'view_states'],
+          },
+          {
+            name: 'manageAvengers',
+            oAuthScopes: ['manage_orders'],
+          },
+          {
+            name: 'viewAvengersMovies',
+            oAuthScopes: ['view_products'],
+          },
+          {
+            name: 'manageAvengersMovies',
+            oAuthScopes: [],
+          },
+          {
+            name: 'viewAvengersMerch',
+            oAuthScopes: [],
+          },
+          {
+            name: 'manageAvengersMerch',
+            oAuthScopes: ['manage_channels'],
+          },
+        ],
+        icon: '<svg><path fill="#000000" /></svg>',
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          labelAllLocales: [],
+          permissions: [],
+        },
+        submenuLinks: [],
+      },
+      env: {
+        __DEVELOPMENT__: {
+          oidc: {
+            applicationId: 'app-id-123',
+            authorizeUrl:
+              'https://mc.europe-west1.gcp.commercetools.com/login/authorize',
+            initialProjectKey: 'project-key',
+            oAuthScopes: {
+              manage: ['manage_orders'],
+              view: ['view_orders', 'view_states'],
+            },
+            teamId: 'team-id',
+            additionalOAuthScopes: [
+              {
+                name: 'movies',
+                view: ['view_products'], // mind that `"manage": []` is filtered out by `omitEmpty` as no additional `manage_` scope should be requested for this group
+              },
+              {
+                name: 'merch',
+                manage: ['manage_channels'], // mind that `"view": []` is filtered out by `omitEmpty` as no additional `view_` scope should be requested for this group
+              },
+            ],
+          },
+          accountLinks: undefined,
+          menuLinks: {
+            icon: '<svg><path fill="#000000" /></svg>',
+            defaultLabel: 'Avengers',
+            labelAllLocales: [],
+            permissions: [],
+            submenuLinks: [],
+          },
+        },
+        applicationId: '__local:avengers',
+        applicationName: 'avengers-app',
+        entryPointUriPath: 'avengers',
+        cdnUrl: 'http://localhost:3001/',
+        env: 'test',
+        frontendHost: 'localhost:3001',
+        location: 'gcp-eu',
+        mcApiUrl: 'https://mc-api.europe-west1.gcp.commercetools.com',
+        revision: '',
+        servedByProxy: false,
+      },
+      headers: {
+        csp: {
+          'connect-src': ['https://mc-api.europe-west1.gcp.commercetools.com'],
+          'script-src': [],
+          'style-src': [],
+        },
+      },
+    });
+  });
+});
+
 describe('when CDN URL is malformed', () => {
   beforeEach(() => {
     loadConfig.mockReturnValue({