microsoftgraph · gavinbarron · Mar 29, 2023 · Feb 20, 2023 · Feb 21, 2023 · Feb 21, 2023
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -1,5 +1,8 @@
-import { makeDecorator } from '@storybook/addons';
+import addons, { makeDecorator } from '@storybook/addons';
+
+import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
 import { EditorElement } from './editor';
+import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from '../../env';
 
 const mgtScriptName = './mgt.storybook.js';
 
@@ -154,6 +157,7 @@ export const withCodeEditor = makeDecorator({
         }
       }
     }
+
     const themeToggleCss = disableThemeToggle
       ? ''
       : `
@@ -177,12 +181,33 @@ export const withCodeEditor = makeDecorator({
         <mgt-theme-toggle mode="light"></mgt-theme-toggle>
       </header>
 `;
-    const loadEditorContent = () => {
-      let providerInitCode = `
-        import {Providers, MockProvider} from "${mgtScriptName}";
-        Providers.globalProvider = new MockProvider(true);
-      `;
 
+    let providerInitCode = `
+      import {Providers, MockProvider} from "${mgtScriptName}";
+      Providers.globalProvider = new MockProvider(true);
+    `;
+
+    const channel = addons.getChannel();
+    channel.on(SETPROVIDER_EVENT, params => {
+      if (params.state === ProviderState.SignedIn && params.name === 'MgtMockProvider') {
+        providerInitCode = `
+          import { Providers, MockProvider } from "${mgtScriptName}";
+          Providers.globalProvider = new MockProvider(true);
+        `;
+      } else if (params.state === ProviderState.SignedIn && params.name === 'MgtMsal2Provider') {
+        providerInitCode = `
+          import { Providers, Msal2Provider, LoginType } from "${mgtScriptName}";
+          Providers.globalProvider = new Msal2Provider({
+            clientId: "${CLIENTID}",
+            loginType: LoginType.Popup,
+            redirectUri: "${window.location.origin}/${AUTH_PAGE}"
+          });`;
+      }
+
+      loadEditorContent();
+    });
+
+    const loadEditorContent = () => {
       const storyElement = document.createElement('iframe');
 
       storyElement.addEventListener(
@@ -201,8 +226,7 @@ export const withCodeEditor = makeDecorator({
             <head>
               <script type="module" src="${mgtScriptName}"></script>
               <script type="module">
-                import {Providers, MockProvider} from "${mgtScriptName}";
-                Providers.globalProvider = new MockProvider(true);
+                ${providerInitCode}
               </script>
               <style>
                 html, body {

diff --git a/.storybook/addons/signInAddon/signInAddon.js b/.storybook/addons/signInAddon/signInAddon.js
diff --git a/.storybook/env.js b/.storybook/env.js
@@ -1,3 +1,4 @@
-export const CLIENTID = 'ac77046c-156c-40f0-8507-3b5a58034582';
+export const CLIENTID = '6b5a42f1-9e1a-4a20-9df2-9b058df3c213';
 export const GETPROVIDER_EVENT = 'mgt/getProvider';
 export const SETPROVIDER_EVENT = 'mgt/setProvider';
+export const AUTH_PAGE = 'blank.html';
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -11,13 +11,10 @@
   <a tabindex="-1" href="https://privacy.microsoft.com/en-us/privacystatement">Privacy & cookies</a>
   <a tabindex="-1" href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default">Term of use</a>
 </footer>
-<script type="module">
-  import { PACKAGE_VERSION } from './mgt.storybook.js'
-  document.getElementById('mgt-version').innerText = PACKAGE_VERSION;
-</script>
 
 <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script>
 <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
+<script type="module" src="https://unpkg.com/@fluentui/web-components@2"></script>
 <script type="text/javascript">
   const xmlns = "http://www.w3.org/2000/svg";
 

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -6,88 +6,126 @@
  */
 
 import { addons, types } from '@storybook/addons';
-import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events';
-
 import theme from './theme';
 
-// import React, { useState } from 'react';
-// import { AddonPanel } from '@storybook/components';
-// import { useParameter, useChannel } from '@storybook/api';
-// import { Providers, LoginType, MsalProvider } from '../packages/mgt/dist/es6';
-// import { CLIENTID, GETPROVIDER_EVENT, SETPROVIDER_EVENT } from './env';
-
-// const PARAM_KEY = 'signInAddon';
-// const _allow_signin = false;
-
-// const msalProvider = new MsalProvider({
-//   clientId: CLIENTID,
-//   loginType: LoginType.Popup
-// });
-
-// Providers.globalProvider = msalProvider;
-
-// const SignInPanel = () => {
-//   const value = useParameter(PARAM_KEY, null);
-
-//   const [state, setState] = useState(Providers.globalProvider.state);
-
-//   const emit = useChannel({
-//     STORY_RENDERED: id => {
-//       console.log('storyRendered', id);
-//     },
-//     [GETPROVIDER_EVENT]: params => {
-//       emitProvider(state);
-//     }
-//   });
-
-//   const emitProvider = loginState => {
-//     emit(SETPROVIDER_EVENT, { state: loginState });
-//   };
-
-//   Providers.onProviderUpdated(() => {
-//     setState(Providers.globalProvider.state);
-//     emitProvider(Providers.globalProvider.state);
-//   });
-
-//   emitProvider(state);
-
-//   return (
-//     <div>
-//       {_allow_signin ? (
-//         <mgt-login />
-//       ) : (
-//           'All components are using mock data - sign in function will be available in a future release'
-//         )}
-//     </div>
-//   );
-// };
+import React, { useState } from 'react';
+import { useChannel } from '@storybook/api';
+import { Providers } from '../packages/mgt-element/dist/es6/providers/Providers';
+import { ProviderState, LoginType } from '../packages/mgt-element/dist/es6/providers/IProvider';
+import { Msal2Provider } from '../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider';
+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';
+
+const isLoginEnabled = () => {
+  const urlParams = new window.URL(window.location.href).searchParams;
+  const canLogin = urlParams.get('login');
+
+  return canLogin === 'true';
+};
+
+const getClientId = () => {
+  const urlParams = new window.URL(window.location.href).searchParams;
+  const customClientId = urlParams.get('clientId');
+
+  return isLoginEnabled() && customClientId ? customClientId : CLIENTID;
+};
+
+document.getElementById('mgt-version').innerText = PACKAGE_VERSION;
+
+const mockProvider = new MockProvider(true);
+const msal2Provider = new Msal2Provider({
+  clientId: getClientId(),
+  redirectUri: window.location.origin + '/' + AUTH_PAGE,
+  scopes: [
+    // capitalize all words in the scope
+    'user.read',
+    'user.read.all',
+    'mail.readBasic',
+    'people.read',
+    'people.read.all',
+    'sites.read.all',
+    'user.readbasic.all',
+    'contacts.read',
+    'presence.read',
+    'presence.read.all',
+    'tasks.readwrite',
+    'tasks.read',
+    'calendars.read',
+    'group.read.all',
+    'files.read',
+    'files.read.all',
+    'files.readwrite',
+    'files.readwrite.all'
+  ],
+  loginType: LoginType.Popup
+});
+
+Providers.globalProvider = msal2Provider;
+
+const SignInPanel = () => {
+  const [state, setState] = useState(Providers.globalProvider.state);
+  const [loginEnabled] = useState(isLoginEnabled());
+
+  const emit = useChannel({
+    STORY_RENDERED: id => {
+      console.log('storyRendered', id);
+    }
+  });
+
+  const emitProvider = loginState => {
+    if (Providers.globalProvider.state === ProviderState.SignedOut && Providers.globalProvider !== mockProvider) {
+      emit(SETPROVIDER_EVENT, { state: loginState, provider: mockProvider, name: 'MgtMockProvider' });
+    } else {
+      emit(SETPROVIDER_EVENT, { state: loginState, provider: msal2Provider, name: 'MgtMsal2Provider' });
+    }
+  };
+
+  Providers.onProviderUpdated(() => {
+    setState(Providers.globalProvider.state);
+    emitProvider(Providers.globalProvider.state);
+  });
+
+  const onSignOut = () => {
+    Providers.globalProvider.logout();
+  };
+
+  emitProvider(state);
+
+  return (
+    <>
+      {loginEnabled && (
+        <>
+          {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>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+};
 
 addons.setConfig({
   enableShortcuts: false,
   theme
 });
 
 addons.register('microsoft/graph-toolkit', storybookAPI => {
-  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
-    if (storybookAPI.getUrlState().path === '/story/*') {
-      storybookAPI.selectStory('mgt-login', 'login');
-    }
-  });
+  const render = ({ active }) => <SignInPanel />;
 
-  storybookAPI.on(STORY_MISSING, (kind, story) => {
-    storybookAPI.selectStory('mgt-login', 'login');
+  addons.add('mgt/sign-in', {
+    type: types.TOOLEXTRA,
+    title: 'Sign In',
+    match: ({ viewMode }) => true,
+    render
   });
-
-  // const render = ({ active, key }) => (
-  //   <AddonPanel active={active} key={key}>
-  //     <SignInPanel />
-  //   </AddonPanel>
-  // );
-
-  // addons.add('mgt/sign-in', {
-  //   type: types.PANEL,
-  //   title: 'Sign In',
-  //   render,
-  //   paramKey: PARAM_KEY
-  // });
 });
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -6,7 +6,6 @@
     "bierner.lit-html",
     "esbenp.prettier-vscode",
     "rebornix.project-snippets",
-    "ms-vscode.vscode-typescript-tslint-plugin",
-    "msjsdiag.debugger-for-edge"
+    "ms-vscode.vscode-typescript-tslint-plugin"
   ]
 }
diff --git a/assets/blank.html b/assets/blank.html
@@ -0,0 +1,7 @@
+<html>
+  <head>
+    <script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
+    <mgt-msal2-provider client-id="6b5a42f1-9e1a-4a20-9df2-9b058df3c213"></mgt-msal2-provider>
+  </head>
+  <body></body>
+</html>
diff --git a/assets/sw.js b/assets/sw.js
@@ -4,16 +4,16 @@ if (!self.define) {
   const n = (n, e) => (
     (n = new URL(n + '.js', e).href),
     i[n] ||
-    new Promise(i => {
-      if ('document' in self) {
-        const c = document.createElement('script');
-        (c.src = n), (c.onload = i), document.head.appendChild(c);
-      } else (c = n), importScripts(n), i();
-    }).then(() => {
-      let c = i[n];
-      if (!c) throw new Error(`Module ${n} didn’t register its module`);
-      return c;
-    })
+      new Promise(i => {
+        if ('document' in self) {
+          const c = document.createElement('script');
+          (c.src = n), (c.onload = i), document.head.appendChild(c);
+        } else (c = n), importScripts(n), i();
+      }).then(() => {
+        let c = i[n];
+        if (!c) throw new Error(`Module ${n} didn’t register its module`);
+        return c;
+      })
   );
   self.define = (e, o) => {
     const f = c || ('document' in self ? document.currentScript.src : '') || location.href;
@@ -32,7 +32,6 @@ define(['./workbox-dae083bf'], function (c) {
     c.precacheAndRoute(
       [
         { url: 'favicon.png', revision: '1bc73a93f5aa3c02fe25899cf0a2e10d' },
-        { url: 'github.png', revision: 'a2f37fc5d3cdf6e15dd31e5a16050b93' },
         { url: 'graff.png', revision: '374e94d8e3aed9fa88a9923e5eaacea2' },
         { url: 'icons/100x100-icon.png', revision: 'fba112b56be61bcb1ade15c2f96fe129' },
         { url: 'icons/1024x1024-icon.png', revision: 'b1cfd1dd029d2fbde88ff06c573dc290' },
@@ -98,8 +97,7 @@ define(['./workbox-dae083bf'], function (c) {
         { url: 'icons/96x96-icon.png', revision: '521fb6b0d2e5e477b71c5dac1b022b9c' },
         { url: 'manifest.json', revision: 'ee016e1fe5c51f6cca2a570d121c33b8' },
         { url: 'mgt.png', revision: '0a1f53f06c9711cf7d83128cd76e7f8e' },
-        { url: 'mgt.storybook.js', revision: 'bebf2959d77ab8a92a7afa4f4780472a' },
-        { url: 'npm.png', revision: '2f06f214d1f56e962303c702f8186d6f' }
+        { url: 'mgt.storybook.js', revision: 'bebf2959d77ab8a92a7afa4f4780472a' }
       ],
       { ignoreURLParametersMatching: [/^utm_/, /^fbclid$/] }
     );