fix(DataMapper): XPath Editor: Fix unexpected modal resize and scrollbar

Fixes: KaotoIO#49 Fixes: KaotoIO#52 fix(DataMapper): XPath Editor: More space for parameter name Fixes: KaotoIO#51 chore(DataMapper): Rename ExpressionEditor to XPathEditor Fixes: KaotoIO#60
lordrip · Sep 17, 2024 · 90ca7d9 · 90ca7d9
1 parent deabf47
commit 90ca7d9
Show file tree

Hide file tree

Showing 19 changed files with 158 additions and 110 deletions.
diff --git a/packages/ui/src/components/DataMapper/debug/MainMenuToolbarItem.tsx b/packages/ui/src/components/DataMapper/debug/MainMenuToolbarItem.tsx
@@ -6,7 +6,6 @@ import { ImportMappingFileDropdownItem } from './ImportMappingFileDropdownItem';
 
 export const MainMenuToolbarItem: FunctionComponent = () => {
   const { state: isOpen, toggle: onToggle, toggleOff } = useToggle(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (
     <ToolbarItem>
       <Dropdown

diff --git a/packages/ui/src/components/Document/Parameters.tsx b/packages/ui/src/components/Document/Parameters.tsx
@@ -120,12 +120,12 @@ export const Parameters: FunctionComponent = () => {
   const handleAddNewParameter = useCallback(() => {
     setSourceParametersExpanded(true);
     toggleOnAddNewParameter();
-  }, [toggleOnAddNewParameter]);
+  }, [setSourceParametersExpanded, toggleOnAddNewParameter]);
 
   const handleOnExpand = useCallback(() => {
     setSourceParametersExpanded(!isSourceParametersExpanded);
     reloadNodeReferences();
-  }, [isSourceParametersExpanded, reloadNodeReferences]);
+  }, [isSourceParametersExpanded, reloadNodeReferences, setSourceParametersExpanded]);
 
   const parametersHeaderActions = useMemo(() => {
     return (

diff --git a/packages/ui/src/components/Document/actions/ExpressionEditorAction.tsx b/packages/ui/src/components/Document/actions/ExpressionEditorAction.tsx
diff --git a/packages/ui/src/components/Document/actions/TargetNodeActions.test.tsx b/packages/ui/src/components/Document/actions/TargetNodeActions.test.tsx
@@ -29,7 +29,7 @@ describe('TargetNodeActions', () => {
         </DataMapperCanvasProvider>
       </DataMapperProvider>,
     );
-    expect(await screen.findByTestId('transformation-expression-input')).toBeTruthy();
-    expect(screen.getByTestId(`edit-expression-button-${mappingData.id}`)).toBeTruthy();
+    expect(await screen.findByTestId('transformation-xpath-input')).toBeTruthy();
+    expect(screen.getByTestId(`edit-xpath-button-${mappingData.id}`)).toBeTruthy();
   });
 });
diff --git a/packages/ui/src/components/Document/actions/TargetNodeActions.tsx b/packages/ui/src/components/Document/actions/TargetNodeActions.tsx
@@ -1,9 +1,9 @@
 import { ActionListGroup } from '@patternfly/react-core';
 import { FunctionComponent, MouseEvent, KeyboardEvent, useCallback } from 'react';
-import { ExpressionInputAction } from './ExpressionInputAction';
+import { XPathInputAction } from './XPathInputAction';
 import { DeleteMappingItemAction } from './DeleteMappingItemAction';
 import { ConditionMenuAction } from './ConditionMenuAction';
-import { ExpressionEditorAction } from './ExpressionEditorAction';
+import { XPathEditorAction } from './XPathEditorAction';
 import { TargetNodeData } from '../../../models/datamapper/visualization';
 import { VisualizationService } from '../../../services/visualization.service';
 
@@ -27,8 +27,8 @@ export const TargetNodeActions: FunctionComponent<TargetNodeActionsProps> = ({ n
     >
       {expressionItem && (
         <>
-          <ExpressionInputAction mapping={expressionItem} onUpdate={onUpdate} />
-          <ExpressionEditorAction nodeData={nodeData} mapping={expressionItem} onUpdate={onUpdate} />
+          <XPathInputAction mapping={expressionItem} onUpdate={onUpdate} />
+          <XPathEditorAction nodeData={nodeData} mapping={expressionItem} onUpdate={onUpdate} />
         </>
       )}
       <ConditionMenuAction nodeData={nodeData} onUpdate={onUpdate} />

diff --git a/...t/actions/ExpressionEditorAction.test.tsx → ...cument/actions/XPathEditorAction.test.tsx b/...t/actions/ExpressionEditorAction.test.tsx → ...cument/actions/XPathEditorAction.test.tsx
@@ -1,4 +1,4 @@
-import { ExpressionEditorAction } from './ExpressionEditorAction';
+import { XPathEditorAction } from './XPathEditorAction';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { MappingTree, ValueSelector } from '../../../models/datamapper/mapping';
 import { DocumentType } from '../../../models/datamapper/path';
@@ -16,15 +16,15 @@ describe('ExpressionEditorAction', () => {
     render(
       <DataMapperProvider>
         <DataMapperCanvasProvider>
-          <ExpressionEditorAction mapping={new ValueSelector(tree)} nodeData={docData} onUpdate={jest.fn()} />
+          <XPathEditorAction mapping={new ValueSelector(tree)} nodeData={docData} onUpdate={jest.fn()} />
         </DataMapperCanvasProvider>
       </DataMapperProvider>,
     );
-    const editBtn = await screen.findByTestId(`edit-expression-button-${docData.id}`);
+    const editBtn = await screen.findByTestId(`edit-xpath-button-${docData.id}`);
     act(() => {
       fireEvent.click(editBtn);
     });
-    const modal = await screen.findByTestId('expression-editor-modal');
+    const modal = await screen.findByTestId('xpath-editor-modal');
     expect(modal).toBeInTheDocument();
   }, 10000);
 });
diff --git a/packages/ui/src/components/Document/actions/XPathEditorAction.tsx b/packages/ui/src/components/Document/actions/XPathEditorAction.tsx
@@ -0,0 +1,39 @@
+import { TargetNodeData } from '../../../models/datamapper/visualization';
+import { ExpressionItem } from '../../../models/datamapper/mapping';
+import { FunctionComponent, useCallback, useState } from 'react';
+import { ActionListItem, Button } from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons';
+import { XPathEditorModal } from '../../XPath/XPathEditorModal';
+
+type XPathEditorProps = {
+  nodeData: TargetNodeData;
+  mapping: ExpressionItem;
+  onUpdate: () => void;
+};
+export const XPathEditorAction: FunctionComponent<XPathEditorProps> = ({ nodeData, mapping, onUpdate }) => {
+  const [isEditorOpen, setIsEditorOpen] = useState<boolean>(false);
+  const launchXPathEditor = useCallback(() => setIsEditorOpen(true), []);
+  const closeXPathEditor = useCallback(() => setIsEditorOpen(false), []);
+
+  return (
+    <ActionListItem key="xpath-editor">
+      <Button
+        size="sm"
+        variant="plain"
+        component="small"
+        aria-label="XPath Editor"
+        data-testid={`edit-xpath-button-${nodeData.id}`}
+        onClick={launchXPathEditor}
+        className="document-field__button"
+        icon={<PencilAltIcon />}
+      />
+      <XPathEditorModal
+        title={nodeData.title}
+        isOpen={isEditorOpen}
+        onClose={closeXPathEditor}
+        mapping={mapping}
+        onUpdate={onUpdate}
+      />
+    </ActionListItem>
+  );
+};
diff --git a/...nt/actions/ExpressionInputAction.test.tsx → ...ocument/actions/XPathInputAction.test.tsx b/...nt/actions/ExpressionInputAction.test.tsx → ...ocument/actions/XPathInputAction.test.tsx
@@ -1,17 +1,17 @@
-import { ExpressionInputAction } from './ExpressionInputAction';
+import { XPathInputAction } from './XPathInputAction';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { MappingTree, ValueSelector } from '../../../models/datamapper/mapping';
 import { BODY_DOCUMENT_ID } from '../../../models/datamapper/document';
 import { DocumentType } from '../../../models/datamapper/path';
 
-describe('ExpressionInputAction', () => {
-  it('should update expression', () => {
+describe('XPathInputAction', () => {
+  it('should update xpath', () => {
     const tree = new MappingTree(DocumentType.SOURCE_BODY, BODY_DOCUMENT_ID);
     const mapping = new ValueSelector(tree);
     const onUpdateMock = jest.fn();
-    render(<ExpressionInputAction mapping={mapping} onUpdate={onUpdateMock} />);
+    render(<XPathInputAction mapping={mapping} onUpdate={onUpdateMock} />);
     expect(mapping.expression).toBeFalsy();
-    const input = screen.getByTestId('transformation-expression-input');
+    const input = screen.getByTestId('transformation-xpath-input');
     act(() => {
       fireEvent.change(input, { target: { value: '/ShipOrder' } });
     });

diff --git a/...ocument/actions/ExpressionInputAction.tsx → ...nts/Document/actions/XPathInputAction.tsx b/...ocument/actions/ExpressionInputAction.tsx → ...nts/Document/actions/XPathInputAction.tsx
@@ -2,12 +2,12 @@ import { ExpressionItem } from '../../../models/datamapper/mapping';
 import { FormEvent, FunctionComponent, MouseEvent, useCallback } from 'react';
 import { ActionListItem, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
 
-type ExpressionInputProps = {
+type XPathInputProps = {
   mapping: ExpressionItem;
   onUpdate: () => void;
 };
-export const ExpressionInputAction: FunctionComponent<ExpressionInputProps> = ({ mapping, onUpdate }) => {
-  const handleExpressionChange = useCallback(
+export const XPathInputAction: FunctionComponent<XPathInputProps> = ({ mapping, onUpdate }) => {
+  const handleXPathChange = useCallback(
     (event: FormEvent, value: string) => {
       if (mapping) {
         mapping.expression = value;
@@ -23,15 +23,15 @@ export const ExpressionInputAction: FunctionComponent<ExpressionInputProps> = ({
   }, []);
 
   return (
-    <ActionListItem key="expression-input">
+    <ActionListItem key="xpath-input">
       <InputGroup>
         <InputGroupItem>
           <TextInput
-            data-testid="transformation-expression-input"
-            id="expression"
+            data-testid="transformation-xpath-input"
+            id="xpath"
             type="text"
             value={mapping.expression as string}
-            onChange={handleExpressionChange}
+            onChange={handleXPathChange}
             onMouseMove={stopPropagation}
           />
         </InputGroupItem>

diff --git a/...components/Expression/Transformation.scss → ...ui/src/components/XPath/FunctionIcon.scss b/...components/Expression/Transformation.scss → ...ui/src/components/XPath/FunctionIcon.scss
diff --git a/...mponents/Expression/FunctionIcon.test.tsx → ...rc/components/XPath/FunctionIcon.test.tsx b/...mponents/Expression/FunctionIcon.test.tsx → ...rc/components/XPath/FunctionIcon.test.tsx
diff --git a/...rc/components/Expression/FunctionIcon.tsx → .../ui/src/components/XPath/FunctionIcon.tsx b/...rc/components/Expression/FunctionIcon.tsx → .../ui/src/components/XPath/FunctionIcon.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import './Transformation.scss';
+import './FunctionIcon.scss';
 
 export const FunctionIcon: FunctionComponent = () => {
   return (

diff --git a/...rc/components/Expression/XPathEditor.scss → .../ui/src/components/XPath/XPathEditor.scss b/...rc/components/Expression/XPathEditor.scss → .../ui/src/components/XPath/XPathEditor.scss
diff --git a/...src/components/Expression/XPathEditor.tsx → ...s/ui/src/components/XPath/XPathEditor.tsx b/...src/components/Expression/XPathEditor.tsx → ...s/ui/src/components/XPath/XPathEditor.tsx
@@ -44,8 +44,6 @@ export const XPathEditor: FunctionComponent<XPathEditorProps> = ({ mapping, onCh
           value: mapping.expression,
         });
         newEditor.onDidChangeModelContent((_e) => onChange(newEditor.getModel()?.getValue()));
-        const model = newEditor.getModel();
-        console.log(`##### ${model?.getLanguageId()}`);
         return newEditor;
       });
     }

diff --git a/packages/ui/src/components/XPath/XPathEditorLayout.scss b/packages/ui/src/components/XPath/XPathEditorLayout.scss
@@ -0,0 +1,7 @@
+.xpath-editor-layout-grid {
+  height: 90%;
+}
+
+.xpath-editor-layout-tab-content {
+  height: 100%;
+}
diff --git a/...omponents/Expression/ExpressionEditor.tsx → ...rc/components/XPath/XPathEditorLayout.tsx b/...omponents/Expression/ExpressionEditor.tsx → ...rc/components/XPath/XPathEditorLayout.tsx
@@ -9,6 +9,7 @@ import {
   MenuGroup,
   MenuItem,
   Tab,
+  TabContent,
   Tabs,
   TabTitleText,
 } from '@patternfly/react-core';
@@ -23,13 +24,14 @@ import { ExpressionEditorDnDHandler } from '../../providers/dnd/ExpressionEditor
 import { EditorNodeData, FunctionNodeData } from '../../models/datamapper';
 import { DatamapperDndProvider } from '../../providers/datamapper-dnd.provider';
 import { DataMapperDnDMonitor } from '../../providers/dnd/DataMapperDndMonitor';
+import './XPathEditorLayout.scss';
 
-type TransformationEditorProps = {
+type XPathEditorLayoutProps = {
   mapping: ExpressionItem;
   onUpdate: () => void;
 };
 
-export const ExpressionEditor: FunctionComponent<TransformationEditorProps> = ({ mapping, onUpdate }) => {
+export const XPathEditorLayout: FunctionComponent<XPathEditorLayoutProps> = ({ mapping, onUpdate }) => {
   const dndHandler = useMemo(() => new ExpressionEditorDnDHandler(), []);
 
   const handleExpressionChange = useCallback(
@@ -50,34 +52,46 @@ export const ExpressionEditor: FunctionComponent<TransformationEditorProps> = ({
 
   return (
     <DatamapperDndProvider handler={dndHandler}>
-      <Grid hasGutter>
-        <GridItem key={0} span={3} rowSpan={10}>
+      <Grid hasGutter className="xpath-editor-layout-grid">
+        <GridItem key={0} span={4} rowSpan={10}>
           <Tabs isFilled activeKey={activeTabKey} onSelect={handleTabClick}>
-            <Tab eventKey={0} key={0} title={<TabTitleText>Function</TabTitleText>}>
-              <Menu isScrollable>
-                <MenuContent>
-                  {Object.keys(functionDefinitions).map((value) => (
-                    <MenuGroup key={value} label={value}>
-                      {functionDefinitions[value as FunctionGroup].map((func, index) => (
-                        <DraggableContainer
-                          key={index}
-                          id={`${value}-${index}-${func.name}`}
-                          nodeData={new FunctionNodeData(func)}
-                        >
-                          <MenuItem key={`${value}-${index}`} description={func.description}>
-                            {func.displayName}
-                          </MenuItem>
-                        </DraggableContainer>
-                      ))}
-                    </MenuGroup>
-                  ))}
-                </MenuContent>
-              </Menu>
-            </Tab>
-            <Tab eventKey={1} key={1} title={<TabTitleText>Field</TabTitleText>}>
-              <div className="pf-m-scrollable">
+            <Tab
+              eventKey={0}
+              key={0}
+              title={<TabTitleText>Field</TabTitleText>}
+              className="xpath-editor-layout-tab-content"
+            >
+              <TabContent id="fields" className="xpath-editor-layout-tab-content">
                 <SourcePanel />
-              </div>
+              </TabContent>
+            </Tab>
+            <Tab
+              eventKey={1}
+              key={1}
+              title={<TabTitleText>Function</TabTitleText>}
+              className="xpath-editor-layout-tab-content"
+            >
+              <TabContent id="functions" className="xpath-editor-layout-tab-content">
+                <Menu isScrollable className="xpath-editor-layout-tab-content">
+                  <MenuContent menuHeight="100%" maxMenuHeight="100%">
+                    {Object.keys(functionDefinitions).map((value) => (
+                      <MenuGroup key={value} label={value}>
+                        {functionDefinitions[value as FunctionGroup].map((func, index) => (
+                          <DraggableContainer
+                            key={index}
+                            id={`${value}-${index}-${func.name}`}
+                            nodeData={new FunctionNodeData(func)}
+                          >
+                            <MenuItem key={`${value}-${index}`} description={func.description}>
+                              {func.displayName}
+                            </MenuItem>
+                          </DraggableContainer>
+                        ))}
+                      </MenuGroup>
+                    ))}
+                  </MenuContent>
+                </Menu>
+              </TabContent>
             </Tab>
           </Tabs>
         </GridItem>
@@ -89,7 +103,7 @@ export const ExpressionEditor: FunctionComponent<TransformationEditorProps> = ({
           */}
         </GridItem>
         <GridItem key={1} span={6} rowSpan={10}>
-          <DroppableContainer id="expression-editor" nodeData={new EditorNodeData(mapping)}>
+          <DroppableContainer id="xpath-editor" nodeData={new EditorNodeData(mapping)}>
             <XPathEditor mapping={mapping} onChange={handleExpressionChange} />
           </DroppableContainer>
         </GridItem>

diff --git a/packages/ui/src/components/XPath/XPathEditorModal.scss b/packages/ui/src/components/XPath/XPathEditorModal.scss
@@ -0,0 +1,3 @@
+.xpath-editor-modal {
+  height: 90%;
+}