feat(form): Introduce a 'User Modified' from section

KaotoIO · Jul 22, 2024 · cb74001 · cb74001
1 parent d5c7bd7
commit cb74001
Show file tree

Hide file tree

Showing 16 changed files with 1,057 additions and 429 deletions.
diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
@@ -8,6 +8,7 @@ import { getFirstCatalogMap } from '../../../stubs/test-load-catalog';
 import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { DataFormatEditor } from './DataFormatEditor';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 describe('DataFormatEditor', () => {
   let mockNode: CanvasNode;
@@ -46,7 +47,7 @@ describe('DataFormatEditor', () => {
   });
 
   it('should render', async () => {
-    render(<DataFormatEditor selectedNode={mockNode} />);
+    render(<DataFormatEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
@@ -58,7 +59,7 @@ describe('DataFormatEditor', () => {
   });
 
   it('should filter candidates with a text input', async () => {
-    render(<DataFormatEditor selectedNode={mockNode} />);
+    render(<DataFormatEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
@@ -74,7 +75,7 @@ describe('DataFormatEditor', () => {
   });
 
   it('should clear filter and close the dropdown with close button', async () => {
-    render(<DataFormatEditor selectedNode={mockNode} />);
+    render(<DataFormatEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);

diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
@@ -12,10 +12,12 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import './DataFormatEditor.scss';
 import { DataFormatService } from './dataformat.service';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import { getSerializedModel } from '../../../utils';
+import { getSerializedModel, isDefined } from '../../../utils';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 interface DataFormatEditorProps {
   selectedNode: CanvasNode;
+  formMode: FormTabsModes;
 }
 
 export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props) => {
@@ -78,6 +80,8 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
     [entitiesContext, dataFormatCatalogMap, props.selectedNode.data?.vizNode],
   );
 
+  if (props.formMode === FormTabsModes.USER_MODIFIED && !isDefined(selectedDataFormatOption)) return null;
+
   return (
     <div className="dataformat-metadata-editor">
       <Card isCompact={true} isExpanded={isExpanded} className="dataformat-metadata-editor-card">

diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
@@ -8,6 +8,7 @@ import { getFirstCatalogMap } from '../../../stubs/test-load-catalog';
 import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { LoadBalancerEditor } from './LoadBalancerEditor';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 describe('LoadBalancerEditor', () => {
   let mockNode: CanvasNode;
@@ -47,7 +48,7 @@ describe('LoadBalancerEditor', () => {
   });
 
   it('should render', async () => {
-    render(<LoadBalancerEditor selectedNode={mockNode} />);
+    render(<LoadBalancerEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
@@ -61,7 +62,7 @@ describe('LoadBalancerEditor', () => {
   });
 
   it('should filter candidates with a text input', async () => {
-    render(<LoadBalancerEditor selectedNode={mockNode} />);
+    render(<LoadBalancerEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
@@ -77,7 +78,7 @@ describe('LoadBalancerEditor', () => {
   });
 
   it('should clear filter and close the dropdown with close button', async () => {
-    render(<LoadBalancerEditor selectedNode={mockNode} />);
+    render(<LoadBalancerEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);

diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
@@ -12,10 +12,12 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { LoadBalancerService } from './loadbalancer.service';
 import './LoadBalancerEditor.scss';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import { getSerializedModel } from '../../../utils';
+import { getSerializedModel, isDefined } from '../../../utils';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 interface LoadBalancerEditorProps {
   selectedNode: CanvasNode;
+  formMode: FormTabsModes;
 }
 
 export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (props) => {
@@ -78,6 +80,8 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
     [entitiesContext, loadBalancerCatalogMap, props.selectedNode.data?.vizNode],
   );
 
+  if (props.formMode === FormTabsModes.USER_MODIFIED && !isDefined(selectedLoadBalancerOption)) return null;
+
   return (
     <div className="loadbalancer-metadata-editor">
       <Card isCompact={true} isExpanded={isExpanded} className="loadbalancer-metadata-editor-card">

diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx
@@ -9,6 +9,7 @@ import { MetadataEditor } from '../../MetadataEditor';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { SchemaService } from '../schema.service';
 import { StepExpressionEditor } from './StepExpressionEditor';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 describe('StepExpressionEditor', () => {
   let mockNode: CanvasNode;
@@ -46,7 +47,7 @@ describe('StepExpressionEditor', () => {
   });
 
   it('should render', async () => {
-    render(<StepExpressionEditor selectedNode={mockNode} />);
+    render(<StepExpressionEditor selectedNode={mockNode} formMode={FormTabsModes.ALL_FIELDS} />);
     const launcherButton = screen.getAllByRole('button', { name: 'Configure Expression' });
     await act(async () => {
       fireEvent.click(launcherButton[0]);

diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx
@@ -5,10 +5,12 @@ import { EntitiesContext } from '../../../providers';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { ExpressionService } from '..//expression/expression.service';
 import { ExpressionModalLauncher } from '../expression/ExpressionModalLauncher';
-import { getSerializedModel } from '../../../utils';
+import { getSerializedModel, isDefined } from '../../../utils';
+import { FormTabsModes } from '../../Visualization/Canvas/CanvasFormTabs';
 
 interface StepExpressionEditorProps {
   selectedNode: CanvasNode;
+  formMode: FormTabsModes;
 }
 
 export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps> = (props) => {
@@ -65,6 +67,8 @@ export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps>
   const title = props.selectedNode.label;
   const description = title ? `Configure expression for "${title}" parameter` : 'Configure expression';
 
+  if (props.formMode === FormTabsModes.USER_MODIFIED && !isDefined(preparedLanguage)) return null;
+
   return (
     languageCatalogMap && (
       <div className="expression-field pf-v5-c-form">