Added bubble descriptions on fields in blueprint configuration.

Change-Id: I8e6ba9aec570b7a199e7367f00a301cb3f701036

jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js

@@ -47,6 +47,7 @@ import MuiAlert from "@material-ui/lab/Alert";
 import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
 
 import Switch from "@material-ui/core/Switch";
+import CustomPopupState from "../../components/CustomPopupState/CustomPopupState";
 
 import i18next from "i18next";
 
@@ -383,7 +384,7 @@ export default function EditBlueprintConfiguration(props) {
         </Alert>
       </Snackbar>
       <GridContainer>
-        <GridItem xs={12} sm={12} md={4}>
+        <GridItem xs={12} sm={12} md={6}>
           <Card profile>
             <CardHeader color="info" stats icon>
               <CardIcon color="info">
@@ -396,7 +397,7 @@ export default function EditBlueprintConfiguration(props) {
               <div className={classes.root}>
                 <Grid container spacing={2}>
                   <Grid item xs={12} sm={12} md={12}>
-                    <FormLabel component="legend">UPnP</FormLabel>
+                    <FormLabel component="legend">UPnP <CustomPopupState message="UPnP allows networked devices to seamlessly discover each other's presence on the network and establish communications." /></FormLabel>
                     <FormControlLabel
                       control={
                         <Switch
@@ -419,7 +420,7 @@ export default function EditBlueprintConfiguration(props) {
                   </Grid>
                   <Grid item xs={12} sm={12} md={12}>
                     <FormControl component="fieldset">
-                      <FormLabel component="legend">Turn</FormLabel>
+                      <FormLabel component="legend">TURN <CustomPopupState message="TURN is a protocol that assists your devices in traversing NATs (Network address translators) or firewalls." /></FormLabel>
                       <RadioGroup
                         value={selectedTurnOption}
                         aria-label="gender"
@@ -558,7 +559,7 @@ export default function EditBlueprintConfiguration(props) {
                   <Grid item xs={12} sm={12} md={4}></Grid>
                   <Grid item xs={12} sm={12} md={12}>
                     <FormControl component="fieldset">
-                      <FormLabel component="legend">DHT Proxy</FormLabel>
+                      <FormLabel component="legend">DHT Proxy <CustomPopupState message="Configure custom settings for a given Distributed Hash Table (DHT) proxy server." /></FormLabel>
                       <RadioGroup
                         value={selectedDHTProxyOption}
                         aria-label="gender"

jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js

@@ -230,7 +230,7 @@ export default function EditBlueprintPermissions(props) {
         </Alert>
       </Snackbar>
       <GridContainer>
-        <GridItem xs={12} sm={12} md={4}>
+        <GridItem xs={12} sm={12} md={6}>
           <Card profile>
             <CardHeader color="info" stats icon>
               <CardIcon color="info">
@@ -242,7 +242,7 @@ export default function EditBlueprintPermissions(props) {
             <CardBody profile>
               <div className={classes.root}>
                 <Grid container spacing={5}>
-                  <Grid item xs={12} sm={12} md={6}>
+                  <Grid item xs={12} sm={12} md={12}>
                     <FormGroup row>
                       <FormControlLabel
                         control={

jams-react-client/src/views/Blueprints/Blueprints.js

@@ -378,11 +378,11 @@ export default function Blueprints() {
               blueprints.map((blueprint) => (
                 <GridItem xs={12} sm={12} md={2} key={blueprint.name}>
                   <Card profile>
-                    <CardBody profile>
                       <a
                         href="#"
                         onClick={(e) => redirectToBlueprint(e, blueprint.name)}
                       >
+                      <CardBody profile>
                         <h3 className={classes.cardTitle}>
                           {blueprint.name
                             ? blueprint.name
@@ -401,8 +401,8 @@ export default function Blueprints() {
                               : i18next.t("no_users_count", "No users count")}
                           </li>
                         </ul>
+                        </CardBody>
                       </a>
-                    </CardBody>
                     <CardFooter>
                       <IconButton
                         color="secondary"

jams-react-client/src/views/Groups/EditGroup.js

@@ -201,7 +201,7 @@ export default function EditGroup(props) {
         <div>
             <TemporaryDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} direction="right" addingToGroup={true} placeholder="Add user ..." groupName={name === ''?props.groupName:name} blueprintLabel={ blueprint == null ? null : props.getBlueprintsOptions()[blueprint].label} getGroup={getGroup}/>
             <GridContainer>
-                <GridItem xs={12} sm={12} md={4}>
+                <GridItem xs={12} sm={12} md={6}>
                     <Card profile>
                         <CardHeader color="info" stats icon>
                             <CardIcon color="info">

jams-react-client/src/views/Groups/Groups.js

@@ -455,11 +455,11 @@ export default function Groups() {
               .map((group) => (
                 <GridItem xs={12} sm={12} md={2} key={group.name}>
                   <Card profile>
-                    <CardBody profile>
                       <a
                         href="#"
                         onClick={(e) => redirectToGroup(e, group.name)}
                       >
+                      <CardBody profile>
                         <h3 className={classes.cardTitle}>{group.name}</h3>
                         <ul>
                           <li>
@@ -483,8 +483,8 @@ export default function Groups() {
                             {group.blueprint}
                           </li>
                         </ul>
-                      </a>
-                    </CardBody>
+                      </CardBody>
+                    </a>
                     <CardFooter>
                       <IconButton
                         color="secondary"
@@ -501,8 +501,9 @@ export default function Groups() {
           ) : (
             <GridItem xs={12} sm={12} md={2} key={groups.name}>
               <Card profile>
+
+                <a href="#" onClick={(e) => redirectToGroup(e, groups.name)}>
                 <CardBody profile>
-                  <a href="#" onClick={(e) => redirectToGroup(e, groups.name)}>
                     <h3 className={classes.cardTitle}>{groups.name}</h3>
                     <ul>
                       <li>
@@ -528,8 +529,8 @@ export default function Groups() {
                         {selectedBlueprint.label}
                       </li>
                     </ul>
+                    </CardBody>
                   </a>
-                </CardBody>
                 <CardFooter>
                   <IconButton
                     color="secondary"