Extract logic from application-shell to `application-shell-connecto…

…r` package (#3245)

* refactor: extract apollo related utilities from app-shell to app-shell-connector package

* fix: lintin fixes

* refactor: remove unused imports

* refactor: move custom view components from app-shell to app-shell-connectors package

* refactor: move constants to constants package

* fix: keep export types for backwards compatibility

* refactor: remove unused packages from app-shell

* fix: remove unwanted depdency and fix some tests

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>

packages/application-components/package.json

@@ -31,7 +31,6 @@
     "@babel/runtime-corejs3": "^7.22.15",
     "@commercetools-frontend/actions-global": "22.8.2",
     "@commercetools-frontend/application-config": "22.8.2",
-    "@commercetools-frontend/application-shell": "22.8.2",
     "@commercetools-frontend/application-shell-connectors": "22.8.2",
     "@commercetools-frontend/assets": "22.8.2",
     "@commercetools-frontend/constants": "22.8.2",

packages/application-shell/src/components/custom-view-loader/custom-view-loader.spec.tsx → packages/application-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx

@@ -2,14 +2,14 @@ import { CustomViewData } from '@commercetools-frontend/constants';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
 import {
   screen,
-  renderApp,
-  waitFor,
+  renderComponent,
   fireEvent,
-} from '../../../test-utils/dist/commercetools-frontend-application-shell-test-utils.cjs.js';
+  waitFor,
+} from '../../../test-utils';
 import {
   TCustomViewSize,
   TCustomViewType,
-} from '../../types/generated/settings';
+} from '../../../types/generated/settings';
 import CustomViewLoader from './custom-view-loader';
 
 const mockShowNotification = jest.fn();
@@ -64,8 +64,10 @@ describe('CustomViewLoader', () => {
   });
 
   it('should render a custom view', async () => {
-    renderApp(
-      <CustomViewLoader customView={TEST_CUSTOM_VIEW} onClose={jest.fn()} />
+    const projectKey = 'test-with-big-data';
+    renderComponent(
+      <CustomViewLoader customView={TEST_CUSTOM_VIEW} onClose={jest.fn()} />,
+      { projectKey }
     );
 
     const iFrame = screen.getByTitle(
@@ -75,7 +77,7 @@ describe('CustomViewLoader', () => {
       `custom-view-${TEST_CUSTOM_VIEW.id}`
     );
     expect(iFrame.getAttribute('src')).toContain(
-      `/custom-views/${TEST_CUSTOM_VIEW.id}/projects/test-with-big-data`
+      `/custom-views/${TEST_CUSTOM_VIEW.id}/projects/${projectKey}`
     );
   });
 
@@ -85,7 +87,9 @@ describe('CustomViewLoader', () => {
       url: 'https://example.com/',
     };
 
-    renderApp(<CustomViewLoader customView={customView} onClose={jest.fn()} />);
+    renderComponent(
+      <CustomViewLoader customView={customView} onClose={jest.fn()} />
+    );
 
     fireEvent.load(
       screen.getByTitle(`Custom View: ${TEST_CUSTOM_VIEW.defaultLabel}`)
@@ -104,7 +108,7 @@ describe('CustomViewLoader', () => {
       type: 'InvalidType',
     };
 
-    renderApp(
+    renderComponent(
       <CustomViewLoader
         // @ts-expect-error: we are testing an unknown type
         customView={customView}
@@ -125,7 +129,7 @@ describe('CustomViewLoader', () => {
   it('should call onClose when the custom view is closed', async () => {
     const onCloseMock = jest.fn();
 
-    renderApp(
+    renderComponent(
       <CustomViewLoader customView={TEST_CUSTOM_VIEW} onClose={onCloseMock} />
     );
 

packages/application-shell/src/components/custom-view-loader/custom-view-loader.tsx → packages/application-components/src/components/custom-views/custom-view-loader/custom-view-loader.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl';
 import { useShowNotification } from '@commercetools-frontend/actions-global';
-import CustomPanel from '@commercetools-frontend/application-components/src/components/custom-views/custom-panel';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import {
   CUSTOM_VIEWS_EVENTS_NAMES,
@@ -12,6 +11,7 @@ import {
   CustomViewData,
 } from '@commercetools-frontend/constants';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
+import CustomPanel from '../custom-panel';
 import messages from './messages';
 
 type TCustomViewIframeMessage = {

packages/application-shell/src/components/custom-views-selector/use-custom-views-connector.ts → packages/application-components/src/components/custom-views/custom-views-selector/use-custom-views-connector.ts

@@ -1,12 +1,12 @@
+import { useMcQuery } from '@commercetools-frontend/application-shell-connectors';
 import {
   CustomViewData,
   GRAPHQL_TARGETS,
 } from '@commercetools-frontend/constants';
-import { useMcQuery } from '../../hooks/apollo-hooks';
-import type {
+import {
   TFetchCustomViewsByLocatorQuery,
   TFetchCustomViewsByLocatorQueryVariables,
-} from '../../types/generated/settings';
+} from '../../../types/generated/settings';
 import FetchCustomViewsQuery from './fetch-custom-views-by-locator.settings.graphql';
 
 type TUseCustomViewsFetcherParams = {

packages/application-components/src/components/detail-pages/custom-form-detail-page/custom-form-detail-page.tsx

@@ -1,11 +1,11 @@
 import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent } from 'react';
 import styled from '@emotion/styled';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
 import Spacings from '@commercetools-uikit/spacings';
 import { warning } from '@commercetools-uikit/utils';
 import { designTokens as appKitDesignTokens } from '../../../theming';
+import CustomViewsSelector from '../../custom-views/custom-views-selector';
 import {
   FormPrimaryButton,
   FormSecondaryButton,

packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, ReactNode, MouseEvent, KeyboardEvent } from 'react';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import Spacings from '@commercetools-uikit/spacings';
 import { warning } from '@commercetools-uikit/utils';
+import CustomViewsSelector from '../../custom-views/custom-views-selector';
 import {
   FormPrimaryButton,
   FormSecondaryButton,

packages/application-components/src/components/main-pages/custom-form-main-page/custom-form-main-page.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, ReactNode } from 'react';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import Spacings from '@commercetools-uikit/spacings';
 import { warning } from '@commercetools-uikit/utils';
+import CustomViewsSelector from '../../custom-views/custom-views-selector';
 import {
   FormPrimaryButton,
   FormSecondaryButton,

packages/application-components/src/components/main-pages/tabular-main-page/tabular-main-page.tsx

@@ -1,10 +1,10 @@
 import type { ReactElement, ReactNode } from 'react';
 import { css } from '@emotion/react';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import Spacings from '@commercetools-uikit/spacings';
 import { warning } from '@commercetools-uikit/utils';
 import { designTokens as appKitDesignTokens } from '../../../theming';
+import CustomViewsSelector from '../../custom-views/custom-views-selector';
 import {
   FormPrimaryButton,
   FormSecondaryButton,

packages/application-components/src/components/modal-pages/custom-form-modal-page/custom-form-modal-page.tsx

@@ -1,6 +1,5 @@
 import { SyntheticEvent, ReactNode, ReactElement } from 'react';
 import type { CSSObject } from '@emotion/react';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { sharedMessages } from '@commercetools-frontend/i18n';
 import Spacings from '@commercetools-uikit/spacings';
 import {

packages/application-components/src/components/modal-pages/internals/modal-page.tsx

@@ -8,8 +8,8 @@ import {
 } from 'react';
 import { ClassNames, type CSSObject } from '@emotion/react';
 import Modal, { type Props as ModalProps } from 'react-modal';
-import { CustomViewsSelector } from '@commercetools-frontend/application-shell';
 import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
+import CustomViewsSelector from '../../custom-views/custom-views-selector';
 import ModalPageTopBar from './modal-page-top-bar';
 import {
   TRANSITION_DURATION,

packages/application-components/src/index.ts

@@ -44,6 +44,8 @@ export type { TPageContentFull } from './components/page-content-containers/page
 
 // Custom views
 export { default as CustomPanel } from './components/custom-views/custom-panel';
+export { default as CustomViewLoader } from './components/custom-views/custom-view-loader';
+export { default as CustomViewsSelector } from './components/custom-views/custom-views-selector';
 
 // Utilities
 export { default as PortalsContainer } from './components/portals-container';

packages/application-components/src/test-utils/test-utils.tsx

@@ -1,30 +1,61 @@
 import { ReactNode } from 'react';
 import type { RenderOptions } from '@testing-library/react';
-
 import { render } from '@testing-library/react';
 import { createMemoryHistory, type MemoryHistory } from 'history';
 import { IntlProvider } from 'react-intl';
 import { Router } from 'react-router-dom';
+import {
+  ApplicationContextProvider,
+  TApplicationContext,
+} from '@commercetools-frontend/application-shell-connectors';
+import type { TProjectGraphql } from '../../../../test-data/project';
+import * as ProjectMock from '../../../../test-data/project';
 
 type CustomRenderOptions = {
   locale: string;
   route: string;
   history: MemoryHistory;
+  environment?: TApplicationContext<{}>['environment'];
+  projectKey?: string;
+  user?: TApplicationContext<{}>['user'];
 } & Omit<RenderOptions, 'queries'>;
 
+const defaultEnvironment = {
+  applicationId: '',
+  applicationIdentifier: '',
+  applicationName: '',
+  entryPointUriPath: '',
+  revision: '',
+  env: '',
+  location: '',
+  cdnUrl: '',
+  mcApiUrl: '',
+  frontendHost: '',
+  servedByProxy: false,
+};
+
 const customRender = (
   node: ReactNode,
   {
     locale = 'en',
     route = '/',
     history = createMemoryHistory({ initialEntries: [route] }),
+    environment = defaultEnvironment,
+    projectKey = 'default-project-key',
     ...rtlOptions
   }: Partial<CustomRenderOptions> = {}
 ) => ({
   ...render(
-    <IntlProvider locale={locale}>
-      <Router history={history}>{node}</Router>
-    </IntlProvider>,
+    <ApplicationContextProvider
+      environment={environment}
+      project={ProjectMock.random()
+        .key(projectKey)
+        .buildGraphql<TProjectGraphql>()}
+    >
+      <IntlProvider locale={locale}>
+        <Router history={history}>{node}</Router>
+      </IntlProvider>
+    </ApplicationContextProvider>,
     rtlOptions
   ),
   // adding `history` to the returned utilities to allow us

packages/application-shell-connectors/package.json

@@ -23,24 +23,33 @@
   "dependencies": {
     "@babel/runtime": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
+    "@commercetools-frontend/application-config": "22.8.2",
+    "@commercetools-frontend/browser-history": "22.8.2",
     "@commercetools-frontend/constants": "22.8.2",
     "@commercetools-frontend/sentry": "22.8.2",
+    "@commercetools/http-user-agent": "3.0.0",
     "@emotion/react": "11.11.0",
     "@types/lodash": "^4.14.198",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.56",
+    "apollo-link-logger": "2.0.1",
     "graphql": "16.8.1",
     "lodash": "4.17.21",
     "moment-timezone": "^0.5.40",
+    "omit-empty-es": "1.1.3",
     "prop-types": "15.8.1",
-    "tiny-warning": "1.0.3"
+    "tiny-warning": "1.0.3",
+    "uuid": "9.0.0",
+    "wait-for-observables": "1.0.3"
   },
   "devDependencies": {
     "@apollo/client": "3.7.14",
     "@testing-library/react": "12.1.5",
     "@types/jest": "^29.5.4",
+    "headers-polyfill": "3.1.2",
     "jest": "29.5.0",
     "jest-mock": "29.5.0",
+    "msw": "0.49.3",
     "react": "17.0.2"
   },
   "peerDependencies": {

packages/application-shell/src/apollo-links/header-link.ts → packages/application-shell-connectors/src/apollo-links/header-link.ts

@@ -1,12 +1,12 @@
 import { ApolloLink } from '@apollo/client';
 import createHttpUserAgent from '@commercetools/http-user-agent';
 import omitEmpty from 'omit-empty-es';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import type {
-  ApplicationWindow,
-  TGraphQLTargets,
+import {
+  GRAPHQL_TARGETS,
+  SUPPORTED_HEADERS,
+  type ApplicationWindow,
+  type TGraphQLTargets,
 } from '@commercetools-frontend/constants';
-import { SUPPORTED_HEADERS } from '../constants';
 import { selectProjectKeyFromUrl, selectTeamIdFromStorage } from '../utils';
 import type { TApolloContext } from '../utils/apollo-context';
 import { createHttpClientOptions, type THeaders } from '../utils/http-client';

packages/application-shell/src/apollo-links/utils.ts → packages/application-shell-connectors/src/apollo-links/utils.ts

@@ -1,9 +1,10 @@
 import type { ServerError, ServerParseError } from '@apollo/client';
 import type { ErrorResponse } from '@apollo/client/link/error';
 import type { GraphQLError } from 'graphql';
-
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { SUPPORTED_HEADERS } from '../constants';
+import {
+  GRAPHQL_TARGETS,
+  SUPPORTED_HEADERS,
+} from '@commercetools-frontend/constants';
 import type { TApolloContext } from '../utils/apollo-context';
 
 type TTokenRetryGraphQlTarget =

packages/application-shell-connectors/src/export-types.ts

@@ -11,6 +11,15 @@ import type {
   TCustomViewContext as CustomViewContext,
 } from './components/custom-view-context';
 import type { TImageRegexContext as ImageRegexContext } from './components/project-extension-image-regex';
+import type { TApolloContext as ApolloContext } from './utils/apollo-context';
+import type {
+  TFetcher,
+  TFetcherResponse,
+  THeaders,
+  TConfig,
+  TOptions,
+  TForwardToAudiencePolicy as ForwardToAudiencePolicy,
+} from './utils/http-client';
 
 export type TProviderProps<AdditionalEnvironmentProperties extends {}> =
   ProviderProps<AdditionalEnvironmentProperties>;
@@ -26,3 +35,12 @@ export type TCustomViewContextProviderProps = CustomViewContextProviderProps;
 export type TCustomViewContext = CustomViewContext;
 
 export type TImageRegexContext = ImageRegexContext;
+
+export type TApolloContext = ApolloContext;
+export type TForwardToAudiencePolicy = ForwardToAudiencePolicy;
+
+export type THttpClientFetcher<Data> = TFetcher<Data>;
+export type THttpClientFetcherResponse<Data> = TFetcherResponse<Data>;
+export type THttpClientHeaders = THeaders;
+export type THttpClientConfig = TConfig;
+export type THttpClientOptions = TOptions;

packages/application-shell-connectors/src/index.ts

@@ -1,8 +1,6 @@
 export { default as version } from './version';
 export * from './export-types';
 
-export { default as getMcApiUrl } from './utils/get-mc-api-url';
-
 export {
   Context,
   ApplicationContext,
@@ -26,3 +24,30 @@ export {
   withProjectExtensionImageRegex,
   useProjectExtensionImageRegex,
 } from './components/project-extension-image-regex';
+
+export { default as createApolloClient } from './configure-apollo';
+export {
+  getCorrelationId,
+  getMcApiUrl,
+  isLoggerEnabled,
+  logger,
+  selectUserId,
+  selectProjectKeyFromUrl,
+  selectTeamIdFromStorage,
+  createApolloContextForProxyForwardTo,
+} from './utils';
+export {
+  useMcQuery,
+  useMcLazyQuery,
+  useMcMutation,
+} from './hooks/apollo-hooks';
+export {
+  buildApiUrl,
+  createHttpClientOptions,
+  executeHttpClientRequest,
+} from './utils/http-client';
+export * as oidcStorage from './utils/oidc-storage';
+export {
+  setCachedApolloClient,
+  getCachedApolloClient,
+} from './utils/apollo-client-runtime-cache';

packages/application-shell/src/utils/http-client.spec.ts → packages/application-shell-connectors/src/utils/http-client.spec.ts

@@ -2,7 +2,7 @@
 import { rest } from 'msw';
 import type { Headers } from 'headers-polyfill';
 import { setupServer } from 'msw/node';
-import { SUPPORTED_HEADERS } from '../constants';
+import { SUPPORTED_HEADERS } from '@commercetools-frontend/constants';
 import {
   buildApiUrl,
   createHttpClientOptions,