feat: Support for new component mgt-search-results (#2047)

* Adding the basic mgt-search capabilities

* Theming, templates and paging

* Updating index.html

* Added support for query templates and presence

* Support for Storybook auth with MGT

* Styling

* Support for params + custom client

* Adding AdaptiveCards but with issues around CJS

* fixing rollup issues

* Adding basic adaptive cards support

* Relying on blank.html vs. storybook for auth

* Adding ref to blank

* Adding the auth page as env

* Search Results update

* Updates to use central App ID

* Fixing errors with interleaving

* Fixing auth  within stories

* Back with theming + deleted signInAddon

* Added the search box component

* Debounce in mgt-search-box

* Adding test project and workspace edits

* Added new scenarios, icons and strings

* Strings for Localization

* Adding support for ExternalItem

* Adding batching for thumbnails

* Cleaning code

* Added stories per props

* Error and tooltip fixes

* Pushed renderError to templatedComponent

* Adding fluent-divider

* Removing separaror CSS

* Fixed stories and improved default render

* Max page size as const

* Updated icons and support for event

* Support for dark mode

* Updarted for QnA and Acronyms

* Adding scenario for chat

* Accessibility updates

* Removing AC packages

* Missing colors for next/prev buttons

* Accessibility Updates

* Applied suggestions

Co-authored-by: Musale Martin <[email protected]>

* Updated with comments

* Applying suggestions

* Fixing comments from PR

* Updating picker with inherited error

* Linting edits

* Prettier fixes

* Fixing infinite loop

* PR Comments Updates

* updating lock files

---------

Co-authored-by: Gavin Barron <[email protected]>
Co-authored-by: Musale Martin <[email protected]>

Author: 3 people

.gitignore

@@ -43,3 +43,4 @@ package-lock.json
 # storybook
 storybook-static/
 custom-elements.json
+workbench.html

index.html

@@ -91,6 +91,11 @@ <h2>mgt-todo</h2>
       <h2>mgt-file-list</h2>
       <mgt-file-list></mgt-file-list>
       <h2>mgt-picker</h2>
+      <mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker>
+      <h2>mgt-search-box</h2>
+      <mgt-search-box search-term="contoso"></mgt-search-box>
+      <h2>mgt-search-results</h2>
+      <mgt-search-results query-string="contoso"></mgt-search-results>
       <mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker> -->
     </main>
   </body>

lerna.json

@@ -2,6 +2,7 @@
   "packages": [
     "packages/*",
     "packages/providers/*",
+    "samples/react-admin-app",
     "samples/react-app",
     "samples/angular-app",
     "samples/vue-app",

package.json

@@ -6,6 +6,7 @@
     "packages": [
       "packages/*",
       "packages/providers/*",
+      "samples/react-admin-app",
       "samples/react-app",
       "samples/angular-app",
       "samples/vue-app",
@@ -22,6 +23,7 @@
     ]
   },
   "scripts": {
+    "init": "yarn && yarn build",
     "analyze": "custom-elements-manifest analyze --litelement --globs \"./packages/*/src/**/*.ts\"",
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",
     "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*",
@@ -50,6 +52,9 @@
     "watch": "lerna run --parallel --stream --scope @microsoft/* build:watch ",
     "watch:serve": "npm-run-all --parallel watch serve",
     "watch:serve:https": "npm-run-all -parallel watch serve:https",
+    "watch:components": "lerna run --parallel build:watch --scope @microsoft/mgt-components --include-dependents",
+    "watch:react-admin-app": "lerna run start --scope react-admin-app",
+    "watch:react": "npm-run-all --parallel watch:components watch:react-admin-app",
     "prettier:base": "prettier --parser typescript",
     "prettier:check": "npm run prettier:base -- --check \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",

packages/mgt-components/package.json

@@ -39,7 +39,7 @@
     "@microsoft/mgt-element": "*",
     "@microsoft/microsoft-graph-client": "^3.0.0",
     "@microsoft/microsoft-graph-types": "^2.0.0",
-    "@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
+    "@microsoft/microsoft-graph-types-beta": "^0.29.0-preview",
     "@fluentui/web-components": "^2.5.12",
     "office-ui-fabric-core": "^11.0.0"
   },

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

@@ -0,0 +1,11 @@
+import { CacheItem } from '@microsoft/mgt-element';
+
+/**
+ * Object to be stored in cache representing a generic query
+ */
+export interface CacheResponse extends CacheItem {
+  /**
+   * json representing a response as string
+   */
+  response?: string;
+}

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

@@ -10,6 +10,8 @@ import './mgt-file/mgt-file';
 import './mgt-file-list/mgt-file-list';
 import './mgt-picker/mgt-picker';
 import './mgt-get/mgt-get';
+import './mgt-search-box/mgt-search-box';
+import './mgt-search-results/mgt-search-results';
 import './mgt-login/mgt-login';
 import './mgt-people-picker/mgt-people-picker';
 import './mgt-people/mgt-people';
@@ -30,6 +32,8 @@ export * from './mgt-file/mgt-file';
 export * from './mgt-file-list/mgt-file-list';
 export * from './mgt-picker/mgt-picker';
 export * from './mgt-get/mgt-get';
+export * from './mgt-search-box/mgt-search-box';
+export * from './mgt-search-results/mgt-search-results';
 export * from './mgt-login/mgt-login';
 export * from './mgt-people-picker/mgt-people-picker';
 export * from './mgt-people/mgt-people';

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

@@ -494,7 +494,9 @@ export class MgtFile extends MgtTemplatedComponent {
         this.driveItem.package === undefined && this.driveItem.folder === undefined
           ? re.exec(this.driveItem.name)[1]
             ? re.exec(this.driveItem.name)[1].toLowerCase()
-            : 'null'
+            : this.driveItem.size
+            ? 'null'
+            : 'folder'
           : this.driveItem.package !== undefined
           ? this.driveItem.package.type === 'oneNote'
             ? 'onetoc'

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

@@ -23,6 +23,7 @@ import {
 import { getPhotoForResource } from '../../graph/graph.photos';
 import { getDocumentThumbnail } from '../../graph/graph.files';
 import { schemas } from '../../graph/cacheStores';
+import { CacheResponse } from '../CacheResponse';
 import { Entity } from '@microsoft/microsoft-graph-types';
 
 /**
@@ -65,16 +66,6 @@ export enum ResponseType {
   image = 'image'
 }
 
-/**
- * Object to be stored in cache representing a generic query
- */
-interface CacheResponse extends CacheItem {
-  /**
-   * json representing a response as string
-   */
-  response?: string;
-}
-
 /**
  * Defines the expiration time
  */

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

@@ -150,7 +150,6 @@ export class MgtPicker extends MgtTemplatedComponent {
   private isRefreshing: boolean;
 
   @state() private response: Entity[];
-  @state() private error: object;
 
   constructor() {
     super();