Team & Team Member Management (#108)

* Team & Member Management Page * Fix * Add Member as Team Manager * Add Get Authorized Team List
microsoft · Nov 3, 2022 · 3bfe51a · 3bfe51a
1 parent 33dc274
commit 3bfe51a
Show file tree

Hide file tree

Showing 5 changed files with 649 additions and 25 deletions.
diff --git a/react/src/component/BaseView.jsx b/react/src/component/BaseView.jsx
@@ -9,6 +9,7 @@ export default class BaseView extends React.Component {
         snackbarIsShown: false,
         snackbarSeverity: null,
         snackbarMessage: null,
+        userInfo: null,
         teamList: null,
         defaultTeam: null
     }
@@ -67,6 +68,23 @@ export default class BaseView extends React.Component {
         console.log(event.target.files[0].name)
     }
 
+    getUserInfo = () => {
+        axios.get('/api/auth/getUser').then(res => {
+            if (res.data && res.data.code === 200) {
+                console.log(res.data.content)
+                this.setState({
+                    userInfo: res.data.content
+                })
+            } else {
+                this.snackBarFail(res)
+            }
+        }).catch((error) => {
+            this.snackBarError(error)
+        })
+        console.log(this.state.userInfo)
+    }
+
+
     refreshTeamList() {
         this.setState({
             teamList: null,

diff --git a/react/src/component/Dashboard.jsx b/react/src/component/Dashboard.jsx
@@ -27,6 +27,7 @@ import {ThemeProvider} from '@material-ui/styles';
 import Container from '@mui/material/Container';
 import axios from "@/axios";
 import TestJsonView from './TestJsonView';
+import TeamManagement from "@/component/TeamManagement";
 
 const drawerWidth = 240;
 
@@ -239,6 +240,12 @@ export default function Dashboard() {
                                 </ListItemIcon>
                                 <ListItemText primary="T2C Test Runner" />
                             </ListItem>
+                            <ListItem component={Link} to={'/team'} button>
+                                <ListItemIcon>
+                                    <span className="material-icons-outlined">people</span>
+                                </ListItemIcon>
+                                <ListItemText primary="Team Management" />
+                            </ListItem>
                             <ListItem component="a" href='https://microsoft.github.io/HydraLab/' target="_blank"
                                       rel="noopener noreferrer" button>
                                 <ListItemIcon>
@@ -248,7 +255,7 @@ export default function Dashboard() {
                             </ListItem>
                             <ListItem
                                 style={{
-                                    height: "calc(100vh - 560px)",
+                                    height: "calc(100vh - 600px)",
                                     pointerEvents: "none"
                                 }}>
                             </ListItem>
@@ -299,6 +306,9 @@ export default function Dashboard() {
                                             <Route exact path="/json">
                                                 <TestJsonView theme={theme} />
                                             </Route>
+                                            <Route exact path="/team">
+                                                <TeamManagement />
+                                            </Route>
                                             <Route path="/info/:type/:id" children={<Child/>}/>
                                         </Switch>
                                     </Paper>

diff --git a/react/src/component/HeaderView.jsx b/react/src/component/HeaderView.jsx
@@ -24,7 +24,6 @@ import Button from "@mui/material/Button";
 export default class HeaderView extends BaseView {
 
     state = {
-        userName: null,
         avatarOpen: false,
         helpOpen: false,
         portalVersion: "",
@@ -35,8 +34,8 @@ export default class HeaderView extends BaseView {
 
     render() {
         const settings = [
-            { text: this.state.userName, dialog: null },
-            { text: `Default Team: ${this.state.defaultTeam ? this.state.defaultTeam.teamName : 'Loading'}`, dialog: 'changeDefaultTeamIsShown' },
+            { text: this.state.userInfo ? this.state.userInfo.userName : 'Loading', dialog: null },
+            { text: `Default Team: ${this.state.userInfo && this.state.userInfo.defaultTeamName ? this.state.userInfo.defaultTeamName : 'Loading'}`, dialog: 'changeDefaultTeamIsShown' },
             { text: 'Logout', dialog: null }
         ];
         const helpSettings = [
@@ -93,7 +92,7 @@ export default class HeaderView extends BaseView {
                     <Tooltip title={"Open user menu"}>
                         <IconButton onClick={() => this.handleStatus("avatarOpen", true)}
                                     sx={{p: 0}}>
-                            <Avatar alt={this.state.userName} src={"/api/auth/getUserPhoto"}/>
+                            <Avatar alt={this.state.userInfo ? this.state.userInfo.userName : 'Loading'} src={"/api/auth/getUserPhoto"}/>
                         </IconButton>
                     </Tooltip>
                     <Menu
@@ -131,12 +130,12 @@ export default class HeaderView extends BaseView {
                                 id="agent-team-select"
                                 label="Team"
                                 size="small"
-                                value={teamList && this.state.defaultTeam ? this.state.defaultTeam.teamId : 'None_Team'}
+                                value={(teamList && this.state.selectedTeamId) ? this.state.selectedTeamId : 'None_Team'}
                                 onChange={(select) => this.handleStatus('selectedTeamId', select.target.value)}
                             >
                                 {teamList ? null : <MenuItem value={'None_Team'}>No team available</MenuItem>}
                                 {teamList ? teamList.map((team, index) => (
-                                    <MenuItem value={team.teamId} key={team.teamId} disabled={(this.state.defaultTeam !== null) && (team.teamId === this.state.defaultTeam.teamId)}>{team.teamName}</MenuItem>
+                                    <MenuItem value={team.teamId} key={team.teamId} disabled={this.state.userInfo && (team.teamId === this.state.userInfo.defaultTeamId)}>{team.teamName}</MenuItem>
                                 )) : null}
                             </Select>
                         </FormControl> <br/>
@@ -153,22 +152,6 @@ export default class HeaderView extends BaseView {
         </Stack>
     }
 
-    getLoginInfo = () => {
-        axios.get('/api/auth/getUser').then(res => {
-            if (res.data && res.data.code === 200) {
-                const userInfo = res.data.content;
-                console.log(userInfo)
-                this.setState({
-                    userName: userInfo.userName
-                })
-            } else {
-                this.snackBarFail(res)
-            }
-        }).catch((error) => {
-            this.snackBarError(error)
-        })
-    }
-
     portalCheck() {
         if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
             window.location.href = '/';
@@ -204,8 +187,7 @@ export default class HeaderView extends BaseView {
     }
 
     componentDidMount() {
-        this.getLoginInfo()
+        this.getUserInfo()
         this.refreshTeamList()
-        this.getUserTeamInfo()
     }
 }