feat: Invite user to case (#79)

* chore: added actual Roboto font which fell back to sans-serif till now

* chore: refactored horizontal spacing out of the UserAvatar component

* feat: stage 1 of UI and styling of the user invitation dialog

* feat: fetching the unit data and associated users; rendering the roles

* chore: added wiring for triggering user invitation from the client

* feat: implemented change publication for REST resources

* feat: Meteor method for adding a user to a case's CC field

* feat: UI shows already invited, and captures interaction to invite more

* feat: disabled invitees sorting; list design adjustments

* feat: stage 2 of UI functionality for user invitation

* chore: made the unit + users loading work with the preloader too

* chore: added custom css for Roboto font to prevent faulty fallback

* feat: unregistered user invitation

* chore: added new env var for the new endpoint access

* feat: type enum added to invitations

* fix: made names show up instead of email addresses on invitee list #88

* chore: invite dialog layout spacing adjustments

* chore: package-lock to see if linting fails on CI due to wrong version

Author: nbiton

.env.sample

@@ -1,4 +1,5 @@
 BUGZILLA_ADMIN_KEY=<generate and copy from BZ>
 MAIL_URL=<SMPT provider URL>
 CLOUDINARY_URL=<retrieve by registering for a free account on Cloudinary (should end with /image/upload)>
-CLOUDINARY_PRESET=<generate in your Cloudinary account (look into 'Unsigned Uploading')>
+CLOUDINARY_PRESET=<generate in your Cloudinary account (look into 'Unsigned Uploading')>
+API_ACCESS_TOKEN=<set any value that will be used to authenticate API requests to this server by the "accessToken" query param>

.gitignore

@@ -1,6 +1,5 @@
 /.idea
 /node_modules/
-/package-lock.json
 /.vscode/
 .env
 /settings.json

AWS-docker-compose.yml

@@ -13,6 +13,7 @@ services:
        - CLOUDINARY_URL=${CLOUDINARY_URL}
        - CLOUDINARY_PRESET=${CLOUDINARY_PRESET}
        - COMMIT=${COMMIT}
+       - API_ACCESS_TOKEN=${API_ACCESS_TOKEN}
       logging:
             driver: awslogs
             options:

aws-env.dev

@@ -5,3 +5,4 @@ export MONGO_PASSWORD=$(aws --profile uneet-dev ssm get-parameters --names MONGO
 export MONGO_CONNECT="dev-shard-00-00-qxxao.mongodb.net:27017,dev-shard-00-01-qxxao.mongodb.net:27017,dev-shard-00-02-qxxao.mongodb.net:27017/test?ssl=true&replicaSet=Dev-shard-0&authSource=admin"
 export CLOUDINARY_PRESET=$(aws --profile uneet-dev ssm get-parameters --names CLOUDINARY_PRESET --with-decryption --query Parameters[0].Value --output text)
 export CLOUDINARY_URL=$(aws --profile uneet-dev ssm get-parameters --names CLOUDINARY_URL --with-decryption --query Parameters[0].Value --output text)
+export API_ACCESS_TOKEN=$(aws --profile uneet-dev ssm get-parameters --names API_ACCESS_TOKEN --with-decryption --query Parameters[0].Value --output text)

aws-env.prod

@@ -5,3 +5,4 @@ export MONGO_PASSWORD=$(aws --profile uneet-prod ssm get-parameters --names MONG
 export MONGO_CONNECT="prod-shard-00-00-n2ose.mongodb.net:27017,prod-shard-00-01-n2ose.mongodb.net:27017,prod-shard-00-02-n2ose.mongodb.net:27017/test?ssl=true&replicaSet=Prod-shard-0&authSource=admin"
 export CLOUDINARY_PRESET=$(aws --profile uneet-prod ssm get-parameters --names CLOUDINARY_PRESET --with-decryption --query Parameters[0].Value --output text)
 export CLOUDINARY_URL=$(aws --profile uneet-prod ssm get-parameters --names CLOUDINARY_URL --with-decryption --query Parameters[0].Value --output text)
+export API_ACCESS_TOKEN=$(aws --profile uneet-prod ssm get-parameters --names API_ACCESS_TOKEN --with-decryption --query Parameters[0].Value --output text)

client/main.css

@@ -6,6 +6,8 @@
   --rad-green: #c9fb65;
   --very-light-gray: #f0f0f0;
   --bondi-blue: #0095b6;
+  --warn-crimson: #ab0530;
+  --success-green: #99cc33
 }
 
 /* Tachyons fixes, overrides and additions */
@@ -40,6 +42,13 @@
 .moon-gray {
   color: var(--moon-gray);
 }
+.warn-crimson {
+  color: var(--warn-crimson);
+}
+
+.success-green {
+  color: var(--success-green);
+}
 
 .f7 {
   font-size: .75rem;
@@ -69,6 +78,10 @@
   background-color: var(--rad-green);
 }
 
+.bg-bondi-blue {
+  background-color: var(--bondi-blue);
+}
+
 .outline-0 {
   outline: 0;
 }
@@ -103,6 +116,22 @@
 .h2-5 { height: 3rem; }
 /* Tachyons Height Scale - end */
 
+/* Tachyons Opacity scale - start */
+.o-100 { opacity: 1;    }
+.o-90  { opacity: .9;   }
+.o-80  { opacity: .8;   }
+.o-70  { opacity: .7;   }
+.o-60  { opacity: .6;   }
+.o-50  { opacity: .5;   }
+.o-40  { opacity: .4;   }
+.o-30  { opacity: .3;   }
+.o-20  { opacity: .2;   }
+.o-10  { opacity: .1;   }
+.o-05  { opacity: .05;  }
+.o-025 { opacity: .025; }
+.o-0   { opacity: 0; }
+/* Tachyons Opacity scale - end */
+
 .mw-60 {
   max-width: 60%;
 }
@@ -125,6 +154,10 @@
   flex: 1;
 }
 
+.no-shrink {
+  flex-shrink: 0;
+}
+
 .flex-column {
   flex-direction: column;
 }
@@ -136,6 +169,9 @@
 .justify-center {
   justify-content: center;
 }
+.justify-space {
+  justify-content: space-between;
+}
 
 /* Functional CSS additions */
 .ellipsis {
@@ -171,3 +207,31 @@
 .gap1 {
   grid-gap: 0.25rem;
 }
+
+.disabled {
+  pointer-events: none;
+}
+
+/* Custom text-indent scale -start */
+.ti1 {
+  text-indent: 0.25rem;
+}
+.ti2 {
+  text-indent: 0.5rem;
+}
+.ti3 {
+  text-indent: 1rem;
+}
+.ti4 {
+  text-indent: 2rem;
+}
+.ti5 {
+  text-indent: 4rem;
+}
+.ti6 {
+  text-indent: 8rem;
+}
+.ti7 {
+  text-indent: 16rem;
+}
+/* Custom text-indent scale -end */

client/main.html

@@ -3,6 +3,7 @@
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
   <meta name="mobile-web-app-capable" content="yes">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="/roboto-font.css" rel="stylesheet">
   <link rel="shortcut icon" href="https://unee-t.com/favicon/favicon.ico">
   <link rel="icon" href="https://unee-t.com/favicon/cropped-favicon-32x32.png" sizes="32x32">
   <link rel="icon" href="https://unee-t.com/favicon/cropped-favicon-192x192.png" sizes="192x192">

imports/api/base/rest-resource-factory.js

@@ -128,8 +128,14 @@ export default ({collectionName, dataResolver}) => {
         .reduce((flatList, desc) => flatList.concat(desc.handles), [])
         .forEach(handle => handle.added(collectionName, item.id.toString(), item))
     },
-    handleChanged (resourceId, item) {
-      // TODO: complete implementation
+    handleChanged (resourceId, itemDiff) {
+      const idStr = resourceId.toString()
+      const handles = changedHandles[idStr]
+      if (handles) { // unlikely to be false, but I can imagine some edge cases
+        handles.forEach(handle => {
+          handle.changed(collectionName, idStr, itemDiff)
+        })
+      }
     },
     handleRemoved (resourceId, itemId) {
       // TODO: complete implementation

imports/api/cases.js

@@ -1,7 +1,10 @@
 import { Meteor } from 'meteor/meteor'
 import { Mongo } from 'meteor/mongo'
+import { check } from 'meteor/check'
+import bugzillaApi from '../util/bugzilla-api'
 
 import publicationFactory from './base/rest-resource-factory'
+import { emailValidator } from '../util/validators'
 
 const collectionName = 'cases'
 
@@ -13,13 +16,14 @@ export const factoryOptions = {
 
 const MAX_RESULTS = 20
 
+let publicationObj
 if (Meteor.isServer) {
-  const factory = publicationFactory(factoryOptions)
-  Meteor.publish('case', factory.publishById({
+  publicationObj = publicationFactory(factoryOptions)
+  Meteor.publish('case', publicationObj.publishById({
     uriTemplate: caseId => `/rest/bug/${caseId}`
   }))
   // TODO: Add tests for this
-  Meteor.publish('myCases', factory.publishByCustomQuery({
+  Meteor.publish('myCases', publicationObj.publishByCustomQuery({
     uriTemplate: () => '/rest/bug',
     queryBuilder: subHandle => {
       if (!subHandle.userId) {
@@ -57,6 +61,54 @@ if (Meteor.isServer) {
     }
   }))
 }
+
+Meteor.methods({
+  [`${collectionName}.addParticipant`] (email, caseId) {
+    check(email, String)
+    check(caseId, Number)
+
+    if (!emailValidator(email)) {
+      throw new Meteor.Error('Email is no valid')
+    }
+
+    // Making sure the user is logged in before inserting a comment
+    if (!Meteor.userId()) {
+      throw new Meteor.Error('not-authorized')
+    }
+
+    const { callAPI } = bugzillaApi
+    const currUser = Meteor.users.findOne({_id: Meteor.userId()})
+
+    if (Meteor.isClient) {
+      Cases.update({id: caseId}, {
+        $push: {
+          cc: email
+        }
+      })
+    } else {
+      const { token } = currUser.bugzillaCreds
+      const payload = {
+        token,
+        cc: {
+          add: [email]
+        }
+      }
+
+      try {
+        callAPI('put', `/rest/bug/${caseId}`, payload, false, true)
+
+        const caseData = callAPI('get', `/rest/bug/${caseId}`, {token}, false, true)
+        const { cc } = caseData.data.bugs[0]
+        console.log(`${email} was subscribed to case ${caseId}`)
+        publicationObj.handleChanged(caseId, {cc})
+      } catch (e) {
+        console.error(e)
+        throw new Meteor.Error('API error')
+      }
+    }
+  }
+})
+
 let Cases
 if (Meteor.isClient) {
   Cases = new Mongo.Collection(collectionName)

imports/api/pending-invitations.js

@@ -0,0 +1,105 @@
+import { Meteor } from 'meteor/meteor'
+import { Mongo } from 'meteor/mongo'
+import { Accounts } from 'meteor/accounts-base'
+import randToken from 'rand-token'
+import { callAPI } from '../util/bugzilla-api'
+
+export const collectionName = 'pendingInvitations'
+
+export const TYPE_ASSIGNED = 'type_assigned'
+export const TYPE_CC = 'type_cc'
+
+const allowedTypes = [TYPE_ASSIGNED, TYPE_CC]
+
+Meteor.methods({
+  [`${collectionName}.inviteNewUser`] (email, role, isOccupant, caseId, unitId, type) {
+    // Making sure the user is logged in before inserting a comment
+    if (!Meteor.userId()) throw new Meteor.Error('not-authorized')
+    if (!allowedTypes.includes(type)) {
+      throw new Meteor.Error('Invalid invitation type')
+    }
+    if (Meteor.isServer) {
+      const currUser = Meteor.users.findOne({_id: Meteor.userId()})
+      const { token } = currUser.bugzillaCreds
+
+      let unitItem
+      try {
+        const unitRequest = callAPI('get', `/rest/product/${unitId}`, {token}, false, true)
+        unitItem = unitRequest.data.products[0]
+      } catch (e) {
+        console.error(e)
+        throw new Meteor.Error('API Error')
+      }
+
+      // Checking only the default_assigned_to field (Should default_qa_contact be added too in the future?)
+      const isUserAlreadyInvolved = unitItem.components.filter(
+        ({default_assigned_to: assignedTo}) => assignedTo === email
+      ).length > 0
+      if (isUserAlreadyInvolved) {
+        throw new Meteor.Error('This email belongs to a user already assigned to a role in this unit')
+      }
+
+      let inviteeUser = Accounts.findUserByEmail(email)
+      if (inviteeUser) {
+        const conflictingCaseInvitations = inviteeUser.invitedToCases.filter(({caseId: caseIdB}) => caseIdB === caseId)
+        if (conflictingCaseInvitations.length) {
+          throw new Meteor.Error(
+            'This user has been invited before to this case, please wait until the invitation is finalized'
+          )
+        }
+        const conflictingUnitInvitations = inviteeUser.invitedToCases.filter(
+          ({role: roleB, isOccupant: isOccupantB, unitId: unitIdB}) => (
+            unitIdB === unitId && (isOccupantB !== isOccupant || roleB !== role)
+          )
+        )
+        if (conflictingUnitInvitations.length) {
+          throw new Meteor.Error('This user was already invited to another case for this unit, but in a different role')
+        }
+      }
+
+      if (!inviteeUser) {
+        // Using Meteor accounts package to create the user with no signup
+        Accounts.createUser({
+          email,
+          profile: {
+            isLimited: true
+          }
+        })
+
+        console.log(`new user created for ${email}`)
+
+        inviteeUser = Accounts.findUserByEmail(email)
+      }
+
+      // Updating the invitee user with the details of the invitation
+      Meteor.users.update(inviteeUser._id, {
+        $push: {
+          invitedToCases: {
+            role,
+            isOccupant,
+            caseId,
+            unitId,
+            type,
+            accessToken: randToken.generate(24)
+          }
+        }
+      })
+
+      console.log('Invitee updated', inviteeUser._id, Meteor.users.findOne(inviteeUser._id).invitedToCases)
+
+      const invitationId = PendingInvitations.insert({
+        invitedBy: currUser.bugzillaCreds.id,
+        invitee: inviteeUser.bugzillaCreds.id,
+        role,
+        isOccupant,
+        caseId,
+        unitId,
+        type
+      })
+
+      console.log('PendingInvitation created', PendingInvitations.findOne(invitationId))
+    }
+  }
+})
+
+export const PendingInvitations = new Mongo.Collection(collectionName)

imports/api/rest/get-pending-invitations.js

@@ -0,0 +1,8 @@
+import { PendingInvitations } from '../pending-invitations'
+export default (req, res) => {
+  if (req.query.accessToken === process.env.API_ACCESS_TOKEN) {
+    res.send(PendingInvitations.find().fetch())
+  } else {
+    res.send(401)
+  }
+}

imports/api/rest/rest-routes.js

@@ -1,6 +1,7 @@
 /* global JsonRoutes */
 import bodyParser from 'body-parser'
-import invitationCreateRoute from './invitation-create'
+// import invitationCreateRoute from './invitation-create'
+import getPendingInvitations from './get-pending-invitations'
 
 JsonRoutes.Middleware.use(bodyParser())
 JsonRoutes.Middleware.use((req, res, next) => {
@@ -20,4 +21,5 @@ const createRoute = (method, url, handler) => {
   JsonRoutes.add(method, apiBase + url, handler)
 }
 
-createRoute('post', '/invitation', invitationCreateRoute)
+// createRoute('post', '/invitation', invitationCreateRoute)
+createRoute('get', '/pending-invitations', getPendingInvitations)