Fix Custom Views issues (#3343)

* fix(application-components): fix page layout components ui issues when used within custom views * refactor(application-shell): wrap custom views within its main route * refactor(application-shell): include portals-container in custom-view-shell component * refactor(application-shell): include notifications containers in custom views * chore: changeset added
commercetools · Dec 13, 2023 · e7b84b1 · e7b84b1 · github-actions · Dec 13, 2023
1 parent 5314f16
commit e7b84b1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 7 deletions.
diff --git a/.changeset/olive-pots-raise.md b/.changeset/olive-pots-raise.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-frontend/application-shell': patch
+---
+
+Fixes for Custom Views related to styling issues when using Page Layout components and inner routing.
diff --git a/packages/application-components/src/components/internals/page.styles.ts b/packages/application-components/src/components/internals/page.styles.ts
@@ -3,7 +3,7 @@ import { designTokens as appKitDesignTokens } from '../../theming';
 
 export const ContentWrapper = styled.div`
   flex: 1;
-  flex-basis: 0;
+  flex-basis: 0%;
   margin: ${appKitDesignTokens.marginForPageContent};
   overflow: auto;
 `;

diff --git a/packages/application-components/src/components/main-pages/internals/main-page.styles.ts b/packages/application-components/src/components/main-pages/internals/main-page.styles.ts
@@ -13,7 +13,7 @@ export const Divider = styled.hr`
 
 export const MainPageContent = styled.div`
   flex: 1;
-  flex-basis: 0;
+  flex-basis: 0%;
   overflow: auto;
   // NOTE: do not change to "padding" as this breaks sticky DataTable styles
   margin: ${appKitDesignTokens.marginForPageContent};

diff --git a/...-shell/src/components/custom-view-shell-authenticated/custom-view-shell-authenticated.tsx b/...-shell/src/components/custom-view-shell-authenticated/custom-view-shell-authenticated.tsx
@@ -1,12 +1,15 @@
 import { type ReactNode } from 'react';
-import { PageUnauthorized } from '@commercetools-frontend/application-components';
+import {
+  PageUnauthorized,
+  themesOverrides,
+} from '@commercetools-frontend/application-components';
 import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-config/ssr';
 import { ApplicationContextProvider } from '@commercetools-frontend/application-shell-connectors';
 import {
+  CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH,
   type ApplicationWindow,
   type CustomViewData,
 } from '@commercetools-frontend/constants';
-import { CUSTOM_VIEW_HOST_ENTRY_POINT_URI_PATH } from '@commercetools-frontend/constants';
 import {
   AsyncLocaleData,
   type TAsyncLocaleDataProps,
@@ -79,7 +82,10 @@ function CustomViewShellAuthenticated(
                     environment={props.environment}
                   >
                     <>
-                      <ThemeProvider theme="default" />
+                      <ThemeProvider
+                        theme="default"
+                        themeOverrides={themesOverrides.default}
+                      />
 
                       <FetchProject projectKey={props.projectKey}>
                         {({ isLoading: isProjectLoading, project }) => {

diff --git a/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx b/packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx
@@ -6,19 +6,26 @@ import {
   Suspense,
   StrictMode,
   type ReactNode,
+  RefObject,
 } from 'react';
 import { ApolloClient, type NormalizedCacheObject } from '@apollo/client';
-import { PageUnauthorized } from '@commercetools-frontend/application-components';
+import { Route } from 'react-router-dom';
+import {
+  PageUnauthorized,
+  PortalsContainer,
+} from '@commercetools-frontend/application-components';
 import { CustomViewContextProvider } from '@commercetools-frontend/application-shell-connectors';
 import {
   type ApplicationWindow,
   CUSTOM_VIEWS_EVENTS_NAMES,
   CustomViewData,
+  DOMAINS,
 } from '@commercetools-frontend/constants';
 import {
   AsyncLocaleData,
   type TAsyncLocaleDataProps,
 } from '@commercetools-frontend/i18n';
+import { NotificationsList } from '@commercetools-frontend/react-notifications';
 import ApplicationLoader from '../application-loader/application-loader';
 import ApplicationShellProvider from '../application-shell-provider';
 import { getBrowserLocale } from '../application-shell-provider/utils';
@@ -59,6 +66,33 @@ type TStrictModeEnablementProps = {
   children?: ReactNode;
 };
 
+type TNotificationsContainerProps = {
+  notificationsGlobalRef: RefObject<HTMLDivElement>;
+  notificationsPageRef: RefObject<HTMLDivElement>;
+};
+function NotificationsContainer(props: TNotificationsContainerProps) {
+  return (
+    <>
+      <div
+        ref={props.notificationsGlobalRef}
+        role="region"
+        aria-live="polite"
+        style={{
+          gridRow: 1,
+          gridColumn: '1/3',
+        }}
+      >
+        <div id="above-top-navigation" />
+        <NotificationsList domain={DOMAINS.GLOBAL} />
+      </div>
+      <div ref={props.notificationsPageRef}>
+        <NotificationsList domain={DOMAINS.PAGE} />
+      </div>
+      <NotificationsList domain={DOMAINS.SIDE} />
+    </>
+  );
+}
+
 function StrictModeEnablement(props: TStrictModeEnablementProps) {
   if (props.enableReactStrictMode) {
     return <StrictMode>{props.children}</StrictMode>;
@@ -70,6 +104,15 @@ function StrictModeEnablement(props: TStrictModeEnablementProps) {
 function CustomViewShell(props: TCustomViewShellProps) {
   const [hostContext, setHostContext] = useState<THostContext>();
   const iFrameCommunicationPort = useRef<MessagePort>();
+  const notificationsGlobalRef = useRef<HTMLDivElement>(null);
+  const notificationsPageRef = useRef<HTMLDivElement>(null);
+  const layoutRefs = useRef<{
+    notificationsGlobalRef: RefObject<HTMLDivElement>;
+    notificationsPageRef: RefObject<HTMLDivElement>;
+  }>({
+    notificationsGlobalRef,
+    notificationsPageRef,
+  });
 
   const hostMessageHandler = useCallback(
     (event: MessageEvent<THostEventData>) => {
@@ -152,7 +195,20 @@ function CustomViewShell(props: TCustomViewShellProps) {
                 projectKey={hostContext.projectKey}
                 customViewConfig={hostContext.customViewConfig}
               >
-                {props.children}
+                <PortalsContainer
+                  // @ts-ignore
+                  ref={layoutRefs}
+                />
+                <NotificationsContainer
+                  notificationsGlobalRef={notificationsGlobalRef}
+                  notificationsPageRef={notificationsPageRef}
+                />
+
+                <Route
+                  path={`/custom-views/${hostContext.customViewConfig.id}/projects/${hostContext.projectKey}`}
+                >
+                  {props.children}
+                </Route>
               </CustomViewShellAuthenticated>
             </CustomViewContextProvider>
           );