External menu configurations

application-templates/starter/menu.json

@@ -0,0 +1,22 @@
+{
+  "key": "examples-starter",
+  "uriPath": "examples-starter",
+  "icon": "RocketIcon",
+  "permissions": ["ViewProducts", "ManageProducts"],
+  "featureToggle": null,
+  "submenu": [],
+  "labelAllLocales": [
+    {
+      "locale": "en",
+      "value": "Starter"
+    },
+    {
+      "locale": "de",
+      "value": "Starter"
+    },
+    {
+      "locale": "es",
+      "value": "Starter"
+    }
+  ]
+}

application-templates/starter/src/components/entry-point/entry-point.js

@@ -8,17 +8,10 @@ import { Sdk } from '@commercetools-frontend/sdk';
 import * as globalActions from '@commercetools-frontend/actions-global';
 import { Redirect, Route, Switch } from 'react-router-dom';
 
-const loadApplicationMessagesForLanguage = lang =>
-  new Promise((resolve, reject) =>
-    import(`../../i18n/data/${lang}.json` /* webpackChunkName: "application-messages-[request]" */).then(
-      response => {
-        resolve(response.default);
-      },
-      error => {
-        reject(error);
-      }
-    )
-  );
+const loadApplicationMessagesForLanguage = async lang => {
+  const messages = await import(`../../i18n/data/${lang}.json` /* webpackChunkName: "application-messages-[request]" */);
+  return messages.default;
+};
 
 // Here we split up the main (app) bundle with the actual application business logic.
 // Splitting by route is usually recommended and you can potentially have a splitting
@@ -62,6 +55,7 @@ class EntryPoint extends React.Component {
             globalActions.handleActionError(error, 'sdk')(dispatch);
         }}
         applicationMessages={loadApplicationMessagesForLanguage}
+        DEV_ONLY__loadNavbarMenuConfig={() => import('../../../menu.json')}
         render={() => <ApplicationStarter />}
       />
     );

packages/application-shell/README.md

@@ -18,92 +18,38 @@ $ npm install --save @commercetools-frontend/application-shell
 
 ## Usage
 
-```js
-/**
- * This is the entry point of an application.
- * See `@commercetools-frontend/application-shell` for usage.
- */
-import React from 'react';
-import { Provider as StoreProvider } from 'react-redux';
-import {
-  ApplicationShell,
-  reduxStore,
-  setupGlobalErrorListener,
-} from '@commercetools-frontend/application-shell';
-import { Sdk } from '@commercetools-frontend/sdk';
-import * as globalActions from '@commercetools-frontend/actions-global';
-import PageNotFound from '@commercetools-local/core/components/page-not-found';
-import applicationMessages from '../../i18n';
-
-import trackingEventWhitelist from './tracking-whitelist';
-
-// Ensure to setup the global error listener before any React component renders
-// in order to catch possible errors on rendering/mounting.
-setupGlobalErrorListener(reduxStore.dispatch);
-
-const EntryPoint = () => (
-  <StoreProvider store={reduxStore}>
-    <ApplicationShell
-      applicationMessages={applicationMessages}
-      configuration={window.app}
-      trackingEventWhitelist={trackingEventWhitelist}
-      onRegisterErrorListeners={() => {
-        Sdk.Get.errorHandler = error =>
-          handleActionError(error, 'sdk')(reduxStore.dispatch);
-      }}
-      render={() => (
-        <Switch>
-          <Route path="/:projectKey/dashboard" component={AsyncDashboard} />
-          <Route path="/:projectKey/products" component={AsyncProducts} />
-          {/* Define a catch-all route */}
-          <Route component={PageNotFound} />
-        </Switch>
-      )}
-    />
-  </StoreProvider>
-);
-EntryPoint.displayName = 'EntryPoint';
-
-ReactDOM.render(<EntryPoint />, document.getElementById('root'));
-```
+For an usage example, we recommend to look at the [application templates](https://github.com/commercetools/merchant-center-application-kit/tree/master/application-templates) examples or at the [Playground](https://github.com/commercetools/merchant-center-application-kit/tree/master/playground) application.
 
-## Loading i18n messages with code splitting
+### Loading i18n messages with code splitting
 
 ```js
 // define a function that accepts a language, and returns a promise.
 const loadApplicationMessagesForLanguage = lang =>
-  new Promise((resolve, reject) =>
-    import(`../../i18n/data/${lang}.json` /* webpackChunkName: "application-messages-[request]" */).then(
-      response => {
-        resolve(response.default);
-      },
-      error => {
-        reject(error);
-      }
-    )
+  import(`../../i18n/data/${lang}.json` /* webpackChunkName: "application-messages-[request]" */).then(
+    response => response.default
   );
 
 // pass this function to the <ApplicationShell />
 
 const EntryPoint = () => (
-  <StoreProvider store={reduxStore}>
-    <ApplicationShell
-      applicationMessages={loadApplicationMessagesForLanguage}
-      // ... same as above.
-    />
-  </StoreProvider>
+  <ApplicationShell
+    applicationMessages={loadApplicationMessagesForLanguage}
+    // ...other props
+  />
 );
 ```
 
 ## Props
 
-| Props                      | Type               | Required | Default | Description                                                                                                                                                                                                       |
-| -------------------------- | ------------------ | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `applicationMessages`      | `object` or `func` |    ✅    | -       | Either an object containing all the translated messages per locale (`{ "en": { "Welcome": "Welcome" }, "de": { "Welcome": "Wilkommen" }}`), or a function that returns a promise that resolves to such an object. |
-| `configuration`            | `object`           |    ✅    | -       | The current `window.app`.                                                                                                                                                                                         |
-| `render`                   | `func`             |    ✅    | -       | The function to render the application specific part. This function is executed only when the application specific part needs to be rendered.                                                                     |
-| `trackingEventWhitelist`   | `object`           |    ✅    | -       | An object containing a map of tracking events (_this mapping is required for backwards compatibility, it might be removed in the future_)                                                                         |
-| `onRegisterErrorListeners` | `func`             |    ✅    | -       | A callback function to setup global event listeners, called when the `ApplicationShell` is mounted                                                                                                                |
+| Props                            | Type               |        Required         | Default | Description                                                                                                                                                                                                                                                                                                                                                                      |
+| -------------------------------- | ------------------ | :---------------------: | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `applicationMessages`            | `object` or `func` |           ✅            | -       | Either an object containing all the translated messages per locale (`{ "en": { "Welcome": "Welcome" }, "de": { "Welcome": "Wilkommen" }}`), or a function that returns a Promise that resolves to such an object.                                                                                                                                                                |
+| `configuration`                  | `object`           |           ✅            | -       | The current `window.app`.                                                                                                                                                                                                                                                                                                                                                        |
+| `render`                         | `func`             |           ✅            | -       | The function to render the application specific part. This function is executed only when the application specific part needs to be rendered.                                                                                                                                                                                                                                    |
+| `trackingEventWhitelist`         | `object`           |           ✅            | -       | An object containing a map of tracking events (_this mapping is required for backwards compatibility, it might be removed in the future_)                                                                                                                                                                                                                                        |
+| `onRegisterErrorListeners`       | `func`             |           ✅            | -       | A callback function to setup global event listeners, called when the `ApplicationShell` is mounted. The function is called with the following named arguments: `dispatch` (the dispatch function of Redux).                                                                                                                                                                      |
+| `DEV_ONLY__loadNavbarMenuConfig` | `func`             | ✅ (`development` only) | -       | A function that returns a Promise to load the `menu.json` config for the navigation component on the left side. We usually recommend to use a dynamic `import` to load the file, so that bundlers can create a split point. **NOTE that this is only available in `development` mode, in `production` mode the menu config is loaded from a remote server.**                     |
+| `DEV_ONLY__loadAppbarMenuConfig` | `func`             | ✅ (`development` only) | -       | A function that returns a Promise to load the `menu.json` config for the account links in the application bar component on the top. We usually recommend to use a dynamic `import` to load the file, so that bundlers can create a split point. **NOTE that this is only available in `development` mode, in `production` mode the menu config is loaded from a remote server.** |
 
 ## Testing
 

packages/application-shell/src/apollo-links/header-link.js

@@ -11,6 +11,16 @@ const isKnownTarget = target => Object.values(GRAPHQL_TARGETS).includes(target);
 /* eslint-disable import/prefer-default-export */
 // Use a middleware to update the request headers with the correct params.
 const headerLink = new ApolloLink((operation, forward) => {
+  const { uri, cache } = operation.getContext();
+
+  // In case the `context` contains a `uri`, it means that we are not sending
+  // the request to the MC API, but to another server.
+  // For now, if that's the case, we skip the `target` validation and we do
+  // not send the custom headers.
+  if (uri) {
+    return forward(operation);
+  }
+
   const target = operation.variables.target;
   if (!isKnownTarget(target))
     throw new Error(
@@ -27,7 +37,7 @@ const headerLink = new ApolloLink((operation, forward) => {
    */
   const projectKey =
     operation.variables.projectKey || selectProjectKeyFromUrl();
-  const userId = selectUserId({ apolloCache: operation.getContext().cache });
+  const userId = selectUserId({ apolloCache: cache });
 
   // NOTE: keep header names with capital letters to avoid possible conflicts or problems with nginx.
   operation.setContext({

packages/application-shell/src/components/app-bar/__snapshots__/app-bar.spec.js.snap

@@ -77,6 +77,7 @@ exports[`rendering should match layout structure 1`] = `
         firstName="John"
         gravatarHash="20c9c1b252b46ab49d6f7a4cee9c3e68"
         lastName="Snow"
+        locale="en"
       />
     </Inline>
   </div>

packages/application-shell/src/components/app-bar/app-bar.js

@@ -86,10 +86,14 @@ const AppBar = props => {
           <div className={styles.spacer} />
           {props.user ? (
             <UserSettingsMenu
+              locale={props.user.language}
               firstName={props.user.firstName}
               lastName={props.user.lastName}
               gravatarHash={props.user.gravatarHash}
               email={props.user.email}
+              DEV_ONLY__loadAppbarMenuConfig={
+                props.DEV_ONLY__loadAppbarMenuConfig
+              }
             />
           ) : (
             <LoadingPlaceholder shape="dot" size="l" />
@@ -102,6 +106,7 @@ const AppBar = props => {
 AppBar.displayName = 'AppBar';
 AppBar.propTypes = {
   user: PropTypes.shape({
+    language: PropTypes.string.isRequired,
     gravatarHash: PropTypes.string.isRequired,
     firstName: PropTypes.string.isRequired,
     lastName: PropTypes.string.isRequired,
@@ -112,6 +117,7 @@ AppBar.propTypes = {
     defaultProjectKey: PropTypes.string.isRequired,
   }),
   projectKeyFromUrl: PropTypes.string,
+  DEV_ONLY__loadAppbarMenuConfig: PropTypes.func,
 };
 
 export default AppBar;

packages/application-shell/src/components/app-bar/app-bar.spec.js

@@ -13,6 +13,7 @@ const createTestProps = props => ({
       total: 0,
     },
     defaultProjectKey: 'test-default-project-key',
+    language: 'en',
     firstName: 'John',
     lastName: 'Snow',
     email: 'john.snow@winter.com',

packages/application-shell/src/components/application-shell/application-shell.js

@@ -204,6 +204,9 @@ export const RestrictedApplication = props => (
                         <AppBar
                           user={user}
                           projectKeyFromUrl={projectKeyFromUrl}
+                          DEV_ONLY__loadAppbarMenuConfig={
+                            props.DEV_ONLY__loadAppbarMenuConfig
+                          }
                         />
                       </header>
 
@@ -248,6 +251,9 @@ export const RestrictedApplication = props => (
                                       useFullRedirectsForLinks={
                                         props.INTERNAL__isApplicationFallback
                                       }
+                                      DEV_ONLY__loadNavbarMenuConfig={
+                                        props.DEV_ONLY__loadNavbarMenuConfig
+                                      }
                                     />
                                   </ApplicationContextProvider>
                                 );
@@ -355,6 +361,8 @@ RestrictedApplication.propTypes = {
   applicationMessages: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     .isRequired,
   INTERNAL__isApplicationFallback: PropTypes.bool.isRequired,
+  DEV_ONLY__loadAppbarMenuConfig: PropTypes.func,
+  DEV_ONLY__loadNavbarMenuConfig: PropTypes.func,
 };
 
 /**
@@ -417,6 +425,9 @@ export default class ApplicationShell extends React.Component {
     onRegisterErrorListeners: PropTypes.func.isRequired,
     applicationMessages: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
       .isRequired,
+    // Only available in development mode
+    DEV_ONLY__loadAppbarMenuConfig: PropTypes.func,
+    DEV_ONLY__loadNavbarMenuConfig: PropTypes.func,
     // Internal usage only, does not need to be documented
     INTERNAL__isApplicationFallback: PropTypes.bool,
   };
@@ -482,6 +493,12 @@ export default class ApplicationShell extends React.Component {
                                   INTERNAL__isApplicationFallback={
                                     this.props.INTERNAL__isApplicationFallback
                                   }
+                                  DEV_ONLY__loadAppbarMenuConfig={
+                                    this.props.DEV_ONLY__loadAppbarMenuConfig
+                                  }
+                                  DEV_ONLY__loadNavbarMenuConfig={
+                                    this.props.DEV_ONLY__loadNavbarMenuConfig
+                                  }
                                 />
                               );
                             const browserLanguage = getBrowserLanguage(window);