Merge pull request #2005 from microsoftgraph/merge/from-main

chore: update next/fluentui from main

Author: gavinbarron

.github/workflows/pr-reporting.yml

@@ -10,26 +10,32 @@ on:
 jobs:
   pr_report:
     runs-on: ubuntu-latest
+    env:
+      GH_TOKEN: ${{ github.token }}
     steps:
+      # added to work around missing .git repo wanted by gh cli
+      - uses: actions/checkout@v2
       - name: Test Report
         uses: dorny/test-reporter@v1
-        if: always() # run this step even if previous step failed
         with:
           artifact: test-results
           name: JEST Tests # Name of the check run which will be created
           path: junit.xml # Path to test results
           reporter: jest-junit # Format of test results
-
+      - name: Download coverage artifacts with cli
+        run: |
+          gh run download ${{ github.event.workflow_run.id }} -n coverage
       - name: Code Coverage Summary Report
         uses: irongut/[email protected]
         with:
-          filename: coverage/cobertura-coverage.xml
+          filename: cobertura-coverage.xml
           badge: true
           format: 'markdown'
           output: 'both'
       - name: Add Coverage PR Comment
         uses: marocchino/sticky-pull-request-comment@v2
-        if: github.event_name == 'pull_request'
+        if: github.event.workflow_run.event == 'pull_request'
         with:
           recreate: true
           path: code-coverage-results.md
+          number: ${{ github.event.workflow_run.pull_requests[0].number }}

.github/workflows/pr-storybook.yml

@@ -25,10 +25,25 @@ jobs:
           node-version: ${{ matrix.node-version }}
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Build 🛠
+      - name: Install deps 🛠
         run: |
           npm install -g yarn lerna
           yarn
+      - name: Extract tag name
+        shell: bash
+        run: |
+          tag=$(branch=${{ github.event.pull_request.head.ref }}; echo ${branch/\//.})
+          if [[ $tag == next.* ]];
+          then
+            echo "##[set-output name=tag;]$tag"
+          else
+            echo "##[set-output name=tag;]pr.${{ github.event.pull_request.number }}"
+          fi
+        id: extract_tag
+      - run: node scripts/setVersion.js --tag ${{ steps.extract_tag.outputs.tag }}
+
+      - name: Build 🛠
+        run: |
           yarn build
           yarn storybook:build
 

.storybook/fix-title.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+function fixTitle(filePath, title) {
+  const htmlDocumentPath = path.resolve(__dirname, filePath);
+  const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8');
+  const updatedHtmlDocument = htmlDocument.replace(/<title>.*<\/title>/, `<title>${title}</title>`);
+
+  fs.writeFileSync(htmlDocumentPath, updatedHtmlDocument);
+}
+
+function addSeoTags(filePath, title) {
+  const htmlDocumentPath = path.resolve(__dirname, filePath);
+  const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8');
+  const updatedHtmlDocument = htmlDocument.replace(
+    /<\/title>/,
+    `</title>
+    <meta name="og:title" content="${title}"></meta>
+    <meta name="og:type" content="website"></meta>
+    <meta name="og:description" content="Use Microsoft Graph Toolkit to find authentication providers and reusable, framework-agnostic web components for accessing and working with Microsoft Graph."></meta>
+    <meta name="description" content="Use Microsoft Graph Toolkit to find authentication providers and reusable, framework-agnostic web components for accessing and working with Microsoft Graph."></meta>
+`
+  );
+
+  fs.writeFileSync(htmlDocumentPath, updatedHtmlDocument);
+}
+
+try {
+  const args = process.argv.slice(2);
+  const [title, distPath] = args;
+
+  const storybookDistPath = `${distPath}storybook-static`;
+  const indexPath = `${storybookDistPath}/index.html`;
+  const iframePath = `${storybookDistPath}/iframe.html`;
+
+  console.log(`Rewriting ${indexPath} document title to ${title}.`);
+  fixTitle(indexPath, title);
+  console.log(`Adding SeoTags to ${indexPath}.`);
+  addSeoTags(indexPath, title);
+
+  console.log(`Rewriting iframe.html document title to ${title}.`);
+  fixTitle(iframePath, title);
+
+  console.log('Title rewrite complete.');
+} catch (error) {
+  console.log('Title rewrite failed.');
+  console.error(error);
+  process.exit(1);
+}

.storybook/main.js

@@ -18,6 +18,7 @@ module.exports = {
   ],
   stories: ['../stories/overview.stories.mdx', '../stories/**/*.@(js|mdx)'],
   addons: [
+    'storybook-version',
     '@storybook/addon-docs'
     // '@storybook/addon-a11y/register',
     // '@storybook/addon-actions/register',

.storybook/manager-head.html

@@ -6,10 +6,15 @@
 </script>
 
 <footer class="storybook-footer">
-  Microsoft Graph Toolkit Playground was founded by Microsoft as a community guided, open source project.
+  Microsoft Graph Toolkit (v<span id="mgt-version"></span>) Playground was founded by Microsoft as a community guided,
+  open source project.
   <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>
@@ -309,11 +314,26 @@
 </style>
 
 <style>
+
+  /* don't show the footer on mobile */
+  @media (max-width: 599px) {
+    .storybook-footer {
+        display: none !important;
+    }
+  }
+
   /* this keeps the storybook body area above footer */
-  #root>div:first-of-type {
-    height: calc(100% - 40px);
+  @media (max-width: 768px) {
+    #root>div:first-of-type {
+      height: calc(100% - 50px);
+    }
   }
 
+  @media (min-width: 769px) {
+    #root>div:first-of-type {
+      height: calc(100% - 40px);
+    }
+  }
   .sidebar-header button {
     display: none !important;
   }
@@ -341,12 +361,6 @@
     color: #717171 !important;
   }
 
-  @media (max-width: 768px) {
-    #root>div:first-of-type {
-      height: calc(100% - 50px);
-    }
-  }
-
   .sidebar-header h1 {
     font-size: 14px;
     font-weight: 700;

index.html

@@ -75,4 +75,4 @@ <h2>mgt-file-list</h2>
       <mgt-file-list></mgt-file-list>
     </main>
   </body>
-</html>
+</html>

package.json

@@ -55,7 +55,7 @@
     "storybook:watch": "npm-run-all --parallel watch storybook:bundle:watch storybook",
     "storybook:bundle": "rollup -c ./.storybook/rollup.config.js",
     "storybook:bundle:watch": "rollup -c ./.storybook/rollup.config.js --watch",
-    "storybook:build": "npm run storybook:bundle && npm run storybook:dev && build-storybook -s assets && cpx .storybook/CNAME storybook-static",
+    "storybook:build": "npm run storybook:bundle && npm run storybook:dev && build-storybook -s assets && cpx .storybook/CNAME storybook-static && node ./.storybook/fix-title.js 'Microsoft Graph Toolkit Playground' ../",
     "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static",
     "setLicense": "gulp setLicense",
     "test": "jest",
@@ -133,6 +133,7 @@
     "sass": "^1.29.0",
     "shx": "^0.3.3",
     "storybook-addon-web-components-knobs": "^0.3.20",
+    "storybook-version": "^0.1.1",
     "testing-library__dom": "^7.29.4-beta.1",
     "ts-jest": "^29.0.3",
     "tslint": "^6.1.3",

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

@@ -502,7 +502,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private _type: PersonType = PersonType.person;
   private _groupType: GroupType = GroupType.any;
   private _userType: UserType = UserType.any;
-  private _currentSelectedUser: IDynamicPerson;
   private _userFilters: string;
   private _groupFilters: string;
   private _peopleFilters: string;
@@ -520,8 +519,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // current user index to the left of the highlighted users
   private _currentHighlightedUserPos: number = 0;
 
+  /**
+   * Checks if the input is focused.
+   */
   @state() private _isFocused = false;
 
+  /**
+   * Switch to determine if a typed email can be set.
+   */
+  @state() private _setAnyEmail: boolean = false;
+
+  /**
+   * List of people found from the graph calls.
+   */
   @state() private _foundPeople: IDynamicPerson[];
 
   private _mouseLeaveTimeout;
@@ -1349,7 +1359,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   }
 
   /**
-   * Adds debounce method for set delay on user input
+   * Handles input from the key up events on the keyboard.
    */
   private onUserKeyUp(event: KeyboardEvent): void {
     const isPaste = (event.ctrlKey || event.metaKey) && event.key === 'v';
@@ -1410,6 +1420,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
     if (event.code === 'Comma' || event.code === 'Semicolon') {
       if (this.allowAnyEmail) {
+        this._setAnyEmail = true;
         event.preventDefault();
         event.stopPropagation();
       }
@@ -1419,10 +1430,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.userInput = input.value;
     const validEmail = isValidEmail(this.userInput);
     if (validEmail && this.allowAnyEmail) {
-      this.handleAnyEmail();
+      if (this._setAnyEmail) {
+        this.handleAnyEmail();
+      }
     } else {
       this.handleUserSearch();
     }
+    this._setAnyEmail = false;
   }
 
   private handleAnyEmail() {
@@ -1549,9 +1563,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           this.addPerson(foundPerson);
           this.hideFlyout();
           this.input.value = '';
-        } else if (this.allowAnyEmail) {
-          this.handleAnyEmail();
         }
+      } else if (this.allowAnyEmail) {
+        this.handleAnyEmail();
       }
     }
 

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts

@@ -14,7 +14,7 @@ import { MgtPersonCardConfig, MgtPersonCardState } from './mgt-person-card.types
 
 // tslint:disable-next-line:completed-docs
 const userProperties =
-  'businessPhones,companyName,department,displayName,givenName,jobTitle,mail,mobilePhone,officeLocation,preferredLanguage,surname,userPrincipalName,id';
+  'businessPhones,companyName,department,displayName,givenName,jobTitle,mail,mobilePhone,officeLocation,preferredLanguage,surname,userPrincipalName,id,accountEnabled';
 
 // tslint:disable-next-line:completed-docs
 const batchKeys = {
@@ -94,6 +94,11 @@ export async function getPersonCardGraphData(
     }
   }
 
+  // filter out disabled users from direct reports.
+  if (data.directReports && data.directReports.length > 0) {
+    data.directReports = data.directReports.filter(report => report.accountEnabled);
+  }
+
   return data;
 }
 

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts

@@ -93,7 +93,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
       title: this.strings.chatTitle
     },
     businessPhone: {
-      icon: getSvg(SvgIcon.CellPhone, '#605e5c'),
+      icon: getSvg(SvgIcon.Phone, '#605e5c'),
       onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
       showCompact: true,
       title: this.strings.businessPhoneTitle
@@ -264,13 +264,15 @@ export class MgtPersonCardContact extends BasePersonCardSection {
         `;
 
     return html`
-      <div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)}  tabindex="0">
-        <div class="part__icon">${part.icon}</div>
+      <div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)} tabindex="0">
+        <div class="part__icon" aria-label=${part.title} title=${part.title}>${part.icon}</div>
         <div class="part__details">
           <div class="part__title">${part.title}</div>
-          <div class="part__value">${valueTemplate}</div>
+          <div class="part__value" title=${part.title}>${valueTemplate}</div>
         </div>
-        <div class="part__copy">
+        <div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
+      this.strings.copyToClipboardButton
+    }>
           ${getSvg(SvgIcon.Copy)}
         </div>
       </div>