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 17, 2024 · b998cf4 · b998cf4
1 parent c180445
commit b998cf4
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 434 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,15 +33,11 @@ describe('Test toolbar on hover actions', () => {
     cy.openStepConfigurationTab('setHeader');
     cy.get('[data-testid="step-toolbar-button-disable"]').click();
 
-    cy.openStepConfigurationTab('setHeader');
     cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('disabled', true);
 
-    cy.openStepConfigurationTab('setHeader');
     cy.get('[data-testid="step-toolbar-button-disable"]').click();
 
-    cy.openStepConfigurationTab('setHeader');
-    cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('disabled', false);
   });
 

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/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 () => {