Checking if user is Owner in group (#732)

Some UI improvements

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 {

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<IMembersPickerProps,
     this.state = {
       peopleList: peopleList,
       currentSelectedItems: [],
-      resultAddMembers: null
+      resultAddMembers: []
     };
   }
 
@@ -160,7 +161,15 @@ export default class MembersPicker extends React.Component<IMembersPickerProps,
           onClick={() => { this._addGroupMembers(); }}
          />
 
-        <Label>{this.state.resultAddMembers}</Label>
+        {
+          this.state.resultAddMembers.map(s => {
+            let type: MessageBarType = MessageBarType.info;
+            if (s.indexOf("Error") >= 0) {
+              type = MessageBarType.error;
+            }
+            return <MessageBar messageBarType={type} isMultiline={false}>{s}</MessageBar>;
+          })
+        }
       </div>
     );
   }
@@ -190,12 +199,21 @@ export default class MembersPicker extends React.Component<IMembersPickerProps,
     };
 
     var response: GraphHttpClientResponse = await this.props.graphHttpClient.post('v1.0/$batch', GraphHttpClient.configurations.v1, options);
-    var responseJson: string = await response.json();
+    var responseJson: any = await response.json();
 
     console.log(responseJson);
 
+    let responsesInfo: string[] = [];
+    responseJson.responses.forEach((r: any) => {
+      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
     });
   }
 

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<ISuggestedTeamMembersProps, ISuggestedTeamMembersState> {
 
@@ -15,18 +16,41 @@ export default class SuggestedTeamMembers extends React.Component<ISuggestedTeam
     super(props);
 
     this.state = {
-      people: []
+      loading: true,
+      people: [],
+      userIsGroupOwner: false
     };
   }
 
   public componentDidMount(): void {
-    this._getMyPeople().then(people => {
-      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<boolean> {
+    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<IPerson[]> {
     const query: string = "v1.0/me/people?$filter=personType/class eq 'Person'";
 
@@ -51,17 +75,29 @@ export default class SuggestedTeamMembers extends React.Component<ISuggestedTeam
 
   public render(): React.ReactElement<ISuggestedTeamMembersProps> {
 
-    if (this.state.people == null || this.state.people.length === 0) {
+    let title: string = '';
+    if (this.state.loading) {
       return <div>Loading data...</div>;
     }
 
+    if (!this.state.userIsGroupOwner) {
+      return <MessageBar messageBarType={MessageBarType.error} isMultiline={false}>You are not Owner of this Group</MessageBar>;
+    }
+
+    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 <div className={styles.suggestedTeamMembers}>
-      <p>These are suggested members to add to the group...</p>
-      <MembersPicker
-        people = {this.state.people}
-        groupId = {this.props.groupId}
-        graphHttpClient={this.props.graphHttpClient}
-      />
-    </div>;
+            <p>{headerTitle}</p>
+            <MembersPicker
+              people = {this.state.people}
+              groupId = {this.props.groupId}
+              graphHttpClient={this.props.graphHttpClient}
+            />
+          </div>;
   }
 }