feat(form): Enable 'Required' field feature in the canvas form

KaotoIO · Aug 12, 2024 · 7b447cc · 7b447cc
1 parent cec6c6d
commit 7b447cc
Show file tree

Hide file tree

Showing 43 changed files with 1,609 additions and 1,266 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepDisable.cy.ts b/packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepDisable.cy.ts
@@ -9,6 +9,7 @@ describe('Tests for Design page', () => {
 
     cy.selectDisableNode('setHeader');
     cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('disabled', true);
 
     cy.openSourceCode();

diff --git a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepActions.cy.ts b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepActions.cy.ts
@@ -8,6 +8,7 @@ describe('User completes normal actions on steps in a branch', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('marshal');
+    cy.selectFormTab('All');
     cy.interactWithConfigInputObject('allowJmsType');
     cy.interactWithConfigInputObject('collectionType', 'collection Type');
 

diff --git a/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts b/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts
@@ -39,6 +39,7 @@ describe('Test for camel route root containers configuration', () => {
 
     cy.openStepConfigurationTab('camel-route');
 
+    cy.selectFormTab('All');
     cy.interactWithConfigInputObject('description', 'test.description');
     cy.interactWithConfigInputObject('group', 'test.group');
     cy.interactWithConfigInputObject('inputType.description', 'test.inputType.description');
@@ -91,6 +92,7 @@ describe('Test for camel route root containers configuration', () => {
 
     cy.openStepConfigurationTab('eip-action');
 
+    cy.selectFormTab('All');
     cy.interactWithConfigInputObject('name', 'test.name');
     cy.interactWithConfigInputObject('title', 'test.title');
     cy.interactWithConfigInputObject('description', 'test.description');
@@ -130,6 +132,7 @@ describe('Test for camel route root containers configuration', () => {
 
     cy.openStepConfigurationTab('pipe');
 
+    cy.selectFormTab('All');
     cy.get(`input[name="name"]`).clear();
     cy.get(`input[name="name"]`).type('testName');
 

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/modelineConf.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/modelineConf.cy.ts
@@ -9,6 +9,7 @@ describe('Tests for modeline', () => {
 
     cy.removeNodeByName('https');
     cy.openStepConfigurationTab('kamelet:log-sink');
+    cy.selectFormTab('All');
     cy.get(`input[name="parameters.showProperties"]`).check();
 
     cy.openSourceCode();

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts
@@ -7,7 +7,7 @@ describe('Tests for side panel step filtering', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
     cy.openStepConfigurationTab('setHeader');
-
+    cy.selectFormTab('All');
     // expand wrapped section
     cy.contains('button', 'Processor advanced properties').click();
 
@@ -32,6 +32,7 @@ describe('Tests for side panel step filtering', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
     cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
 
     // expand wrapped section
     cy.contains('button', 'Processor advanced properties').click();
@@ -57,6 +58,7 @@ describe('Tests for side panel step filtering', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
     cy.openStepConfigurationTab('log');
+    cy.selectFormTab('All');
 
     // check all fields are present
     cy.get(`input[name="id"]`).should('exist');
@@ -75,18 +77,19 @@ describe('Tests for side panel step filtering', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
     cy.openStepConfigurationTab('log');
+    cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('variableSend', 'testVariableSend');
     cy.interactWithConfigInputObject('variableReceive', 'testVariableReceive');
 
-    cy.get('button[id="User Modified"]').click();
+    cy.selectFormTab('Modified');
 
     cy.get(`input[name="variableSend"]`).should('exist');
     cy.get(`input[name="variableReceive"]`).should('exist');
     cy.get(`textarea[name="description"]`).should('not.exist');
     cy.get(`input[name="id"]`).should('not.exist');
 
-    cy.get('button[id="All Fields"]').click();
+    cy.selectFormTab('All');
 
     cy.get(`input[name="variableSend"]`).should('exist');
     cy.get(`input[name="variableReceive"]`).should('exist');

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/routeBeanConf.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/routeBeanConf.cy.ts
@@ -13,6 +13,7 @@ describe('Test for node bean reference and configuration support', () => {
       cy.openDesignPage();
 
       cy.openStepConfigurationTab('sql');
+      cy.selectFormTab('All');
       cy.configureNewBeanReference('parameters.dataSource');
       cy.get(`input[name="name"]`).clear().type('test');
       cy.get(`input[name="type"]`).clear().type('org.acme');
@@ -55,6 +56,7 @@ describe('Test for node bean reference and configuration support', () => {
 
       cy.openDesignPage();
       cy.openStepConfigurationTab('sql');
+      cy.selectFormTab('All');
       cy.configureBeanReference('parameters.dataSource', data.dataSource);
       cy.openSourceCode();
 
@@ -68,12 +70,14 @@ describe('Test for node bean reference and configuration support', () => {
 
       cy.openDesignPage();
       cy.openStepConfigurationTab('sql');
+      cy.selectFormTab('All');
       cy.configureBeanReference('parameters.dataSource', data.dataSource);
       cy.openSourceCode();
       cy.checkCodeSpanLine('dataSource: "' + data.dataSource + '"');
 
       cy.openDesignPage();
       cy.openStepConfigurationTab('sql');
+      cy.selectFormTab('All');
       cy.deselectNodeBean('parameters.dataSource');
       cy.openSourceCode();
       cy.checkCodeSpanLine('dataSource: "' + data.dataSource + '"', 0);
@@ -85,6 +89,7 @@ describe('Test for node bean reference and configuration support', () => {
     cy.uploadFixture('flows/camelRoute/sqlBeans.yaml');
     cy.openDesignPage();
     cy.openStepConfigurationTab('sql');
+    cy.selectFormTab('All');
     cy.configureBeanReference('parameters.dataSource', 'postgreSqlSource');
 
     cy.openBeans();
@@ -93,6 +98,7 @@ describe('Test for node bean reference and configuration support', () => {
     cy.get('[data-testid="metadata-row-1"]').should('not.exist');
     cy.openDesignPage();
     cy.openStepConfigurationTab('sql');
+    cy.selectFormTab('All');
     cy.get(`div[data-fieldname="parameters.dataSource"] input[value="#postgreSqlSource"]`).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
@@ -8,13 +8,15 @@ describe('Tests for Design page', () => {
     cy.openDesignPage();
     // Configure timer - source step
     cy.openStepConfigurationTab('timer-source');
+    cy.selectFormTab('All');
     cy.interactWithConfigInputObject('period', '3000');
     cy.interactWithConfigInputObject('message', 'test message');
     cy.get(`input[name="message"]`).clear();
     cy.closeStepConfigurationTab();
 
     // Configure kafka-sink step
     cy.openStepConfigurationTab('kafka-sink');
+    cy.selectFormTab('All');
     cy.interactWithConfigInputObject('topic', 'topicname');
     cy.interactWithConfigInputObject('bootstrapServers', 'bootstrap');
     cy.interactWithConfigInputObject('securityProtocol', 'security');

diff --git a/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/uriRouteConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/sidepanelConfig/uriRouteConfig.cy.ts
@@ -17,6 +17,7 @@ describe('Test URI node config', () => {
       cy.checkNodeExist('file', 1);
 
       cy.openStepConfigurationTab('timer');
+      cy.selectFormTab('All');
       cy.checkConfigInputObject('parameters.period', '1000');
       cy.checkConfigInputObject('parameters.delay', '2000');
       cy.checkConfigInputObject('parameters.repeatCount', '10');
@@ -49,6 +50,7 @@ describe('Test URI node config', () => {
 
     // CHECK the aws2-s3 properties
     cy.openStepConfigurationTab('aws2-s3');
+    cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('parameters.autoCreateBucket', true);
     cy.checkConfigInputObject('parameters.bucketNameOrArn', 'testBucket');
   });
@@ -69,6 +71,7 @@ describe('Test URI node config', () => {
 
     // CHECK the aws2-s3 properties
     cy.openStepConfigurationTab('aws2-s3');
+    cy.selectFormTab('All');
     cy.checkConfigCheckboxObject('parameters.autoCreateBucket', true);
     cy.checkConfigInputObject('parameters.bucketNameOrArn', 'testBucket');
   });

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/errorHandler.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/errorHandler.cy.ts
@@ -10,6 +10,7 @@ describe('Test for errorHandler configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.get('#-oneof-toggle').click();
     cy.get('ul.pf-v5-c-menu__list > li:first')
@@ -33,6 +34,7 @@ describe('Test for errorHandler configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.get('#-oneof-toggle').click();
     cy.get('[data-testid="-oneof-select-dropdownlist-Default Error Handler"]').click();

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/interceptSendToEndpoint.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/interceptSendToEndpoint.cy.ts
@@ -10,6 +10,7 @@ describe('Test for interceptSendToEndpoint configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');
     cy.interactWithConfigInputObject('skipSendToOriginalEndpoint', 'testSkipSendToOriginalEndpoint');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onCompletion.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onCompletion.cy.ts
@@ -10,6 +10,7 @@ describe('Test for onCompletion configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');
     cy.interactWithConfigInputObject('onCompleteOnly');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts
@@ -33,6 +33,7 @@ describe('Test for root on exception container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
     cy.selectInTypeaheadField('redeliveryPolicy.retriesExhaustedLogLevel', 'INFO');
     cy.selectInTypeaheadField('redeliveryPolicy.retryAttemptedLogLevel', 'INFO');
 

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/restConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/restConfiguration.cy.ts
@@ -10,6 +10,7 @@ describe('Test for root on rest configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.selectInTypeaheadField('component', 'coap');
     cy.selectInTypeaheadField('apiComponent', 'openapi');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/routeConfiguration.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/routeConfiguration.cy.ts
@@ -10,6 +10,7 @@ describe('Test for root route configuration container', () => {
       .find('.pf-topology__node__label')
       .find('.pf-topology__node__label__background')
       .click();
+    cy.selectFormTab('All');
 
     cy.interactWithConfigInputObject('description', 'testDescription');
     cy.interactWithConfigInputObject('errorHandler.id', 'testErrorHandlerId');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/dataFormatStepConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/dataFormatStepConfig.cy.ts
@@ -9,6 +9,7 @@ describe('Tests for sidebar dataformat configuration', () => {
 
     // Configure marshal dataformat
     cy.openStepConfigurationTab('marshal');
+    cy.selectFormTab('All');
     cy.selectDataformat('Base64');
     cy.interactWithDataformatInputObject('lineLength', '128');
     cy.interactWithDataformatInputObject('id', 'simpleDataformatId');
@@ -29,6 +30,7 @@ describe('Tests for sidebar dataformat configuration', () => {
 
     // Configure marshal dataformat
     cy.openStepConfigurationTab('marshal');
+    cy.selectFormTab('All');
     cy.selectDataformat('Avro');
     cy.configureDropdownValue('library', 'avroJackson');
     cy.interactWithDataformatInputObject('unmarshalType', 'com.fasterxml.jackson.databind.JsonNode');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/expressionStepConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/expressionStepConfig.cy.ts
@@ -8,6 +8,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setHeader expression
     cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
     cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
@@ -25,6 +26,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.id');
     cy.addExpressionResultType('java.lang.String');
@@ -36,6 +38,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.checkNodeExist('setHeader', 2);
 
     cy.openStepConfigurationTab('setHeader', 1);
+    cy.selectFormTab('All');
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.name');
     cy.addExpressionResultType('java.lang.String');
@@ -66,6 +69,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setHeader expression
     cy.openStepConfigurationTab('setHeader');
+    cy.selectFormTab('All');
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
     cy.get('textarea[name="expression"]').should('have.value', '{{header.baz}}');
@@ -83,6 +87,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setBody expression
     cy.openStepConfigurationTab('setBody');
+    cy.selectFormTab('All');
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}body.baz}}`);
     cy.interactWithExpressionInputObject('id', 'simpleExpressionId');

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/loadBalancerConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/loadBalancerConfig.cy.ts
@@ -10,6 +10,7 @@ describe('Tests for sidebar loadBalancer step configuration', () => {
     cy.selectAppendNode('marshal');
     cy.chooseFromCatalog('processor', 'loadBalance');
     cy.openStepConfigurationTab('loadBalance');
+    cy.selectFormTab('All');
 
     cy.get('[data-testid="loadbalancer-config-card"] button').click();
     cy.get('[data-testid="loadbalancer-dropdownitem-roundRobinLoadBalancer"] button').click();

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/setHeadersStepConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/setHeadersStepConfig.cy.ts
@@ -10,6 +10,7 @@ describe('Tests for sidebar setHeaders step configuration', () => {
     cy.selectAppendNode('marshal');
     cy.chooseFromCatalog('processor', 'setHeaders');
     cy.openStepConfigurationTab('setHeaders');
+    cy.selectFormTab('All');
 
     cy.get('[data-testid="list-add-field"]').click();
 

diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -81,6 +81,7 @@ declare global {
       addProperty(propertyName: string): Chainable<JQuery<Element>>;
       addSingleKVProperty(propertyName: string, key: string, value: string): Chainable<JQuery<Element>>;
       filterFields(filter: string): Chainable<JQuery<Element>>;
+      selectFormTab(tab: string): Chainable<JQuery<Element>>;
       // metadata
       expandWrappedSection(sectionName: string): Chainable<JQuery<Element>>;
       closeWrappedSection(sectionName: string): Chainable<JQuery<Element>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts b/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts
@@ -139,3 +139,9 @@ Cypress.Commands.add('filterFields', (filter: string) => {
     cy.get('input.pf-v5-c-text-input-group__text-input').type(filter);
   });
 });
+
+Cypress.Commands.add('selectFormTab', (value: string) => {
+  cy.get('div.form-tabs').within(() => {
+    cy.get(`[id$="${value}"]`).click();
+  });
+});
diff --git a/packages/ui/src/components/Form/CustomAutoFields.tsx b/packages/ui/src/components/Form/CustomAutoFields.tsx
@@ -5,9 +5,11 @@ import { KaotoSchemaDefinition } from '../../models';
 import { Card, CardBody } from '@patternfly/react-core';
 import { getFieldGroups } from '../../utils';
 import { CatalogKind } from '../../models';
-import { FilteredFieldContext } from '../../providers';
+import { CanvasFormTabsContext, FilteredFieldContext } from '../../providers';
 import './CustomAutoFields.scss';
 import { CustomExpandableSection } from './customField/CustomExpandableSection';
+import { NoFieldFound } from './NoFieldFound';
+import { FormTabsModes } from '../Visualization/Canvas';
 
 export type AutoFieldsProps = {
   autoField?: ComponentType<{ name: string }>;
@@ -26,6 +28,7 @@ export function CustomAutoFields({
   const { schema } = useForm();
   const rootField = schema.getField('');
   const { filteredFieldText, isGroupExpanded } = useContext(FilteredFieldContext);
+  const { selectedTab } = useContext(CanvasFormTabsContext);
 
   /** Special handling for oneOf schemas */
   if (Array.isArray((rootField as KaotoSchemaDefinition['schema']).oneOf)) {
@@ -42,6 +45,17 @@ export function CustomAutoFields({
   }, {});
   const propertiesArray = getFieldGroups(actualFieldsSchema);
 
+  if (
+    selectedTab !== FormTabsModes.ALL_FIELDS &&
+    propertiesArray.common.length === 0 &&
+    Object.keys(propertiesArray.groups).length === 0
+  ) {
+    const comment = (rootField as KaotoSchemaDefinition['schema'])['$comment'] ?? '';
+    if (!comment.includes('expression') && !comment.includes('dataformat') && !comment.includes('loadbalance')) {
+      return <NoFieldFound />;
+    }
+  }
+
   return createElement(
     element,
     props,

diff --git a/packages/ui/src/components/Form/NoFieldFound.tsx b/packages/ui/src/components/Form/NoFieldFound.tsx
@@ -0,0 +1,21 @@
+import { Alert, Card, CardBody, Button } from '@patternfly/react-core';
+import { FunctionComponent, useContext } from 'react';
+import { CanvasFormTabsContext } from '../../providers';
+import { FormTabsModes } from '../Visualization/Canvas';
+
+export const NoFieldFound: FunctionComponent = () => {
+  const { selectedTab, onTabChange } = useContext(CanvasFormTabsContext);
+  return (
+    <Card>
+      <CardBody>
+        <Alert variant="info" title={`No ${selectedTab} Field Found`}>
+          No field found matching this criteria. Please switch to the{' '}
+          <Button id={FormTabsModes.ALL_FIELDS} onClick={(e) => onTabChange(e, true)} variant="link" isInline>
+            <b>All</b>
+          </Button>{' '}
+          tab.
+        </Alert>
+      </CardBody>
+    </Card>
+  );
+};