Feat(Data Mapper): Refactored connections (#6022)

* starting to convert connection types

* build passes

* improved types for connections and tests

* fixed bugs

* able to delete from fn menu

* fixing deserialization tests

* fixing tests

* more tests pass

* tests pass

* fixed build

* fixed flatteninput in test

* removed unused test

* refactor functionutils

* fixed custom value issues

* fixed output

Author: DanielleCogs

apps/Standalone/src/dataMapperV1/components/DevToolbox.tsx

@@ -51,17 +51,18 @@ interface SchemaFileData {
 }
 const sourceSchemaFileOptions: SchemaFileData[] = [
   { filename: 'PlaygroundSourceSchema.json', schemaFormat: SchemaFileFormat.XML },
-  { filename: 'ProjectRequest.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'SourceSchema.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'ComprehensiveSourceSchema.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'SourceSchemaJson.json', schemaFormat: SchemaFileFormat.JSON },
+  { filename: 'ProjectRequest.json', schemaFormat: SchemaFileFormat.XML },
 ];
 const targetSchemaFileOptions: SchemaFileData[] = [
   { filename: 'PlaygroundTargetSchema.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'OebsProjectRequest.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'TargetSchema.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'ComprehensiveTargetSchema.json', schemaFormat: SchemaFileFormat.XML },
   { filename: 'TargetSchemaJson.json', schemaFormat: SchemaFileFormat.JSON },
+  { filename: 'OebsProjectRequest.json', schemaFormat: SchemaFileFormat.XML },
 ];
 const mapSchemaFileOptionsToDropdownOptions = (schemaFileData: SchemaFileData[]) =>
   schemaFileData.map<IDropdownOption>((schemaOpt) => ({

libs/data-mapper-v2/src/components/common/reactflow/FunctionNode.tsx

@@ -12,7 +12,7 @@ import type { StringIndexed } from '@microsoft/logic-apps-shared';
 import { setHoverState, setSelectedItem } from '../../../core/state/DataMapSlice';
 import { useHoverFunctionNode, useSelectedNode } from '../../../core/state/selectors/selectors';
 import { useCallback, useMemo } from 'react';
-import { isFunctionInputSlotAvailable } from '../../../utils/Connection.Utils';
+import { isEmptyConnection, isFunctionInputSlotAvailable } from '../../../utils/Connection.Utils';
 import { customTokens } from '../../../core/ThemeConect';
 
 export interface FunctionCardProps extends CardProps {
@@ -47,9 +47,9 @@ export const FunctionNode = (props: NodeProps<Node<StringIndexed<FunctionCardPro
   );
 
   const isLeftConnected =
-    functionWithConnections?.inputs[0] &&
-    functionWithConnections?.inputs[0].length > 0 &&
-    functionWithConnections?.inputs[0][0] !== undefined;
+    functionWithConnections?.inputs &&
+    functionWithConnections?.inputs.length > 0 &&
+    functionWithConnections?.inputs[0] !== undefined && !isEmptyConnection(functionWithConnections?.inputs[0]);
   const isRightConnected = functionWithConnections?.outputs.length > 0;
 
   const getHandleStyle = useCallback(

libs/data-mapper-v2/src/components/functionConfigurationMenu/inputDropdown/InputDropdown.tsx

@@ -178,6 +178,10 @@ export const InputDropdown = ({
     if (inputValue) {
       setSelectedOptions([inputValue]);
     }
+    if (inputValue === undefined) {
+      setSelectedOptions([]);
+      setCustomValue(undefined);
+    }
   }, [inputValue]);
 
   const originalOptions = useMemo(() => {

libs/data-mapper-v2/src/components/functionConfigurationMenu/inputTab/InputList.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { RootState } from '../../../core/state/Store';
 import { InputDropdown, type InputOptionProps } from '../inputDropdown/InputDropdown';
 import { getInputTypeFromNode, validateAndCreateConnectionInput } from './inputTab';
-import { setConnectionInput } from '../../../core/state/DataMapSlice';
+import { deleteConnectionFromFunctionMenu, setConnectionInput } from '../../../core/state/DataMapSlice';
 import { getInputName, getInputValue } from '../../../utils/Function.Utils';
 import { useStyles } from './styles';
 import { ListItem } from '@fluentui/react-list-preview';
@@ -60,14 +60,12 @@ const InputList = (props: InputListProps) => {
   const removeUnboundedInput = useCallback(() => {
     const targetNodeReactFlowKey = functionKey;
     dispatch(
-      setConnectionInput({
-        targetNode: data,
-        targetNodeReactFlowKey,
+      deleteConnectionFromFunctionMenu({
+        targetId: targetNodeReactFlowKey,
         inputIndex: index,
-        input: null,
       })
     );
-  }, [data, dispatch, functionKey, index]);
+  }, [dispatch, functionKey, index]);
 
   const updateInput = useCallback(
     (newValue: InputConnection) => {

libs/data-mapper-v2/src/components/functionConfigurationMenu/inputTab/inputTab.tsx

@@ -2,17 +2,27 @@ import { Badge, Button, Caption1, Caption2 } from '@fluentui/react-components';
 import { LinkDismissRegular, AddRegular } from '@fluentui/react-icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { UnboundedInput } from '../../../constants/FunctionConstants';
-import { createInputSlotForUnboundedInput, setConnectionInput, updateFunctionConnectionInputs } from '../../../core/state/DataMapSlice';
+import {
+  createInputSlotForUnboundedInput,
+  deleteConnectionFromFunctionMenu,
+  setConnectionInput,
+  updateFunctionConnectionInputs,
+} from '../../../core/state/DataMapSlice';
 import type { RootState } from '../../../core/state/Store';
 import type { FunctionData, FunctionDictionary } from '../../../models';
-import type { ConnectionDictionary, ConnectionUnit, InputConnection } from '../../../models/Connection';
+import type { ConnectionDictionary, NodeConnection, CustomValueConnection, InputConnection } from '../../../models/Connection';
 import { getInputName, getInputValue } from '../../../utils/Function.Utils';
 import type { InputOptionProps } from '../inputDropdown/InputDropdown';
 import { InputDropdown } from '../inputDropdown/InputDropdown';
 import { useStyles } from './styles';
 import { mergeStyles } from '@fluentui/react';
 import { isSchemaNodeExtended } from '../../../utils';
-import { newConnectionWillHaveCircularLogic } from '../../../utils/Connection.Utils';
+import {
+  connectionDoesExist,
+  createCustomInputConnection,
+  isNodeConnection,
+  newConnectionWillHaveCircularLogic,
+} from '../../../utils/Connection.Utils';
 import { SchemaType, type SchemaNodeDictionary } from '@microsoft/logic-apps-shared';
 import DraggableList from 'react-draggable-list';
 import InputListWrapper, { type TemplateItemProps, type CommonProps } from './InputList';
@@ -36,11 +46,7 @@ export const InputTabContents = (props: {
 
   if (props.func.maxNumberOfInputs !== UnboundedInput) {
     const tableContents = props.func.inputs.map((input, index) => {
-      const inputConnection = functionConnection
-        ? Object.values(functionConnection.inputs).length > 1
-          ? functionConnection.inputs[index][0]
-          : functionConnection.inputs[0][index]
-        : undefined;
+      const inputConnection = functionConnection && functionConnection.inputs[index] ? functionConnection.inputs[index] : undefined;
 
       const inputType = getInputTypeFromNode(inputConnection);
 
@@ -74,11 +80,9 @@ export const InputTabContents = (props: {
       const removeConnection = (inputIndex: number) => {
         const targetNodeReactFlowKey = props.functionKey;
         dispatch(
-          setConnectionInput({
-            targetNode: props.func,
-            targetNodeReactFlowKey,
+          deleteConnectionFromFunctionMenu({
             inputIndex,
-            input: undefined,
+            targetId: targetNodeReactFlowKey,
           })
         );
       };
@@ -187,7 +191,7 @@ const UnlimitedInputs = (props: {
         </span>
       </div>
       <DraggableList<TemplateItemProps, CommonProps, any>
-        list={Object.entries(functionConnection.inputs[0]).map((input, index) => ({ input: input[1], index }))}
+        list={Object.entries(functionConnection.inputs).map((input, index) => ({ input: input[1], index }))}
         commonProps={{
           functionKey: props.functionKey,
           data: props.func,
@@ -214,7 +218,7 @@ const UnlimitedInputs = (props: {
 
 export const getInputTypeFromNode = (input: InputConnection | undefined) => {
   let inputType = '';
-  if (typeof input !== 'string' && input !== undefined) {
+  if (connectionDoesExist(input) && isNodeConnection(input)) {
     if (isSchemaNodeExtended(input.node)) {
       inputType = input?.node.type;
     } else {
@@ -244,15 +248,17 @@ export const validateAndCreateConnectionInput = (
 
       // Create connection
       const source = isSelectedInputFunction ? functionNodeDictionary[selectedInputKey] : sourceSchemaDictionary[selectedInputKey];
-      const srcConUnit: ConnectionUnit = {
+      const srcConUnit: NodeConnection = {
         node: source,
         reactFlowKey: selectedInputKey,
+        isCustom: false,
+        isDefined: true,
       };
 
       return srcConUnit;
     }
     // Create custom value connection
-    const srcConUnit: InputConnection = optionValue;
+    const srcConUnit: CustomValueConnection = createCustomInputConnection(optionValue);
 
     return srcConUnit;
   }

libs/data-mapper-v2/src/components/functionConfigurationMenu/outputTab/outputTab.tsx

@@ -3,13 +3,19 @@ import { AddRegular } from '@fluentui/react-icons';
 import { useDispatch, useSelector } from 'react-redux';
 import type { RootState } from '../../../core/state/Store';
 import type { FunctionData, FunctionDictionary } from '../../../models';
-import type { ConnectionDictionary, ConnectionUnit, InputConnection } from '../../../models/Connection';
+import type { ConnectionDictionary, NodeConnection, InputConnection, EmptyConnection } from '../../../models/Connection';
 import type { InputOptionProps } from '../inputDropdown/InputDropdown';
 import { useStyles } from '../styles';
 import { List } from '@fluentui/react-list-preview';
 import type { SchemaNodeDictionary } from '@microsoft/logic-apps-shared';
 import { SchemaType } from '@microsoft/logic-apps-shared';
-import { flattenInputs, newConnectionWillHaveCircularLogic } from '../../../utils/Connection.Utils';
+import {
+  createNewEmptyConnection,
+  isNodeConnection,
+  isEmptyConnection,
+  newConnectionWillHaveCircularLogic,
+  createCustomInputConnection,
+} from '../../../utils/Connection.Utils';
 import { makeConnectionFromMap, setConnectionInput } from '../../../core/state/DataMapSlice';
 import { useState } from 'react';
 import { isSchemaNodeExtended } from '../../../utils';
@@ -24,36 +30,38 @@ export const OutputTabContents = (props: {
   const functionNodeDictionary = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.functionNodes);
   const connections = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.dataMapConnections);
   const styles = useStyles();
-  const outputs: (ConnectionUnit | undefined)[] = [...connections[props.functionId].outputs];
+  const outputs: (NodeConnection | EmptyConnection | undefined)[] = [...connections[props.functionId].outputs];
   const dispatch = useDispatch();
-  const [additionalOutput, setAdditionalOutput] = useState<(ConnectionUnit | undefined)[]>([]);
+  const [additionalOutput, setAdditionalOutput] = useState<(NodeConnection | EmptyConnection | undefined)[]>([]);
 
   if (outputs.length === 0) {
     outputs[0] = undefined;
   }
 
   const addOutputClick = () => {
-    setAdditionalOutput([...additionalOutput, undefined]);
+    setAdditionalOutput([...additionalOutput, createNewEmptyConnection()]);
   };
 
   const getIDForTargetConnection = (connection: InputConnection) => {
-    if (connection === undefined) {
+    if (connection === undefined || !isNodeConnection(connection)) {
       return '';
     }
-    if (typeof connection === 'string') {
-      return connection;
-    }
     return connection.reactFlowKey;
   };
 
-  const removeConnection = (newOutput: InputConnection) => {
+  const removeConnection = (newOutput?: InputConnection) => {
     if (newOutput === undefined) {
       return;
     }
+    if (!isNodeConnection(newOutput)) {
+      const shortenedOutput = additionalOutput.slice(0, additionalOutput.length - 2);
+      setAdditionalOutput(shortenedOutput);
+      return;
+    }
     const dest = getIDForTargetConnection(newOutput);
     const destinationNode = connectionDictionary[dest];
-    const flattened = flattenInputs(destinationNode.inputs);
-    const index = flattened.findIndex((input) => getIDForTargetConnection(input) === props.functionId);
+    const inputs = destinationNode.inputs;
+    const index = inputs.findIndex((input) => getIDForTargetConnection(input) === props.functionId);
     dispatch(
       setConnectionInput({
         targetNode: destinationNode.self.node,
@@ -80,9 +88,11 @@ export const OutputTabContents = (props: {
   const validateAndCreateConnection = (
     optionValue: string | undefined,
     option: InputOptionProps | undefined,
-    oldOutput: InputConnection
+    oldOutput: InputConnection | undefined
   ) => {
-    removeConnection(oldOutput);
+    if (oldOutput !== undefined) {
+      removeConnection(oldOutput);
+    }
     if (optionValue) {
       const newOutput = validateAndCreateConnectionOutput(
         optionValue,
@@ -104,7 +114,9 @@ export const OutputTabContents = (props: {
         <List>
           {outputs.concat(additionalOutput).map((output, index) => {
             let outputValue = undefined;
-            if (output) {
+            if (output && isEmptyConnection(output)) {
+              outputValue = '';
+            } else if (output) {
               outputValue = isSchemaNodeExtended(output?.node) ? output?.node.name : '';
             }
             const listItem = (
@@ -163,15 +175,17 @@ const validateAndCreateConnectionOutput = (
 
       // Create connection
       const output = isSelectedOutputFunction ? functionNodeDictionary[selectedOutputKey] : sourceSchemaDictionary[selectedOutputKey];
-      const srcConUnit: ConnectionUnit = {
+      const srcConUnit: NodeConnection = {
         node: output,
         reactFlowKey: selectedOutputKey,
+        isCustom: false,
+        isDefined: true,
       };
 
       return srcConUnit;
     }
     // Create custom value connection
-    const srcConUnit: InputConnection = optionValue;
+    const srcConUnit: InputConnection = createCustomInputConnection(optionValue);
 
     return srcConUnit;
   }