fix: disambiguated tagname and query selectors (#2475)

moves fixed mgt tag selectors to class selectors
updates tagname mathes to use disambiguated prefix
fixes an issue for type checking for collection responses
fixes an import for ifDefined

Author: gavinbarron

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

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { MgtTemplatedComponent, mgtHtml } from '@microsoft/mgt-element';
+import { MgtTemplatedComponent, customElementHelper, mgtHtml } from '@microsoft/mgt-element';
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -210,7 +210,7 @@ export abstract class BasePersonCardSection extends MgtTemplatedComponent implem
       parent = parent.parentNode;
 
       const shadowRoot = parent as ShadowRoot;
-      if (shadowRoot?.host?.tagName === 'MGT-PERSON-CARD') {
+      if (shadowRoot?.host?.tagName === `${customElementHelper.prefix}-PERSON-CARD`.toUpperCase()) {
         parent = shadowRoot.host;
         break;
       }

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -645,7 +645,7 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
       this.renderTemplate('no-data', null) ||
       (this.enableFileUpload === true && Providers.globalProvider !== undefined
         ? html`
-            <div id="file-list-wrapper" class="file-list-wrapper" dir=${this.direction}>
+            <div class="file-list-wrapper" dir=${this.direction}>
               ${this.renderFileUpload()}
             </div>`
         : html``)
@@ -979,7 +979,7 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
     } else {
       if (this.pageIterator.hasNext) {
         this._isLoadingMore = true;
-        const root = this.renderRoot.querySelector('file-list-wrapper');
+        const root = this.renderRoot.querySelector('#file-list-wrapper');
         if (root?.animate) {
           // play back
           root.animate(

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

@@ -37,7 +37,7 @@ type ImageValue = { image: string };
  * @returns {boolean} true if the value is a collection response
  */
 export const isCollectionResponse = (value: unknown): value is CollectionResponse<unknown> =>
-  Array.isArray((value as CollectionResponse<unknown>).value);
+  Array.isArray((value as CollectionResponse<unknown>)?.value);
 
 /**
  * Enumeration to define what types of query are available

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -14,7 +14,8 @@ import {
   ProviderState,
   TeamsHelper,
   mgtHtml,
-  customElement
+  customElement,
+  customElementHelper
 } from '@microsoft/mgt-element';
 import { IGraph } from '@microsoft/mgt-element';
 import { Presence, User, Person } from '@microsoft/microsoft-graph-types';
@@ -973,7 +974,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     if (!this.personDetails && this.inheritDetails) {
       // User person details inherited from parent tree
       let parent = this.parentElement;
-      while (parent && parent.tagName !== 'MGT-PERSON') {
+      while (parent && parent.tagName !== `${customElementHelper.prefix}-PERSON`.toUpperCase()) {
         parent = parent.parentElement;
       }
 

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

@@ -5,7 +5,14 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { MgtTemplatedComponent, ProviderState, Providers, customElement, mgtHtml } from '@microsoft/mgt-element';
+import {
+  MgtTemplatedComponent,
+  ProviderState,
+  Providers,
+  customElement,
+  customElementHelper,
+  mgtHtml
+} from '@microsoft/mgt-element';
 import { Contact, Presence } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -1015,6 +1022,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       this.renderTemplate('person-card', { person: personDetails, personImage: image }) ||
       mgtHtml`
         <mgt-person-card
+          class="mgt-person-card"
           lock-tab-navigation
           .personDetails=${personDetails}
           .personImage=${image}
@@ -1257,7 +1265,11 @@ export class MgtPerson extends MgtTemplatedComponent {
 
   private readonly handleMouseClick = (e: MouseEvent) => {
     const element = e.target as HTMLElement;
-    if (this.personCardInteraction === PersonCardInteraction.click && element.tagName !== 'MGT-PERSON-CARD') {
+    // todo: fix for disambiguation
+    if (
+      this.personCardInteraction === PersonCardInteraction.click &&
+      element.tagName !== `${customElementHelper.prefix}-PERSON-CARD`.toUpperCase()
+    ) {
       this.showPersonCard();
     }
   };
@@ -1297,7 +1309,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       flyout.close();
     }
     const personCard =
-      this.querySelector<MgtPersonCard>('mgt-person-card') || this.renderRoot.querySelector('mgt-person-card');
+      this.querySelector<MgtPersonCard>('.mgt-person-card') || this.renderRoot.querySelector('.mgt-person-card');
     if (personCard) {
       personCard.isExpanded = false;
       personCard.clearHistory();

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

@@ -260,6 +260,7 @@ export class MgtPicker extends MgtTemplatedComponent {
   protected renderGet(): TemplateResult {
     return mgtHtml`
       <mgt-get
+        class="mgt-get"
         resource=${this.resource}
         version=${this.version}
         .scopes=${this.scopes}
@@ -278,8 +279,14 @@ export class MgtPicker extends MgtTemplatedComponent {
    */
   protected async loadState() {
     if (!this.response) {
-      const parent = this.renderRoot.querySelector('mgt-get');
-      parent.addEventListener('dataChange', (e: CustomEvent<DataChangedDetail>): void => this.handleDataChange(e));
+      const parent = this.renderRoot.querySelector('.mgt-get');
+      if (parent) {
+        parent.addEventListener('dataChange', (e: CustomEvent<DataChangedDetail>): void => this.handleDataChange(e));
+      } else {
+        console.error(
+          '🦒: mgt-picker component requires a child mgt-get component. Something has gone horribly wrong.'
+        );
+      }
     }
     this.isRefreshing = false;
     // hack to maintain method signature contract

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

@@ -400,7 +400,8 @@ export class MgtTaxonomyPicker extends MgtTemplatedComponent {
     resource += '?$select=id,labels,descriptions,properties';
 
     return mgtHtml`
-      <mgt-get 
+      <mgt-get
+        class="mgt-get"
         resource=${resource}
         version=${this.version} 
         scopes=${['TermStore.Read.All']}  
@@ -418,7 +419,7 @@ export class MgtTaxonomyPicker extends MgtTemplatedComponent {
    */
   protected async loadState() {
     if (!this.terms) {
-      const parent = this.renderRoot.querySelector('mgt-get');
+      const parent = this.renderRoot.querySelector('.mgt-get');
       parent.addEventListener('dataChange', (e: CustomEvent<DataChangedDetail>): void => this.handleDataChange(e));
     }
     this.isRefreshing = false;

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

@@ -32,7 +32,7 @@ import { strings } from './strings';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { fluentCheckbox, fluentRadioGroup, fluentButton } from '@fluentui/web-components';
 import { isElementDark } from '../../utils/isDark';
-import { ifDefined } from 'lit/directives/if-defined';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 registerFluentComponents(fluentCheckbox, fluentRadioGroup, fluentButton);