fix(Data Mapper): Update Function config panel to fix wrapping, delete logic, placement of action items, info bubble

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

@@ -317,7 +317,7 @@ export const InputDropdown = ({
           </Option>
         )}
       </Combobox>
-      <Caption2>{typeValidationMessage}</Caption2>
+      <Caption2 className={styles.validationWarningmessage}>{typeValidationMessage}</Caption2>
     </Stack>
   );
 };

libs/data-mapper-v2/src/components/functionConfigurationMenu/inputDropdown/styles.ts

@@ -40,4 +40,7 @@ export const useStyles = makeStyles({
     fontSize: '10px',
     color: tokens.colorPaletteYellowForeground2,
   },
+  validationWarningmessage: {
+    fontStyle: 'italic',
+  },
 });

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

@@ -138,9 +138,9 @@ export const CustomListItem = (props: CustomListItemProps) => {
   } = props;
 
   return (
-    <ListItem key={`input-${name}`}>
-      <div className={styles.draggableListItem}>
-        <span className={styles.inputDropdown}>
+    <ListItem key={`input-${name}`} className={styles.draggableListItem}>
+      <div className={styles.draggableListContainer}>
+        <span className={styles.formControl}>
           <InputDropdown
             inputAllowsCustomValues={customValueAllowed}
             index={index}
@@ -152,14 +152,12 @@ export const CustomListItem = (props: CustomListItemProps) => {
             validateAndCreateConnection={validateAndCreateConnection}
           />
         </span>
-        <span className={styles.listButtons}>
-          <span className={styles.badgeWrapper}>
-            {type && (
-              <Badge appearance="filled" color="informative">
-                {type}
-              </Badge>
-            )}
-          </span>
+        {type && (
+          <Badge appearance="filled" color="informative">
+            {type}
+          </Badge>
+        )}
+        <span>
           <Button className={styles.listButton} appearance="transparent" icon={<DeleteRegular />} onClick={remove} />
           {draggable && dragHandleProps && (
             <Button className={styles.listButton} appearance="transparent" icon={<ReOrderRegular />} {...dragHandleProps} />

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

@@ -1,4 +1,4 @@
-import { Badge, Button, Caption1, Caption2, Text } from '@fluentui/react-components';
+import { Badge, Button, Caption1, Text } from '@fluentui/react-components';
 import { AddRegular, DeleteRegular } from '@fluentui/react-icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { UnboundedInput } from '../../../constants/FunctionConstants';
@@ -14,7 +14,6 @@ import type { ConnectionDictionary, NodeConnection, CustomValueConnection, Input
 import { getInputName, getInputValue } from '../../../utils/Function.Utils';
 import type { InputOptionProps } from '../inputDropdown/InputDropdown';
 import { InputDropdown } from '../inputDropdown/InputDropdown';
-import { useStyles } from './styles';
 import { isSchemaNodeExtended } from '../../../utils';
 import {
   connectionDoesExist,
@@ -28,6 +27,7 @@ import InputListWrapper, { type TemplateItemProps, type CommonProps } from './In
 import { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { InputCustomInfoLabel } from './inputCustomInfoLabel';
+import { useStyles } from './styles';
 
 export const InputTabContents = (props: {
   func: FunctionData;
@@ -99,43 +99,50 @@ export const InputTabContents = (props: {
       };
 
       return (
-        <div className={styles.boundedInputRow} key={index}>
-          <div className={styles.boundedInputTopRow}>
-            <div className={styles.inputNameDiv}>
-              <Caption1 className={styles.inputName}>{input.name}</Caption1>
-              <Caption2>{input.tooltip ?? input.placeHolder ?? ''}</Caption2>
+        <div className={styles.row} key={index}>
+          <div className={styles.header}>
+            <div className={styles.titleContainer}>
+              <div>
+                <Caption1 className={styles.titleText}>
+                  {input.name}
+                  <Text className={styles.titleRequiredLabelText}>{input.isOptional ? '' : '*'}</Text>
+                </Caption1>
+                <InputCustomInfoLabel />
+              </div>
+              <Text className={styles.titleText}>
+                <span className={styles.titleLabelText}>{resources.ACCEPTED_TYPES}</span>
+                {input.allowedTypes}
+              </Text>
+            </div>
+            <div className={styles.descriptionContainer}>
+              <Text className={styles.descriptionText}>{input.tooltip ?? input.placeHolder ?? ''}</Text>
             </div>
-            <Caption2 className={styles.allowedTypesComponent}>
-              <Text className={styles.typesParent}>{resources.ACCEPTED_TYPES}</Text>
-              {input.allowedTypes}
-            </Caption2>
-            <InputCustomInfoLabel />
           </div>
-          <div>
-            <span className={styles.inputDropdownWrapper}>
-              <InputDropdown
-                index={index}
-                schemaListType={SchemaType.Source}
-                functionId={props.functionKey}
-                currentNode={props.func}
-                inputName={getInputName(inputConnection, connections)}
-                inputValue={getInputValue(inputConnection)}
-                validateAndCreateConnection={validateAndCreateConnection}
-              />
-            </span>
-            <span className={styles.badgeWrapper}>
+          <div className={styles.body}>
+            <div className={styles.formControlWrapper}>
+              <span className={styles.formControl}>
+                <InputDropdown
+                  index={index}
+                  schemaListType={SchemaType.Source}
+                  functionId={props.functionKey}
+                  currentNode={props.func}
+                  inputName={getInputName(inputConnection, connections)}
+                  inputValue={getInputValue(inputConnection)}
+                  validateAndCreateConnection={validateAndCreateConnection}
+                />
+              </span>
               {inputType && (
                 <Badge appearance="filled" color="informative">
                   {inputType}
                 </Badge>
               )}
-            </span>
-            <Button
-              className={styles.listButton}
-              appearance="transparent"
-              icon={<DeleteRegular />}
-              onClick={() => removeConnection(index)}
-            />
+              <Button
+                className={styles.controlButton}
+                appearance="transparent"
+                icon={<DeleteRegular />}
+                onClick={() => removeConnection(index)}
+              />
+            </div>
           </div>
         </div>
       );
@@ -201,44 +208,54 @@ const UnlimitedInputs = (props: {
   );
 
   return (
-    <div>
-      <div>
-        <span className={styles.unlimitedInputHeaderCell} key="input-name">
-          <Caption1>{`${inputsFromManifest[0].name}${inputsFromManifest[0].isOptional ? ` (${stringResources.OPTIONAL})` : ''}`}</Caption1>
-          <InputCustomInfoLabel />
-        </span>
-        <span className={styles.unlimitedInputHeaderCell} key="input-types">
-          <Caption2>
-            <Text className={styles.typesParent}>{stringResources.ACCEPT_TYPES}</Text>
+    <div className={styles.row}>
+      <div className={styles.header}>
+        <div className={styles.titleContainer}>
+          <div>
+            <Caption1 className={styles.titleText}>
+              {inputsFromManifest[0].name}
+              <Text className={styles.titleRequiredLabelText}>{inputsFromManifest[0].isOptional ? '' : '*'}</Text>
+            </Caption1>
+            <InputCustomInfoLabel />
+          </div>
+          <Text className={styles.titleText}>
+            <span className={styles.titleLabelText}>{stringResources.ACCEPT_TYPES}</span>
             {inputsFromManifest[0].allowedTypes}
-          </Caption2>
-        </span>
+          </Text>
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Text className={styles.descriptionText}>{inputsFromManifest[0].tooltip ?? inputsFromManifest[0].placeHolder ?? ''}</Text>
+        </div>
+      </div>
+      <div className={styles.body}>
+        <DraggableList<TemplateItemProps, CommonProps, any>
+          list={Object.entries(functionConnection.inputs).map((input, index) => ({
+            input: input[1],
+            index,
+          }))}
+          commonProps={{
+            functionKey: props.functionKey,
+            data: props.func,
+            inputsFromManifest,
+            connections: props.connections,
+            schemaType: SchemaType.Source,
+            draggable: true,
+          }}
+          onMoveEnd={onDragMoveEnd}
+          itemKey={'index'}
+          template={InputListWrapper}
+        />
+        <div className={styles.formControlDescription}>
+          <Button
+            icon={<AddRegular className={styles.addIcon} />}
+            onClick={() => addUnboundedInputSlot()}
+            className={styles.addButton}
+            appearance="subtle"
+          >
+            <Caption1>{stringResources.ADD_INPUT}</Caption1>
+          </Button>
+        </div>
       </div>
-      <DraggableList<TemplateItemProps, CommonProps, any>
-        list={Object.entries(functionConnection.inputs).map((input, index) => ({
-          input: input[1],
-          index,
-        }))}
-        commonProps={{
-          functionKey: props.functionKey,
-          data: props.func,
-          inputsFromManifest,
-          connections: props.connections,
-          schemaType: SchemaType.Source,
-          draggable: true,
-        }}
-        onMoveEnd={onDragMoveEnd}
-        itemKey={'index'}
-        template={InputListWrapper}
-      />
-      <Button
-        icon={<AddRegular className={styles.addIcon} />}
-        onClick={() => addUnboundedInputSlot()}
-        className={styles.addButton}
-        appearance="transparent"
-      >
-        <Caption1>{stringResources.ADD_INPUT}</Caption1>
-      </Button>
     </div>
   );
 };

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

@@ -1,63 +1,77 @@
 import { makeStyles } from '@fluentui/react-components';
 
 export const useStyles = makeStyles({
-  unlimitedInputHeaderCell: {
-    width: '170px',
-    display: 'inline-block',
-    paddingRight: '5px',
-  },
-  draggableListItem: {
-    display: 'inline-block',
+  row: {
     width: '100%',
+    paddingBottom: '20px',
   },
-  inputDropdownWrapper: {
-    display: 'inline-block',
-    width: '270px',
-    paddingRight: '8px',
-  },
-  inputDropdown: {
-    width: '220px',
-    display: 'inline-block',
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
   },
-  boundedInputTopRow: {
+  titleContainer: {
     display: 'flex',
     flexDirection: 'row',
-    height: '40px',
+    justifyContent: 'space-between',
   },
-  boundedInputRow: {
-    paddingBottom: '25px',
+  titleText: {
+    display: 'inline',
+    fontSize: '12px',
   },
-  allowedTypesComponent: {
-    width: '170px',
-    textAlign: 'end',
+  titleLabelText: {
+    fontStyle: 'italic',
   },
-  typesParent: {
-    fontSize: '14px',
+  titleRequiredLabelText: {
+    color: 'red',
   },
-  inputNameDiv: {
-    width: '200px',
+  descriptionContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '60%',
   },
-  inputName: {
-    display: 'block',
+  descriptionText: {
+    display: 'inline',
+    fontSize: '10px',
   },
-  addButton: {
-    marginLEft: '0px',
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
   },
-  addIcon: {
-    fontSize: '12px',
+  formControlWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
-  tabWrapper: {
-    paddingTop: '8px',
+  formControl: {
+    display: 'inline-block',
+    width: '60%',
   },
-  listButtons: {
-    paddingLeft: '8px',
+  formControlDescription: {
+    width: '60%',
+    display: 'block',
+    marginTop: '15px',
   },
-  badgeWrapper: {
-    width: '70px',
-    display: 'inline-block',
+  controlButton: {
+    paddingTop: '0px',
   },
   listButton: {
     width: '40px',
     maxWidth: '40px',
+    paddingTop: '0px',
+  },
+  addButton: {
+    paddingLeft: '0px',
+  },
+  addIcon: {
+    fontSize: '12px',
+  },
+  draggableListContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  draggableListItem: {
+    marginTop: '5px',
+    maxHeight: 'fit-content',
   },
 });

libs/data-mapper-v2/src/components/schema/tree/styles.ts

@@ -54,7 +54,7 @@ export const useTreeNodeStyles = makeStyles({
     paddingLeft: '16px',
   },
   sourceSchemaContainer: {
-    marginRight: '7px',
+    marginRight: '11px',
   },
   wrapper: {
     display: 'flex',

libs/data-mapper-v2/src/core/state/DataMapSlice.ts

@@ -475,12 +475,17 @@ export const dataMapSlice = createSlice({
       const newConnections = {
         ...state.curDataMapOperation.dataMapConnections,
       };
-      const inputValueToRemove = newConnections[action.payload.targetId].inputs[action.payload.inputIndex];
-      if (isEmptyConnection(inputValueToRemove)) {
-        return;
+      const { inputIndex, targetId } = action.payload;
+      const inputs = newConnections[targetId].inputs;
+      const inputValueToRemove = inputs[inputIndex];
+      if (!isEmptyConnection(inputValueToRemove)) {
+        const sourceIdToRemove = isCustomValueConnection(inputValueToRemove) ? inputValueToRemove.value : inputValueToRemove.reactFlowKey;
+        deleteConnectionFromConnections(newConnections, sourceIdToRemove, targetId, undefined);
       }
-      const sourceIdToRemove = isCustomValueConnection(inputValueToRemove) ? inputValueToRemove.value : inputValueToRemove.reactFlowKey;
-      deleteConnectionFromConnections(newConnections, sourceIdToRemove, action.payload.targetId, undefined);
+
+      // Remove the input completely once it has been emptied
+      newConnections[targetId].inputs = [...inputs.slice(0, inputIndex), ...inputs.slice(inputIndex + 1)];
+
       doDataMapOperation(
         state,
         {