fix(765) - remove redundant parameter label for property expression

KaotoIO · Feb 22, 2024 · 97b891a · 97b891a
1 parent b026d9b
commit 97b891a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 41 deletions.
diff --git a/packages/ui/src/components/Form/expression/ExpressionField.tsx b/packages/ui/src/components/Form/expression/ExpressionField.tsx
@@ -1,9 +1,9 @@
-import { connectField, HTMLFieldProps } from 'uniforms';
 import { wrapField } from '@kaoto-next/uniforms-patternfly';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ExpressionService } from './expression.service';
+import { HTMLFieldProps, connectField } from 'uniforms';
 import { ICamelLanguageDefinition } from '../../../models';
 import { ExpressionModalLauncher } from './ExpressionModalLauncher';
+import { ExpressionService } from './expression.service';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ExpressionFieldProps = HTMLFieldProps<any, HTMLDivElement>;
@@ -53,13 +53,17 @@ const ExpressionFieldComponent = (props: ExpressionFieldProps) => {
     resetModel();
   }, [resetModel]);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const title = (props.field as any).title;
+  const description = title ? `Configure expression for "${title}" parameter` : 'Configure expression';
+
   return wrapField(
-    props,
+    { ...props, description: description },
     <ExpressionModalLauncher
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       name={(props.field as any).name}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      title={(props.field as any).title}
+      title={title}
+      description={description}
       language={preparedLanguage}
       onCancel={handleCancel}
       onConfirm={handleConfirm}

diff --git a/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx b/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx
@@ -1,5 +1,4 @@
-import { FieldHintPopover } from '@kaoto-next/uniforms-patternfly';
-import { Button, FormGroup, InputGroup, InputGroupItem, Modal, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, InputGroupItem, Modal, TextInput } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { useState } from 'react';
 import { ICamelLanguageDefinition } from '../../../models';
@@ -12,6 +11,7 @@ export type ExpressionModalLauncherProps = {
   language?: ICamelLanguageDefinition;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   model: any;
+  description?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange: (languageName: string, model: any) => void;
   onConfirm: () => void;
@@ -23,6 +23,7 @@ export const ExpressionModalLauncher = ({
   title,
   language,
   model,
+  description,
   onChange,
   onConfirm,
   onCancel,
@@ -39,32 +40,29 @@ export const ExpressionModalLauncher = ({
     onCancel();
   };
 
-  const description = title ? `Configure expression for "${title}" parameter` : 'Configure expression';
   const expressionLabel = language && model?.expression ? language.model.name + ': ' + model.expression : '';
 
   return (
-    <div className="expression-field pf-v5-c-form">
-      <FormGroup label="Expression" labelIcon={<FieldHintPopover description={description} />}>
-        <InputGroup>
-          <InputGroupItem isFill>
-            <TextInput
-              id={'expression-preview-' + name}
-              placeholder="Not configured"
-              readOnlyVariant="default"
-              value={expressionLabel}
-            />
-          </InputGroupItem>
-          <InputGroupItem>
-            <Button
-              data-testid="launch-expression-modal-btn"
-              variant="control"
-              aria-label="Configure Expression"
-              icon={<PencilAltIcon />}
-              onClick={() => setIsModalOpen(true)}
-            />
-          </InputGroupItem>
-        </InputGroup>
-      </FormGroup>
+    <>
+      <InputGroup>
+        <InputGroupItem isFill>
+          <TextInput
+            id={'expression-preview-' + name}
+            placeholder="Not configured"
+            readOnlyVariant="default"
+            value={expressionLabel}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            data-testid="launch-expression-modal-btn"
+            variant="control"
+            aria-label="Configure Expression"
+            icon={<PencilAltIcon />}
+            onClick={() => setIsModalOpen(true)}
+          />
+        </InputGroupItem>
+      </InputGroup>
       <Modal
         isOpen={isModalOpen}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -90,6 +88,6 @@ export const ExpressionModalLauncher = ({
           onChangeExpressionModel={onChange}
         ></ExpressionEditor>
       </Modal>
-    </div>
+    </>
   );
 };
diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx
@@ -1,8 +1,9 @@
+import { wrapField } from '@kaoto-next/uniforms-patternfly';
 import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ICamelLanguageDefinition } from '../../../models';
 import { EntitiesContext } from '../../../providers';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { ExpressionService } from '..//expression/expression.service';
-import { ICamelLanguageDefinition } from '../../../models';
 import { ExpressionModalLauncher } from '../expression/ExpressionModalLauncher';
 
 interface StepExpressionEditorProps {
@@ -58,18 +59,26 @@ export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps>
   const handleCancel = useCallback(() => {
     resetModel();
   }, [resetModel]);
+  const title = props.selectedNode.label;
+  const description = title ? `Configure expression for "${title}" parameter` : 'Configure expression';
 
   return (
     languageCatalogMap && (
-      <ExpressionModalLauncher
-        name={props.selectedNode.id}
-        title={props.selectedNode.label}
-        language={preparedLanguage}
-        model={preparedModel}
-        onChange={handleOnChange}
-        onConfirm={handleConfirm}
-        onCancel={handleCancel}
-      />
+      <div className="expression-field pf-v5-c-form">
+        {wrapField(
+          { ...props, label: 'Expression', id: 'expression-wrapper', description: description },
+          <ExpressionModalLauncher
+            name={props.selectedNode.id}
+            title={title}
+            description={description}
+            language={preparedLanguage}
+            model={preparedModel}
+            onChange={handleOnChange}
+            onConfirm={handleConfirm}
+            onCancel={handleCancel}
+          />,
+        )}
+      </div>
     )
   );
 };