New Control MyTeams (#874)

* new Control MyTeams

* commit changes new Control MyTeams

* commit chnages My Teams

* update docs

* update  docs

* update serve.json

* commit changes fixes

* commit changes

* commit changes on myteams

* commit changes

* update changes

* commit update changes TeamPicker

* commit changes

* commit changes

* commit controlstest changes

Author: joaojmendes

CHANGELOG.md

@@ -15,6 +15,7 @@
 - `ListView`: Use new DragDropFiles control [#861](https://github.com/pnp/sp-dev-fx-controls-react/issues/861)
 - `FilePicker`: Use new DragDropFiles control [#861](https://github.com/pnp/sp-dev-fx-controls-react/issues/861)
 - SharePoint Framework v1.12.1 support
+- `ListView`: Ability to provide custom sorting function [#880](https://github.com/pnp/sp-dev-fx-controls-react/issues/880)
 
 ### Fixes
 
@@ -25,6 +26,7 @@
 - `FilePicker`: React crash on large folders [#826](https://github.com/pnp/sp-dev-fx-controls-react/issues/826)
 - `ListItemAttachments`: updated filename replacement logic [#873](https://github.com/pnp/sp-dev-fx-controls-react/pull/873)
 - `RichText`: Adding a link does not work [#875](https://github.com/pnp/sp-dev-fx-controls-react/issues/875)
+- `FilePicker`: Stock images url is getting a 404 server error [#882](https://github.com/pnp/sp-dev-fx-controls-react/issues/882)
 
 ### Contributors
 

config/serve.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
-  "initialPage": "https://localhost:5432/workbench",
+    "initialPage": "https://localhost:5432/workbench",
   "https": true,
   "api": {
     "port": 5432,

docs/documentation/docs/about/release-notes.md

@@ -15,6 +15,7 @@
 - `ListView`: Use new DragDropFiles control [#861](https://github.com/pnp/sp-dev-fx-controls-react/issues/861)
 - `FilePicker`: Use new DragDropFiles control [#861](https://github.com/pnp/sp-dev-fx-controls-react/issues/861)
 - SharePoint Framework v1.12.1 support
+- `ListView`: Ability to provide custom sorting function [#880](https://github.com/pnp/sp-dev-fx-controls-react/issues/880)
 
 ### Fixes
 
@@ -25,6 +26,7 @@
 - `FilePicker`: React crash on large folders [#826](https://github.com/pnp/sp-dev-fx-controls-react/issues/826)
 - `ListItemAttachments`: updated filename replacement logic [#873](https://github.com/pnp/sp-dev-fx-controls-react/pull/873)
 - `RichText`: Adding a link does not work [#875](https://github.com/pnp/sp-dev-fx-controls-react/issues/875)
+- `FilePicker`: Stock images url is getting a 404 server error [#882](https://github.com/pnp/sp-dev-fx-controls-react/issues/882)
 
 ### Contributors
 

docs/documentation/docs/assets/myteams01.gif

@@ -0,0 +1,74 @@
+# MyTeams control
+
+This control show all Teams the user has access (joined),and for each Team the user can see the channels has permissions and quick open the channel or if callback is specified can return the Team Id and Channel Id for use in App.
+
+The user can quick see the members and owner of group.
+This control use [mgt-toolkit](https://docs.microsoft.com/en-us/graph/toolkit/overview) component [People](https://docs.microsoft.com/en-us/graph/toolkit/components/people) that can be configured to show Person Card on hover.
+
+Here is an example of the control:
+
+![myTeams](../assets/myteams01.gif)
+
+![myTeams](../assets/myteams02.gif)
+
+![myTeams](../assets/myteams01.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+import { MyTeams } from "@pnp/spfx-controls-react/lib/MyTeams";
+```
+
+- Use the `MyTeams` control in your code as follows:
+
+```TypeScript
+ <MyTeams
+            title="My Teams"
+            webPartContext={context}
+            themeVariant={themeVariant}/>
+```
+
+```TypeScript
+  <MyTeams
+            title="My Teams"
+            webPartContext={context}
+            themeVariant={themeVariant}
+            enablePersonCardInteraction={true}
+            onSelectedChannel={onSelectedChannel}
+          />
+```
+
+
+- The `onSelectedChannel` callback returns the teamId and ChannelId and can be implemented as follows:
+
+```TypeScript
+ const  onSelectedChannel = (teamsId: string, channelId: string) => {
+        console.log("TeamsId", teamsId);
+        console.log("ChannelId", channelId);
+  };
+```
+
+## Implementation
+
+
+The `MyTeams` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| webPartContext | WebPartContext | yes | The context object of the SPFx loaded webpart |
+| title | string | no | Title of WebPart  |
+| themeVariant |IReadonlyTheme | no | themeVariant |
+| enablePersonCardInteraction | boolean | no | Show Person Card on hover |
+| onSelectedChannel | (teamId:string,channelId:string) => void; | no | callBack with TeamId and ChannelId Selected |
+
+
+ ## MSGraph Permissions required
+
+This control required the flowing scopes :
+
+at least : Team.ReadBasic.All, Channel.ReadBasic.All,
+and all Scopes used by [mgt-people](https://docs.microsoft.com/en-us/graph/toolkit/components/people),
+and [Person-Card](https://docs.microsoft.com/en-us/graph/toolkit/components/person-card) components 

docs/documentation/docs/assets/myteams01.png

@@ -19,6 +19,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@microsoft/mgt": "^2.1.0",
+    "@microsoft/mgt-react": "^2.1.0",
     "@fluentui/react-northstar": "0.51.3",
     "@microsoft/decorators": "1.12.1",
     "@microsoft/sp-core-library": "1.12.1",

docs/documentation/docs/assets/myteams02.gif

@@ -0,0 +1 @@
+export * from "./controls/MyTeams";