you can now add users to the github organization from your admin

Author: alesanchezr

src/app/services/breathecode.js

@@ -343,6 +343,13 @@ class BreatheCodeClient {
                     payload
                     );
             },
+            addGithubUser: (payload) => {
+                return axios.bcPost(
+                    "Invite",
+                    `${this.host}/auth/academy/github/user`,
+                    payload
+                    );
+            },
             resendInvite: (user) =>
                 axios.bcPut(
                     "Invite",

src/app/views/admin/github-form/OrganizationUsers.jsx

@@ -16,6 +16,7 @@ import bc from '../../../services/breathecode';
 import dayjs from 'dayjs';
 import config from '../../../../config.js';
 import { faLastfmSquare } from "@fortawesome/free-brands-svg-icons";
+import { PickCohortUserModal } from "./PickCohortUserModal";
 
 const relativeTime = require('dayjs/plugin/relativeTime');
 
@@ -56,7 +57,7 @@ const getStatus = (u) => {
 
 const OrganizationUsers = ({ organization }) => {
   const [items, setItems] = useState([]);
-  
+  const [ userToAdd, setUserToAdd] = useState(false);
 
   const columns = [
     {
@@ -68,7 +69,7 @@ const OrganizationUsers = ({ organization }) => {
           return (
             <div>
               {item.user !== null && <h5 className="mb-0"><Link to={"/admissions/students/"+item.user.id}>{item.user.first_name + " " + item.user.last_name}</Link></h5>}
-              <small>{item.username}</small>
+              {item.username ? <small>{item.username}</small> : <small className="bg-danger px-1 border-radius-4">No username found</small>}
             </div>
           );
         },
@@ -105,8 +106,26 @@ const OrganizationUsers = ({ organization }) => {
     return data;
   }
 
+  const addToOrganization = async (cu) => {
+    if(!cu) return false;
+
+    const result = await bc.auth().addGithubUser({ cohort: cu.cohort.id, user: cu.user.id });
+    setUserToAdd(false);
+    loadData();
+  }
+
   return (
     <Grid item md={12} className="mt-2">
+      { userToAdd == true && <PickCohortUserModal 
+        cohortQuery={{ stage: 'STARTED,PREWORK' }} 
+        cohortUserQuery={{ educational_status:'ACTIVE' }} 
+        onClose={(_cu) => addToOrganization(_cu)}
+      />}
+        <div className="text-right">
+          <Button variant="contained" color="primary" onClick={() => setUserToAdd(true)}>
+            Add to the Github Organization
+          </Button>
+        </div>
         <SmartMUIDataTable
             title="All Github Organization Users"
             columns={columns}

src/app/views/admin/github-form/PickCohortUserModal.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import {
+    Dialog,
+    Button,
+    DialogTitle,
+    DialogActions,
+    DialogContent,
+} from '@material-ui/core';
+import { AsyncAutocomplete } from 'app/components/Autocomplete';
+import bc from 'app/services/breathecode';
+
+const defaultProps = {
+    cohortQuery: {},
+    cohorUserQuery: {},
+    hint: null,
+    onClose: null,
+    open: true,
+  };
+
+export const PickCohortUserModal = ({
+    defaultCohort=null,
+    defaultCohortUser=null,
+    cohortQuery,
+    cohorUserQuery,
+    hint,
+    onClose,
+    open
+}) => {
+
+    const [cohort, setCohort] = useState(defaultCohort)
+    const [cohortUser, setCohortUser] = useState(defaultCohortUser)
+    const [ error, setError ] = useState(null)
+
+    return (
+        <>
+            <Dialog
+                open={open}
+                onClose={() => onClose(false)}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+                fullWidth="md"
+            >
+                <DialogTitle className="ml-2" id="alert-dialog-title">
+                    Find a cohort and user
+                </DialogTitle>
+                <DialogContent>
+                    <AsyncAutocomplete
+                        defaultValue={defaultCohort}
+                        width="100%"
+                        onChange={(x) => setCohort(x)}
+                        label="Search for active or prework cohorts"
+                        value={cohort}
+                        getOptionLabel={(option) => `${option.name} (${option.stage})`}
+                        asyncSearch={async (searchTerm) => {
+                            const resp = await bc.admissions().getAllCohorts({ ...cohortQuery, like: searchTerm })
+                            if(resp.ok) return resp.data
+                            else setError("Error fetching cohorts")
+                        }}
+                    />
+                    {cohort && <AsyncAutocomplete
+                        key={cohort.slug}
+                        defaultValue={defaultCohortUser}
+                        width="100%"
+                        onChange={(x) => setCohortUser(x)}
+                        label={`Search user in cohort ${cohort.name}`}
+                        value={cohortUser}
+                        debounced={false}
+                        getOptionLabel={(option) => `${option.user.first_name} ${option.user.last_name} - ${option.user.email}`}
+                        asyncSearch={async (searchTerm) => {
+                            let q = { ...cohorUserQuery, cohorts: cohort.slug };
+                            if(searchTerm) q.like = searchTerm;
+
+                            const resp = await bc.admissions().getAllUserCohorts(q)
+                            if(resp.ok) return resp.data
+                            else setError("Error fetching cohort users")
+                        }}
+                    />}
+                    {hint && <p className="my-2">{hint}</p>}
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        color="primary" tma
+                        variant="contained"
+                        autoFocus
+                        onClick={() => onClose(cohortUser)}
+                    >
+                        Select Cohort User
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    )
+}
+
+PickCohortUserModal.defaultProps = defaultProps;

src/app/views/admin/github.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { Grid } from "@material-ui/core";
+import { Grid, Button } from "@material-ui/core";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import { useSelector } from 'react-redux';
 import { Breadcrumb } from "../../../matx";
 import bc from "../../services/breathecode";
+import { Link } from 'react-router-dom';
 import OrganizationUsers from "./github-form/OrganizationUsers";
 import GithubOrganization from "./github-form/GithubOrganization";
 import { MatxLoading } from 'matx';
@@ -87,7 +88,7 @@ const GithubSettings = () => {
 
   return (
     <div className="m-sm-30">
-      <div className="mb-sm-30">
+      <div className="flex flex-wrap justify-between mb-6">
         <Breadcrumb
           routeSegments={[
             { name: "Admin", path: "/admin" },

src/index.css

@@ -55,6 +55,9 @@
 .orange {
   background-color: rgb(255, 153, 0);
 }
+.bg-danger {
+  background-color: rgb(241, 71, 71);
+}
 .text-warning{
   color: rgb(255, 153, 0);
 }