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

packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx

@@ -12,7 +12,12 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import './DataFormatEditor.scss';
 import { DataFormatService } from './dataformat.service';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import { getSerializedModel, getUserUpdatedPropertiesSchema, isDefined } from '../../../utils';
+import {
+  getRequiredPropertiesSchema,
+  getSerializedModel,
+  getUserUpdatedPropertiesSchema,
+  isDefined,
+} from '../../../utils';
 import { FormTabsModes } from '../../Visualization/Canvas/canvasformtabs.modes';
 
 interface DataFormatEditorProps {
@@ -61,11 +66,16 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
   }, [dataFormat]);
 
   const processedSchema = useMemo(() => {
-    if (props.formMode === FormTabsModes.ALL_FIELDS) return dataFormatSchema;
-    return {
-      ...dataFormatSchema,
-      properties: getUserUpdatedPropertiesSchema(dataFormatSchema?.properties ?? {}, dataFormatModel ?? {}),
-    };
+    if (props.formMode === FormTabsModes.REQUIRED_FIELDS) {
+      return getRequiredPropertiesSchema(dataFormatSchema ?? {});
+    } else if (props.formMode === FormTabsModes.ALL_FIELDS) {
+      return dataFormatSchema;
+    } else if (props.formMode === FormTabsModes.USER_MODIFIED) {
+      return {
+        ...dataFormatSchema,
+        properties: getUserUpdatedPropertiesSchema(dataFormatSchema?.properties ?? {}, dataFormatModel ?? {}),
+      };
+    }
   }, [props.formMode, dataFormat]);
 
   const handleOnChange = useCallback(
@@ -89,7 +99,7 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
   );
 
   const showEditor = useMemo(() => {
-    if (props.formMode === FormTabsModes.ALL_FIELDS) return true;
+    if (props.formMode === FormTabsModes.ALL_FIELDS || props.formMode === FormTabsModes.REQUIRED_FIELDS) return true;
     return props.formMode === FormTabsModes.USER_MODIFIED && isDefined(selectedDataFormatOption);
   }, [props.formMode]);
 

packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx

@@ -12,7 +12,12 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { LoadBalancerService } from './loadbalancer.service';
 import './LoadBalancerEditor.scss';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import { getSerializedModel, getUserUpdatedPropertiesSchema, isDefined } from '../../../utils';
+import {
+  getRequiredPropertiesSchema,
+  getSerializedModel,
+  getUserUpdatedPropertiesSchema,
+  isDefined,
+} from '../../../utils';
 import { FormTabsModes } from '../../Visualization/Canvas/canvasformtabs.modes';
 
 interface LoadBalancerEditorProps {
@@ -62,11 +67,16 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
   }, [loadBalancer]);
 
   const processedSchema = useMemo(() => {
-    if (props.formMode === FormTabsModes.ALL_FIELDS) return loadBalancerSchema;
-    return {
-      ...loadBalancerSchema,
-      properties: getUserUpdatedPropertiesSchema(loadBalancerSchema?.properties ?? {}, loadBalancerModel ?? {}),
-    };
+    if (props.formMode === FormTabsModes.REQUIRED_FIELDS) {
+      return getRequiredPropertiesSchema(loadBalancerSchema ?? {});
+    } else if (props.formMode === FormTabsModes.ALL_FIELDS) {
+      return loadBalancerSchema;
+    } else if (props.formMode === FormTabsModes.USER_MODIFIED) {
+      return {
+        ...loadBalancerSchema,
+        properties: getUserUpdatedPropertiesSchema(loadBalancerSchema?.properties ?? {}, loadBalancerModel ?? {}),
+      };
+    }
   }, [props.formMode, loadBalancer]);
 
   const handleOnChange = useCallback(
@@ -90,7 +100,7 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
   );
 
   const showEditor = useMemo(() => {
-    if (props.formMode === FormTabsModes.ALL_FIELDS) return true;
+    if (props.formMode === FormTabsModes.ALL_FIELDS || props.formMode === FormTabsModes.REQUIRED_FIELDS) return true;
     return props.formMode === FormTabsModes.USER_MODIFIED && isDefined(selectedLoadBalancerOption);
   }, [props.formMode]);
 

packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx

@@ -68,7 +68,7 @@ export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps>
   const description = title ? `Configure expression for "${title}" parameter` : 'Configure expression';
 
   const showEditor = useMemo(() => {
-    if (props.formMode === FormTabsModes.ALL_FIELDS) return true;
+    if (props.formMode === FormTabsModes.ALL_FIELDS || props.formMode === FormTabsModes.REQUIRED_FIELDS) return true;
     return props.formMode === FormTabsModes.USER_MODIFIED && isDefined(preparedLanguage);
   }, [props.formMode]);
 

packages/ui/src/components/Visualization/Canvas/CanvasFormTabs.tsx

@@ -2,7 +2,7 @@ import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { EntitiesContext } from '../../../providers/entities.provider';
 import { SchemaBridgeProvider } from '../../../providers/schema-bridge.provider';
-import { getUserUpdatedPropertiesSchema, isDefined, setValue } from '../../../utils';
+import { getUserUpdatedPropertiesSchema, getRequiredPropertiesSchema, isDefined, setValue } from '../../../utils';
 import { CustomAutoForm, CustomAutoFormRef } from '../../Form/CustomAutoForm';
 import { DataFormatEditor } from '../../Form/dataFormat/DataFormatEditor';
 import { LoadBalancerEditor } from '../../Form/loadBalancer/LoadBalancerEditor';
@@ -21,7 +21,7 @@ export const CanvasFormTabs: FunctionComponent<CanvasFormTabsProps> = (props) =>
   const divRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<CustomAutoFormRef>(null);
   const omitFields = useRef(props.selectedNode.data?.vizNode?.getBaseEntity()?.getOmitFormFields() || []);
-  const [selectedTab, setSelectedTab] = useState<FormTabsModes>(FormTabsModes.ALL_FIELDS);
+  const [selectedTab, setSelectedTab] = useState<FormTabsModes>(FormTabsModes.REQUIRED_FIELDS);
 
   const visualComponentSchema = useMemo(() => {
     const answer = props.selectedNode.data?.vizNode?.getComponentSchema();
@@ -33,7 +33,9 @@ export const CanvasFormTabs: FunctionComponent<CanvasFormTabsProps> = (props) =>
   }, [props.selectedNode.data?.vizNode, selectedTab]);
   const model = visualComponentSchema?.definition;
   let processedSchema = visualComponentSchema?.schema;
-  if (selectedTab === FormTabsModes.USER_MODIFIED) {
+  if (selectedTab === FormTabsModes.REQUIRED_FIELDS) {
+    processedSchema = getRequiredPropertiesSchema(visualComponentSchema?.schema ?? {});
+  } else if (selectedTab === FormTabsModes.USER_MODIFIED) {
     processedSchema = {
       ...visualComponentSchema?.schema,
       properties: getUserUpdatedPropertiesSchema(visualComponentSchema?.schema.properties ?? {}, model),

packages/ui/src/components/Visualization/Canvas/canvasformtabs.modes.ts

@@ -1,4 +1,5 @@
 export enum FormTabsModes {
-  ALL_FIELDS = 'All Fields',
-  USER_MODIFIED = 'User Modified',
+  REQUIRED_FIELDS = 'Required',
+  ALL_FIELDS = 'All',
+  USER_MODIFIED = 'Modified',
 }

packages/ui/src/utils/get-required-properties-schema.ts

@@ -0,0 +1,28 @@
+import { KaotoSchemaDefinition } from '../models';
+import { isDefined } from './is-defined';
+
+export function getRequiredPropertiesSchema(schema: KaotoSchemaDefinition['schema']): KaotoSchemaDefinition['schema'] {
+  const schemaProperties = schema.properties ?? {};
+  const requiredProperties = schema.required as string[];
+
+  if (!isDefined(schema)) return {};
+
+  if ('required' in schema) {
+    const requiredFormSchema = Object.entries(schemaProperties).reduce(
+      (acc, [property, definition]) => {
+        if (definition['type'] === 'object' && 'properties' in definition) {
+          const subSchema = getRequiredPropertiesSchema(definition);
+          acc[property] = subSchema;
+        } else {
+          if (requiredProperties.indexOf(property) > -1) acc[property] = definition;
+        }
+
+        return acc;
+      },
+      {} as KaotoSchemaDefinition['schema'],
+    );
+    return { ...schema, properties: requiredFormSchema };
+  }
+
+  return {};
+}

packages/ui/src/utils/index.ts

@@ -16,4 +16,5 @@ export * from './promise-timeout';
 export * from './get-field-groups';
 export * from './get-serialized-model';
 export * from './get-user-updated-properties-schema';
+export * from './get-required-properties-schema';
 export * from './weight-schema-properties';