pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(explore): hide a control wrapped with StashFormDataContainer correctly (#28555)

This commit is contained in:
JUST.in DO IT 2024-05-16 14:30:18 -07:00 committed by GitHub
parent 5ae645828f
commit 956511f7ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
superset-frontend/src/explore/components/ControlRow.test.tsx
View File

@ -19,49 +19,73 @@
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import ControlSetRow from 'src/explore/components/ControlRow';
import StashFormDataContainer from './StashFormDataContainer';
const MockControl = (props: {
children: React.ReactElement;
type?: string;
isVisible?: boolean;
}) => <div>{props.children}</div>;
describe('ControlSetRow', () => {
it('renders a single row with one element', () => {
render(<ControlSetRow controls={[<p>My Control 1</p>]} />);
expect(screen.getAllByText('My Control 1').length).toBe(1);
});
it('renders a single row with two elements', () => {
render(
<ControlSetRow controls={[<p>My Control 1</p>, <p>My Control 2</p>]} />,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
});
test('renders a single row with one element', () => {
render(<ControlSetRow controls={[<p>My Control 1</p>]} />);
expect(screen.getAllByText('My Control 1').length).toBe(1);
});
test('renders a single row with two elements', () => {
render(
<ControlSetRow controls={[<p>My Control 1</p>, <p>My Control 2</p>]} />,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
expect(screen.getAllByText(/My Control/)[0]).toBeVisible();
expect(screen.getAllByText(/My Control/)[1]).toBeVisible();
});
it('renders a single row with one elements if is HiddenControl', () => {
render(
<ControlSetRow
controls={[
<p>My Control 1</p>,
<MockControl type="HiddenControl">
<p>My Control 2</p>
</MockControl>,
]}
/>,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
});
test('renders a single row with one elements if is HiddenControl', () => {
render(
<ControlSetRow
controls={[
<p>My Control 1</p>,
<MockControl type="HiddenControl">
<p>My Control 2</p>
</MockControl>,
]}
/>,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
expect(screen.getAllByText(/My Control/)[0]).toBeVisible();
expect(screen.getAllByText(/My Control/)[1]).not.toBeVisible();
});
it('renders a single row with one elements if is invisible', () => {
render(
<ControlSetRow
controls={[
<p>My Control 1</p>,
test('renders a single row with one elements if is invisible', () => {
render(
<ControlSetRow
controls={[
<p>My Control 1</p>,
<MockControl isVisible={false}>
<p>My Control 2</p>
</MockControl>,
]}
/>,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
expect(screen.getAllByText(/My Control/)[0]).toBeVisible();
expect(screen.getAllByText(/My Control/)[1]).not.toBeVisible();
});
test('renders a single row with one element wrapping with StashContainer if is invisible', () => {
render(
<ControlSetRow
controls={[
<p>My Control 1</p>,
<StashFormDataContainer shouldStash fieldNames={['field1']}>
<MockControl isVisible={false}>
<p>My Control 2</p>
</MockControl>,
]}
/>,
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
});
</MockControl>
</StashFormDataContainer>,
]}
/>,
{ useRedux: true },
);
expect(screen.getAllByText(/My Control/)).toHaveLength(2);
expect(screen.getAllByText(/My Control/)[0]).toBeVisible();
expect(screen.getAllByText(/My Control/)[1]).not.toBeVisible();
});

14
superset-frontend/src/explore/components/ControlRow.tsx
View File

@ -23,12 +23,13 @@ const NUM_COLUMNS = 12;
type Control = React.ReactElement | null;
export default function ControlRow({ controls }: { controls: Control[] }) {
const isHiddenControl = useCallback(
(control: Control) =>
control?.props.type === 'HiddenControl' ||
control?.props.isVisible === false,
[],
);
const isHiddenControl = useCallback((control: Control) => {
const props =
control && 'shouldStash' in control.props
? control.props.children.props
: control?.props;
return props?.type === 'HiddenControl' || props?.isVisible === false;
}, []);
// Invisible control should not be counted
// in the columns number
const countableControls = controls.filter(
@ -41,6 +42,7 @@ export default function ControlRow({ controls }: { controls: Control[] }) {
<div className="row">
{controls.map((control, i) => (
<div
data-test="control-item"
className={`col-lg-${colSize} col-xs-12`}
style={{
display: isHiddenControl(control) ? 'none' : 'block',