fix(designer): Do not show label for array editor in collapsed view (#…

…4932)

* fix(designer): Do not show label for array editor in collapsed view

* Removing hard coded id from formatMessage

* Fixing id from formatMessage

* fix(designer): Adding editorOptions for array editor with initial mode set

---------

Co-authored-by: Priti Sambandam <psamband@microsoft.com>

Localize/lang/strings.json

@@ -1849,6 +1849,7 @@
   "_aAXnqw.comment": "Required number of occurrences to get nthIndexOf function with",
   "_aE+2gr.comment": "Short label to represent when a condition is not met.",
   "_aGyVJT.comment": "Required number parameter to get number of objects to remove for skip function",
+  "_aIGEjB.comment": "Label for multi auth options",
   "_aK4iLW.comment": "title for data handling setting section",
   "_aP1wk9.comment": "Label for the description of a custom 'indexOf' function",
   "_aSnCCB.comment": "Header for resource lcoation",
@@ -2497,6 +2498,7 @@
   "aAXnqw": "Required. The number of the occurrence of the substring to find.",
   "aE+2gr": "False",
   "aGyVJT": "Required. The number of objects to remove from the front of Collection. Must be a positive integer.",
+  "aIGEjB": "Authentication Type",
   "aK4iLW": "Data Handling",
   "aP1wk9": "Returns the first index of a value within a string (case-insensitive, invariant culture)",
   "aSnCCB": "Location",

libs/designer-ui/src/lib/arrayeditor/arrayeditor.less

@@ -17,7 +17,7 @@
     flex: 1 1 100%;
 
     &.msla-array-editor-collapsed {
-      padding: 10px 0px 25px @padding;
+      padding: 10px 0px 10px @padding;
 
       .msla-input-parameter-label {
         align-self: center;

libs/designer-ui/src/lib/arrayeditor/index.tsx

@@ -16,6 +16,11 @@ export const ArrayType = {
   COMPLEX: 'complex',
   SIMPLE: 'simple',
 } as const;
+export const InitialMode = {
+  Array: 'array',
+  Items: 'items',
+};
+
 export type ArrayType = (typeof ArrayType)[keyof typeof ArrayType];
 
 export interface ArrayItemSchema {
@@ -57,6 +62,7 @@ export interface ArrayEditorProps extends BaseEditorProps {
   itemSchema: ArrayItemSchema;
   arrayType: ArrayType;
   castParameter: CastHandler;
+  initialMode?: string;
   // Props for dynamic options
   isLoading?: boolean;
   options?: ComboboxItem[];
@@ -70,6 +76,7 @@ export const ArrayEditor: React.FC<ArrayEditorProps> = ({
   disableToggle = false,
   initialValue,
   arrayType,
+  initialMode,
   labelProps,
   itemSchema,
   placeholder,
@@ -79,7 +86,7 @@ export const ArrayEditor: React.FC<ArrayEditorProps> = ({
   suppressCastingForSerialize,
   ...baseEditorProps
 }): JSX.Element => {
-  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [collapsed, setCollapsed] = useState<boolean>(initialMode === InitialMode.Array);
   const [collapsedValue, setCollapsedValue] = useState<ValueSegment[]>(initialValue);
   const [items, setItems] = useState<ComplexArrayItems[] | SimpleArrayItem[]>([]);
   const [isValid, setIsValid] = useState<boolean>(false);
@@ -159,7 +166,6 @@ export const ArrayEditor: React.FC<ArrayEditorProps> = ({
       {collapsed ? (
         <CollapsedArray
           {...baseEditorProps}
-          labelProps={labelProps}
           isValid={isValid}
           collapsedValue={collapsedValue}
           itemSchema={itemSchema}

libs/designer-ui/src/lib/settings/settingsection/settingTokenField.tsx

@@ -116,6 +116,7 @@ export const TokenField = ({
         <ArrayEditor
           labelId={labelId}
           arrayType={editorViewModel.arrayType}
+          initialMode={editorOptions?.initialMode}
           labelProps={{ text: label ? `${label} Item` : 'Array Item' }}
           placeholder={placeholder}
           readonly={readOnly}

libs/designer/src/lib/core/utils/parameters/helper.ts

@@ -461,6 +461,12 @@ export function getParameterEditorProps(
     };
   } else if (editor === constants.EDITOR.FLOATINGACTIONMENU && editorOptions?.menuKind === FloatingActionMenuKind.outputs) {
     editorViewModel = toFloatingActionMenuOutputsViewModel(value);
+  } else if (editor === constants.EDITOR.ARRAY) {
+    if (itemSchema) {
+      editorViewModel = { ...toArrayViewModelSchema(itemSchema), uncastedValue: parameterValue };
+    } else {
+      editor = undefined;
+    }
   } else if (!editor) {
     if (format === constants.EDITOR.HTML) {
       editor = constants.EDITOR.HTML;

libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/formInputs/connectionMultiAuth.tsx

@@ -2,6 +2,7 @@ import { Dropdown } from '@fluentui/react';
 import type { ConnectionParameterSets } from '@microsoft/logic-apps-shared';
 import type { FormEvent } from 'react';
 import { Label } from '@microsoft/designer-ui';
+import { useIntl } from 'react-intl';
 
 export interface ConnectionMultiAuthInputProps {
   isLoading: boolean;
@@ -11,12 +12,18 @@ export interface ConnectionMultiAuthInputProps {
 }
 
 const ConnectionMultiAuthInput = ({ isLoading, value, onChange, connectionParameterSets }: ConnectionMultiAuthInputProps) => {
+  const intl = useIntl();
+  const authType = intl.formatMessage({
+    id: 'aIGEjB',
+    defaultMessage: 'Authentication Type',
+    description: 'Label for multi auth options',
+  });
   return (
     <div className="param-row">
       <Label
         className="label"
         isRequiredField={true}
-        text={connectionParameterSets?.uiDefinition?.displayName ?? ''}
+        text={connectionParameterSets?.uiDefinition?.displayName ?? authType}
         htmlFor={'connection-param-set-select'}
         disabled={isLoading}
       />