Fix Custom Views panel UI (#3322)

* fix(application-components): fix Custom Views panel ui * chore: update emotion/react dependency version * chore: add changesets * refactor: update emotion/react dependency version to use ranges * refactor(application-components): use accessible panel title for custom views * fix(application-components): fix custom-view-loader tests
commercetools · Dec 5, 2023 · 13aa6ae · 13aa6ae · github-actions · Dec 5, 2023
1 parent 5cfe9b6
commit 13aa6ae
Show file tree

Hide file tree

Showing 24 changed files with 375 additions and 321 deletions.
diff --git a/.changeset/dull-lobsters-cry.md b/.changeset/dull-lobsters-cry.md
@@ -0,0 +1,18 @@
+---
+'@commercetools-applications/merchant-center-custom-view-template-starter-typescript': patch
+'@commercetools-applications/merchant-center-template-starter-typescript': patch
+'@commercetools-frontend/application-shell-connectors': patch
+'@commercetools-frontend/application-components': patch
+'@commercetools-applications/merchant-center-custom-view-template-starter': patch
+'@commercetools-applications/merchant-center-template-starter': patch
+'@commercetools-frontend/react-notifications': patch
+'@commercetools-frontend/application-shell': patch
+'@commercetools-frontend/permissions': patch
+'@commercetools-frontend/codemod': patch
+'@commercetools-frontend/sentry': patch
+'@commercetools-frontend/i18n': patch
+'@commercetools-frontend/l10n': patch
+'@commercetools-frontend/sdk': patch
+---
+
+Updated `@emotion/react` dependency
diff --git a/.changeset/stale-dingos-own.md b/.changeset/stale-dingos-own.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Fix `CustomViewLoader` component UI bug (unexpected panel header).
+Updated `@emotion/react` dependency.
diff --git a/application-templates/starter-typescript/package.json b/application-templates/starter-typescript/package.json
@@ -57,7 +57,7 @@
     "@commercetools-uikit/text-field": "^16.12.0",
     "@commercetools-uikit/text-input": "^16.12.0",
     "@commercetools/sync-actions": "^5.14.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@formatjs/cli": "6.1.1",
     "@jest/types": "29.5.0",
     "@manypkg/cli": "0.20.0",
@@ -93,8 +93,8 @@
     "typescript": "5.0.4"
   },
   "resolutions": {
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/eslint": "<9",
     "@types/react": "<18",
     "@types/react-dom": "<18",

diff --git a/application-templates/starter/package.json b/application-templates/starter/package.json
@@ -55,7 +55,7 @@
     "@commercetools-uikit/text-field": "^16.12.0",
     "@commercetools-uikit/text-input": "^16.12.0",
     "@commercetools/sync-actions": "^5.14.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@formatjs/cli": "6.1.1",
     "@jest/types": "29.5.0",
     "@manypkg/cli": "0.20.0",
@@ -91,8 +91,8 @@
     "redux": "4.2.1"
   },
   "resolutions": {
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/eslint": "<9",
     "@types/react": "<18",
     "@types/react-dom": "<18",

diff --git a/custom-views-templates/starter-typescript/package.json b/custom-views-templates/starter-typescript/package.json
@@ -57,7 +57,7 @@
     "@commercetools-uikit/text-field": "^16.12.0",
     "@commercetools-uikit/text-input": "^16.12.0",
     "@commercetools/sync-actions": "^5.3.1",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@formatjs/cli": "6.1.1",
     "@jest/types": "29.5.0",
     "@manypkg/cli": "0.20.0",
@@ -93,8 +93,8 @@
     "typescript": "5.0.4"
   },
   "resolutions": {
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/eslint": "<9",
     "@types/react": "<18",
     "@types/react-dom": "<18",

diff --git a/custom-views-templates/starter/package.json b/custom-views-templates/starter/package.json
@@ -55,7 +55,7 @@
     "@commercetools-uikit/text-field": "^16.12.0",
     "@commercetools-uikit/text-input": "^16.12.0",
     "@commercetools/sync-actions": "^5.14.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@formatjs/cli": "6.1.1",
     "@jest/types": "29.5.0",
     "@manypkg/cli": "0.20.0",
@@ -91,8 +91,8 @@
     "redux": "4.2.1"
   },
   "resolutions": {
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/eslint": "<9",
     "@types/react": "<18",
     "@types/react-dom": "<18",

diff --git a/packages/application-components/package.json b/packages/application-components/package.json
@@ -53,8 +53,8 @@
     "@commercetools-uikit/spacings": "^16.12.0",
     "@commercetools-uikit/text": "^16.12.0",
     "@commercetools-uikit/utils": "^16.12.0",
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@flopflip/react-broadcast": "13.1.7",
     "@react-hook/latest": "1.0.3",
     "@react-hook/resize-observer": "1.2.6",

diff --git a/...ion-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx b/...ion-components/src/components/custom-views/custom-view-loader/custom-view-loader.spec.tsx
@@ -70,9 +70,9 @@ describe('CustomViewLoader', () => {
       { projectKey }
     );
 
-    const iFrame = screen.getAllByTitle(
+    const iFrame = screen.getByTitle(
       `Custom View: ${TEST_CUSTOM_VIEW.defaultLabel}`
-    )[1] as HTMLIFrameElement;
+    ) as HTMLIFrameElement;
     expect(iFrame.getAttribute('id')).toBe(
       `custom-view-${TEST_CUSTOM_VIEW.id}`
     );
@@ -92,7 +92,7 @@ describe('CustomViewLoader', () => {
     );
 
     fireEvent.load(
-      screen.getAllByTitle(`Custom View: ${TEST_CUSTOM_VIEW.defaultLabel}`)[1]
+      screen.getByTitle(`Custom View: ${TEST_CUSTOM_VIEW.defaultLabel}`)
     );
 
     expect(mockShowNotification).toHaveBeenCalledWith({

diff --git a/...lication-components/src/components/custom-views/custom-view-loader/custom-view-loader.tsx b/...lication-components/src/components/custom-views/custom-view-loader/custom-view-loader.tsx
@@ -11,7 +11,8 @@ import {
   CustomViewData,
 } from '@commercetools-frontend/constants';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
-import Drawer from '../../drawer';
+import { designTokens } from '@commercetools-uikit/design-system';
+import ModalPage from '../../modal-pages/internals/modal-page';
 import messages from './messages';
 
 type TCustomViewIframeMessage = {
@@ -38,6 +39,11 @@ const isIframeReady = (iFrameElementRef: HTMLIFrameElement) => {
   }
 };
 
+const ContentWrapper = styled.div`
+  height: 100%;
+  padding: ${designTokens.spacing40} 40px;
+`;
+
 const CustomPanelIframe = styled.iframe`
   height: 100%;
   width: 100%;
@@ -130,21 +136,24 @@ function CustomViewLoader(props: TCustomViewLoaderProps) {
   ].join('/');
 
   return (
-    <Drawer
+    <ModalPage
       isOpen
-      title={`Custom View: ${props.customView.defaultLabel}`}
       onClose={props.onClose}
       size={panelSize === 'small' ? 10 : 30}
+      title={`Custom View: ${props.customView.defaultLabel}`}
+      hidePathLabel
     >
-      <CustomPanelIframe
-        id={`custom-view-${props.customView.id}`}
-        key={`custom-view-${props.customView.id}`}
-        title={`Custom View: ${props.customView.defaultLabel}`}
-        ref={iFrameElementRef}
-        src={iFrameUrl}
-        onLoad={onLoadSuccessHandler}
-      />
-    </Drawer>
+      <ContentWrapper>
+        <CustomPanelIframe
+          id={`custom-view-${props.customView.id}`}
+          key={`custom-view-${props.customView.id}`}
+          title={`Custom View: ${props.customView.defaultLabel}`}
+          ref={iFrameElementRef}
+          src={iFrameUrl}
+          onLoad={onLoadSuccessHandler}
+        />
+      </ContentWrapper>
+    </ModalPage>
   );
 }
 

diff --git a/packages/application-shell-connectors/package.json b/packages/application-shell-connectors/package.json
@@ -28,7 +28,7 @@
     "@commercetools-frontend/constants": "22.13.1",
     "@commercetools-frontend/sentry": "22.13.1",
     "@commercetools/http-user-agent": "3.0.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@types/lodash": "^4.14.198",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.56",

diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json
@@ -62,8 +62,8 @@
     "@commercetools-uikit/select-input": "^16.12.0",
     "@commercetools-uikit/spacings": "^16.12.0",
     "@commercetools-uikit/text": "^16.12.0",
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@flopflip/combine-adapters": "13.1.7",
     "@flopflip/http-adapter": "13.1.7",
     "@flopflip/launchdarkly-adapter": "13.1.7",

diff --git a/packages/codemod/package.json b/packages/codemod/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@commercetools-frontend/application-components": "workspace:*",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@tsconfig/node16": "^16.1.1",
     "@types/glob": "8.1.0",
     "@types/jscodeshift": "0.11.6",

diff --git a/packages/i18n/package.json b/packages/i18n/package.json
@@ -37,7 +37,7 @@
     "@commercetools-community-kit/i18n": "^0.3.0",
     "@commercetools-frontend/sentry": "22.13.1",
     "@commercetools-uikit/i18n": "^16.12.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@formatjs/icu-messageformat-parser": "2.4.0",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.56",

diff --git a/packages/l10n/package.json b/packages/l10n/package.json
@@ -24,7 +24,7 @@
     "@babel/runtime": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
     "@commercetools-frontend/sentry": "22.13.1",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@types/lodash": "^4.14.198",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.56",

diff --git a/packages/permissions/package.json b/packages/permissions/package.json
@@ -22,7 +22,7 @@
     "@babel/runtime-corejs3": "^7.22.15",
     "@commercetools-frontend/application-shell-connectors": "22.13.1",
     "@commercetools-frontend/sentry": "22.13.1",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@types/lodash": "^4.14.198",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.56",

diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
@@ -31,8 +31,8 @@
     "@commercetools-uikit/secondary-icon-button": "^16.12.0",
     "@commercetools-uikit/spacings": "^16.12.0",
     "@commercetools-uikit/utils": "^16.12.0",
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/history": "^4.7.11",
     "@types/lodash": "^4.14.198",
     "@types/prop-types": "^15.7.5",

diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -42,7 +42,7 @@
     "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@testing-library/react": "12.1.5",
     "@types/uuid": "^9.0.3",
     "jest-mock": "29.5.0",

diff --git a/packages/sentry/package.json b/packages/sentry/package.json
@@ -30,7 +30,7 @@
     "prop-types": "15.8.1"
   },
   "devDependencies": {
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@types/jest": "^29.5.4",
     "jest": "29.5.0",
     "react": "17.0.2",

diff --git a/playground/package.json b/playground/package.json
@@ -44,7 +44,7 @@
     "@commercetools-uikit/secondary-button": "16.12.0",
     "@commercetools-uikit/spacings": "16.12.0",
     "@commercetools-uikit/text": "16.12.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "^11.11.1",
     "@flopflip/react-broadcast": "13.1.7",
     "apollo-link-rest": "^0.9.0",
     "graphql": "16.8.1",