fix change user role [fixes SCI-1669]

app/javascript/src/scenes/SettingsPage/scenes/teams/components/LeaveTeamModal.jsx

@@ -1,5 +1,6 @@
+//  @flow
 import React, { Component } from "react";
-import PropTypes, { bool, number, string, func } from "prop-types";
+import type { Node } from "react";
 import { Modal, Button, Alert, Glyphicon } from "react-bootstrap";
 import { FormattedMessage, FormattedHTMLMessage } from "react-intl";
 import { connect } from "react-redux";
@@ -10,18 +11,33 @@ import {
   setCurrentTeam
 } from "../../../../../components/actions/TeamsActions";
 
-class LeaveTeamModal extends Component {
-  constructor(props) {
+type Team = {
+  id: number,
+  name: string,
+  user_team_id: number
+};
+
+type Props = {
+  updateTeamsState: Function,
+  showModal: boolean,
+  team: Team,
+  addTeamsData: Function,
+  hideLeaveTeamModel: Function,
+  setCurrentTeam: Function
+};
+
+class LeaveTeamModal extends Component<Props> {
+  constructor(props: Props) {
     super(props);
-    this.onCloseModal = this.onCloseModal.bind(this);
-    this.leaveTeam = this.leaveTeam.bind(this);
+    (this: any).onCloseModal = this.onCloseModal.bind(this);
+    (this: any).leaveTeam = this.leaveTeam.bind(this);
   }
 
-  onCloseModal() {
+  onCloseModal(): void {
     this.props.hideLeaveTeamModel();
   }
 
-  leaveTeam() {
+  leaveTeam(): void {
     const { id, user_team_id } = this.props.team;
     leaveTeam(id, user_team_id)
       .then(response => {
@@ -36,7 +52,7 @@ class LeaveTeamModal extends Component {
     this.props.hideLeaveTeamModel();
   }
 
-  render() {
+  render(): Node {
     return (
       <Modal show={this.props.showModal} onHide={this.onCloseModal}>
         <Modal.Header closeButton>
@@ -83,19 +99,6 @@ class LeaveTeamModal extends Component {
   }
 }
 
-LeaveTeamModal.propTypes = {
-  updateTeamsState: func.isRequired,
-  showModal: bool.isRequired,
-  team: PropTypes.shape({
-    id: number.isRequired,
-    name: string.isRequired,
-    user_team_id: number.isRequired
-  }).isRequired,
-  addTeamsData: func.isRequired,
-  hideLeaveTeamModel: func.isRequired,
-  setCurrentTeam: func.isRequired
-};
-
 export default connect(null, {
   addTeamsData,
   setCurrentTeam

app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx

@@ -1,5 +1,7 @@
+// @flow
 import React, { Component } from "react";
-import PropTypes, { func, number, string, bool } from "prop-types";
+import type { Node } from "react";
+import type { Teams$Team } from "flow-typed";
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
@@ -16,28 +18,43 @@ const DefaultTeam = {
   members: 0,
   can_be_leaved: false
 };
-class TeamsDataTable extends Component {
-  constructor(props) {
+
+type Props = {
+  updateTeamsState: Function,
+  teams: Array<Teams$Team>
+}
+
+type State = {
+  leaveTeamModalShow: boolean,
+  team: Teams$Team
+}
+
+class TeamsDataTable extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       leaveTeamModalShow: false,
       team: DefaultTeam
     };
-    this.leaveTeamModal = this.leaveTeamModal.bind(this);
-    this.leaveTeamButton = this.leaveTeamButton.bind(this);
-    this.linkToTeam = this.linkToTeam.bind(this);
-    this.hideLeaveTeamModel = this.hideLeaveTeamModel.bind(this);
+    (this: any).leaveTeamModal = this.leaveTeamModal.bind(this);
+    (this: any).leaveTeamButton = this.leaveTeamButton.bind(this);
+    (this: any).linkToTeam = this.linkToTeam.bind(this);
+    (this: any).hideLeaveTeamModel = this.hideLeaveTeamModel.bind(this);
   }
 
-  leaveTeamModal(e, team) {
-    this.setState({ leaveTeamModalShow: true, team });
+  leaveTeamModal(e: string, team: Teams$Team): void {
+    (this: any).setState({ leaveTeamModalShow: true, team });
   }
 
-  hideLeaveTeamModel() {
-    this.setState({ leaveTeamModalShow: false, team: DefaultTeam });
+  hideLeaveTeamModel(): void {
+    (this: any).setState({ leaveTeamModalShow: false, team: DefaultTeam });
   }
 
-  leaveTeamButton(id, team) {
+  linkToTeam(name: string, team: Teams$Team): Node {
+    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${team.id}`}>{name}</Link>;
+  }
+
+  leaveTeamButton(id: string, team: Teams$Team): Node {
     if (team.can_be_leaved) {
       return (
         <Button onClick={e => this.leaveTeamModal(e, team)}>
@@ -52,11 +69,7 @@ class TeamsDataTable extends Component {
     );
   }
 
-  linkToTeam(name, row) {
-    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${row.id}`}>{name}</Link>;
-  }
-
-  render() {
+  render(): Node {
     const options = {
       defaultSortName: "name",
       defaultSortOrder: "desc",
@@ -124,18 +137,4 @@ class TeamsDataTable extends Component {
   }
 }
 
-TeamsDataTable.propTypes = {
-  updateTeamsState: func.isRequired,
-  teams: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: number.isRequired,
-      name: string.isRequired,
-      current_team: bool.isRequired,
-      role: string.isRequired,
-      members: number.isRequired,
-      can_be_leaved: bool.isRequired
-    }).isRequired
-  )
-};
-
 export default TeamsDataTable;

app/views/client_api/teams/team_users.json.jbuilder

@@ -6,8 +6,8 @@ json.team_users team_users do |team_user|
   json.created_at I18n.l(team_user.created_at, format: :full_date)
   json.status team_user.user.active_status_str
   json.actions do
-    json.current_role team_user.role_str
-    json.team_user_id team_user.id
+    json.currentRole team_user.role_str
+    json.teamUserId team_user.id
     json.disable team_user.user == current_user
   end
 end

flow-typed/teams_types.js

@@ -27,5 +27,6 @@ export type Teams$Team = {
   current_team: boolean,
   role: string,
   members: number,
-  can_be_leaved: boolean
+  can_be_leaved: boolean,
+  user_team_id: number
 };