fix(expression): UI improvements for Expression

Visual and styling improvements for `ExpressionModalLauncher` field. fix: #713
KaotoIO · Jan 24, 2024 · 56eb442 · 56eb442
1 parent 67bae3c
commit 56eb442
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/packages/ui/src/components/Form/expression/ExpressionModalLauncher.scss b/packages/ui/src/components/Form/expression/ExpressionModalLauncher.scss
@@ -0,0 +1,3 @@
+.expression-field {
+  margin: 24px 0;
+}
diff --git a/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx b/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx
@@ -1,8 +1,10 @@
-import { Button, Modal, Split, SplitItem, TextInput } from '@patternfly/react-core';
+import { FieldHintPopover } from '@kaoto-next/uniforms-patternfly';
+import { Button, Form, FormGroup, InputGroup, InputGroupItem, Modal, TextInput } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { ExpressionEditor } from './ExpressionEditor';
 import { useState } from 'react';
 import { ICamelLanguageDefinition } from '../../../models';
+import { ExpressionEditor } from './ExpressionEditor';
+import './ExpressionModalLauncher.scss';
 
 export type ExpressionModalLauncherProps = {
   name: string;
@@ -41,26 +43,30 @@ export const ExpressionModalLauncher = ({
   const expressionLabel = language && model?.expression ? language.model.name + ': ' + model.expression : '';
 
   return (
-    <>
-      <Split>
-        <SplitItem>
-          <TextInput
-            id={'expression-preview-' + name}
-            placeholder="Not configured"
-            readOnlyVariant="default"
-            value={expressionLabel}
-          ></TextInput>
-        </SplitItem>
-        <SplitItem>
-          <Button
-            data-testid="launch-expression-modal-btn"
-            variant="link"
-            aria-label="Configure Expression"
-            icon={<PencilAltIcon />}
-            onClick={() => setIsModalOpen(true)}
-          ></Button>
-        </SplitItem>
-      </Split>
+    <div className="expression-field">
+      <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>
+      </Form>
       <Modal
         isOpen={isModalOpen}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -86,6 +92,6 @@ export const ExpressionModalLauncher = ({
           onChangeExpressionModel={onChange}
         ></ExpressionEditor>
       </Modal>
-    </>
+    </div>
   );
 };