Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Canvas): add useVizNodeModel #1869

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat(Canvas): add useVizNodeModel #1869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d502ff9
feat(Canvas): add useVizNodeModel
lordrip Dec 17, 2024
b1babb3
Temp: TODO comments
lordrip Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,11 @@ describe('Test toolbar on hover actions', () => {
cy.openStepConfigurationTab('setHeader');
cy.get('[data-testid="step-toolbar-button-disable"]').click();

cy.openStepConfigurationTab('setHeader');

// Temporary workaround since the toolbar is updated but the config form is closed
cy.openStepConfigurationTab('setHeader');

cy.selectFormTab('All');
cy.checkConfigCheckboxObject('disabled', true);

cy.get('[data-testid="step-toolbar-button-disable"]').click();

cy.openStepConfigurationTab('setHeader');

// Temporary workaround since the toolbar is updated but the config form is closed
cy.openStepConfigurationTab('setHeader');

cy.checkConfigCheckboxObject('disabled', false);
});

Expand Down
4 changes: 2 additions & 2 deletions packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ describe('Test for missing config props canvas warnings', () => {

cy.openStepConfigurationTab('github');

/** The update should happen automatically after filling a property */
cy.interactWithConfigInputObject('parameters.repoName', 'test');
cy.closeStepConfigurationTab();

cy.get('[data-id^="camel-route|route.from.steps.1.to"] g')
.find('span[data-warning="true"].pf-v5-c-icon')
Expand All @@ -36,8 +36,8 @@ describe('Test for missing config props canvas warnings', () => {

cy.openStepConfigurationTab('delay-action');

/** The update should happen automatically after filling a property */
cy.interactWithConfigInputObject('milliseconds', '1000');
cy.closeStepConfigurationTab();

cy.get('[data-id^="webhook-binding|delay-action"] g')
.find('span[data-warning="true"].pf-v5-c-icon')
Expand Down
2 changes: 2 additions & 0 deletions packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ describe('Tests for side panel step filtering', () => {

cy.get(`input[name="variableSend"]`).should('exist');
cy.get(`input[name="variableReceive"]`).should('exist');
cy.checkConfigInputObject('variableSend', 'testVariableSend');
cy.checkConfigInputObject('variableReceive', 'testVariableReceive');
cy.get(`textarea[name="description"]`).should('not.exist');
cy.get(`input[name="id"]`).should('not.exist');

Expand Down
21 changes: 21 additions & 0 deletions packages/ui-tests/cypress/e2e/designer/sidepanelConfig/stepConfiguration.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,25 @@ describe('Tests for Design page', () => {
cy.checkCodeSpanLine('user: user');
cy.checkCodeSpanLine('password: password');
});

it('Disable and Enable steps using the step configuration', () => {
cy.uploadFixture('flows/camelRoute/basic.yaml');
cy.openDesignPage();

cy.openStepConfigurationTab('setHeader');

/** Check the toolbar's Disable button is on "Disable step" mode now */
cy.get('[data-testid="step-toolbar-button-disable"]').should('have.attr', 'title', 'Disable step');
/** Check the node now is in disabled mode */
cy.get(`g[data-nodelabel="setHeader"]`).should('have.attr', 'data-disabled', 'false');

cy.selectFormTab('All');
cy.get('#expandable-section-toggle-processor-advanced').click();
cy.interactWithConfigInputObject('disabled');

/** Check the toolbar's Disable button is on "Enable step" mode now */
cy.get('[data-testid="step-toolbar-button-disable"]').should('have.attr', 'title', 'Enable step');
/** Check the node now is in disabled mode */
cy.get(`g[data-nodelabel="setHeader"]`).should('have.attr', 'data-disabled', 'true');
});
});
2 changes: 1 addition & 1 deletion packages/ui/src/components/Form/properties/PropertiesField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { PropertyRow } from './PropertyRow';
* @constructor
*/
export const PropertiesField = connectField((props: IPropertiesField) => {
const propertiesModel = props.value ? { ...props.value } : {};
const propertiesModel = props.value;
const [isFieldExpanded, setFieldExpanded] = useState<boolean>(Object.keys(propertiesModel).length > 0);
const [expandedNodes, setExpandedNodes] = useState<string[]>([]);
const [placeholderState, setPlaceholderState] = useState<PlaceholderState | null>(null);
Expand Down
3 changes: 0 additions & 3 deletions packages/ui/src/components/Form/properties/PropertyRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,6 @@ export function PropertyRow({
setUserInputName(nodeName);
setUserInputValue(nodeValue);
setIsEditing(false);
if (isPlaceholder) {
onChangeModel();
}
}

function getKey() {
Expand Down
40 changes: 10 additions & 30 deletions packages/ui/src/components/MetadataEditor/MetadataEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,20 +195,10 @@ describe('MetadataEditor.tsx', () => {
});

test('add string property and cancel', async () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const beans: any[] = cloneDeep(mockModel.beansNoProp);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let changed: any;
render(
<MetadataEditor
name="beans"
schema={mockSchema.beans}
metadata={beans}
onChangeModel={(model) => {
changed = model;
}}
/>,
);
const onChangeModelSpy = jest.fn();
const beans = cloneDeep(mockModel.beansNoProp);

render(<MetadataEditor name="beans" schema={mockSchema.beans} metadata={beans} onChangeModel={onChangeModelSpy} />);
const row = screen.getByTestId('metadata-row-0');
fireEvent.click(row);

Expand All @@ -221,24 +211,14 @@ describe('MetadataEditor.tsx', () => {
const cancelBtn = screen.getByTestId('properties--placeholder-property-edit-cancel--btn');
fireEvent.click(cancelBtn);

expect(changed[0].properties.propStr).toBeFalsy();
expect(onChangeModelSpy).not.toHaveBeenCalled();
});

test('add object property and cancel', async () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const beans: any[] = cloneDeep(mockModel.beansNoProp);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let changed: any;
render(
<MetadataEditor
name="beans"
schema={mockSchema.beans}
metadata={beans}
onChangeModel={(model) => {
changed = model;
}}
/>,
);
const onChangeModelSpy = jest.fn();
const beans = cloneDeep(mockModel.beansNoProp);

render(<MetadataEditor name="beans" schema={mockSchema.beans} metadata={beans} onChangeModel={onChangeModelSpy} />);
const row = screen.getByTestId('metadata-row-0');
fireEvent.click(row);

Expand All @@ -249,7 +229,7 @@ describe('MetadataEditor.tsx', () => {
const objCancelBtn = screen.getByTestId('properties--placeholder-property-edit-cancel--btn');
fireEvent.click(objCancelBtn);

expect(changed[0].properties.propObj).toBeFalsy();
expect(onChangeModelSpy).not.toHaveBeenCalled();
});

test('change string property and confirm', async () => {
Expand Down
Loading
Loading