feat: add support for nested values in mgt-picker key-name (#2917)

* add support for nested values in mgt-picker key-name

* add console warning to getNestedPropertyValue

packages/mgt-components/src/components/mgt-picker/mgt-picker.ts

@@ -249,14 +249,29 @@ export class MgtPicker extends MgtTemplatedTaskComponent {
         placeholder=${this.placeholder}>
           ${this.response.map(
             item => html`
-            <fluent-option value=${item.id} @click=${(e: MouseEvent) => this.handleClick(e, item)}> ${
-              item[this.keyName]
-            } </fluent-option>`
+            <fluent-option value=${item.id} @click=${(e: MouseEvent) =>
+              this.handleClick(e, item)}> ${this.getNestedPropertyValue(item, this.keyName)} </fluent-option>`
           )}
       </fluent-combobox>
      `;
   }
 
+  private getNestedPropertyValue(item: Entity, keyName: string) {
+    const keys = keyName.split('.');
+    let value: Entity | object | string = item;
+
+    for (const key of keys) {
+      value = value[key] as object | string;
+
+      if (value === undefined) {
+        console.warn(`mgt-picker: Key '${key}' is undefined.`);
+        return '';
+      }
+    }
+
+    return value;
+  }
+
   /**
    * Renders mgt-get which does a GET request to the resource.
    *