Add group-ids attribute to the people-picker component #1652

musale · 2022-04-21T15:17:16Z

PR Type

Feature

Description of the changes

I added a new attribute to the people-picker component. This attribute allows setting a list of group IDs that you can render the people only found in them. The same thing applies when you perform a search.

PR checklist

Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
Stories have been added and existing stories have been tested
Added appropriate documentation. Docs PR: https://github.com/microsoftgraph/microsoft-graph-docs/pull/16601

License header has been added to all new source files (yarn setLicense)
Contains NO breaking changes

Other information

…kit into musale/ppicker-group-ids

ghost · 2022-04-21T15:17:21Z

Thank you for creating a Pull Request @musale.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

I have verified a documentation PR has been linked and is approved (or not applicable)
I have ran this PR locally and have tested the fix/feature
I have verified that stories have been added to storybook (or not applicable)
I have tested existing stories in storybook to verify no regression has occured
I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

github-actions · 2022-04-21T15:26:54Z

The updated storybook is available here

github-actions · 2022-04-21T15:28:18Z

The updated storybook is available here

github-actions · 2022-04-27T13:26:22Z

The updated storybook is available here

github-actions · 2022-05-16T07:56:20Z

The updated storybook is available here

github-actions · 2022-05-16T09:11:06Z

The updated storybook is available here

github-actions · 2022-05-16T10:57:09Z

The updated storybook is available here

sebastienlevert · 2022-05-17T19:37:47Z

stories/components/peoplePicker/peoplePicker.properties.js

@@ -213,3 +213,32 @@ export const pickerGroupFilters = () => html`
    type="group">
  </mgt-people-picker>
 `;
+
+export const pickerGroupIds = () => html`


This one doesn't seem to work. It displays the groups... But not the users withing these groups? (Finance and Marketing)

I suspect the store version was reading and loading stale results. I made a version bump on it, should work as expected.

stories/components/peoplePicker/peoplePicker.properties.js

github-actions · 2022-05-17T19:51:30Z

The updated storybook is available here

…kit into musale/ppicker-group-ids

Update the storybook section to simpler use cases

ghost · 2022-05-25T17:00:48Z

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

github-actions · 2022-05-25T17:11:10Z

The updated storybook is available here

github-actions · 2022-06-09T09:10:01Z

The updated storybook is available here

…kit into musale/ppicker-group-ids

…microsoft-graph-toolkit into musale/ppicker-group-ids

github-actions · 2022-07-18T13:48:15Z

The updated storybook is available here

github-actions · 2022-07-19T15:13:21Z

The updated storybook is available here

sebastienlevert

LGTM!

github-actions · 2022-07-20T02:32:23Z

The updated storybook is available here

AndersSahlin · 2022-08-03T11:22:47Z

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

              } else {
                people = await getPeople(graph, this.userType, this._peopleFilters);
              }
            }
+            people = await getUsers(graph, this._userFilters, this.showMax);


It seems like this change broke the user-ids property.

The component will always load the top x users, even if you specify user ids, since it overwrites the people array that is filled from the user ids query.

Thanks for spotting this @AndersSahlin.

Looks to me like this needs to be moved back to where it was inside the if case to remove this regression.

Co-authored-by: Nickii Miaro <miaronkirote@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>

* Set the aria-label text for the buttons (#1708) * Set the aria-label for the button This allows the login component to have an encapsulating button which has an aria-label that is set depending on whether a user is signed in (sets the displayName) or signed out (sets the 'Sign In' string). * Check for a provider for storybook use case * Check the provider exists before checking the state on it * Set the aria-label for custom strings * Added aria-label text for buttons in person-card * [mgt-teamsfx-provider] update peer dependency to support teamsfx sdk 1.x.x (#1722) Co-authored-by: turenlong <rentu@microsoft.com> * Adding the spec for mgt-picker v2. (#1714) Co-authored-by: Musale Martin <martinmusale@microsoft.com> * Allow tab navigation to be lockable within the person-card (#1726) * Add tab navigation locking to the person card * Allow tabbing navigation to be lockable in person-card * Add generated react file * Adding TeamsFx to the Overview page (#1738) * [accessibility] fix keyboard controls in localization (#1720) Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> * [mgt-person-card] Accessibility, zoom or window height minimums for content (#1731) Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> * Updates mgt-spfx to SPFx@1.15.0 (#1742) * Bump Newtonsoft.Json in /samples/proxy-provider-asp-net-core (#1732) Bumps [Newtonsoft.Json](https://github.com/JamesNK/Newtonsoft.Json) from 12.0.3 to 13.0.1. - [Release notes](https://github.com/JamesNK/Newtonsoft.Json/releases) - [Commits](JamesNK/Newtonsoft.Json@12.0.3...13.0.1) --- updated-dependencies: - dependency-name: Newtonsoft.Json dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * update role to searchbox (#1757) Co-authored-by: Musale Martin <martinmusale@microsoft.com> * Update aria-roles and add aria-labels (#1761) * update aria-roles and add aria-labels * add aria-label * chore: Add `.github/fabricbot.json` (#1734) Co-authored-by: msftbot[bot] <48340428+msftbot[bot]@users.noreply.github.com> Co-authored-by: Gavin Barron <gavin.barron@gmail.com> * chore(deps): update sample angular app dependencies (#1762) * Rebuilt package-lock.json to address security advisories * bumping @anglar/cli to v10 * bumping to Angular 10 * Bumping to Angular 11 and updating tailwind config * downgrade tailwind for ng update * updated package-lock for tailwind downgrade * Bumping to Angular 12 * Bumping @angular-builders/custom-webpack to match angular version Co-authored-by: Musale Martin <martinmusale@microsoft.com> * Update TeamsFx Provider README.md (#1755) Co-authored-by: Musale Martin <martinmusale@microsoft.com> * docs: fix proxy provider sample readme (#1759) Clarifies the supported account types that can be used Updates flow of instructions to align to portal updates Fixes port used launchSettings when running from command line Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> * Fix freezing tabs on Safari (#1770) Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> * Add group-ids attribute to the people-picker component (#1652) Co-authored-by: Nickii Miaro <miaronkirote@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> * fix: change sppkg details for mgt-spfx Updates the sppkg file name to use the pattern mgt-spfx-v{majorVersion}.sppkg Updates the solution name to "Microsoft Graph Toolkit v2 for SPFx" Co-authored-by: Gavin Barron <gavinbarron@microsoft.com> * fix: prevent unsafe access to dom nodes in getDocumentDirection (#1788) If a provider is in the head using mgt-loader the synchronous loading of mgt scripts causes LocaliztionHelper to attempt to access the body DOM node of the document before the browser has parsed the entire document causing body to be null. Using optional chaining avoids trying to call a method on a null object. * Bump Newtonsoft.Json from 11.0.1 to 13.0.1 in /samples/proxy-provider-asp-net-mvc/graph-tutorial (#1733) * Bump Newtonsoft.Json Bumps [Newtonsoft.Json](https://github.com/JamesNK/Newtonsoft.Json) from 11.0.1 to 13.0.1. - [Release notes](https://github.com/JamesNK/Newtonsoft.Json/releases) - [Commits](JamesNK/Newtonsoft.Json@11.0.1...13.0.1) --- updated-dependencies: - dependency-name: Newtonsoft.Json dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> * Updated assembly binding redirect to fix broken sample application Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gavin Barron <gavinbarron@microsoft.com> * fix: email resolution on paste for people picker (#1791) Closes #1763 Adds special handling for keyUp when pasting to resolve email addresses * Revert move of getUsers, fixes #1795 (#1798) Co-authored-by: Anders Roos <Anders.roos@nethouse.se> * Clear defaultPeople on forced state update, fixes #1796 (#1799) Co-authored-by: Anders Roos <Anders.roos@nethouse.se> * msal2 multi-account UI (#1041) * Added electron app * delete * Added electron sample folder * Added electron sample folder * Added electron sample folder * added electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Update README.md * Added license * Cleaned up license * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Update samples/electron-app/package.json Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Review comments & removed cache plugin * Update packages/providers/mgt-electron-provider/src/Authenticator/CustomFileProtocol.ts Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Changed initialization of ElectronAuthenticator * updated sample readme * Update README.md * Removed all evidence of incremental consent support :P * Warning * MSAL2.0 * msal2 silent * Added msal2 custom element and sso * SSO fix * Added event on account switch * Fixed issue with setActiveAccount related to latest msal-browser package * Bumped up package version * temp fix * Single account * Added new test file * Update msal2-provider-test.html * Single account changes * Comments * Added msal2.0 provider to index.html * Added msal2.0 provider to index.html * enabled multi account * handle account changes in providers namespace * Comments * Revert "enabled multi account" This reverts commit 7f94528. * fixed binding issue * cleanup * fixed when unsubscribing * Added docs and removed account object * fixed bugs and enabled multi login * swapped provider and disabled cache * updated login ui using fluent listbox * ui and svg * arrow selection * fix hover for first selected item * profile size, spacing * fix package.json * hover state css * adds max-width, overflow for names * fixing spacing * Changes to mgt-login to store person image (#1046) Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> * Changes to mgt-login part 2 (#1047) * Changes to mgt-login to store person image * PR comments Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> * additional handling for overflow * tab indexing too * Update packages/mgt-components/src/components/mgt-login/mgt-login.ts Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Addressed PR comments (#1048) * Changes to mgt-login to store person image * PR comments * PR comments Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> * Update packages/mgt-components/src/components/mgt-login/mgt-login.ts * handling for single user login and one user signed in multiuser * updating avatar-direction to person-flex-direction Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> Co-authored-by: Shane Weaver <shweaver@microsoft.com> Co-authored-by: amrutha95 <amrutha.srinivasan95@gmail.com> Co-authored-by: Nikola Metulev <nikolame@microsoft.com> * Added multi-user cache functionality and enabled multi user login in Msal2Provider (#1299) Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> Co-authored-by: Nicolas Vogt <NicolasVogt@TGSADMINs-MacBook-Pro.local> * [Fluent-UI][person-card] fluent controls upgrade (#1253) Co-authored-by: Beth Pan <xupa@microsoft.com> Co-authored-by: Nicolas Vogt <NicolasVogt@TGSADMINs-MacBook-Pro.local> Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> * Updated Graph Client to v3 (#1040) * updated Graph Client to v3.0.0 for all packages * Update README.md * updated login ui using fluent listbox * Update fluentui registration code * chore: Update aria-labels for base-icons * fix: font on email and chat labels * chore: bump fluentui to latest Co-authored-by: Nikola Metulev <nikolame@microsoft.com> Co-authored-by: Nicolas Vogt <nicolasjvogt@gmail.com> Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> Co-authored-by: Shane Weaver <shweaver@microsoft.com> Co-authored-by: Beth Pan <xupa@microsoft.com> Co-authored-by: André Lage <ponto_portuca@hotmail.com> Co-authored-by: Musale Martin <martinmusale@microsoft.com> Co-authored-by: Kyle <kylelobsinger@gmail.com> Co-authored-by: Gavin Barron <gavinbarron@microsoft.com> * [person]: Update person component to latest Fluent UI design (#1773) * update horizontal design * update person pill * fix user presence * update unauthenticated user design, fix avatar styles and accessibility * add vertical layout, fix presence, update pill * fix unauthenticated with email design * fix line2property on vertical layout * update person events and templating stories * fix view spacings, update rtl * fix vertical display * fix avatar-text spacings * remove comments, add file story * fix colour contrast * update vertical stylings * fix black person on person-card, update line2 property on login * Set the aria-label text for the buttons (#1708) * Set the aria-label for the button This allows the login component to have an encapsulating button which has an aria-label that is set depending on whether a user is signed in (sets the displayName) or signed out (sets the 'Sign In' string). * Check for a provider for storybook use case * Check the provider exists before checking the state on it * Set the aria-label for custom strings * Added aria-label text for buttons in person-card * [Person] fixed issue 1579 (#1682) * fixed issue #1579 * Adding object-fit and position to avoid stretch Co-authored-by: Musale Martin <martinmusale@microsoft.com> Co-authored-by: Nickii Miaro <miaronkirote@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Sébastien Levert <slevert@outlook.com> * fix build * update: fix rebase and style issues * update: use variables for style colors * update: adds in story for rendered icon when initials not available * update: use variable for wrapper hover * update: fix user presence Co-authored-by: Musale Martin <martinmusale@microsoft.com> Co-authored-by: wuxiaojun514 <wuxiaojun514@163.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Sébastien Levert <slevert@outlook.com> * fix build after rebase Co-authored-by: Musale Martin <martinmusale@microsoft.com> Co-authored-by: rentu <5545529+SLdragon@users.noreply.github.com> Co-authored-by: turenlong <rentu@microsoft.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Nicolas Vogt <nicolasjvogt@gmail.com> Co-authored-by: Waldek Mastykarz <waldek@mastykarz.nl> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Elinor <elkaguon@microsoft.com> Co-authored-by: Elinor <ekaguongo@gmail.com> Co-authored-by: msftbot[bot] <48340428+msftbot[bot]@users.noreply.github.com> Co-authored-by: Gavin Barron <gavin.barron@gmail.com> Co-authored-by: Gavin Barron <gavinbarron@microsoft.com> Co-authored-by: Hilton Giesenow <hilton@giesenow.com> Co-authored-by: Anders Roos <malakeen@gmail.com> Co-authored-by: Anders Roos <Anders.roos@nethouse.se> Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com> Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com> Co-authored-by: Shane Weaver <shweaver@microsoft.com> Co-authored-by: amrutha95 <amrutha.srinivasan95@gmail.com> Co-authored-by: Nikola Metulev <nikolame@microsoft.com> Co-authored-by: Nicolas Vogt <NicolasVogt@TGSADMINs-MacBook-Pro.local> Co-authored-by: Beth Pan <xupa@microsoft.com> Co-authored-by: André Lage <ponto_portuca@hotmail.com> Co-authored-by: Kyle <kylelobsinger@gmail.com> Co-authored-by: wuxiaojun514 <wuxiaojun514@163.com> Co-authored-by: Sébastien Levert <slevert@outlook.com>

musale added 7 commits March 14, 2022 10:59

WIP: create the attribute and test scenarios

9273bed

Merge branch 'main' of github.com:microsoftgraph/microsoft-graph-tool…

310ec0d

…kit into musale/ppicker-group-ids

Add the original index.html content

6b6b7d9

Add group-ids attribute to mgt-people-picker

953b2d2

Fix bug on loading people onFocus with group-ids

44702e3

Update the cache key string

8b5dbb3

Add new stories for group-ids attribute

6b16433

musale added the Build: Storybook label Apr 21, 2022

musale requested review from vogtn, Mnickii, shemogumbe and isvargasmsft April 21, 2022 15:17

Merge branch 'main' into musale/ppicker-group-ids

c8c0c97

isvargasmsft approved these changes Apr 28, 2022

View reviewed changes

Mnickii approved these changes Apr 28, 2022

View reviewed changes

Merge branch 'main' into musale/ppicker-group-ids

6d2d5a1

Merge branch 'main' into musale/ppicker-group-ids

7fea150

Merge branch 'main' into musale/ppicker-group-ids

9cfba0b

sebastienlevert requested changes May 17, 2022

View reviewed changes

ghost added the Needs: Author Feedback Issue needs response from issue author label May 17, 2022

musale added 2 commits May 18, 2022 11:32

Merge branch 'main' of github.com:microsoftgraph/microsoft-graph-tool…

ea1e459

…kit into musale/ppicker-group-ids

Update filtering of groupIds URL creation

e745a66

Update the storybook section to simpler use cases

ghost removed the no-recent-activity label May 25, 2022

sebastienlevert removed the Needs: Author Feedback Issue needs response from issue author label May 25, 2022

Merge branch 'main' into musale/ppicker-group-ids

1be5389

musale added 7 commits June 13, 2022 16:38

Merge branch 'main' of github.com:microsoftgraph/microsoft-graph-tool…

7e72a77

…kit into musale/ppicker-group-ids

Merge branch 'main' of github.com:microsoftgraph/microsoft-graph-tool…

7c10cfe

…kit into musale/ppicker-group-ids

Update the graph-ids attr implementations

e306815

Update the group-ids spec definitions

2264c52

Changed storybook stories for the property

ceddaa6

Merge branch 'main' of github.com:microsoftgraph/microsoft-graph-tool…

1853c28

…kit into musale/ppicker-group-ids

Merge branch 'musale/ppicker-group-ids' of github.com:microsoftgraph/…

ab48de0

…microsoft-graph-toolkit into musale/ppicker-group-ids

musale requested review from Mnickii and sebastienlevert July 18, 2022 13:36

Merge branch 'main' into musale/ppicker-group-ids

a7ce690

sebastienlevert approved these changes Jul 19, 2022

View reviewed changes

Merge branch 'main' into musale/ppicker-group-ids

06d3228

sebastienlevert merged commit 884992a into main Jul 20, 2022

sebastienlevert deleted the musale/ppicker-group-ids branch July 20, 2022 13:06

AndersSahlin reviewed Aug 3, 2022

View reviewed changes

This was referenced Aug 3, 2022

[BUG] People picker user-ids does not work #1795

Closed

Revert move of getUsers, fixes #1795 #1798

Merged

Mnickii added a commit that referenced this pull request Aug 11, 2022

Add group-ids attribute to the people-picker component (#1652)

af638c4

Co-authored-by: Nickii Miaro <miaronkirote@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add group-ids attribute to the people-picker component #1652

Add group-ids attribute to the people-picker component #1652

musale commented Apr 21, 2022 •

edited

Loading

ghost commented Apr 21, 2022

github-actions bot commented Apr 21, 2022

github-actions bot commented Apr 21, 2022

github-actions bot commented Apr 27, 2022

github-actions bot commented May 16, 2022

github-actions bot commented May 16, 2022

github-actions bot commented May 16, 2022

sebastienlevert May 17, 2022

musale May 18, 2022 •

edited

Loading

github-actions bot commented May 17, 2022

ghost commented May 25, 2022

github-actions bot commented May 25, 2022

github-actions bot commented Jun 9, 2022

github-actions bot commented Jul 18, 2022

github-actions bot commented Jul 19, 2022

sebastienlevert left a comment

github-actions bot commented Jul 20, 2022

AndersSahlin Aug 3, 2022

gavinbarron Aug 3, 2022

Add group-ids attribute to the people-picker component #1652

Add group-ids attribute to the people-picker component #1652

Conversation

musale commented Apr 21, 2022 • edited Loading

PR Type

Description of the changes

PR checklist

Other information

ghost commented Apr 21, 2022

github-actions bot commented Apr 21, 2022

github-actions bot commented Apr 21, 2022

github-actions bot commented Apr 27, 2022

github-actions bot commented May 16, 2022

github-actions bot commented May 16, 2022

github-actions bot commented May 16, 2022

sebastienlevert May 17, 2022

Choose a reason for hiding this comment

musale May 18, 2022 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented May 17, 2022

ghost commented May 25, 2022

github-actions bot commented May 25, 2022

github-actions bot commented Jun 9, 2022

github-actions bot commented Jul 18, 2022

github-actions bot commented Jul 19, 2022

sebastienlevert left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 20, 2022

AndersSahlin Aug 3, 2022

Choose a reason for hiding this comment

gavinbarron Aug 3, 2022

Choose a reason for hiding this comment

musale commented Apr 21, 2022 •

edited

Loading

musale May 18, 2022 •

edited

Loading