microsoftgraph · FranckyC · May 17, 2023 · May 18, 2023 · May 19, 2023 · Jun 6, 2023
diff --git a/.github/fabricbot.json b/.github/fabricbot.json
diff --git a/.github/policies/branch-protection.yml b/.github/policies/branch-protection.yml
@@ -6,26 +6,26 @@ description: Organization branch protection policy for Microsoft Graph Toolkit r
 resource: repository
 configuration:
   branchProtectionRules:
-  - branchNamePattern: next/*
-    requiredApprovingReviewsCount:
-      min: 1
-    # Must have a CODEOWNER approve for the PR to be merged.
-    requireCodeOwnersReview: true
-
-    # Dismiss stale pull request approvals when new commits are pushed
-    dismissStaleReviews: true
-
-    # Require conversation resolution before merging. Address all concerns, and resolve in the GitHub PR UI.
-    requiresConversationResolution: true
+    - branchNamePattern: next/*
+      requiredApprovingReviewsCount:
+        min: 1
+      # Must have a CODEOWNER approve for the PR to be merged.
+      requireCodeOwnersReview: true
 
-    # Require status checks to pass before merging. TODO: this value should be true, we should work to support this.
-    # Used with the requiredStatusChecks setting to specify which checks must pass for the PR to be merged.
-    requiresStrictStatusChecks: true
+      # Dismiss stale pull request approvals when new commits are pushed
+      dismissStaleReviews: true
 
-    requiredStatusChecks:
-    - GitOps/AdvancedSecurity
-    - license/cla
-    - check-build-matrix
-
-    # TODO: all commits should be signed. We need to get everyone signing their commits.
-    requiresCommitSignatures: false
+      # Require conversation resolution before merging. Address all concerns, and resolve in the GitHub PR UI.
+      requiresConversationResolution: true
+
+      # Require status checks to pass before merging. TODO: this value should be true, we should work to support this.
+      # Used with the requiredStatusChecks setting to specify which checks must pass for the PR to be merged.
+      requiresStrictStatusChecks: true
+
+      requiredStatusChecks:
+        - GitOps/AdvancedSecurity
+        - license/cla
+        - check-build-matrix
+
+      # TODO: all commits should be signed. We need to get everyone signing their commits.
+      requiresCommitSignatures: false
diff --git a/.github/workflows/project-automation.yml b/.github/workflows/project-automation.yml
@@ -32,8 +32,8 @@ jobs:
             }' -f org=$PROJECT_ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
 
           echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-  
-      - name: Add issue to project        
+
+      - name: Add issue to project
         env:
           GITHUB_TOKEN: ${{ secrets.PROJECT_ACCESS_TOKEN }}
           ISSUE_ID: ${{ github.event.issue.node_id }}
@@ -43,4 +43,4 @@ jobs:
               addProjectNextItem(input: {projectId: $project, contentId: $issue}) { 
                 projectNextItem { id }  
               } 
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID
+            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,15 +5,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "edge",
+      "type": "msedge",
       "request": "launch",
       "name": "Launch Edge Canary against localhost",
       "url": "http://localhost:3000",
       "webRoot": "${workspaceFolder}",
       "version": "canary"
     },
     {
-      "type": "edge",
+      "type": "msedge",
       "request": "launch",
       "name": "Launch Edge Dev against localhost",
       "url": "http://localhost:3000",
@@ -28,6 +28,14 @@
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "port": 9229
+    },
+    {
+      "name": "Tests debug (Edge)",
+      "request": "launch",
+      "type": "msedge",
+      "url": "http://localhost:8000/",
+      "webRoot": "${workspaceRoot}",
+      "sourceMaps": true
     }
   ]
 }
diff --git a/assets/workbox-dae083bf.js b/assets/workbox-dae083bf.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -39,7 +39,7 @@ export const PACKAGE_VERSION = '[VERSION]';
 function runSass() {
   return (
     gulp
-      .src('src/**/!(shared)*.scss')
+      .src(['src/**/!(shared)*.scss', '!src/styles/tailwind-styles.css'])
       .pipe(sass())
       .pipe(cleanCSS())
       // replacement to make office-ui-fabric-core icons work with lit-element
@@ -60,6 +60,15 @@ function runSass() {
   );
 }
 
+function tailwind() {
+  return gulp
+    .src(['src/**/tailwind-styles.css'])
+    .pipe(gap.prependText(scssFileHeader))
+    .pipe(gap.appendText(scssFileFooter))
+    .pipe(rename({ extname: '-css.ts' }))
+    .pipe(gulp.dest('src/'));
+}
+
 function setLicense() {
   return gulp
     .src(['packages/**/src/**/*.{ts,js,scss}', '!packages/**/generated/**/*'], { base: './' })
@@ -73,11 +82,13 @@ function setVersion() {
   fs.writeFileSync('./src/utils/version.ts', versionFile.replace('[VERSION]', pkg.version));
 }
 
-gulp.task('sass', runSass);
+gulp.task('sass', gulp.series(tailwind, runSass));
+gulp.task('tailwind', tailwind);
 gulp.task('setLicense', setLicense);
 gulp.task('setVersion', async () => setVersion());
 
 gulp.task('watchSass', () => {
+  tailwind();
   runSass();
-  return gulp.watch('src/**/*.scss', gulp.series('sass'));
+  return gulp.watch('src/**/*.{scss,css}', gulp.series('sass'));
 });
diff --git a/index.html b/index.html
@@ -31,44 +31,44 @@
 
   <body>
     <mgt-msal2-provider
-      client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
+      client-id="3073e2a9-87cb-49f3-a69c-944e8a47c00d"
+      authority="https://login.microsoftonline.com/d7e957c6-c0d2-4ee3-88d5-bf5c0a56268b"
       redirect-uri="http://localhost:3000"
-      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"
-    ></mgt-msal2-provider>
+      login-type="popup"
+      scopes="ExternalItem.Read.All,Files.Read.All,Sites.Read.All"
+    >
+    </mgt-msal2-provider>
 
-    <!-- <mgt-mock-provider></mgt-mock-provider> -->
-    <header>
-      <mgt-theme-toggle></mgt-theme-toggle>
-    </header>
+    <mgt-login></mgt-login>
 
-    <h1>Developer test page</h1>
-    <main>
-      <h2>mgt-login</h2>
-      <mgt-login login-view="compact"></mgt-login>
-      <mgt-login></mgt-login>
-      <h2>mgt-person me query two lines card on click with presence</h2>
-      <!-- <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
-      <mgt-person-card person-query="me"></mgt-person-card>
-      <h2>mgt-people-picker</h2>
-      <mgt-people-picker></mgt-people-picker>
-      <!-- <h2>mgt-teams-channel-picker</h2>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker> -->
-      <h2>mgt-tasks</h2>
-      <mgt-tasks></mgt-tasks>
-      <!-- <h2>mgt-agenda group-by-day</h2>
-      <mgt-agenda group-by-day></mgt-agenda> -->
-      <!-- <h2>mgt-people show-presence</h2>
-      <mgt-people show-presence></mgt-people> -->
-      <h2>mgt-todo</h2>
-      <mgt-todo></mgt-todo>
-      <!-- <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> -->
-    </main>
+    <mgt-search-verticals
+      id="0fa619a7-442a-4255-8fca-f3ce36a01518"
+      settings='[{"key":"all","tabName":{"default":"All","fr-fr":"Tout le contenu","ro-ro":"Toate"},"tabValue":"","isLink":false,"linkUrl":null,"openBehavior":0},{"key":"profiles","tabName":{"default":"Profiles","fr-fr":"Profils","ro-ro":"Profiluri"},"tabValue":"","isLink":false,"linkUrl":null,"openBehavior":0}]'
+    >
+    </mgt-search-verticals>
+
+    <mgt-search-filters
+      id="99d3e914-2c8e-4f42-897e-53bb4d960e94"
+      search-results-ids="b359f3dc-6b6a-4575-90ed-e5942bcbb8a6"
+      operator="and"
+      settings='[{"filterName":"modifiedby","displayName":{"fr-fr":"Modifié par","ro-ro":"Modificat de","default":"Modified by"},"template":"checkbox","showCount":true,"operator":"or","isMulti":true,"type":"refiner","sortBy":"byCount","sortDirection":"descending","maxBuckets":10000,"sortIdx":10},{"filterName":"FileType","displayName":{"fr-fr":"Type de fichier","ro-ro":"Tip fișier","default":"File Type"},"template":"checkbox","showCount":true,"operator":"or","isMulti":true,"type":"refiner","sortBy":"byCount","sortDirection":"descending","maxBuckets":10000,"sortIdx":11,"aggregations":[{"aggregationName":{"fr-fr":"Document Word","default":"Word document"},"matchingValues":["docx","doc","docm"],"aggregationValue":"or(\"docx\",\"doc\",\"docm\")","aggregationValueIconUrl":"dist/latest/assets/icons/word.svg"},{"aggregationName":{"fr-fr":"Modèle de fichier Word","default":"Word template"},"matchingValues":["dot","dotx","dotm"],"aggregationValue":"or(\"dot\",\"dotx\",\"dotm\")","aggregationValueIconUrl":"dist/latest/assets/icons/word.svg"},{"aggregationName":{"fr-fr":"Fichier texte","default":"Text file"},"matchingValues":["txt","rtf"],"aggregationValue":"or(\"txt\",\"rtf\")","aggregationValueIconUrl":"dist/latest/assets/icons/text.svg"},{"aggregationName":{"fr-fr":"Document Excel","default":"Excel document"},"matchingValues":["xlsx","xls","xlsm","xlsb","xlx","xml","csv"],"aggregationValue":"or(\"xlsx\",\"xls\",\"xlsm\",\"csv\",\"xlsb\",\"xlx\",\"xml\")","aggregationValueIconUrl":"dist/latest/assets/icons/excel.svg"},{"aggregationName":{"fr-fr":"Modèle de fichier Excel","default":"Excel template"},"matchingValues":["xltm","xlt","xltx"],"aggregationValue":"or(\"xltm\",\"xlt\",\"xltx\")","aggregationValueIconUrl":"dist/latest/assets/icons/excel.svg"},{"aggregationName":{"fr-fr":"Document PowerPoint","default":"PowerPoint document"},"matchingValues":["pptx","ppt","pptm","pps","ppsm","ppsx"],"aggregationValue":"or(\"pptx\",\"ppt\",\"pptm\",\"pps\",\"ppsm\",\"ppsx\")","aggregationValueIconUrl":"dist/latest/assets/icons/powerpoint.svg"},{"aggregationName":{"fr-fr":"Modèle de fichier PowerPoint","default":"PowerPoint template"},"matchingValues":["potx","potm","pot"],"aggregationValue":"or(\"potx\",\"potm\",\"pot\")","aggregationValueIconUrl":"dist/latest/assets/icons/powerpoint.svg"},{"aggregationName":{"fr-fr":"Page web","default":"Web page"},"matchingValues":["aspx","html"],"aggregationValue":"or(\"aspx\",\"html\")","aggregationValueIconUrl":"dist/latest/assets/icons/webpage.svg"},{"aggregationName":{"fr-fr":"Archive compressée","default":"Compressed archive"},"matchingValues":["zip","7z","rar"],"aggregationValue":"or(\"zip\",\"7z\",\"rar\")","aggregationValueIconUrl":"dist/latest/assets/icons/archive.svg"},{"aggregationName":"PDF","matchingValues":["pdf"],"aggregationValue":"pdf","aggregationValueIconUrl":"dist/latest/assets/icons/pdf.svg"},{"aggregationName":{"fr-fr":"Document Visio","default":"Visio document"},"matchingValues":["vsdx","vsd","vsdm"],"aggregationValue":"or(\"vsdx\",\"vsd\",\"vsdm\")","aggregationValueIconUrl":"dist/latest/assets/icons/visio.svg"},{"aggregationName":{"fr-fr":"Document OneNote","default":"OneNote document"},"matchingValues":["one"],"aggregationValue":"one","aggregationValueIconUrl":"dist/latest/assets/icons/onenote.svg"}]},{"filterName":"LastModifiedTime","displayName":{"fr-fr":"Date de modification","ro-ro":"Ora ultima modificată","default":"Last modified date"},"template":"date","showCount":true,"operator":"and","isMulti":false,"type":"refiner","sortBy":"byCount","sortDirection":"descending","maxBuckets":10000,"sortIdx":12}]'
+    >
+    </mgt-search-filters>
+
+    <mgt-search-results
+      id="b359f3dc-6b6a-4575-90ed-e5942bcbb8a6"
+      entity-types="listItem"
+      query-text="*"
+      query-template="{searchTerms} -ParentLink:PreservationHoldLibrary (FileType:doc OR FileType:docx OR FileType:docm OR FileType:dot OR FileType:dotx OR FileType:dotm OR FileType:txt OR FileType:rtf OR FileType:aspx OR FileType:xls OR FileType:xlsx OR FileType:xlsm OR FileType:xlsb OR FileType:xlx OR FileType:xlt OR FileType:xltx OR FileType:xltm OR FileType:xml OR FileType:csv OR FileType:ppt OR FileType:pptx OR FileType:pptm OR FileType:pps OR FileType:ppsm OR FileType:ppsx OR FileType:pot OR FileType:potx OR FileType:potm OR FileType:pdf OR FileType:zip OR FileType:vsd OR FileType:vsdx OR FileType:vsdm OR FileType:html OR FileType:7z OR FileType:rar OR FileType:one)"
+      fields="webUrl,name,title,mssearchsitename,created,createdBy,filetype,lastModifiedTime,lastModifiedBy,modifiedBy,path,hitHighlightedProperties,hitHighlightedSummary,SPSiteURL,SiteTitle,defaultEncodingURL,parentLink,serverRedirectedURL,filename"
+      enable-suggestion
+      sort-properties='[{"sortField":"LastModifiedTime","sortDirection":"desc","isDefaultSort":false,"isUserSort":true,"sortFieldDisplayName":{"fr-fr":"Date de modification","default":"Last modified"}}]'
+      page-size="10"
+      pages-number="4"
+      search-filters-id="99d3e914-2c8e-4f42-897e-53bb4d960e94"
+      search-verticals-id="0fa619a7-442a-4255-8fca-f3ce36a01518"
+      verticals-keys="all"
+    >
+    </mgt-search-results>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -70,7 +70,9 @@
     "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static",
     "setLicense": "gulp setLicense",
     "test": "jest",
-    "version:tsc": "tsc -v"
+    "version:tsc": "tsc -v",
+    "wtr": "wtr",
+    "wtr:watch": "wtr --watch"
   },
   "storybook-deployer": {
     "gitUsername": "@microsoft/mgt",
@@ -101,6 +103,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.4",
+    "@types/mocha": "10.0.1",
+    "@types/chai-dom": "^0.0.8",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "12.12.22",
     "@types/react": "^17.0.00",
     "@types/react-dom": "^17.0.0",
@@ -109,6 +114,7 @@
     "@typescript-eslint/parser": "^5.54.0",
     "@web/dev-server": "^0.1.10",
     "@webcomponents/webcomponentsjs": "^2.5.0",
+    "autoprefixer": "10.4.13",
     "babel-loader": "^8.2.1",
     "core-js": "^3.7.0",
     "cpx": "^1.5.0",
@@ -161,7 +167,13 @@
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.4",
     "web-component-analyzer": "^1.1.6",
-    "whatwg-fetch": "^3.6.2"
+    "whatwg-fetch": "^3.6.2",
+    "tailwindcss": "3.2.4",
+    "sinon": "15.0.1",
+    "@open-wc/testing": "3.1.7",
+    "@web/test-runner": "0.15.0",
+    "@web/dev-server-esbuild": "0.3.3",
+    "@web/test-runner-playwright": "0.9.0"
   },
   "husky": {
     "hooks": {

diff --git a/packages/mgt-components/README.md b/packages/mgt-components/README.md
@@ -9,20 +9,21 @@ The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) web components package i
 [See docs for full documentation](https://aka.ms/mgt-docs)
 
 ## Components
+
 You can explore components and samples with the [playground](https://mgt.dev) powered by storybook.
 
 The Toolkit currently includes the following components:
 
-* [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
-* [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
-* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
-* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
-* [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+- [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
+- [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+- [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+- [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
+- [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
+- [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+- [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
+- [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
+- [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+- [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
 
 The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
 
@@ -32,28 +33,28 @@ The components can be used on their own, but they are at their best when they ar
 
 1. Install the packages
 
-    ```bash
-    npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider
-    ```
+   ```bash
+   npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider
+   ```
 
 1. Use components in your code
 
-    ```html
-    <script type="module">
-      import {Providers} from '@microsoft/mgt-element';
-      import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
+   ```html
+   <script type="module">
+     import {Providers} from '@microsoft/mgt-element';
+     import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
 
-      // import the components
-      import '@microsoft/mgt-components';
+     // import the components
+     import '@microsoft/mgt-components';
 
-      // initialize the auth provider globally
-      Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
-    </script>
+     // initialize the auth provider globally
+     Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
+   </script>
 
-    <mgt-login></mgt-login>
-    <mgt-person person-query="Bill Gates" person-card="hover"></mgt-person>
-    <mgt-agenda group-by-day></mgt-agenda>
-    ```
+   <mgt-login></mgt-login>
+   <mgt-person person-query="Bill Gates" person-card="hover"></mgt-person>
+   <mgt-agenda group-by-day></mgt-agenda>
+   ```
 
 
 ## <a id="disambiguation">Disambiguation</a>
@@ -205,6 +206,7 @@ document.body.innerHTML = '<mgt-login></mgt-login>';
 > Note: it is not possible to use disambiguation with static imports.
 
 ## Sea also
-* [Microsoft Graph Toolkit docs](https://aka.ms/mgt-docs)
-* [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
-* [Microsoft Graph Toolkit playground](https://mgt.dev)
+
+- [Microsoft Graph Toolkit docs](https://aka.ms/mgt-docs)
+- [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
+- [Microsoft Graph Toolkit playground](https://mgt.dev)
diff --git a/packages/mgt-components/src/components/components.ts b/packages/mgt-components/src/components/components.ts
@@ -25,6 +25,9 @@ import './mgt-messages/mgt-messages';
 import './mgt-organization/mgt-organization';
 import './mgt-profile/mgt-profile';
 import './mgt-theme-toggle/mgt-theme-toggle';
+import './mgt-search-results/mgt-search-results';
+import './mgt-search-verticals/mgt-search-verticals';
+import './mgt-search-filters/mgt-search-filters';
 
 export * from './mgt-agenda/mgt-agenda';
 export * from './mgt-file/mgt-file';
@@ -47,3 +50,6 @@ export * from './mgt-messages/mgt-messages';
 export * from './mgt-organization/mgt-organization';
 export * from './mgt-profile/mgt-profile';
 export * from './mgt-theme-toggle/mgt-theme-toggle';
+export * from './mgt-search-results/mgt-search-results';
+export * from './mgt-search-verticals/mgt-search-verticals';
+export * from './mgt-search-filters/mgt-search-filters';