fix for fallback-details overriding person-query (#2786)

Co-authored-by: Musale Martin <[email protected]>
microsoftgraph · Oct 19, 2023 · d27ffa7 · d27ffa7
1 parent 4b85be1
commit d27ffa7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -1091,11 +1091,7 @@ export class MgtPerson extends MgtTemplatedComponent {
 
     const graph = provider.graph.forComponent(this);
 
-    if (this.fallbackDetails) {
-      this.line2Property = 'email';
-    }
-
-    if (this.verticalLayout && this.view < ViewType.fourlines) {
+    if ((this.verticalLayout && this.view < ViewType.fourlines) || this.fallbackDetails) {
       this.line2Property = 'email';
     }
 
@@ -1109,8 +1105,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     ];
     personProps = personProps.filter(email => email !== 'email');
 
-    let details = this.personDetailsInternal || this.personDetails || this.fallbackDetails;
-
+    let details = this.personDetailsInternal || this.personDetails;
     if (details) {
       if (
         !details.personImage &&
@@ -1168,6 +1163,8 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
     }
 
+    details = details ? details : this.fallbackDetails;
+
     // populate presence
     const defaultPresence: Presence = {
       activity: 'Offline',
@@ -1177,7 +1174,6 @@ export class MgtPerson extends MgtTemplatedComponent {
 
     if (this.showPresence && !this.personPresence && !this._fetchedPresence) {
       try {
-        details = this.personDetailsInternal || this.personDetails;
         if (details) {
           // setting userId to 'me' ensures only the presence.read permission is required
           const userId = this.personQuery !== 'me' ? details?.id : null;

diff --git a/stories/components/person/person.properties.stories.js b/stories/components/person/person.properties.stories.js
@@ -46,21 +46,27 @@ export const setPersonDetails = () => html`
 
 export const personFallbackDetails = () => html`
    <div class="example">
-   <mgt-person person-query="mbowen" view="twoLines" fallback-details='{"displayName":"Megan Bowen"}'></mgt-person>
+   <mgt-person person-query="mbowen" view="twoLines" show-presence fallback-details='{"displayName":"Megan Bowen"}'></mgt-person>
  </div>
  <div class="example">
-   <mgt-person person-query="mbowen" view="twoLines"
+   <mgt-person person-query="mbowen" view="twoLines" show-presence
      fallback-details='{"mail":"[email protected]"}'></mgt-person>
  </div>
  <div class="example">
-   <mgt-person person-query="mbowen" view="twoLines"
+   <mgt-person person-query="mbowen" view="twoLines" show-presence
      fallback-details='{"mail":"[email protected]","displayName":"Megan Bowen"}'></mgt-person>
  </div>
  <!-- No Fallback details -->
  <div class="example">
-   <mgt-person person-query="mbowen" view="twoLines"
+   <mgt-person person-query="mbowen" view="twoLines" show-presence
      fallback-details='{}'></mgt-person>
  </div>
+<!-- Correct Person Query and Fallback Details -->
+ <div class="example">
+   <mgt-person person-query="bowen" view="twoLines" show-presence
+   fallback-details='{"mail":"[email protected]","displayName":"Someone"}'></mgt-person>
+ </div>
+ 
 
    <style>
    .example {