fix(MgtProfile): Fix handling of null values for educations & work positions (#2717)

improved nullish value handling for education and work, only render when data is present

---------

Co-authored-by: Michael Keller <[email protected]>
Co-authored-by: Gavin Barron <[email protected]>

Author: 3 people

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

@@ -5,8 +5,14 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { EducationalActivity, PersonAnnualEvent, PersonInterest, Profile } from '@microsoft/microsoft-graph-types-beta';
-import { html, TemplateResult } from 'lit';
+import {
+  EducationalActivity,
+  PersonAnnualEvent,
+  PersonInterest,
+  PhysicalAddress,
+  Profile
+} from '@microsoft/microsoft-graph-types-beta';
+import { html, TemplateResult, nothing } from 'lit';
 import { BasePersonCardSection } from '../BasePersonCardSection';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { styles } from './mgt-profile-css';
@@ -306,7 +312,7 @@ export class MgtProfile extends BasePersonCardSection {
                  ${position?.detail?.company?.displayName}
                </div>
                <div class="work-position__location" tabindex="0">
-                 ${position?.detail?.company?.address?.city}, ${position?.detail?.company?.address?.state}
+                 ${this.displayLocation(position?.detail?.company?.address)}
                </div>
              </div>
            </div>
@@ -351,11 +357,14 @@ export class MgtProfile extends BasePersonCardSection {
                ${this.getDisplayDateRange(educationalActivity)}
              </div>
            </div>
-           <div class="data-list__item__content">
-             <div class="educational-activity__degree" tabindex="0">
-               ${educationalActivity.program.displayName || 'Bachelors Degree'}
-             </div>
-           </div>
+           ${
+             educationalActivity.program.displayName
+               ? html`<div class="data-list__item__content">
+                  <div class="educational-activity__degree" tabindex="0">
+                  ${educationalActivity.program.displayName}
+                </div>`
+               : nothing
+           }
          </div>
        `);
     }
@@ -492,16 +501,32 @@ export class MgtProfile extends BasePersonCardSection {
     });
   }
 
-  private getDisplayDateRange(event: EducationalActivity): string {
+  private getDisplayDateRange(event: EducationalActivity): string | symbol {
+    // if startMonthYear is not defined, we do not show the date range (otherwise it will always start with 1970)
+    if (!event.startMonthYear) {
+      return nothing;
+    }
+
     const start = new Date(event.startMonthYear).getFullYear();
-    if (start === 0) {
-      return null;
+    // if the start year is 0 or 1 - it's probably an error or a strange "undefined"-value
+    if (start === 0 || start === 1) {
+      return nothing;
     }
 
     const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : this.strings.currentYearSubtitle;
     return `${start} — ${end}`;
   }
 
+  private displayLocation(address: PhysicalAddress | undefined): string | symbol {
+    if (address?.city) {
+      if (address.state) {
+        return `${address.city}, ${address.state}`;
+      }
+      return address.city;
+    }
+    return nothing;
+  }
+
   private initPostRenderOperations(): void {
     setTimeout(() => {
       try {