New Control MyTeams

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/controls/MyTeams.md

@@ -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 

package.json

@@ -21,6 +21,8 @@
   "dependencies": {
     "@fluentui/react-northstar": "0.51.3",
     "@microsoft/decorators": "1.12.0",
+    "@microsoft/mgt": "^2.1.0",
+    "@microsoft/mgt-react": "^2.1.0",
     "@microsoft/sp-core-library": "1.12.0",
     "@microsoft/sp-listview-extensibility": "1.12.0",
     "@microsoft/sp-lodash-subset": "1.12.0",

src/MyTeams.ts

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

src/common/model/EMembershipType.ts

@@ -0,0 +1,4 @@
+export enum EMembershipType {
+  "Standard" = "standard",
+  "Private" = "private"
+}

src/common/model/ITeamMember.ts

@@ -0,0 +1,8 @@
+export interface ITeamMenber  {
+  '@odata.type': string;
+  id: string;
+  roles: any[];
+  displayName: string;
+  userId: string;
+  email: string;
+}

src/controls/MyTeams/EMyTeamsTypes.ts

@@ -0,0 +1,6 @@
+export enum EMyTeamsTypes   {
+  "SET_MYTEAMS" = "SET_MYTEAMS",
+  "SET_MESSAGE" = "SET_MESSAGE",
+  "SET_HAS_ERROR" = "SET_HAS_ERROR",
+  "SET_IS_LOADING" = "SET_IS_LOADING",
+}

src/controls/MyTeams/IMyTeamsProps.ts

@@ -0,0 +1,26 @@
+import { IReadonlyTheme , BaseComponentContext} from "@microsoft/sp-component-base";
+
+export interface IMyTeamsProps {
+  /**
+    /**
+     * Title of MyTeams
+     */
+  title?: string;
+  /**
+   *  themeVariant
+   */
+  themeVariant?: IReadonlyTheme;
+  /**
+   *  webPart COntext
+   */
+  webPartContext: BaseComponentContext;
+  /**
+    /**
+     *  onSelectedChannel callBack return teamId and ChannelId if this is not defined default handler open channel
+     */
+  onSelectedChannel?: (teamsId: string, channelId: string) => void;
+  /**
+   *  Enable Hover Card on Person
+   */
+  enablePersonCardInteraction?: boolean;
+}