diff --git a/Composer/packages/client/__tests__/pages/design/Design.test.tsx b/Composer/packages/client/__tests__/pages/design/Design.test.tsx index 507ca29aa9..d3b12856af 100644 --- a/Composer/packages/client/__tests__/pages/design/Design.test.tsx +++ b/Composer/packages/client/__tests__/pages/design/Design.test.tsx @@ -16,9 +16,6 @@ import { undoFunctionState } from '../../../src/recoilModel/undo/history'; import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json'; import DesignPage from '../../../src/pages/design/DesignPage'; import { SAMPLE_DIALOG } from '../../mocks/sampleDialog'; -import ResizeObserver from '../../mocks/ResizeObserver'; - -(global as any).ResizeObserver = ResizeObserver; const projectId = '12345.6789'; const dialogId = SAMPLE_DIALOG.id; diff --git a/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx b/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx index 951ae1f1b2..d9be205595 100644 --- a/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx +++ b/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx @@ -17,7 +17,6 @@ import { getDialogData } from '../../utils/dialogUtil'; import { decodeDesignerPathToArrayPath } from '../../utils/convertUtils/designerPathEncoder'; import { getFocusPath } from '../../utils/navigation'; import { TreeLink } from '../../components/ProjectTree/types'; -import { useResizeObserver } from '../../hooks/useResizeObserver'; import * as pageStyles from './styles'; @@ -156,40 +155,12 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { }, [currentDialog?.content, initialBreadcrumbArray]); return breadcrumbArray; }; -const defaultToggleButtonWidth = 100; -const spaceBetweenContainers = 6; + const VisualPanelHeader: React.FC = React.memo((props) => { const { showCode, projectId, onShowCodeClick, pluginConfig } = props; const breadcrumbs = useBreadcrumbs(projectId, pluginConfig); - const toggleButtonContainerRef = React.useRef(null); - const containerRef = React.useRef(null); - - const [toggleButtonWidth, setToggleButtonWidth] = React.useState(defaultToggleButtonWidth); - const [breadcrumbContainerWidth, setBreadcrumbContainerWidth] = React.useState( - `calc(100% - ${toggleButtonWidth}px)` - ); - - // Set the width of the toggle button based on its text (locale) - React.useEffect(() => { - if (toggleButtonContainerRef.current) { - const toggleButton = toggleButtonContainerRef.current.querySelector('button'); - if (toggleButton) { - const { width } = toggleButton?.getBoundingClientRect(); - setToggleButtonWidth(width); - } - } - }, []); - - // Observe width changes of the container to re-set the available width for breadcrumb container - useResizeObserver(containerRef.current, (entries) => { - if (entries.length) { - const { width } = entries[0].contentRect; - setBreadcrumbContainerWidth(width - toggleButtonWidth - spaceBetweenContainers); - } - }); - const createBreadcrumbItem: (breadcrumb: BreadcrumbItem) => IBreadcrumbItem = (breadcrumb: BreadcrumbItem) => { return { key: breadcrumb.key, @@ -201,8 +172,8 @@ const VisualPanelHeader: React.FC = React.memo((props) = const items = breadcrumbs.map(createBreadcrumbItem); return ( -
-
+
+
= React.memo((props) = styles={pageStyles.breadcrumbClass} />
-
+
{showCode ? formatMessage('Hide code') : formatMessage('Show code')}