Fixes bundle by moving back to @FluentUI\web-components 0.22 (#1314)

* undo mgt-loader fixes

* downgraded to @fluentui/[email protected]

* export file-upload

Co-authored-by: Beth Pan <[email protected]>

Author: nmetulev

packages/mgt-components/package.json

@@ -40,7 +40,7 @@
     "@microsoft/microsoft-graph-client": "^2.2.1",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.15.0-preview",
-    "@fluentui/web-components": "^1.3.3",
+    "@fluentui/web-components": "0.22.1",
     "office-ui-fabric-core": "11.0.0"
   },
   "publishConfig": {

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

@@ -41,10 +41,13 @@ import { strings } from './strings';
 import { MgtFile } from '../mgt-file/mgt-file';
 import { MgtFileUploadConfig } from './mgt-file-upload/mgt-file-upload';
 
-import { fluentProgressRing } from '@fluentui/web-components';
-import { registerFluentComponents } from '../../utils/FluentComponents';
+export { FluentDesignSystemProvider, FluentProgressRing } from '@fluentui/web-components';
+export * from './mgt-file-upload/mgt-file-upload';
 
-registerFluentComponents(fluentProgressRing);
+// import { fluentProgressRing } from '@fluentui/web-components';
+// import { registerFluentComponents } from '../../utils/FluentComponents';
+
+// registerFluentComponents(fluentProgressRing);
 
 /**
  * The File List component displays a list of multiple folders and files by
@@ -573,6 +576,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    */
   protected renderFiles(): TemplateResult {
     return html`
+    <fluent-design-system-provider use-defaults>
       <div id="file-list-wrapper" class="file-list-wrapper" dir=${this.direction}>
         ${this.enableFileUpload ? this.renderFileUpload() : null}
         <ul
@@ -599,6 +603,7 @@ export class MgtFileList extends MgtTemplatedComponent {
             : null
         }
       </div>
+    </fluent-design-system-provider>
     `;
   }
 

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

@@ -22,10 +22,12 @@ import {
   deleteSessionFile
 } from '../../../graph/graph.files';
 
-import { registerFluentComponents } from '../../../utils/FluentComponents';
-import { fluentButton, fluentCheckbox, fluentProgress } from '@fluentui/web-components';
+export { FluentProgress, FluentButton, FluentCheckbox } from '@fluentui/web-components';
 
-registerFluentComponents(fluentProgress, fluentButton, fluentCheckbox);
+// import { registerFluentComponents } from '../../../utils/FluentComponents';
+// import { fluentButton, fluentCheckbox, fluentProgress } from '@fluentui/web-components';
+
+// registerFluentComponents(fluentProgress, fluentButton, fluentCheckbox);
 
 /**
  * Upload conflict behavior status

packages/mgt-components/src/utils/FluentComponents.ts

@@ -1,23 +1,23 @@
-import { provideFluentDesignSystem } from '@fluentui/web-components';
+// import { provideFluentDesignSystem } from '@fluentui/web-components';
 
-const designSystem = provideFluentDesignSystem();
+// const designSystem = provideFluentDesignSystem();
 
-export const registerFluentComponents = (...fluentComponents) => {
-  if (!fluentComponents || !fluentComponents.length) {
-    return;
-  }
+// export const registerFluentComponents = (...fluentComponents) => {
+//   if (!fluentComponents || !fluentComponents.length) {
+//     return;
+//   }
 
-  const registry = {
-    register(container: any) {
-      if (!container) {
-        return;
-      }
+//   const registry = {
+//     register(container: any) {
+//       if (!container) {
+//         return;
+//       }
 
-      for (const component of fluentComponents) {
-        component().register(container);
-      }
-    }
-  };
+//       for (const component of fluentComponents) {
+//         component().register(container);
+//       }
+//     }
+//   };
 
-  designSystem.register(registry);
-};
+//   designSystem.register(registry);
+// };

packages/mgt/src/bundle/mgt-loader.js

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-(async function () {
+(function () {
   'use strict';
 
   var rootPath = getScriptPath();
@@ -15,8 +15,6 @@
     window.WebComponents = window.WebComponents || {};
     window.WebComponents.root = rootPath + 'wc/';
 
-    await waitUntilReady();
-
     addScript(rootPath + 'wc/webcomponents-loader.js');
     addScript(rootPath + 'mgt.es6.js');
   } else {
@@ -50,19 +48,6 @@
     return true;
   }
 
-  function waitUntilReady() {
-
-    return new Promise(function (resolve, reject) {
-      if (document.body) {
-        resolve();
-      }
-
-      document.addEventListener('DOMContentLoaded', function () {
-        resolve();
-      })
-    });
-  };
-
   function addScript(src, onload) {
     // TODO: support async loading
 
@@ -73,7 +58,7 @@
     //   tag.addEventListener("load", onload);
     // }
 
-    // document.write(tag.outerHTML);
-    document.head.appendChild(tag);
+    document.write(tag.outerHTML);
+    // document.head.appendChild(tag);
   }
 })();