Temp commit -wip

Azure · Dec 6, 2024 · 49b1bd2 · 49b1bd2
1 parent f00d3dd
commit 49b1bd2
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 154 deletions.
diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
@@ -2814,6 +2814,7 @@
   "_zUWAsJ.comment": "Label for description of custom isInt Function",
   "_zUgja+.comment": "Label for button to clear the editor",
   "_zViEGr.comment": "Time zone value ",
+  "_zWpl5p.comment": "Tooltip for button to remove array item. Do not remove the double single quotes around the display name, as it is needed to wrap the placeholder text.",
   "_zb3lE6.comment": "Chatbot message telling user to set up action in order to save the workflow",
   "_zcZpHT.comment": "Label for description of custom parseDateTime Function",
   "_zec5Ay.comment": "Chatbot stop generating flow button alt text",
@@ -3559,6 +3560,7 @@
   "zUWAsJ": "Returns a boolean that indicates whether a string is an integer",
   "zUgja+": "Clear custom value",
   "zViEGr": "(UTC+12:00) Petropavlovsk-Kamchatsky - Old",
+  "zWpl5p": "Remove parameter ''{itemKey}'' and its value",
   "zb3lE6": "To save this workflow, finish setting up this action:",
   "zcZpHT": "Converts a string, with optionally a locale and a format to a date",
   "zec5Ay": "Stop",

diff --git a/libs/designer-ui/src/lib/arrayeditor/arrayeditor.less b/libs/designer-ui/src/lib/arrayeditor/arrayeditor.less
@@ -84,7 +84,11 @@
     padding: 0 @padding;
 
     .msla-array-item {
-      margin-left: 6px;
+      display: flex;
+      flex-direction: row;
+      align-items: top;
+      gap: 4px;
+
       &.complex {
         margin: 4px;
         padding: 4px 4px 4px 4px;
@@ -94,11 +98,10 @@
         border: 1px dotted @defaultBorderColor;
       }
 
-      .msla-array-item-header {
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 4px;
+      .msla-array-index {
+        margin: 4px;
       }
+
       .msla-array-editor-container-expanded {
         width: 100%;
         border-radius: 2px;
@@ -150,30 +153,10 @@
         margin-bottom: @parameter-interval-margin;
       }
     }
-
-    .msla-array-item-commands {
-      display: inline-block;
-      width: 30px;
-      vertical-align: top;
-
-      .msla-array-item-contextbutton {
-        i[data-icon-name='ChevronDown'] {
-          display: none;
-        }
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    }
   }
 
   .msla-array-toolbar {
     display: flex;
-    margin: @padding;
-
-    .msla-array-add-item-button {
-      height: @parameter-inputbox-height;
-      font-size: @card-label-font-size;
-    }
+    margin: 4px 2px 0px;
   }
 }
diff --git a/libs/designer-ui/src/lib/arrayeditor/expandedcomplexarray.tsx b/libs/designer-ui/src/lib/arrayeditor/expandedcomplexarray.tsx
@@ -2,18 +2,18 @@ import type { ComboboxItem, ComplexArrayItems, DropdownItem, TokenPickerButtonEd
 import { Combobox, DropdownEditor, StringEditor } from '..';
 import constants from '../constants';
 import type { ChangeState, GetTokenPickerHandler, loadParameterValueFromStringHandler } from '../editor/base';
-import { ItemMenuButton } from './expandedsimplearray';
 import { getBooleanDropdownOptions, getComoboxEnumOptions, hideComplexArray } from './util/util';
 import type { ItemSchemaItemProps } from './util/util';
-import type { IIconProps } from '@fluentui/react';
-import { css, DefaultButton } from '@fluentui/react';
+import { css } from '@fluentui/react';
 import { Label } from '../label';
 import { guid } from '@microsoft/logic-apps-shared';
 import { useIntl } from 'react-intl';
+import { Button, Badge } from '@fluentui/react-components';
+import { RemoveItemButton } from './removeitembutton';
 
-const addItemButtonIconProps: IIconProps = {
-  iconName: 'Add',
-};
+import { bundleIcon, AddSquareFilled, AddSquareRegular } from '@fluentui/react-icons';
+
+const AddIcon = bundleIcon(AddSquareFilled, AddSquareRegular);
 
 export interface ExpandedComplexArrayProps {
   dimensionalSchema: ItemSchemaItemProps[];
@@ -89,15 +89,6 @@ export const ExpandedComplexArray = ({
     setItems(newItems);
   };
 
-  const renderLabel = (index: number, schemaItem: ItemSchemaItemProps, isRequired?: boolean): JSX.Element => {
-    const { title } = schemaItem;
-    return (
-      <div className="msla-array-editor-label">
-        <Label isRequiredField={isRequired ?? false} text={`${title} - ${index + 1}`} />
-      </div>
-    );
-  };
-
   return (
     <div className="msla-array-container msla-array-item-container">
       {allItems.map((item, index) => {
@@ -131,19 +122,9 @@ export const ExpandedComplexArray = ({
                         // hide empty readonly editors
                         schemaItem?.readOnly && (!complexItem || complexItem.value.length === 0) ? null : (
                           <>
-                            <div className="msla-array-item-header">
-                              {renderLabel(index, schemaItem, schemaItem?.isRequired)}
-                              {i === 0 ? (
-                                <div className="msla-array-item-commands">
-                                  <ItemMenuButton
-                                    disabled={!!props.readonly}
-                                    itemKey={index}
-                                    visible={canDeleteLastItem || allItems.length > 1}
-                                    onDeleteItem={(index) => deleteItem(index)}
-                                  />
-                                </div>
-                              ) : null}
-                            </div>
+                            <Badge className="msla-array-index" shape="rounded" appearance="tint">
+                              {index + 1}
+                            </Badge>
                             {comboboxOptions ? (
                               <Combobox
                                 {...props}
@@ -171,6 +152,14 @@ export const ExpandedComplexArray = ({
                                 placeholder={schemaItem?.description}
                               />
                             )}
+                            {i === 0 ? (
+                              <RemoveItemButton
+                                disabled={!!props.readonly}
+                                itemKey={index}
+                                visible={canDeleteLastItem || allItems.length > 1}
+                                onClick={(index) => deleteItem(index)}
+                              />
+                            ) : null}
                           </>
                         )
                       }
@@ -183,11 +172,9 @@ export const ExpandedComplexArray = ({
         );
       })}
       <div className="msla-array-toolbar">
-        <DefaultButton
+        <Button
           disabled={props.readonly}
-          className="msla-array-add-item-button"
-          iconProps={addItemButtonIconProps}
-          text={addItemButtonLabel}
+          icon={<AddIcon />}
           onClick={() => {
             setItems([
               ...allItems,
@@ -199,7 +186,10 @@ export const ExpandedComplexArray = ({
               },
             ]);
           }}
-        />
+          style={{ paddingLeft: '1px', gap: '2px' }}
+        >
+          {addItemButtonLabel}
+        </Button>
       </div>
     </div>
   );

diff --git a/libs/designer-ui/src/lib/arrayeditor/expandedsimplearray.tsx b/libs/designer-ui/src/lib/arrayeditor/expandedsimplearray.tsx
@@ -2,30 +2,17 @@ import type { ComboboxItem, SimpleArrayItem, TokenPickerButtonEditorProps, Value
 import { Combobox, StringEditor } from '..';
 import type { ChangeState, GetTokenPickerHandler, loadParameterValueFromStringHandler } from '../editor/base';
 import { notEqual } from '../editor/base/utils/helper';
-import { Label, RequiredMarkerSide } from '../label';
 import type { LabelProps } from '../label';
-import type { IContextualMenuProps, IIconProps, IIconStyles } from '@fluentui/react';
-import { IconButton, TooltipHost, DefaultButton } from '@fluentui/react';
+import { Button, Badge } from '@fluentui/react-components';
 import { guid } from '@microsoft/logic-apps-shared';
 import { useIntl } from 'react-intl';
 import { getComoboxEnumOptions } from './util/util';
+import { RemoveItemButton } from './removeitembutton';
 
-const addItemButtonIconProps: IIconProps = {
-  iconName: 'Add',
-};
+import { bundleIcon, AddSquareFilled, AddSquareRegular } from '@fluentui/react-icons';
 
-const ContextMenuKeys = {
-  DELETE: 'delete',
-};
+const AddIcon = bundleIcon(AddSquareFilled, AddSquareRegular);
 
-const menuButtonIconProps: IIconProps = {
-  iconName: 'More',
-};
-const menuButtonStyles: IIconStyles = {
-  root: {
-    height: '20px',
-  },
-};
 export interface ExpandedSimpleArrayProps {
   labelProps: LabelProps;
   items: SimpleArrayItem[];
@@ -43,7 +30,7 @@ export interface ExpandedSimpleArrayProps {
 }
 
 export const ExpandedSimpleArray = ({
-  labelProps,
+  // labelProps,
   items,
   canDeleteLastItem,
   placeholder,
@@ -81,17 +68,9 @@ export const ExpandedSimpleArray = ({
       {items.map((item, index) => {
         return (
           <div key={item.key + index} className="msla-array-item">
-            <div className="msla-array-item-header">
-              {renderLabel(index, labelProps.text, true)}
-              <div className="msla-array-item-commands">
-                <ItemMenuButton
-                  disabled={!!readonly}
-                  itemKey={index}
-                  visible={canDeleteLastItem || items.length > 1}
-                  onDeleteItem={(index) => deleteItem(index)}
-                />
-              </div>
-            </div>
+            <Badge className="msla-array-index" shape="rounded" appearance="tint">
+              {index + 1}
+            </Badge>
             {comboboxOptions ? (
               <Combobox
                 {...props}
@@ -111,79 +90,27 @@ export const ExpandedSimpleArray = ({
                 placeholder={placeholder}
               />
             )}
+            <RemoveItemButton
+              disabled={!!readonly}
+              itemKey={index}
+              visible={canDeleteLastItem || items.length > 1}
+              onClick={(index) => deleteItem(index)}
+            />
           </div>
         );
       })}
       <div className="msla-array-toolbar">
-        <DefaultButton
+        <Button
           disabled={readonly}
-          className="msla-array-add-item-button"
-          iconProps={addItemButtonIconProps}
-          text={addItemButtonLabel}
+          icon={<AddIcon />}
+          size={'small'}
+          appearance="subtle"
           onClick={() => setItems([...items, { value: [], key: guid() }])}
-        />
+          style={{ paddingLeft: '1px', gap: '2px' }}
+        >
+          {addItemButtonLabel}
+        </Button>
       </div>
     </div>
   );
 };
-
-const renderLabel = (index: number, labelName?: string, isRequired?: boolean): JSX.Element => {
-  return (
-    <div className="msla-array-editor-label">
-      <Label text={`${labelName} - ${index + 1}`} isRequiredField={isRequired ?? false} requiredMarkerSide={RequiredMarkerSide.LEFT} />
-    </div>
-  );
-};
-
-interface ItemMenuButtonProps {
-  disabled: boolean;
-  itemKey: number;
-  visible: boolean;
-  onDeleteItem(itemKey: number): void;
-}
-
-export const ItemMenuButton = ({ disabled, itemKey, visible, onDeleteItem }: ItemMenuButtonProps): JSX.Element | null => {
-  const intl = useIntl();
-  if (!visible) {
-    return null;
-  }
-  const deleteButton = intl.formatMessage({
-    defaultMessage: 'Delete',
-    id: 'JErLDT',
-    description: 'Delete label',
-  });
-
-  const menuButton = intl.formatMessage({
-    defaultMessage: 'Menu',
-    id: 'z3VuE+',
-    description: 'Menu label',
-  });
-
-  const menuProps: IContextualMenuProps = {
-    items: [
-      {
-        key: ContextMenuKeys.DELETE,
-        name: deleteButton,
-        icon: 'Delete',
-      },
-    ],
-    onItemClick(_, menuItem) {
-      if (menuItem && menuItem.key === ContextMenuKeys.DELETE) {
-        onDeleteItem(itemKey);
-      }
-    },
-  };
-
-  return (
-    <TooltipHost content={menuButton}>
-      <IconButton
-        ariaLabel={menuButton}
-        className="msla-array-item-contextbutton"
-        disabled={disabled}
-        iconProps={menuButtonIconProps}
-        styles={menuButtonStyles}
-        menuProps={menuProps}
-      />
-    </TooltipHost>
-  );
-};
diff --git a/libs/designer-ui/src/lib/arrayeditor/removeitembutton.tsx b/libs/designer-ui/src/lib/arrayeditor/removeitembutton.tsx
@@ -0,0 +1,42 @@
+import { Button, Tooltip } from '@fluentui/react-components';
+import { useIntl } from 'react-intl';
+
+import { bundleIcon, Delete24Filled, Delete24Regular } from '@fluentui/react-icons';
+
+const DeleteIcon = bundleIcon(Delete24Filled, Delete24Regular);
+
+interface RemoveItemButtonProps {
+  disabled: boolean;
+  itemKey: number;
+  visible: boolean;
+  onClick(itemKey: number): void;
+}
+
+export const RemoveItemButton = ({ disabled, itemKey, visible, onClick }: RemoveItemButtonProps): JSX.Element | null => {
+  const intl = useIntl();
+  if (!visible) {
+    return null;
+  }
+
+  const removeItemTooltip = intl.formatMessage(
+    {
+      defaultMessage: `Remove parameter ''{itemKey}'' and its value`,
+      id: 'zWpl5p',
+      description:
+        'Tooltip for button to remove array item. Do not remove the double single quotes around the display name, as it is needed to wrap the placeholder text.',
+    },
+    { itemKey: (itemKey + 1).toString() }
+  );
+
+  return (
+    <Tooltip relationship="label" content={removeItemTooltip}>
+      <Button
+        appearance="subtle"
+        disabled={disabled}
+        onClick={() => onClick(itemKey)}
+        icon={<DeleteIcon />}
+        style={{ color: 'var(--colorBrandForeground1)', height: '32px' }}
+      />
+    </Tooltip>
+  );
+};