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 } from '../../env';
 
 const mgtScriptName = './mgt.storybook.js';
 
@@ -65,8 +68,7 @@ export const withCodeEditor = makeDecorator({
   name: `withCodeEditor`,
   parameterName: 'myParameter',
   skipIfNoParametersOrOptions: false,
-  wrapper: (getStory, context, { options }) => {
-    const disableThemeToggle = options ? options.disableThemeToggle : false;
+  wrapper: (getStory, context, { parameters }) => {
     let story = getStory(context);
 
     let storyHtml;
@@ -154,35 +156,32 @@ export const withCodeEditor = makeDecorator({
         }
       }
     }
-    const themeToggleCss = disableThemeToggle
-      ? ''
-      : `
-      body {
-        background-color: var(--neutral-fill-rest);
-        color: var(--neutral-foreground-rest);
-        font-family: var(--body-font);
-        padding: 0 12px;
-      }
-      header {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        padding: 0 0 12px 0;
+
+    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
+          });`;
       }
-`;
-    const themeToggle = disableThemeToggle
-      ? ''
-      : `
-      <header>
-        <mgt-theme-toggle mode="light"></mgt-theme-toggle>
-      </header>
-`;
-    const loadEditorContent = () => {
-      let providerInitCode = `
-        import {Providers, MockProvider} from "${mgtScriptName}";
-        Providers.globalProvider = new MockProvider(true);
-      `;
 
+      loadEditorContent();
+    });
+
+    const loadEditorContent = () => {
       const storyElement = document.createElement('iframe');
 
       storyElement.addEventListener(
@@ -201,19 +200,16 @@ 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 {
                   height: 100%;
                 }
-                ${themeToggleCss}
                 ${css}
               </style>
             </head>
             <body>
-              ${themeToggle}
               ${html}
               <script type="module">
                 ${js}

diff --git a/.storybook/addons/signInAddon/signInAddon.js b/.storybook/addons/signInAddon/signInAddon.js
@@ -1,11 +1,11 @@
 import addons, { makeDecorator } from '@storybook/addons';
 import { Providers } from '../../../packages/mgt-element/dist/es6/providers/Providers';
 import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
-import { MsalProvider } from '../../../packages/providers/mgt-msal-provider/dist/es6/MsalProvider';
+import { Msal2Provider } from '../../../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider';
 import { MockProvider } from '../../../packages/mgt-element/dist/es6/mock/MockProvider';
 import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from '../../env';
 
-const _allow_signin = false;
+const _allow_signin = true;
 
 export const withSignIn = makeDecorator({
   name: `withSignIn`,
@@ -14,16 +14,34 @@ export const withSignIn = makeDecorator({
   wrapper: (getStory, context, { parameters }) => {
     const mockProvider = new MockProvider(true);
 
-    Providers.globalProvider = mockProvider;
-
     const channel = addons.getChannel();
 
     channel.on(SETPROVIDER_EVENT, params => {
       if (_allow_signin) {
         const currentProvider = Providers.globalProvider;
         if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
-          Providers.globalProvider = new MsalProvider({
-            clientId: CLIENTID
+          Providers.globalProvider = new Msal2Provider({
+            clientId: CLIENTID,
+            scopes: [
+              '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'
+            ]
           });
         } else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {
           Providers.globalProvider = mockProvider;

diff --git a/.storybook/env.js b/.storybook/env.js
@@ -1,3 +1,3 @@
-export const CLIENTID = 'ac77046c-156c-40f0-8507-3b5a58034582';
+export const CLIENTID = '8c5e1ebf-9177-4a91-afb6-ee63fb7b2aef';
 export const GETPROVIDER_EVENT = 'mgt/getProvider';
 export const SETPROVIDER_EVENT = 'mgt/setProvider';
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,125 @@
  */
 
 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 } 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(),
+  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"
   ]
 }