diff --git a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/ISuggestedTeamMembersProps.ts b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/ISuggestedTeamMembersProps.ts index b133d470d..b8b432963 100644 --- a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/ISuggestedTeamMembersProps.ts +++ b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/ISuggestedTeamMembersProps.ts @@ -9,6 +9,8 @@ export interface ISuggestedTeamMembersProps { export interface ISuggestedTeamMembersState { people: IPerson[]; + userIsGroupOwner: boolean; + loading: boolean; } export interface IPerson { diff --git a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/MembersPicker.tsx b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/MembersPicker.tsx index 36843d2b9..8e1f37f18 100644 --- a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/MembersPicker.tsx +++ b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/MembersPicker.tsx @@ -5,6 +5,7 @@ import styles from './SuggestedTeamMembers.module.scss'; import { IPersonaProps, Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona'; import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types'; import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button'; +import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'; import { CompactPeoplePicker, @@ -26,7 +27,7 @@ export interface IMembersPickerProps { export interface IMembersPickerState { peopleList: IPersonaProps[]; currentSelectedItems?: IPersonaProps[]; - resultAddMembers: string; + resultAddMembers: string[]; } const suggestionProps: IBasePickerSuggestionsProps = { @@ -60,7 +61,7 @@ export default class MembersPicker extends React.Component { this._addGroupMembers(); }} /> - + { + this.state.resultAddMembers.map(s => { + let type: MessageBarType = MessageBarType.info; + if (s.indexOf("Error") >= 0) { + type = MessageBarType.error; + } + return {s}; + }) + } ); } @@ -190,12 +199,21 @@ export default class MembersPicker extends React.Component { + if (r.status === 204) { + responsesInfo.push(`User ${r.id} added succesfuly`); + } else { + responsesInfo.push(`Error adding User ${r.id}. Maybe the user is already a member`); + } + }); + this.setState({ - resultAddMembers: "Members added to the group successfully" + resultAddMembers: responsesInfo }); } diff --git a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.tsx b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.tsx index 2157a5832..51be7843a 100644 --- a/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.tsx +++ b/samples/react-teams-tab-suggested-members/src/webparts/suggestedTeamMembers/components/SuggestedTeamMembers.tsx @@ -8,6 +8,7 @@ import { DefaultButton, PrimaryButton, IButtonProps, ActionButton } from 'office import { Label } from 'office-ui-fabric-react/lib/Label'; import { Guid } from '@microsoft/sp-core-library'; import MembersPicker from './MembersPicker'; +import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'; export default class SuggestedTeamMembers extends React.Component { @@ -15,18 +16,41 @@ export default class SuggestedTeamMembers extends React.Component { - this.setState({ - people: people - }); + this._userIsOwner().then(isOwner => { + if (!isOwner) { + this.setState({ + loading: false, + userIsGroupOwner: false + }); + } else { + this._getMyPeople().then(people => { + this.setState({ + loading: false, + people: people, + userIsGroupOwner: true + }); + }); + } }); } + private async _userIsOwner(): Promise { + const query: string = `v1.0/me/ownedObjects?$filter=id eq '${this.props.groupId}'`; + + const response: GraphHttpClientResponse = await this.props.graphHttpClient.get( + query, + GraphHttpClient.configurations.v1); + + return response.ok; + } + private async _getMyPeople(): Promise { const query: string = "v1.0/me/people?$filter=personType/class eq 'Person'"; @@ -51,17 +75,29 @@ export default class SuggestedTeamMembers extends React.Component { - if (this.state.people == null || this.state.people.length === 0) { + let title: string = ''; + if (this.state.loading) { return
Loading data...
; } + if (!this.state.userIsGroupOwner) { + return You are not Owner of this Group; + } + + if (this.props.teamsContext) { + title = 'Team: ' + this.props.teamsContext.teamName; + } else { + title = 'Group: ' + this.props.groupId; + } + + const headerTitle = "These are suggested members to add to the " + title + "..."; return
-

These are suggested members to add to the group...

- -
; +

{headerTitle}

+ + ; } }