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

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

Hide file tree

Showing 17 changed files with 1,076 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.modes';
 
 describe('DataFormatEditor', () => {
   let mockNode: CanvasNode;
@@ -45,8 +46,14 @@ describe('DataFormatEditor', () => {
     };
   });
 
+  it('should not render', () => {
+    render(<DataFormatEditor selectedNode={mockNode} formMode={FormTabsModes.USER_MODIFIED} />);
+    const buttons = screen.queryAllByRole('button', { name: 'Menu toggle' });
+    expect(buttons).toHaveLength(0);
+  });
+
   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 +65,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 +81,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.modes';
 
 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.modes';
 
 describe('LoadBalancerEditor', () => {
   let mockNode: CanvasNode;
@@ -46,8 +47,14 @@ describe('LoadBalancerEditor', () => {
     };
   });
 
+  it('should not render', () => {
+    render(<LoadBalancerEditor selectedNode={mockNode} formMode={FormTabsModes.USER_MODIFIED} />);
+    const buttons = screen.queryAllByRole('button', { name: 'Menu toggle' });
+    expect(buttons).toHaveLength(0);
+  });
+
   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 +68,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 +84,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.modes';
 
 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.modes';
 
 describe('StepExpressionEditor', () => {
   let mockNode: CanvasNode;
@@ -45,8 +46,14 @@ describe('StepExpressionEditor', () => {
     };
   });
 
+  it('should not render', () => {
+    render(<StepExpressionEditor selectedNode={mockNode} formMode={FormTabsModes.USER_MODIFIED} />);
+    const launcherButton = screen.queryAllByRole('button', { name: 'Configure Expression' });
+    expect(launcherButton).toHaveLength(0);
+  });
+
   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.modes';
 
 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">