fix(Data Mapper): Update draggable list component and apply suggestions for Error/Warnings panel

Localize/lang/strings.json

@@ -1,6 +1,7 @@
 {
   "++ZVe/": "Testing",
   "+0H8Or": "Warning: input node type does not match the schema node's type",
+  "+0ua83": "Parameters",
   "+0yxlR": "Function display",
   "+3rROX": "Protected",
   "+5Jp42": "By",
@@ -1003,6 +1004,7 @@
   "Xnn0uj": "Request",
   "XqamWZ": "Delete",
   "XsktQ/": "Limit Logic Apps to not include workflow metadata headers in the response.",
+  "XtVOMn": "Something went wrong",
   "XtuP5e": "Math functions",
   "Xv5CGN": "(UTC-05:00) Indiana (East)",
   "Xx/naD": "Required. The name of the action whose body outputs you want.",
@@ -1067,9 +1069,11 @@
   "Zi9gQK": "Add new item",
   "ZihyUf": "Close",
   "ZkjTbp": "Learn more about dynamic content.",
+  "ZvAp7m": "Save",
   "ZyDq4/": "Show a different suggestion",
   "_++ZVe/.comment": "Title for testing section",
   "_+0H8Or.comment": "Warning message for when input node type does not match schema node type",
+  "_+0ua83.comment": "Button text for parameters",
   "_+0yxlR.comment": "Label for the function display radio group",
   "_+3rROX.comment": "Label in the chatbot header stating that the users information is protected in this chatbot",
   "_+5Jp42.comment": "Title for publisher",
@@ -2072,6 +2076,7 @@
   "_Xnn0uj.comment": "Header text for request",
   "_XqamWZ.comment": "Label of Delete Token Button",
   "_XsktQ/.comment": "description of workflow headers on response setting",
+  "_XtVOMn.comment": "Something went wrong text",
   "_XtuP5e.comment": "Label for math functions",
   "_Xv5CGN.comment": "Time zone value ",
   "_Xx/naD.comment": "Required string parameter to determine action's body output wanted",
@@ -2136,6 +2141,7 @@
   "_Zi9gQK.comment": "Label to add item to property editor",
   "_ZihyUf.comment": "Label for the close button in the chatbot header",
   "_ZkjTbp.comment": "Text for dynamic content link",
+  "_ZvAp7m.comment": "Button text for save",
   "_ZyDq4/.comment": "Text for the show different suggestion flow button",
   "_a7j3gS.comment": "Required number parameter to divide in mod function",
   "_aAXnqw.comment": "Required number of occurrences to get nthIndexOf function with",
@@ -2289,6 +2295,7 @@
   "_fNlJSh.comment": "Error message to show when all connections are not connected",
   "_fSMyDJ.comment": "title for request options setting",
   "_fVG5aD.comment": "Time zone value ",
+  "_fZJWBR.comment": "Loading designer text",
   "_faUrud.comment": "Message to show under the loading icon when loading connection parameters",
   "_fg/34o.comment": "Label for logical functions",
   "_fifSPb.comment": "Time zone value ",
@@ -2564,6 +2571,7 @@
   "_ocW+RF.comment": "Title for the details section in the template overview tab",
   "_odQ554.comment": "Response body for test map API",
   "_og5JOA.comment": "Millisecond",
+  "_ohOaXj.comment": "Button text for errors",
   "_ohpbkw.comment": "title for retry policy exponential interval setting",
   "_onXUu0.comment": "Text to tell users to click to add comments",
   "_oqgNX3.comment": "Accessibility label for workflow name",
@@ -2661,6 +2669,7 @@
   "_sFwHQc.comment": "aria label description for cancel button",
   "_sJQee6.comment": "Hours",
   "_sKy720.comment": "Error message when the workflow name is empty.",
+  "_sOnphB.comment": "Button text for resubmit",
   "_sRpETS.comment": "Warning message for when custom value does not match schema node type",
   "_sVQe34.comment": "The description for the test tab parameters.",
   "_sVcvcG.comment": "The tab label for the monitoring name and state tab on the create workflow panel",
@@ -3063,6 +3072,7 @@
   "fNlJSh": "All connections must be connected for workflow creation",
   "fSMyDJ": "Request options - Timeout",
   "fVG5aD": "(UTC-05:00) Haiti",
+  "fZJWBR": "Loading designer",
   "faUrud": "Loading connection data...",
   "fg/34o": "Logical functions",
   "fifSPb": "(UTC-03:30) Newfoundland",
@@ -3338,6 +3348,7 @@
   "ocW+RF": "Details",
   "odQ554": "Response body",
   "og5JOA": "{count} Millisecond",
+  "ohOaXj": "Errors",
   "ohpbkw": "Exponential interval",
   "onXUu0": "Add a note",
   "oqgNX3": "Workflow name",
@@ -3435,6 +3446,7 @@
   "sFwHQc": "Cancel creating a connection",
   "sJQee6": "{count} Hours",
   "sKy720": "Must provide value for workflow name.",
+  "sOnphB": "Resubmit",
   "sRpETS": "Warning: custom value does not match the schema node's type",
   "sVQe34": "Provide parameters to test the output.",
   "sVcvcG": "Basics",

apps/Standalone/package.json

@@ -21,10 +21,10 @@
     "@microsoft/logic-apps-designer": "workspace:*",
     "@microsoft/logic-apps-shared": "workspace:*",
     "@monaco-editor/react": "4.6.0",
+    "@react-hookz/web": "22.0.0",
     "@reduxjs/toolkit": "1.8.5",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
-    "@react-hookz/web": "22.0.0",
     "axios": "^1.7.7",
     "axios-retry": "^3.5.0",
     "core-js": "3.24.1",
@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "8.0.2",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.28.2",
     "regenerator-runtime": "0.13.9"
   },
   "devDependencies": {

apps/vs-code-react/package.json

@@ -4,9 +4,9 @@
   "dependencies": {
     "@fluentui/azure-themes": "8.5.70",
     "@fluentui/react": "8.110.2",
-    "@fluentui/react-icons": "2.0.224",
     "@fluentui/react-components": "9.56.0",
     "@fluentui/react-hooks": "8.6.20",
+    "@fluentui/react-icons": "2.0.224",
     "@microsoft/designer-ui": "workspace:*",
     "@microsoft/logic-apps-chatbot": "workspace:*",
     "@microsoft/logic-apps-data-mapper": "workspace:*",
@@ -15,25 +15,25 @@
     "@microsoft/logic-apps-shared": "workspace:*",
     "@microsoft/vscode-extension-logic-apps": "workspace:*",
     "@reduxjs/toolkit": "1.8.5",
-    "tiny-invariant": "1.3.1",
-    "@use-it/event-listener": "0.1.7",
-    "react-intl": "6.3.0",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
+    "@use-it/event-listener": "0.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intl": "6.3.0",
     "react-redux": "8.0.2",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.28.2",
+    "tiny-invariant": "1.3.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@types/lodash.isequal": "^4.5.8",
+    "@types/react": "^18.2.78",
+    "@types/react-dom": "^18.2.25",
+    "@types/vscode-webview": "1.57.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "vite": "^5.2.0",
-    "vite-plugin-node-polyfills": "^0.21.0",
-    "@types/vscode-webview": "1.57.1",
-    "@types/react": "^18.2.78",
-    "@types/react-dom": "^18.2.25"
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "private": true,
   "scripts": {

libs/data-mapper-v2/package.json

@@ -18,6 +18,7 @@
     "@react-hookz/web": "22.0.0",
     "@reduxjs/toolkit": "1.8.5",
     "@xyflow/react": "^12.3.5",
+    "dnd-kit-sortable-tree": "^0.1.73",
     "elkjs": "0.9.1",
     "fuse.js": "6.6.2",
     "immer": "9.0.15",

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

@@ -1,31 +1,10 @@
-import { useCallback, useMemo } from 'react';
-import type { ConnectionDictionary, InputConnection } from '../../../models/Connection';
-import type { TemplateProps } from 'react-draggable-list';
-import type { FunctionData, FunctionInput } from '../../../models';
-import { useDispatch, useSelector } from 'react-redux';
-import type { RootState } from '../../../core/state/Store';
+import type { FunctionData } from '../../../models';
 import { InputDropdown, type InputOptionProps } from '../inputDropdown/InputDropdown';
-import { getInputTypeFromNode, validateAndCreateConnectionInput } from './inputTab';
-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';
 import { Badge, Button } from '@fluentui/react-components';
 import { DeleteRegular, ReOrderRegular } from '@fluentui/react-icons';
 import type { SchemaType } from '@microsoft/logic-apps-shared';
-import * as React from 'react';
 
-export type CommonProps = {
-  functionKey: string;
-  data: FunctionData;
-  inputsFromManifest: FunctionInput[];
-  connections: ConnectionDictionary;
-  schemaType: SchemaType;
-  draggable: boolean;
-};
-
-export type TemplateItemProps = { input: InputConnection; index: number };
-type InputListProps = TemplateProps<TemplateItemProps, CommonProps> & {};
 type CustomListItemProps = {
   name?: string;
   value?: string;
@@ -42,84 +21,6 @@ type CustomListItemProps = {
   key: string;
 };
 
-export const InputList = (props: InputListProps) => {
-  const connectionDictionary = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.dataMapConnections);
-  const sourceSchemaDictionary = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.flattenedSourceSchema);
-  const functionNodeDictionary = useSelector((state: RootState) => state.dataMap.present.curDataMapOperation.functionNodes);
-  const dispatch = useDispatch();
-  const {
-    item: { input, index },
-    commonProps,
-    dragHandleProps,
-  } = props;
-  const { functionKey, data, inputsFromManifest, connections, schemaType } = 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;
-    dispatch(
-      deleteConnectionFromFunctionMenu({
-        targetId: targetNodeReactFlowKey,
-        inputIndex: index,
-      })
-    );
-  }, [dispatch, functionKey, index]);
-
-  const updateInput = useCallback(
-    (newValue: InputConnection) => {
-      const targetNodeReactFlowKey = functionKey;
-      dispatch(
-        setConnectionInput({
-          targetNode: data,
-          targetNodeReactFlowKey,
-          inputIndex: index,
-          input: newValue,
-        })
-      );
-    },
-    [data, dispatch, functionKey, index]
-  );
-
-  const validateAndCreateConnection = useCallback(
-    (optionValue: string | undefined, option: InputOptionProps | undefined) => {
-      if (optionValue) {
-        const input = validateAndCreateConnectionInput(
-          optionValue,
-          option,
-          connectionDictionary,
-          data,
-          functionNodeDictionary,
-          sourceSchemaDictionary
-        );
-        if (input) {
-          updateInput(input);
-        }
-      }
-    },
-    [connectionDictionary, data, functionNodeDictionary, sourceSchemaDictionary, updateInput]
-  );
-
-  return (
-    <CustomListItem
-      name={inputName}
-      value={inputValue}
-      remove={removeUnboundedInput}
-      index={index}
-      customValueAllowed={inputsFromManifest[0].allowCustomInput}
-      schemaType={schemaType}
-      type={inputType}
-      validateAndCreateConnection={validateAndCreateConnection}
-      functionData={data}
-      functionKey={functionKey}
-      key={`input-${inputName}`}
-      draggable={commonProps.draggable}
-      dragHandleProps={dragHandleProps}
-    />
-  );
-};
-
 export const CustomListItem = (props: CustomListItemProps) => {
   const styles = useStyles();
   const {
@@ -138,7 +39,7 @@ export const CustomListItem = (props: CustomListItemProps) => {
   } = props;
 
   return (
-    <ListItem key={`input-${name}`} className={styles.draggableListItem}>
+    <div key={`input-${name}`} className={styles.draggableListItem}>
       <div className={styles.draggableListContainer}>
         <span className={styles.formControl}>
           <InputDropdown
@@ -164,12 +65,6 @@ export const CustomListItem = (props: CustomListItemProps) => {
           )}
         </span>
       </div>
-    </ListItem>
+    </div>
   );
 };
-
-export default class InputListWrapper extends React.Component<InputListProps, {}> {
-  render() {
-    return <InputList {...this.props} />;
-  }
-}