forward-get-project-key.diff

diff --git a/packages/application-shell/src/configure-store.ts b/packages/application-shell/src/configure-store.ts
index ad7ddf11..b3f005e7 100644
--- a/packages/application-shell/src/configure-store.ts
+++ b/packages/application-shell/src/configure-store.ts
@@ -53,45 +53,57 @@ const patchedGetCorrelationId = () =>
 
 const createInternalReducer = (injectedReducers: ReducersMapObject = {}) =>
   // NOTE: since we don't know in advance which reducers will be injected,
   // we pass an `unknown` type to express this uncertainty and make the compiler happy.
   combineReducers<unknown>({
     requestsInFlight: requestsInFlightReducer,
     notifications: notificationsReducer,
     ...injectedReducers,
   });
 
-const sdkMiddleware = createSdkMiddleware({
-  getCorrelationId: patchedGetCorrelationId,
-  getProjectKey: selectProjectKeyFromUrl,
-  getTeamId: selectTeamIdFromLocalStorage,
-});
+// const sdkMiddleware = createSdkMiddleware({
+//   getCorrelationId: patchedGetCorrelationId,
+//   getProjectKey: selectProjectKeyFromUrl,
+//   getTeamId: selectTeamIdFromLocalStorage,
+// });
+
+const createSdkMiddleWareWithForwardProjectKeyGetter = ({
+  getProjectKey,
+}: {
+  getProjectKey: () => string | undefined;
+}) =>
+  createSdkMiddleware({
+    getCorrelationId: patchedGetCorrelationId,
+    getProjectKey: getProjectKey ?? selectProjectKeyFromUrl,
+    getTeamId: selectTeamIdFromLocalStorage,
+  });
 
 export const applyDefaultMiddlewares = (...middlewares: Middleware[]) =>
   applyMiddleware(...middlewares, thunk, loggerMiddleware);
 
 // We use a factory as it's more practicable for tests
 // The application can import the configured store (the default export)
 export const createReduxStore = (
   preloadedState = {},
   // additional middleware, used for testing
-  additionalMiddlewares: Middleware[] = []
+  additionalMiddlewares: Middleware[] = [],
+  getProjectKey: () => string | undefined = () => 'foo'
 ): TEnhancedStore => {
   const store = createStore(
     createInternalReducer(),
     preloadedState,
     compose(
       applyDefaultMiddlewares(
         ...additionalMiddlewares,
         hideNotificationsMiddleware,
         notificationsMiddleware,
-        sdkMiddleware
+        createSdkMiddleWareWithForwardProjectKeyGetter({ getProjectKey  })
       ),
       window.__REDUX_DEVTOOLS_EXTENSION__
         ? window.__REDUX_DEVTOOLS_EXTENSION__({
             actionsBlacklist: [SHOW_LOADING, HIDE_LOADING],
           })
         : identityStoreEnhancer
     )
   );
 
   const enhancedStore = store as TEnhancedStore;
diff --git a/packages/application-shell/src/test-utils/test-utils.tsx b/packages/application-shell/src/test-utils/test-utils.tsx
index b5ab7434..99e68697 100644
--- a/packages/application-shell/src/test-utils/test-utils.tsx
+++ b/packages/application-shell/src/test-utils/test-utils.tsx
@@ -405,20 +405,21 @@ function renderApp<AdditionalEnvironmentProperties = {}>(
 }
 
 type TRenderAppWithReduxOptions<
   AdditionalEnvironmentProperties = {},
   StoreState = {}
 > = {
   store: ReturnType<typeof createReduxStore>;
   storeState: StoreState;
   sdkMocks: TSdkMock[];
   mapNotificationToComponent: TMapNotificationToComponentProps['mapNotificationToComponent'];
+  getProjectKey?: () => string;
 } & TRenderAppOptions<AdditionalEnvironmentProperties>;
 type TRenderAppWithReduxResult<
   AdditionalEnvironmentProperties = {},
   StoreState = {}
 > = TRenderAppResult<AdditionalEnvironmentProperties> &
   Pick<
     TRenderAppWithReduxOptions<AdditionalEnvironmentProperties, StoreState>,
     'store'
   >;
 
@@ -456,20 +457,21 @@ function renderAppWithRedux<
     //         error: new Error('foo'),
     //       }
     //     ]
     //   })
     // Note that each response will only be used once. When multiple responses
     // are provided for identical actions, then they are used in the order
     // they are provided in.
     sdkMocks = [],
     // Pass a function to map custom notification components
     mapNotificationToComponent = () => null,
+    getProjectKey = () => defaultProject.key,
     ...renderOptions
   }: Partial<
     TRenderAppWithReduxOptions<AdditionalEnvironmentProperties, StoreState>
   > = {}
 ): TRenderAppWithReduxResult<AdditionalEnvironmentProperties, StoreState> {
   invariant(
     !(store && storeState),
     'test-utils: You provided both `store` and `storeState`. Please provide only one of them.'
   );
   invariant(
@@ -482,25 +484,25 @@ function renderAppWithRedux<
   //   sdkMocks and storeState.
   // - When the user passed in no sdkMocks, we create a store using the
   //   provided storeState. If storeState is undefined, then the defaults kick
   //   in anyways.
   // - Lastly, when sdkMocks were provided (and no store was provided), we
   //   create a store which applies a special middleware to allow mocking sdk
   //   responses. We further initialize the store with the provided storeState.
   //   If storeState is undefined, then the defaults kick in anyways.
   const reduxStore = (() => {
     if (store) return store;
+    if (sdkMocks.length === 0)
 
-    if (sdkMocks.length === 0) return createReduxStore(storeState);
-
+       return createReduxStore(storeState, [], getProjectKey);
     const testingMiddleware = createSdkTestMiddleware(sdkMocks);
-    return createReduxStore(storeState, [testingMiddleware]);
+    return createReduxStore(storeState, [testingMiddleware], getProjectKey);
   })();
 
   const ReduxProviders = (props: { children: React.ReactNode }) => (
     <NotificationProviderForCustomComponent
       mapNotificationToComponent={mapNotificationToComponent}
     >
       <StoreProvider store={reduxStore}>
         <div>
           <NotificationsList domain={DOMAINS.GLOBAL} />
           <NotificationsList domain={DOMAINS.PAGE} />
diff --git a/playground/src/components/entry-point/entry-point.spec.js b/playground/src/components/entry-point/entry-point.spec.js
index 80e0b36d..7ec30c0b 100644
--- a/playground/src/components/entry-point/entry-point.spec.js
+++ b/playground/src/components/entry-point/entry-point.spec.js
@@ -1,47 +1,49 @@
 import React from 'react';
-import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
 import { renderAppWithRedux } from '@commercetools-frontend/application-shell/test-utils';
 import { ApplicationStateMachines } from './entry-point';
 
-const createStateMachinesListSdkMock = () => ({
-  action: {
-    type: 'SDK',
-    payload: {
-      method: 'GET',
-      service: 'states',
-      options: {
-        perPage: 25,
-        page: 1,
-      },
-      mcApiProxyTarget: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-  },
-  response: {
-    count: 25,
-    offset: 0,
-    total: 2,
-    results: [],
-  },
-});
 
+const projectKey = 'testProject';
+const mockServer = setupServer(
+  rest.get('/proxy/ctp/testProject/states?limit=25&offset=0', (req, res, ctx) => {
+    console.log('wtf?')
+    return res(
+
+      ctx.json({
+          count: 25,
+          offset: 0,
+          total: 2,
+          results: [],
+        })
+
+    );
+  })
+);
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+beforeAll(() => mockServer.listen());
+afterAll(() => mockServer.close());
 const render = (options) => {
   return renderAppWithRedux(<ApplicationStateMachines />, {
-    sdkMocks: [createStateMachinesListSdkMock()],
     permissions: {
       canViewDeveloperSettings: true,
       canManageDeveloperSettings: true,
     },
+    // to forward to the redux store.
+    getProjectKey: () => projectKey,
     ...options,
   });
 };
-
 describe('when route is /state-machines', () => {
   let rendered;
   it('should render state machines', async () => {
     rendered = render({
       route: '/project/state-machines',
     });
     await rendered.findByText(/State machines/i);
   });
 });