feat(Data Mapper): Cherry-pick Data Mapper changes (#6503)

* Update Data Mapper issue template (#6476) Update data_mapper.yml * merge * fix(Data Mapper): Fix re-sizing if the screen changes + add "Preview" keyword (#6483) * reactflow resizing * update text to preview * remove log * fix(Data Mapper): Remove the intermediary list drag effect + refactor to remove additional component (#6500) * refactor * fix drag * fix(Data Mapper): Add updateDragList for remove/add and fix custom value shown (#6502) * remove unused * fix custom value name
Azure · Jan 29, 2025 · 7803f61 · 7803f61
1 parent 8d49602
commit 7803f61
Show file tree

Hide file tree

Showing 20 changed files with 278 additions and 207 deletions.
diff --git a/.github/ISSUE_TEMPLATE/data_mapper.yml b/.github/ISSUE_TEMPLATE/data_mapper.yml
@@ -21,6 +21,16 @@ body:
 
         The more information you fill in, the better we can help you.
 
+  - type: dropdown
+    id: dataMapperType
+    attributes:
+      label: Which Data Mapper Version are you using ?
+      options:
+          - v1
+          - v2
+    validations:
+      required: true
+
   - type: textarea
     id: description
     attributes:
@@ -32,6 +42,7 @@ body:
         2. Click on '....'
         3. Connect nodes and add functions
         4. See error
+        5. Please mention if the issue can be reproduced in both Versions of Data Mapper
     validations:
       required: true
 

diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
@@ -137,6 +137,7 @@
   "2uINs9": "Default",
   "2xQWRt": "Search Functions",
   "2y24a/": "Save",
+  "2yCDJd": "Test is not supported for your current operating system",
   "2yUM4j": "{suggestionIndex} of {suggestionsCount}",
   "2z5HGT": "Optional. The RFC 4646 locale code to use. If not specified, default locale is used. If locale isn't a valid value, an error is generated that the provided locale isn't valid or doesn't have an associated locale.",
   "3+TQMa": "Loading connection...",
@@ -1190,6 +1191,7 @@
   "_2uINs9.comment": "title for retry policy default setting",
   "_2xQWRt.comment": "Search Functions",
   "_2y24a/.comment": "Save button label",
+  "_2yCDJd.comment": "Tooltip for disabled test button for the os",
   "_2yUM4j.comment": "The position in the results carrousel",
   "_2z5HGT.comment": "Optional locale parameter to check locale code in isFloat function",
   "_3+TQMa.comment": "Text to show when the connection is loading",

diff --git a/apps/vs-code-designer/src/app/commands/dataMapper/DataMapperPanel.ts b/apps/vs-code-designer/src/app/commands/dataMapper/DataMapperPanel.ts
@@ -1,4 +1,4 @@
-import { dataMapperVersionSetting, defaultDataMapperVersion, extensionCommand } from '../../../constants';
+import { dataMapperVersionSetting, defaultDataMapperVersion, extensionCommand, Platform } from '../../../constants';
 import { ext } from '../../../extensionVariables';
 import { localize } from '../../../localize';
 import { getWebViewHTML } from '../../utils/codeless/getWebViewHTML';
@@ -80,6 +80,8 @@ export default class DataMapperPanel {
       null,
       ext.context.subscriptions
     );
+
+    this.isTestDisabledForOS();
   }
 
   private watchFolderForChanges(folderPath: string, fileExtensions: string[], fn: () => void) {
@@ -185,6 +187,13 @@ export default class DataMapperPanel {
     }
   }
 
+  public isTestDisabledForOS() {
+    this.sendMsgToWebview({
+      command: ExtensionCommand.isTestDisabledForOS,
+      data: process.platform === Platform.mac,
+    });
+  }
+
   public updateWebviewPanelTitle() {
     this.panel.title = `${this.dataMapName ?? 'Untitled'} ${this.dataMapStateIsDirty ? '●' : ''}`;
   }

diff --git a/apps/vs-code-designer/src/package.json b/apps/vs-code-designer/src/package.json
@@ -765,7 +765,7 @@
             "description": "The default version of Data Mapper to use when performing operations like \"Create data map\".",
             "enumDescriptions": [
               "Version 1",
-              "Version 2 (Beta)"
+              "Version 2 (Preview)"
             ],
             "default": 1
           },

diff --git a/apps/vs-code-react/src/app/dataMapper/appV2.tsx b/apps/vs-code-react/src/app/dataMapper/appV2.tsx
@@ -37,6 +37,7 @@ export const DataMapperAppV2 = () => {
   const customXsltPathsList = useSelector((state: RootState) => state.dataMap.customXsltPathsList);
   const fetchedFunctions = useSelector((state: RootState) => state.dataMap.fetchedFunctions);
   const dataMapperVersion = useSelector((state: RootState) => state.project.dataMapperVersion);
+  const isTestDisabledForOS = useSelector((state: RootState) => state.dataMap.isTestDisabledForOS);
 
   const runtimePort = useSelector((state: RootState) => state.dataMap.runtimePort);
 
@@ -171,6 +172,7 @@ export const DataMapperAppV2 = () => {
           fetchedFunctions={fetchedFunctions}
           // Passed in here too so it can be managed in the Redux store so components can track the current theme
           theme={theme}
+          isTestDisabledForOS={isTestDisabledForOS}
         >
           <div style={{ height: '100vh', overflow: 'hidden' }}>
             <DataMapperDesigner

diff --git a/apps/vs-code-react/src/app/dataMapper/services/dataMapperFileService.ts b/apps/vs-code-react/src/app/dataMapper/services/dataMapperFileService.ts
@@ -10,12 +10,18 @@ export class DataMapperFileService implements IDataMapperFileService {
     this.sendMsgToVsix = sendMsgToVsix;
   }
 
+  public isTestDisabledForOS = () => {
+    this.sendMsgToVsix({
+      command: ExtensionCommand.isTestDisabledForOS,
+    });
+  };
+
   public getSchemaFromFile = (schemaType: SchemaType) => {
     this.sendMsgToVsix({
       command: ExtensionCommand.addSchemaFromFile,
-      data: schemaType 
+      data: schemaType,
     });
-  }
+  };
 
   public saveMapDefinitionCall = (dataMapDefinition: string, mapMetadata: string) => {
     this.sendMsgToVsix({

diff --git a/apps/vs-code-react/src/run-service/types.ts b/apps/vs-code-react/src/run-service/types.ts
@@ -358,3 +358,8 @@ export const AdvancedOptionsTypes = {
   exportCustomApiActionsToAPIManagementActions: 'exportCustomApiActionsToAPIManagementActions',
 };
 export type AdvancedOptionsTypes = (typeof AdvancedOptionsTypes)[keyof typeof AdvancedOptionsTypes];
+
+export interface GetTestFeatureEnablementStatus {
+  command: typeof ExtensionCommand.isTestDisabledForOS;
+  data: boolean;
+}
diff --git a/apps/vs-code-react/src/state/DataMapSliceV2.ts b/apps/vs-code-react/src/state/DataMapSliceV2.ts
@@ -20,6 +20,7 @@ export interface DataMapState {
   xsltContent: string;
   fetchedFunctions?: FunctionData[];
   useExpandedFunctionCards: boolean;
+  isTestDisabledForOS?: boolean;
 }
 
 const initialState: DataMapState = {
@@ -78,6 +79,9 @@ export const dataMapSlice = createSlice({
     changeUseExpandedFunctionCards: (state, action: PayloadAction<boolean>) => {
       state.useExpandedFunctionCards = action.payload;
     },
+    changeIsTestDisabledForOS: (state, action: PayloadAction<boolean>) => {
+      state.isTestDisabledForOS = action.payload;
+    },
   },
 });
 
@@ -89,7 +93,7 @@ export const {
   changeXsltContent,
   changeMapDefinition,
   changeDataMapMetadata,
-
+  changeIsTestDisabledForOS,
   changeSourceSchemaFilename,
   changeSourceSchema,
   changeTargetSchemaFilename,

diff --git a/apps/vs-code-react/src/webviewCommunication.tsx b/apps/vs-code-react/src/webviewCommunication.tsx
@@ -16,6 +16,7 @@ import type {
   ReceiveCallbackMessage,
   GetDataMapperVersionMessage,
   ShowAvailableSchemasMessageV2,
+  GetTestFeatureEnablementStatus,
 } from './run-service';
 import {
   changeCustomXsltPathList,
@@ -32,6 +33,7 @@ import {
 import {
   changeCustomXsltPathList as changeCustomXsltPathListV2,
   changeDataMapMetadata as changeDataMapMetadataV2,
+  changeIsTestDisabledForOS,
   changeMapDefinition as changeMapDefinitionV2,
   changeRuntimePort as changeRuntimePortV2,
   changeSchemaTreeList,
@@ -67,7 +69,8 @@ type DataMapperMessageType =
   | SetXsltDataMessage
   | SetRuntimePortMessage
   | GetConfigurationSettingMessage
-  | GetDataMapperVersionMessage;
+  | GetDataMapperVersionMessage
+  | GetTestFeatureEnablementStatus;
 type WorkflowMessageType = UpdateAccessTokenMessage | UpdateExportPathMessage | AddStatusMessage | SetFinalStatusMessage;
 type MessageType = InjectValuesMessage | DesignerMessageType | DataMapperMessageType | WorkflowMessageType;
 
@@ -148,6 +151,10 @@ export const WebViewCommunication: React.FC<{ children: ReactNode }> = ({ childr
               dispatch(changeUseExpandedFunctionCardsV2(message.data));
               break;
             }
+            case ExtensionCommand.isTestDisabledForOS: {
+              dispatch(changeIsTestDisabledForOS(message.data));
+              break;
+            }
             default:
               throw new Error('Unknown post message received');
           }

diff --git a/libs/data-mapper-v2/src/components/canvas/useReactflowStates.ts b/libs/data-mapper-v2/src/components/canvas/useReactflowStates.ts
@@ -213,6 +213,8 @@ const useReactFlowStates = (props: ReactFlowStatesProps) => {
           changes[NodeIds.source] = {
             type: 'dimensions',
             id: NodeIds.source,
+            resizing: true,
+            setAttributes: true,
             dimensions,
           };
         }
@@ -245,6 +247,8 @@ const useReactFlowStates = (props: ReactFlowStatesProps) => {
           changes[NodeIds.target] = {
             type: 'dimensions',
             id: NodeIds.target,
+            resizing: true,
+            setAttributes: true,
             dimensions,
           };
         }

diff --git a/libs/data-mapper-v2/src/components/commandBar/EditorCommandBar.tsx b/libs/data-mapper-v2/src/components/commandBar/EditorCommandBar.tsx
@@ -21,7 +21,7 @@ export const EditorCommandBar = (_props: EditorCommandBarProps) => {
   const intl = useIntl();
   const dispatch = useDispatch<AppDispatch>();
 
-  const { isDirty, sourceInEditState, targetInEditState } = useSelector((state: RootState) => state.dataMap.present);
+  const { isDirty, sourceInEditState, targetInEditState, isTestDisabledForOS } = useSelector((state: RootState) => state.dataMap.present);
   const undoStack = useSelector((state: RootState) => state.dataMap.past);
   const isCodeViewOpen = useSelector((state: RootState) => state.panel.codeViewPanel.isOpen);
   const { sourceSchema, targetSchema } = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation);
@@ -179,6 +179,11 @@ export const EditorCommandBar = (_props: EditorCommandBarProps) => {
         id: 'wTaSTp',
         description: 'Tooltip for disabled test button',
       }),
+      DISABLED_TEST_FOR_OS: intl.formatMessage({
+        defaultMessage: 'Test is not supported for your current operating system',
+        id: '2yCDJd',
+        description: 'Tooltip for disabled test button for the os',
+      }),
     }),
     [intl]
   );
@@ -190,11 +195,11 @@ export const EditorCommandBar = (_props: EditorCommandBarProps) => {
       save: !isDirty || sourceInEditState || targetInEditState,
       undo: undoStack.length === 0,
       discard: !isDirty,
-      test: sourceInEditState || targetInEditState || !xsltFilename,
+      test: sourceInEditState || targetInEditState || !xsltFilename || isTestDisabledForOS,
       codeView: sourceInEditState || targetInEditState,
       mapChecker: sourceInEditState || targetInEditState,
     }),
-    [isDirty, undoStack.length, sourceInEditState, targetInEditState, xsltFilename]
+    [isDirty, undoStack.length, sourceInEditState, targetInEditState, xsltFilename, isTestDisabledForOS]
   );
 
   return (
@@ -222,7 +227,7 @@ export const EditorCommandBar = (_props: EditorCommandBarProps) => {
             aria-label={Resources.OPEN_TEST_PANEL}
             icon={<PlayRegular color={disabledState.test ? undefined : tokens.colorPaletteBlueBorderActive} />}
             disabled={disabledState.test}
-            title={disabledState.test ? Resources.DISABLED_TEST : ''}
+            title={disabledState.test ? (isTestDisabledForOS ? Resources.DISABLED_TEST_FOR_OS : Resources.DISABLED_TEST) : ''}
             onClick={onTestClick}
           >
             {Resources.OPEN_TEST_PANEL}

diff --git a/libs/data-mapper-v2/src/components/functionConfigurationMenu/inputTab/InputList.tsx b/libs/data-mapper-v2/src/components/functionConfigurationMenu/inputTab/InputList.tsx
@@ -22,6 +22,7 @@ export type CommonProps = {
   connections: ConnectionDictionary;
   schemaType: SchemaType;
   draggable: boolean;
+  updateListItems: (index: number, item?: TemplateItemProps) => void;
 };
 
 export type TemplateItemProps = { input: InputConnection; index: number };
@@ -52,24 +53,26 @@ export const InputList = (props: InputListProps) => {
     commonProps,
     dragHandleProps,
   } = props;
-  const { functionKey, data, inputsFromManifest, connections, schemaType } = commonProps;
+  const { functionKey, data, inputsFromManifest, connections, schemaType, updateListItems } = commonProps;
 
   const inputName = useMemo(() => getInputName(input, connections), [connections, input]);
   const inputValue = useMemo(() => getInputValue(input), [input]);
   const inputType = useMemo(() => getInputTypeFromNode(input), [input]);
   const removeUnboundedInput = useCallback(() => {
     const targetNodeReactFlowKey = functionKey;
+    updateListItems(index);
     dispatch(
       deleteConnectionFromFunctionMenu({
         targetId: targetNodeReactFlowKey,
         inputIndex: index,
       })
     );
-  }, [dispatch, functionKey, index]);
+  }, [dispatch, functionKey, index, updateListItems]);
 
   const updateInput = useCallback(
     (newValue: InputConnection) => {
       const targetNodeReactFlowKey = functionKey;
+      updateListItems(index, { input: newValue, index });
       dispatch(
         setConnectionInput({
           targetNode: data,
@@ -79,7 +82,7 @@ export const InputList = (props: InputListProps) => {
         })
       );
     },
-    [data, dispatch, functionKey, index]
+    [data, dispatch, functionKey, index, updateListItems]
   );
 
   const validateAndCreateConnection = useCallback(