Skip to content
Snippets Groups Projects
Commit 3e33fe96 authored by Bálint Kléri's avatar Bálint Kléri Committed by Wim Leers
Browse files

Issue #3471108 by balintbrews, jessebaker: Unable to scroll component props form

parent 2f84d78e
No related branches found
No related tags found
1 merge request!229#3471108: Unable to scroll component props form
Pipeline #309556 failed
......@@ -33,7 +33,7 @@
/src/Theme/XBThemeNegotiator.php
/themes/engines/semi_coupled/
/templates/form/
/ui/src/components/form/
/ui/src/components/form/inputBehaviors.tsx
#
......
......@@ -16,7 +16,9 @@ describe('Media Library', () => {
it('Can open the media library widget in a props form', () => {
cy.drupalLogin('xbUser', 'xbUser');
cy.loadURLandWaitForXBLoaded();
cy.waitForElementInIframe('[data-xb-component-id="experience_builder:image"]');
cy.waitForElementInIframe(
'[data-xb-component-id="experience_builder:image"]',
);
cy.get('[class*="contextualPanel"]').should('not.exist');
......@@ -50,9 +52,6 @@ describe('Media Library', () => {
// Use the Media Library widget an additional time. This effectively
// confirms that XBEndpointRenderer is not loading JS assets that already
// exist on the page.
cy.get('[data-testid="xb-contextual-panel"] button[aria-label="Close"]')
.click()
cy.get('[data-testid="xb-contextual-panel"]').should('not.exist');
cy.getIframeBody()
.find('[data-xb-component-id="experience_builder:image"] img')
.first()
......
......@@ -108,10 +108,6 @@ describe('General Experience Builder', { testIsolation: false }, () => {
});
});
// Before interacting with components in the layout, confirm there is
// currently no right drawer.
cy.findByTestId('xb-contextual-panel').should('not.exist');
// Confirm no component has a hover outline.
cy.get('[data-xb-component-outline]').should('not.exist');
......@@ -291,28 +287,15 @@ describe('General Experience Builder', { testIsolation: false }, () => {
cy.get(selector).should('have.value', newValues[prop]);
});
// Close the right drawer, so it doesn't cover the iFrame content when Cypress is looking
// for elements.
cy.get('[class*="contextualPanel"] button[aria-label="Close"]').click();
// New values were typed into the prop form inputs, now enter the iframe
// and confirm the component reflects these new values.
cy.testInIframe(
'[data-xb-component-id="experience_builder:my-hero"]',
(heroes) => {
const hero = heroes[0];
Object.entries(heroSelectors).forEach(([prop, selector]) => {
expect(
hero.querySelector(selector).textContent.onlyVisibleChars(),
`${prop} (${selector}) should be '${newValues[prop]}'`,
).to.equal(newValues[prop]);
});
// Special check for ctaHref as it is an attribute value.
expect(
hero.querySelector(heroSelectors.cta1).getAttribute('formaction'),
).to.equal(newValues.cta1href);
},
cy.waitForElementContentInIframe(heroSelectors.heading, newValues.heading);
cy.waitForElementContentInIframe(
heroSelectors.subheading,
newValues.subheading,
);
cy.waitForElementContentInIframe(heroSelectors.cta1, newValues.cta1);
cy.waitForElementContentInIframe(heroSelectors.cta2, newValues.cta2);
});
it('previews components on hover', () => {
......@@ -455,9 +438,6 @@ describe('General Experience Builder', { testIsolation: false }, () => {
`Hit back twice and the path should still have /xb`,
).to.contain('/xb/node/1');
});
// No contextual panel open.
cy.findByTestId('xb-contextual-panel').should('not.exist');
});
it('Visits a router URL directly', () => {
......
.propertiesForm {
margin-top: var(--space-5);
font-size: 12px;
}
.formLabel {
......
.selectElement {
width: 275px;
width: 100%;
height: 30px;
margin-bottom: 5px;
padding: 0 5px;
......
......@@ -4,22 +4,10 @@
right: 15px;
width: var(--sidebar-right-width);
height: var(--sidebar-height);
padding: 0 var(--space-1) var(--space-1) 0;
padding: 0 0 var(--space-1) 0;
background-color: #fff;
}
.handleContainer {
width: 16px;
height: 100%;
}
.handleIcon {
position: absolute;
pointer-events: none;
}
.cardInset {
height: 100%;
}
.segmentedControlRoot {
margin-bottom: 24px;
margin-inline-start: 15px;
......
import {
Box,
Flex,
Grid,
IconButton,
Inset,
Text,
ScrollArea,
SegmentedControl,
Separator,
Box,
} from '@radix-ui/themes';
import styles from './ContextualPanel.module.css';
import { Cross1Icon, DragHandleVerticalIcon } from '@radix-ui/react-icons';
import type React from 'react';
import { useState } from 'react';
import {
selectSelectedComponent,
setSelectedComponent,
} from '@/features/ui/uiSlice';
import { useAppDispatch, useAppSelector } from '@/app/hooks';
import { selectSelectedComponent } from '@/features/ui/uiSlice';
import { useAppSelector } from '@/app/hooks';
import Panel from '@/components/Panel';
import ErrorBoundary from '@/components/error/ErrorBoundary';
import DummyPropsEditForm from '@/components/DummyPropsEditForm';
......@@ -26,78 +19,51 @@ import clsx from 'clsx';
interface ContextualPanelProps {}
const ContextualPanel: React.FC<ContextualPanelProps> = () => {
const dispatch = useAppDispatch();
const selectedComponent = useAppSelector(selectSelectedComponent);
const [activePanel, setActivePanel] = useState('settings');
const handleContextualPanelCloseClick = () => {
dispatch(setSelectedComponent(''));
};
return (
<Panel data-testid="xb-contextual-panel" className={styles.contextualPanel}>
<Flex p="1" justify="end">
<IconButton
size="1"
aria-label="Close"
onClick={() => handleContextualPanelCloseClick()}
>
<Cross1Icon />
</IconButton>
<Flex
flexGrow="1"
direction="column"
pl="4"
py="5"
height="100%"
data-testid={`xb-contextual-panel-${selectedComponent}`}
>
<ErrorBoundary>
<Box pr="4">
<Flex justify="center" align="center">
<SegmentedControl.Root
defaultValue="settings"
onValueChange={setActivePanel}
className={clsx(styles.segmentedControlRoot)}
>
<SegmentedControl.Item value="settings">
Settings
</SegmentedControl.Item>
<SegmentedControl.Item value="pageSettings">
Page Data
</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
<Separator orientation="horizontal" size="4" />
</Box>
<ScrollArea>
<Box pr="4">
{activePanel === 'settings' && (
<ErrorBoundary title="An unexpected error has occurred while rendering the component's form.">
<DummyPropsEditForm />
</ErrorBoundary>
)}
{activePanel === 'pageSettings' && (
<Text size="1">Styles for...{selectedComponent}</Text>
)}
</Box>
</ScrollArea>
</ErrorBoundary>
</Flex>
<ErrorBoundary>
<Grid height="100%" rows="1" columns="1" gap="2" p="0">
<Inset
clip="padding-box"
side="left"
pb="current"
className={styles.cardInset}
>
<Grid height="100%" p="0" columns="12px 1fr" gap="0">
<Box height="100%">
<Flex
justify="center"
align="center"
className={styles.handleContainer}
>
<DragHandleVerticalIcon className={styles.handleIcon} />
</Flex>
</Box>
<Box data-testid={`xb-contextual-panel-${selectedComponent}`}>
<Flex justify="center" align="center">
<SegmentedControl.Root
defaultValue="settings"
onValueChange={setActivePanel}
className={clsx(styles.segmentedControlRoot)}
>
<SegmentedControl.Item value="settings">
Settings
</SegmentedControl.Item>
<SegmentedControl.Item value="pageSettings">
Page Data
</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
<Separator orientation="horizontal" size="4" />
<ScrollArea type="always" size="1" scrollbars="vertical">
<Box pt="3">
{activePanel === 'settings' && (
<>
<ErrorBoundary title="An unexpected error has occurred while rendering the component's form.">
<DummyPropsEditForm />
</ErrorBoundary>
</>
)}
{activePanel === 'pageSettings' && (
<Text size="1">Styles for...{selectedComponent}</Text>
)}
</Box>
</ScrollArea>
</Box>
</Grid>
</Inset>
</Grid>
</ErrorBoundary>
</Panel>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment