Skip to content

Commit

Permalink
#2149 Action Button width Issue for Custom Editor Size (#2150)
Browse files Browse the repository at this point in the history 
Signed-off-by: srikant <[email protected]>
Co-authored-by: Matt Howard <[email protected]>
  • Loading branch information
@srikant-ch5 @matthoward366
srikant-ch5 and matthoward366 authored Sep 24, 2024
1 parent 6d0bb13 commit cd14e08
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 43 deletions.
65 changes: 28 additions & 37 deletions canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,17 +338,14 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(1);
expect(wrapper.find("aside.properties-small")).to.have.length(1);
expect(wrapper.find("aside.properties-medium")).to.have.length(0);
expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-small")).to.have.length(0);
expect(wrapper.find("aside.properties-medium")).to.have.length(1);
expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-small")).to.have.length(1);
expect(wrapper.find("aside.properties-medium")).to.have.length(0);
expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
});

it("When enableResize=true and editor_size=medium and pixel_width min and max are set resize button should be rendered", () => {
Expand All @@ -359,17 +356,14 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(1);
expect(wrapper.find("aside.properties-medium")).to.have.length(1);
expect(wrapper.find("aside.properties-large")).to.have.length(0);
expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-medium")).to.have.length(0);
expect(wrapper.find("aside.properties-large")).to.have.length(1);
expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-medium")).to.have.length(1);
expect(wrapper.find("aside.properties-large")).to.have.length(0);
expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
});

it("When enableResize=true and editor_size=large and pixel_width min and max are set resize button should be rendered", () => {
Expand All @@ -380,17 +374,14 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(1);
expect(wrapper.find("aside.properties-large")).to.have.length(1);
expect(wrapper.find("aside.properties-max")).to.have.length(0);
expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-large")).to.have.length(0);
expect(wrapper.find("aside.properties-max")).to.have.length(1);
expect(wrapper.find("aside.properties-max").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
resizeBtn.simulate("click");
expect(wrapper.find("aside.properties-large")).to.have.length(1);
expect(wrapper.find("aside.properties-max")).to.have.length(0);
expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "400px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
});

it("When enableResize=true and editor_size=small and pixel_width min and max are the same the resize button should not be rendered", () => {
Expand All @@ -401,8 +392,8 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(0);
expect(wrapper.find("aside.properties-small")).to.have.length(1);
expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
});

it("When enableResize=true and editor_size=medium and pixel_width min and max are the same the resize button should not be rendered", () => {
Expand All @@ -413,8 +404,8 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(0);
expect(wrapper.find("aside.properties-medium")).to.have.length(1);
expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
});

it("When enableResize=true and editor_size=large and pixel_width min and max are the same the resize button should not be rendered", () => {
Expand All @@ -425,8 +416,8 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(0);
expect(wrapper.find("aside.properties-large")).to.have.length(1);
expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
});

it("When enableResize=true and editor_size=max and pixel_width is ommited the resize button should not be rendered", () => {
Expand All @@ -447,8 +438,8 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(0);
expect(wrapper.find("aside.properties-max")).to.have.length(1);
expect(wrapper.find("aside.properties-max").get(0).props.style).to.have.property("width", "1000px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "1000px");
});

it("When enableResize=true and editor_size is omitted and pixel_width min and max are the same the resize button should not be rendered", () => {
Expand All @@ -458,8 +449,8 @@ describe("CommonProperties works correctly in flyout", () => {
wrapper = renderedObject.wrapper;
const resizeBtn = wrapper.find("button.properties-btn-resize");
expect(resizeBtn).to.have.length(0);
expect(wrapper.find("aside.properties-small")).to.have.length(1);
expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "800px");
expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
});

it("When no groups or parameters are defined the flyout should still render", () => {
Expand Down
18 changes: 12 additions & 6 deletions canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,18 +570,24 @@ class PropertiesMain extends React.Component {
{editorForm}
</PropertiesModal>);
}

let propertiesSizeClassname = `properties-${this.state.editorSize}`;

const overrideSize = this._getOverrideSize();
let overrideStyle = null;
if (overrideSize !== null) {
// Add custom classname when custom editor size is set
propertiesSizeClassname = "properties-custom-size";
overrideStyle = { width: overrideSize + "px" };
}

const className = classNames("properties-wrapper",
{
"properties-right-flyout": this.props.propertiesConfig.rightFlyout,
"properties-light-enabled": this.props.light,
"properties-light-disabled": !this.props.light
},
`properties-${this.state.editorSize}`);
const overrideSize = this._getOverrideSize();
let overrideStyle = null;
if (overrideSize !== null) {
overrideStyle = { width: overrideSize + "px" };
}
propertiesSizeClassname);
return (
<Provider store={this.propertiesController.getStore()}>
<aside
Expand Down

0 comments on commit cd14e08

Please sign in to comment.