AWS CodeBuild + Bitbucket – Teams = Epic Fail

Updated 8/19/2017: Amazon has now updated AWS CodeBuild service to support Teams! In other words, in the 2 days since I posted this issue, it has now been fixed. Hooray! I now see my team projects in the list of repositories after linking my account. One minor nitpick though… They sort the list of repositories in the drop-down chronologically, not alphabetically. Since I have hundreds of repositories, that means in order to find a particular one I have to remember the order it was created. Hope they fix this (minor) issue too!

As a user of both Bitbucket and AWS, I was recently excited to hear Amazon had announced integration with both AWS CloudBuild and Atlassian Bitbucket. For those unfamiliar with these two products, AWS CloudBuild is part of Amazon’s suite of code automation CI/CD toolset. This service, along with the full suite, provides the ability to automate software build creation, testing, and deployment. Atlassian Bitbucket, on the other hand, is a large source code repository provider. The AWS announcement means that you can now build projects in AWS using Bitbucket repositories as the source.

Or that’s what it was supposed to mean… Apparently, no one told AWS that most professional software development companies use Bitbucket Teams to manage projects. The new AWS integration is accomplished using an OAuth authenticated sign-in from within the AWS CodeBuild project creation wizard. Unfortunately, after logging in it only allows two types of repositories to be selected: public repositories and those in your *personal* account. Most people using Bitbucket professional use teams and do not store the repositories in their personal account. The result is that no repositories are available for integration.

In other words… it’s broken. One solution would be to authenticate with the team login but Atlassian disabled the ability to login with the team account years ago. Now, Amazon only announced this feature recently, so it is possible they will get around to fixing it but in the short-term it is quite disappointing. While there are other ways to integrate AWS CodeDeploy and Bitbucket, I was looking for an all-in-one solution. In fact, when I recently tried Atlassian’s plugin to integrate one of my repositories into AWS CodeBuild, the web page just froze. Oh well, hopefully Amazon will fix this oversight soon!

By the way, you might ask, “Why I don’t just move my source code repository into AWS CodeCommit?” The answer is simple logistics. If I have hundreds of projects used by hundreds of developers, migrating them to a new repository is not easy/fun. The advantage of having this integration working is that it provides a nice, fluid transition toward migrating to AWS builds, without the commitment of actually transferring any repositories.

how to view source code generated by dojo

Dojo abstracts alot from you when creating widgets.  So how do you see the real source?  The source is important when testing certain types of requirements.  Accessibility is one of those requirements.

Normal code

As an example, I wrote a simple line of code to display a Dojo widget for currency.

<input type="text" id="amount" name="amt" dojoType="dijit.form.CurrencyTextBox" constraints="{fractional:true}" currency="USD" invalidMessage="Invalid amount format." />

When I do a simple “view source”, I see exactly what I have here.  However, I’m interested in the source code the browser is rendering.  I installed the Firefox Web Developer extension to find out.  It was a simple as going to my web page and clicking view source –> view generated source.  The result is at the bottom of this post as it’s a bit long.  [I’m curious what other/better ways there are of seeing the source.  Feel free to add a comment if you have one.]

This is really interesting.  A few things jump out at me:

  1. Dojo takes care of quite a bit a code for us!
  2. Dojo creates a Dojo input element that does all the work and wraps a hidden input element representing what I actually wrote.  This lets me use the name I specified in my own code while letting Dojo add everything it needs.
  3. IBM did a good job adding accessibility support to Dojo.

Error messages

I was also interested in what was generated when validation pops up that you did something wrong.  I was able to use the same steps – enter an invalid amount, tab out and then view source –> view generated source.  Dojo generated a single exra div for that.  It also generated the ARIA/WAI alert roles so a screenreader knows the validation has popped up.

<div role="alert" class="dijitTooltipContainer dijitTooltipContents"
dojoattachpoint="containerNode" wairole="alert">Invalid amount format.</div>

The following is what gets generated for the one line input tag:

<div widgetid="amount" value="NaN" role="presentation" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox" id="widget_amount" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" wairole="presentation">
<div style="overflow: hidden;">
<div class="dijitReset dijitValidationIcon"><br></div>
<div class="dijitReset dijitValidationIconText">?</div>
<div class="dijitReset dijitInputField">
<input aria-invalid="false" aria-valuenow="NaN" value="" tabindex="0" id="amount" class="dijitReset"       dojoattachpoint="textbox,focusNode"
autocomplete="off" type="text">
<input name="amt" style="display: none;" value="" type="text">