Eventtype

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "cp .env.example .env && touch /tmp/.npm-lock && npm install --legacy-peer-deps && rm /tmp/.npm-lock",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.gitignore

@@ -30,6 +30,8 @@ yarn-error.log*
 
 # Don't ignore gitpod files
 !.gitignore
+!.devcontainer/*
+!.devcontainer
 !.gitpod.yml
 !.gitpod.Dockerfile
 !.husky

src/app/components/ConfirmAlert.jsx

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 const emptyCallback = () => {};
 const defaultProps = {
   onOpen: emptyCallback,
-  onClose: emptyCallback,
+  onClose: null,
   isOpen: false,
   setIsOpen: emptyCallback,
   cancelText: 'Cancel',
@@ -46,7 +46,7 @@ const ConfirmAlert = ({
     <Dialog
       open={isOpen}
       onClose={() => {
-        onClose();
+        onClose && onClose();
         setIsOpen(false);
       }}
       aria-labelledby={titleTestId}
@@ -63,7 +63,7 @@ const ConfirmAlert = ({
         </DialogContent>
       ) : <></>}
       <DialogActions>
-        <Button
+        {onClose && <Button
           data-cy={cancelButtonTestId}
           onClick={() => {
             onClose();
@@ -72,7 +72,7 @@ const ConfirmAlert = ({
           color="primary"
         >
           {cancelText}
-        </Button>
+        </Button>}
         <Button
           color="primary"
           type="submit"

src/app/navigations.js

@@ -228,12 +228,6 @@ export const navigations = [
                 iconText: "STA",
                 capabilities: ["read_invite"],
             },
-            {
-                name: "Gitpod",
-                path: "/admin/gitpod",
-                iconText: "STA",
-                capabilities: ["get_gitpod_user"],
-            },
             {
                 name: "Github",
                 path: "/admin/github",

src/app/services/breathecode.js

@@ -127,9 +127,17 @@ class BreatheCodeClient {
                     payload
                 ),
             getCertificates: () =>
-                axios.bcGet("Certificates", `${this.host}/admissions/syllabus`),
+                axios.bcGet(
+                    "Certificates", 
+                    `${this.host}/admissions/syllabus`),
             getAllSyllabus: () =>
-                axios.bcGet("Syllabus", `${this.host}/admissions/syllabus`),
+                axios.bcGet(
+                    "Syllabus", 
+                    `${this.host}/admissions/syllabus`),
+            getAllAcademies: () =>
+                axios.bcGet(
+                    "Academy", 
+                    `${this.host}/admissions/academy`),
             getAllTimeZone: () =>
                 axios.bcGet(
                     "TimeZone",
@@ -343,6 +351,13 @@ class BreatheCodeClient {
                     payload
                     );
             },
+            addGithubUser: (payload) => {
+                return axios.bcPost(
+                    "Invite",
+                    `${this.host}/auth/academy/github/user`,
+                    payload
+                    );
+            },
             resendInvite: (user) =>
                 axios.bcPut(
                     "Invite",
@@ -803,12 +818,40 @@ class BreatheCodeClient {
                     "Academy event",
                     `${this.host}/events/academy/organizer`
                 ),
+            addAcademyEventType: (payload) =>
+                axios.bcPost(
+                    "Academy event type",
+                    `${this.host}/events/academy/eventype`,
+                    payload
+            ),
+            getAcademyEventType: () =>
+                axios.bcGet(
+                    "Event Type",
+                    `${this.host}/events/academy/eventype?allow_shared_creation=true`
+                ),
+            getAcademyEventTypeSlug: (slug) =>
+                axios.bcGet(
+                    "Event Type Slug",
+                    `${this.host}/events/academy/eventype/${slug}`
+                ),
+            updateAcademyEventTypeSlug: (slug, payload) =>
+                axios.bcPut(
+                    "Event Type Slug",
+                    `${this.host}/events/academy/eventype/${slug}`,
+                    payload
+                ),
             postAcademyEventOrganization: (payload) =>
                 axios.bcPost(
                     "Academy event",
                     `${this.host}/events/academy/organization`,
                     payload
                 ),
+            postAcademyEventTypeVisibilitySetting: (payload, slug) =>
+                axios.bcPost(
+                    "Academy event Type Visibility Setting",
+                    `${this.host}/events/academy/eventype/${slug}/visibilitysetting`,
+                    payload
+                ),   
             putAcademyEventOrganization: (payload) =>
                 axios.bcPut(
                     "Academy event",
@@ -829,6 +872,16 @@ class BreatheCodeClient {
                     "Delete organizer",
                     `${this.host}/events/academy/organization/organizer/${org}`
                 ),
+            deleteAcademyEventTypes: (org) =>
+                axios.bcDelete(
+                    "Delete Eventtype",
+                    `${this.host}/events/academy/`
+                ),
+            deleteAcademyEventTypeVisibilitySetting: (slug, visibilityID) =>
+                axios.bcDelete(
+                    "Delete Visibility Setting",
+                    `${this.host}/events/academy/eventype/${slug}/visibilitysetting/${visibilityID}`
+                ),
             getEventbriteWebhook: (query) => {
                 const qs = serializeQuerystring(query);
                 return axios.bcGet(
@@ -842,11 +895,6 @@ class BreatheCodeClient {
             },
             getAcademyVenues: () =>
                 axios.bcGet("Venues", `${this.host}/events/academy/venues`),
-            getAcademyEventType: () =>
-                axios.bcGet(
-                    "Event Type",
-                    `${this.host}/events/academy/eventype`
-                ),
             downloadCSV: (query) => {
                 const qs = Object.keys(query)
                     .map((key) => `${key}=${query[key]}`)

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

@@ -11,11 +11,14 @@ import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import DeleteOutlineRounded from '@material-ui/icons/DeleteOutlineRounded';
 import AlarmOffRounded from '@material-ui/icons/AlarmOffRounded';
 import { SmartMUIDataTable } from '../../../components/SmartDataTable';
+import ConfirmAlert from '../../../components/ConfirmAlert';
 import BulkAction from "./BulkAction"
 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";
+import HelpIcon from '../../../components/HelpIcon';
 
 const relativeTime = require('dayjs/plugin/relativeTime');
 
@@ -56,7 +59,8 @@ const getStatus = (u) => {
 
 const OrganizationUsers = ({ organization }) => {
   const [items, setItems] = useState([]);
-
+  const [ userToAdd, setUserToAdd] = useState(false);
+  const [ confirm, setConfirm] = useState(false);
 
   const columns = [
     {
@@ -67,8 +71,21 @@ const OrganizationUsers = ({ organization }) => {
           const item = items[tableMeta.rowIndex];
           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.user !== null ? 
+                <h5 className="mb-0"><Link to={"/admissions/students/"+item.user.id}>{(item.user.first_name && item.user.first_name != '') ? item.user.first_name + " " + item.user.last_name : item.user.email}</Link></h5>
+                :
+                <h5 className="mb-0 text-danger">Not a 4Geeks user<HelpIcon message={`This user was found on github organization but no matching user was found on 4Geeks.com platform`} /></h5>
+              }
+              {item.github ? 
+                <small className="px-1 py-2px bg-light-green text-green border-radius-4">{item.github.username}</small> 
+                : item.username ? <>
+                  <small className="bg-warning px-1 border-radius-4">Backup github found: {item.username}</small> 
+                  <HelpIcon message={`User has no github connected but we found a username, probably from a previous connection. We can work with this username but its recommended to ask user to re-connect.`} />
+                </>
+                : <>
+                  <small className="bg-danger px-1 border-radius-4">No username found</small>
+                  <HelpIcon message={`User needs to connect github`} />
+                </>}
             </div>
           );
         },
@@ -105,8 +122,36 @@ 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 });
+    console.log("rrrresult", result);
+    if(result.status == 200){
+      setConfirm(true);
+    }
+    setUserToAdd(false);
+    loadData();
+  }
+
   return (
     <Grid item md={12} className="mt-2">
+      <ConfirmAlert
+        title={`User has been added to the invite queue. Keep in mind that invites are not sent in real time, instead, they are sent at 2AM UTC. Make sure the student has connected its GitHub account by then.`}
+        isOpen={confirm}
+        cancelText="I understand invites are processed later in batch"
+        onOpen={() => setConfirm(false)}
+      />
+      { 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" },