feat(Canvas): add useVizNodeModel

This commit offers a convenient mechanism to subscribe to updates from a given vizNode model, and at the same time, offers a mechanism to update the model as well.
KaotoIO · Dec 19, 2024 · 6de625f · 6de625f
1 parent 6a705f6
commit 6de625f
Show file tree

Hide file tree

Showing 18 changed files with 359 additions and 504 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts b/packages/ui-tests/cypress/e2e/designer/basicNodeActions/hoverToolbarActions.cy.ts
@@ -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);
   });
 

diff --git a/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts b/packages/ui-tests/cypress/e2e/designer/propsWarnings/mandatoryPropsWarnings.cy.ts
@@ -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')
@@ -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')

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts
@@ -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');
 

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/stepConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/stepConfiguration.cy.ts
@@ -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');
+  });
 });
diff --git a/packages/ui/src/components/Form/properties/PropertiesField.tsx b/packages/ui/src/components/Form/properties/PropertiesField.tsx
@@ -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);

diff --git a/packages/ui/src/components/Form/properties/PropertyRow.tsx b/packages/ui/src/components/Form/properties/PropertyRow.tsx
@@ -85,9 +85,6 @@ export function PropertyRow({
     setUserInputName(nodeName);
     setUserInputValue(nodeValue);
     setIsEditing(false);
-    if (isPlaceholder) {
-      onChangeModel();
-    }
   }
 
   function getKey() {

diff --git a/packages/ui/src/components/MetadataEditor/MetadataEditor.test.tsx b/packages/ui/src/components/MetadataEditor/MetadataEditor.test.tsx
@@ -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);
 
@@ -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);
 
@@ -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 () => {