Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into keyboard_nav2
Browse files Browse the repository at this point in the history
tomlyn authored Dec 4, 2024
2 parents 376192b + ed34cb0 commit e6052b7
Showing 49 changed files with 6,423 additions and 96 deletions.
Original file line number Diff line number Diff line change
@@ -65,7 +65,8 @@ describe("CommonCanvas renders correctly", () => {
const config = {};
const canvasParams = { showRightFlyout: false };
const wrapper = createCommonCanvas(config, canvasController, canvasParams);
expect(wrapper.find(CommonCanvasRightFlyout)).to.have.length(1);
// When showRightFlyout is false then Right Flyout should not be visible
expect(wrapper.find(CommonCanvasRightFlyout)).to.have.length(0);
expect(canvasController.isRightFlyoutOpen() === false).to.be.true;
});

Original file line number Diff line number Diff line change
@@ -318,8 +318,8 @@ describe("oneofselect paramDef works correctly", () => {

// combobox should have aria-label
const comboboxWrapper = container.querySelector("div[data-id='properties-ctrl-oneofselect_custom_value']");
const comboboxAriaLabel = comboboxWrapper.querySelector(".cds--list-box__menu").getAttribute("aria-label");
expect(comboboxAriaLabel).to.equal("oneofselect custom value allowed");
const comboboxAriaLabelledby = comboboxWrapper.querySelector(".cds--list-box__menu").getAttribute("aria-labelledby");
expect(comboboxWrapper.querySelector(`label[id='${comboboxAriaLabelledby}']`).textContent).to.equal("oneofselect custom value allowed(required)");
});
});

Original file line number Diff line number Diff line change
@@ -498,7 +498,7 @@ describe("StructureListEditor render from paramdef", () => {
expect(tableUtilsRTL.getTableRows(container)).to.have.length(2);

// select the first row in the table
tableUtilsRTL.clickTableRows(container, [0]);
tableUtilsRTL.selectCheckboxes(container, [0]);

// ensure table toolbar has Delete button and select it
const tableToolbar = container.querySelector("div.properties-table-toolbar");
@@ -525,7 +525,7 @@ describe("StructureListEditor render from paramdef", () => {
expect(tableData).to.have.length(3);

// set the error in the last row
const checkboxCell = summaryPanel.querySelectorAll("input[type='checkbox']")[3];
const checkboxCell = summaryPanel.querySelectorAll("input[type='checkbox']")[7];
checkboxCell.setAttribute("checked", false);
fireEvent.click(checkboxCell);

@@ -544,10 +544,10 @@ describe("StructureListEditor render from paramdef", () => {
expect(errorMessage).to.eql(actual);

// remove the first row and ensure the error message is associated with the correct row.
tableUtilsRTL.clickTableRows(summaryPanel, [0]);
tableUtilsRTL.selectCheckboxes(container, [0]);
const tableToolbar = container.querySelector("div.properties-table-toolbar");
let deleteButton = tableToolbar.querySelector("button.properties-action-delete");
fireEvent.click(deleteButton);
let deleteButton = tableToolbar.querySelectorAll("button.properties-action-delete");
fireEvent.click(deleteButton[0]);

const messages = renderedController.getAllErrorMessages();
const rowErrorMsg = { "1": { "3": { propertyId: {
@@ -561,9 +561,9 @@ describe("StructureListEditor render from paramdef", () => {
summaryPanel = container.querySelector("div.properties-wf-content.show");
tableData = tableUtilsRTL.getTableRows(summaryPanel);
expect(tableData).to.have.length(2);
tableUtilsRTL.clickTableRows(summaryPanel, [1]);
deleteButton = container.querySelector("div.properties-table-toolbar").querySelector("button.properties-action-delete");
fireEvent.click(deleteButton);
tableUtilsRTL.selectCheckboxes(container, [1]);
deleteButton = container.querySelectorAll("button.properties-action-delete");
fireEvent.click(deleteButton[0]);
actual = renderedController.getErrorMessage({ name: "inlineEditingTableError" });
expect(actual).to.equal(null);
});
@@ -630,7 +630,7 @@ describe("StructureListEditor render from paramdef", () => {
expect(errorMessage).to.eql(actual);

// select the first row and move it to the bottom and make sure the error messages stay aligned.
tableUtilsRTL.clickTableRows(summaryPanel, [0]);
tableUtilsRTL.selectCheckboxes(summaryPanel, [0]);
summaryPanel = container.querySelector("div.properties-wf-content.show");
const moveRowBottom = container.querySelector("div.properties-table-toolbar").querySelector("button.table-row-move-bottom-button");
fireEvent.click(moveRowBottom);
@@ -656,7 +656,7 @@ describe("StructureListEditor render from paramdef", () => {
// select the second from the last row and move it to the top and make sure the error messages stay aligned.
tableData = tableUtilsRTL.getTableRows(summaryPanel);
expect(tableData).to.have.length(5);
tableUtilsRTL.clickTableRows(summaryPanel, [3]);
tableUtilsRTL.selectCheckboxes(summaryPanel, [3]);
summaryPanel = container.querySelector("div.properties-wf-content.show");
const moveRowTop = container.querySelector("div.properties-table-toolbar").querySelector("button.table-row-move-top-button");
fireEvent.click(moveRowTop);
@@ -780,6 +780,49 @@ describe("StructureListEditor render from paramdef", () => {
});
});

describe("StructureListEditor single select table renders and functions correctly", () => {
let wrapper;

beforeEach(() => {
const renderedObject = propertyUtilsRTL.flyoutEditorForm(structureListEditorParamDef);
wrapper = renderedObject.wrapper;
});

afterEach(() => {
wrapper.unmount();
});

// Removed table toolbar from single select tables.
it("Should not render table toolbar", () => {
const { container } = wrapper;
propertyUtilsRTL.openSummaryPanel(wrapper, "inlineEditingTableWarning-summary-panel");
tableUtilsRTL.clickTableRows(container, [0]);
const tableToolbar = container.querySelectorAll("div.properties-table-toolbar");
expect(tableToolbar).to.have.length(0);
});

// Testing delete icons for single select table
it("should delete rows correctly", async() => {
const { container } = wrapper;
const summaryPanel = propertyUtilsRTL.openSummaryPanel(wrapper, "inlineEditingTableWarning-summary-panel");

// Adding a row
const addColumnButton = summaryPanel.querySelectorAll("button.properties-add-fields-button");
expect(addColumnButton).to.have.length(1);
fireEvent.click(addColumnButton[0]);

expect(tableUtilsRTL.getTableRows(container)).to.have.length(2);

// Testing delete row icon
const deleteButtons = container.querySelectorAll(".delete-button");
expect(deleteButtons).to.have.length(2);
tableUtilsRTL.clickTableRows(container, [0]); // need to click on the table that we want to delete
fireEvent.click(deleteButtons[0]);

expect(tableUtilsRTL.getTableRows(container)).to.have.length(1);
});
});

describe("StructureListEditor renders correctly with nested controls", () => {
let wrapper;
let renderedController;
Original file line number Diff line number Diff line change
@@ -106,19 +106,18 @@ describe("summary panel renders error/warning status correctly", () => {
// ensure table toolbar has Delete button and click it
wideflyout = wrapper.find("div.properties-wf-content.show");
let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
let tableToolbar = tableWrapper.find("div.properties-table-toolbar");
let deleteButton = tableToolbar.find("button.properties-action-delete");
expect(deleteButton).to.have.length(1);
deleteButton.simulate("click");
let deleteButtons = tableWrapper.find("button.delete-button");
expect(deleteButtons).to.have.length(2);
deleteButtons.at(0).simulate("click");

// remove second row
tableUtils.clickTableRows(wideflyout, [0]);
wideflyout = wrapper.find("div.properties-wf-content.show");
tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
tableToolbar = tableWrapper.find("div.properties-table-toolbar");
deleteButton = tableToolbar.find("button.properties-action-delete");
expect(deleteButton).to.have.length(1);
deleteButton.simulate("click");
deleteButtons = tableWrapper.find("button.delete-button");
expect(deleteButtons).to.have.length(1);
deleteButtons.at(0).simulate("click");


// close fly-out
wideflyout.find("button.properties-apply-button").simulate("click");
@@ -162,18 +161,16 @@ describe("summary panel renders error/warning status correctly", () => {
wideflyout = wrapper.find("div.properties-wf-content.show");
// ensure table toolbar has Delete button and click it
let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
const tableToolbar = tableWrapper.find("div.properties-table-toolbar");
let deleteButton = tableToolbar.find("button.properties-action-delete");
expect(deleteButton).to.have.length(1);
deleteButton.simulate("click");
let deleteButtons = tableWrapper.find("button.delete-button");
deleteButtons.at(0).simulate("click");

// remove second row
tableUtils.clickTableRows(wideflyout, [0]);
wideflyout = wrapper.find("div.properties-wf-content.show");
tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
deleteButton = tableWrapper.find("div.properties-table-toolbar").find("button.properties-action-delete");
expect(deleteButton).to.have.length(1);
deleteButton.simulate("click");
deleteButtons = tableWrapper.find("button.delete-button");
deleteButtons.at(0).simulate("click");


// check that all rows were removed
wideflyout = wrapper.find("div.properties-wf-content.show");
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@ describe("tearsheet tests", () => {
it("should have title and description set", () => {
controller.setActiveTearsheet("tearsheet1");
wrapper.update();
expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h3").text()).to.equal("Python");
expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python");
expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header p").text()).to.equal("Your change is automatically saved.");
});
it("should be hidden but not removed from DOM on the tearsheet close button", () => {
@@ -68,7 +68,7 @@ describe("tearsheet tests", () => {
wrapper.find("div[data-id='properties-ctrl-code_rows'] button.maximize").simulate("click");
wrapper.update();
expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1);
expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h3").text()).to.equal("Python 2");
expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python 2");
expect(wrapper.find("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(1);
});
});
@@ -88,7 +88,7 @@ describe("Tearsheet renders correctly", () => {
const tearsheet = wrapper.find("div.properties-tearsheet-panel");
expect(tearsheet).to.have.length(1);
expect(tearsheet.find("div.properties-tearsheet-header")).to.have.length(1);
expect(tearsheet.find("div.properties-tearsheet-header > h3").text()).to.equal("test title");
expect(tearsheet.find("div.properties-tearsheet-header > h2").text()).to.equal("test title");
expect(tearsheet.find("div.properties-tearsheet-body")).to.have.length(1);
expect(tearsheet.find("div.properties-tearsheet-body").text()).to.equal("test content");
expect(tearsheet.find("div.properties-tearsheet-body.with-buttons")).to.have.length(0);
Original file line number Diff line number Diff line change
@@ -1216,7 +1216,7 @@
},
{
"complex_type_ref": "inlineEditingTableError",
"row_selection": "single",
"row_selection": "multiple-edit",
"moveable_rows": true,
"parameters": [
{
Original file line number Diff line number Diff line change
@@ -114,5 +114,6 @@
"label.indicator.optional": "(optional)",
"slider.numberInput.label": "Slider number input",
"editorForm.tabList.label": "Primary Tabs",
"subTabs.tabList.label": "Tab List"
"subTabs.tabList.label": "Tab List",
"table.deleteIcon.tooltip": "Delete"
}
Original file line number Diff line number Diff line change
@@ -112,5 +112,6 @@
"label.indicator.optional": "[Esperanto~(optional)~~~~~~eo]",
"slider.numberInput.label": "[Esperanto~Slider number input~~~~~eo]",
"editorForm.tabList.label": "[Esperanto~Primary Tabs~~~~eo]",
"subTabs.tabList.label": "[Esperanto~Tab List~~~~eo]"
"subTabs.tabList.label": "[Esperanto~Tab List~~~~eo]",
"table.deleteIcon.tooltip": "[Esperanto~Delete~~~~eo]"
}
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/package.json
Original file line number Diff line number Diff line change
@@ -59,7 +59,7 @@
"@babel/plugin-transform-runtime": "7.24.7",
"@babel/preset-env": "7.25.3",
"@babel/preset-react": "7.24.7",
"@carbon/react": "1.62.0-rc.0",
"@carbon/react": "1.71.0",
"@rollup/plugin-babel": "5.3.0",
"@rollup/plugin-commonjs": "21.0.1",
"@rollup/plugin-json": "4.1.0",
Original file line number Diff line number Diff line change
@@ -1641,6 +1641,18 @@ export default class CanvasController {
this.objectModel.setBottomPanelHeight(ht);
}

isLeftFlyoutOpen() {
return this.objectModel.isLeftFlyoutOpen();
}

setRightFlyoutWidth(wd) {
this.objectModel.setRightFlyoutWidth(wd);
}

isRightFlyoutOpen() {
return this.objectModel.isRightFlyoutOpen();
}

isTopPanelOpen() {
return this.getObjectModel().isTopPanelOpen();
}
@@ -1705,14 +1717,6 @@ export default class CanvasController {
this.objectModel.toggleNotificationPanel();
}

isLeftFlyoutOpen() {
return this.objectModel.isLeftFlyoutOpen();
}

isRightFlyoutOpen() {
return this.objectModel.isRightFlyoutOpen();
}

isDisplayingFullPageSubFlow() {
const breadcrumbs = this.objectModel.getBreadcrumbs();
return breadcrumbs.length > 1;
23 changes: 17 additions & 6 deletions canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx
Original file line number Diff line number Diff line change
@@ -19,8 +19,11 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import Logger from "../logging/canvas-logger.js";

const MARGIN_TOP = 100;
// Margin must be equal to or greater than the toolbar height
// plus the minimum allowed height for the canvas which is 150px.
const MARGIN_TOP = 200;
const MIN_HEIGHT = 75;
const TOP_PANEL_CLASSNAME = "top-panel";

class CanvasBottomPanel extends React.Component {
constructor(props) {
@@ -61,13 +64,21 @@ class CanvasBottomPanel extends React.Component {
// Returns a new height for the bottom panel limited by the need to enforce
// a minimum and maximum height.
limitHeight(ht) {
const canvasContainer = document.getElementById(this.props.containingDivId);
const containingDiv = document.getElementById(this.props.containingDivId);
const topPanelDiv = document.getElementsByClassName(TOP_PANEL_CLASSNAME);
let height = ht;
let topPanelHeight = 0;

// canvasContainer may not be available in some test situations
if (canvasContainer) {
const canvasHeight = canvasContainer.getBoundingClientRect().height;
const maxHeight = canvasHeight - MARGIN_TOP;
// Consider top panel height while calculating maxHeight to disable scroll
// in right flyout.
if (topPanelDiv.length > 0) {
topPanelHeight = topPanelDiv[0].getBoundingClientRect().height;
}

// containingDiv may not be available in some test situations
if (containingDiv) {
const containingDivHt = containingDiv.getBoundingClientRect().height;
const maxHeight = containingDivHt - MARGIN_TOP - topPanelHeight;
height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight);
}
return height;
18 changes: 15 additions & 3 deletions canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx
Original file line number Diff line number Diff line change
@@ -97,7 +97,7 @@ class CommonCanvasPanels extends React.Component {
// indicated by setting the config field enablePaletteLayout to
// "None" and providing some JSX in the leftFlyoutContent field
// of <CommonCanvas>.
isLeftPanelOpen() {
isLeftFlyoutOpen() {
if (this.props.enablePaletteLayout === PALETTE_LAYOUT_DIALOG) {
return false;
}
@@ -114,6 +114,11 @@ class CommonCanvasPanels extends React.Component {
return false;
}

// Returns true if the right flyout should be displayed.
isRightFlyoutOpen() {
return this.props.rightFlyoutIsOpen;
}

// Returns a JSX object for the contents of the left panel. If the application
// sets enablePaletteLayout to None this indicates the app wamts its own content
// to go into the left panel provided by leftFlyoutContent provided to <CommonCanvas>
@@ -129,6 +134,11 @@ class CommonCanvasPanels extends React.Component {
return null;
}

// Returns a JSX object for the contents of the right panel.
generateRightFlyout() {
return (<CommonCanvasRightFlyout containingDivId={this.props.containingDivId} canvasController={this.props.canvasController} />);
}

render() {
this.logger.log("render");

@@ -138,8 +148,9 @@ class CommonCanvasPanels extends React.Component {
containingDivId={this.props.containingDivId}
/>
);
const rightFlyout = (<CommonCanvasRightFlyout />);
const leftFlyoutIsOpen = this.isLeftPanelOpen();
const rightFlyoutIsOpen = this.isRightFlyoutOpen();
const rightFlyout = rightFlyoutIsOpen ? this.generateRightFlyout() : null;
const leftFlyoutIsOpen = this.isLeftFlyoutOpen();
const leftFlyout = leftFlyoutIsOpen ? this.generateLeftFlyout() : null;

const topCenterBottom = this.generateTopCenterBottom();
@@ -288,6 +299,7 @@ const mapStateToProps = (state, ownProps) => ({
enableNarrowPalette: state.canvasconfig.enableNarrowPalette,
enableLeftFlyoutUnderToolbar: state.canvasconfig.enableLeftFlyoutUnderToolbar,
enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
enableRightFlyoutDragToResize: state.canvasconfig.enableRightFlyoutDragToResize,
toolbarIsOpen: (state.canvasconfig.enableToolbarLayout !== PALETTE_LAYOUT_NONE),
paletteIsOpen: state.palette.isOpen,
topPanelIsOpen: state.toppanel.isOpen,
Loading

0 comments on commit e6052b7

Please sign in to comment.