Merge pull request #2853 from microsoftgraph/merge/main-to-chat

merge main to next/mgt-chat
microsoftgraph · Nov 14, 2023 · d50ace9 · d50ace9
2 parents 63c72dc + 61da237
commit d50ace9
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 55 deletions.
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -218,6 +218,9 @@ export const withCodeEditor = makeDecorator({
       loadEditorContent();
     });
 
+    const componentRegistration = `
+    `;
+
     const loadEditorContent = () => {
       const storyElement = document.createElement('iframe');
 
@@ -238,6 +241,10 @@ export const withCodeEditor = makeDecorator({
           <html>
             <head>
               <script type="module" src="${resolveScript()}"></script>
+              <script type="module">
+                import { registerMgtComponents } from "${mgtScriptName}";
+                registerMgtComponents();
+              </script>
               <script type="module">
                 ${providerInitCode}
               </script>

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -16,21 +16,17 @@ import { Msal2Provider } from '../packages/providers/mgt-msal2-provider/dist/es6
 import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from './env';
 import { MockProvider } from '@microsoft/mgt-element';
 import { PACKAGE_VERSION } from '../packages/mgt-element/dist/es6/utils/version';
-import '../packages/mgt-components/dist/es6/components/mgt-login/mgt-login';
-import '../packages/mgt-components/dist/es6/components/mgt-person/mgt-person';
+import { registerMgtPersonComponent } from '../packages/mgt-components/dist/es6/components/mgt-person/mgt-person';
+import { registerMgtLoginComponent } from '../packages/mgt-components/dist/es6/components/mgt-login/mgt-login';
 
-const isLoginEnabled = () => {
-  const urlParams = new window.URL(window.location.href).searchParams;
-  const canLogin = urlParams.get('login');
-
-  return canLogin === 'true';
-};
+registerMgtPersonComponent();
+registerMgtLoginComponent();
 
 const getClientId = () => {
   const urlParams = new window.URL(window.location.href).searchParams;
   const customClientId = urlParams.get('clientId');
 
-  return isLoginEnabled() && customClientId ? customClientId : CLIENTID;
+  return customClientId ? customClientId : CLIENTID;
 };
 
 document.getElementById('mgt-version').innerText = PACKAGE_VERSION;
@@ -67,7 +63,6 @@ Providers.globalProvider = msal2Provider;
 
 const SignInPanel = () => {
   const [state, setState] = useState(Providers.globalProvider.state);
-  const [loginEnabled] = useState(isLoginEnabled());
 
   const emit = useChannel({
     STORY_RENDERED: id => {
@@ -96,18 +91,14 @@ const SignInPanel = () => {
 
   return (
     <>
-      {loginEnabled && (
+      {Providers.globalProvider.state !== ProviderState.SignedIn ? (
+        <mgt-login login-view="compact" style={{ marginTop: '3px' }}></mgt-login>
+      ) : (
         <>
-          {Providers.globalProvider.state !== ProviderState.SignedIn ? (
-            <mgt-login login-view="compact" style={{ marginTop: '3px' }}></mgt-login>
-          ) : (
-            <>
-              <mgt-person person-query="me" style={{ marginTop: '8px' }}></mgt-person>
-              <fluent-button appearance="lightweight" style={{ marginTop: '3px' }} onClick={onSignOut}>
-                Sign Out
-              </fluent-button>
-            </>
-          )}
+          <mgt-person person-query="me" style={{ marginTop: '8px' }}></mgt-person>
+          <fluent-button appearance="lightweight" style={{ marginTop: '3px' }} onClick={onSignOut}>
+            Sign Out
+          </fluent-button>
         </>
       )}
     </>

diff --git a/index.html b/index.html
@@ -11,12 +11,12 @@
 
     <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
-    <!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
+    <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
 
-    <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
+    <!-- <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
     <script type="module" src="./packages/mgt-components/dist/es6/index.js"></script>
     <script type="module" src="./packages/providers/mgt-msal2-provider/dist/es6/index.js"></script>
-    <script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script>
+    <script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script> -->
 
     <style>
       header {

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -1165,7 +1165,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
     }
 
-    details = details ? details : this.fallbackDetails;
+    details = this.personDetailsInternal || this.personDetails || this.fallbackDetails;
 
     // populate presence
     const defaultPresence: Presence = {

diff --git a/packages/mgt-components/src/index.ts b/packages/mgt-components/src/index.ts
@@ -4,10 +4,6 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtComponents } from './registerMgtComponents';
+export * from './registerMgtComponents';
 
 export * from './exports';
-
-// this side effect will register all components
-// this is to prevent a breaking change as we enable tree shaking
-registerMgtComponents();
diff --git a/packages/mgt/src/bundle/mgt-loader.js b/packages/mgt/src/bundle/mgt-loader.js
@@ -23,18 +23,26 @@
 
   var rootPath = getScriptPath();
 
+  function onScriptLoaded() {
+    console.log('script loaded');
+    // register all the components to ensure that they are available in the browser
+    mgt.registerMgtComponents();
+    mgt.registerMgtMockProvider();
+    mgt.registerMgtMsal2Provider();
+    mgt.registerMgtProxyProvider();
+  }
+
   // decide es5 or es6
   if (es6()) {
     window.WebComponents = window.WebComponents || {};
     window.WebComponents.root = rootPath + 'wc/';
 
     addScript(rootPath + 'wc/webcomponents-loader.js');
-    addScript(rootPath + 'mgt.es6.js');
+    addScript(rootPath + 'mgt.es6.js', onScriptLoaded);
   } else {
     // es5 bundle already includes all the polyfills
-    addScript(rootPath + 'mgt.es5.js');
+    addScript(rootPath + 'mgt.es5.js', onScriptLoaded);
   }
-
   function getScriptPath() {
     var scripts = document.getElementsByTagName('script');
     var path = scripts[scripts.length - 1].src.split('?')[0];
@@ -59,12 +67,10 @@
 
   function addScript(src, onload) {
     var tag = document.createElement('script');
+    document.head.append(tag);
+    if (onload) {
+      tag.addEventListener('load', onload);
+    }
     tag.src = src;
-
-    // if (onload) {
-    //   tag.addEventListener("load", onload);
-    // }
-
-    document.write(tag.outerHTML);
   }
 })();
diff --git a/packages/mgt/src/exports.ts b/packages/mgt/src/exports.ts
@@ -0,0 +1,13 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export * from '@microsoft/mgt-element';
+export * from '@microsoft/mgt-components';
+export * from '@microsoft/mgt-proxy-provider';
+export * from '@microsoft/mgt-sharepoint-provider';
+export * from '@microsoft/mgt-msal2-provider';
+export * from '@microsoft/mgt-mock-provider';
diff --git a/packages/mgt/src/index.ts b/packages/mgt/src/index.ts
@@ -5,9 +5,4 @@
  * -------------------------------------------------------------------------------------------
  */
 
-export * from '@microsoft/mgt-element';
-export * from '@microsoft/mgt-components';
-export * from '@microsoft/mgt-proxy-provider';
-export * from '@microsoft/mgt-sharepoint-provider';
-export * from '@microsoft/mgt-msal2-provider';
-export * from '@microsoft/mgt-mock-provider';
+export * from './exports';
diff --git a/packages/providers/mgt-mock-provider/src/index.ts b/packages/providers/mgt-mock-provider/src/index.ts
@@ -4,8 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtMockProvider } from './mgt-mock-provider';
-
-registerMgtMockProvider();
-
+export * from './mgt-mock-provider';
 export * from './mgt-mock-provider';
diff --git a/packages/providers/mgt-msal2-provider/src/index.ts b/packages/providers/mgt-msal2-provider/src/index.ts
@@ -4,6 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtMsal2Provider } from './mgt-msal2-provider';
-registerMgtMsal2Provider();
+export * from './mgt-msal2-provider';
 export * from './exports';
diff --git a/packages/providers/mgt-proxy-provider/src/index.ts b/packages/providers/mgt-proxy-provider/src/index.ts
@@ -4,8 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtProxyProvider } from './mgt-proxy-provider';
-
-registerMgtProxyProvider();
-
+export * from './mgt-proxy-provider';
 export * from './exports';