Great e-mail about the new features and improvements you all have implemented! As someone new to deploying things on clouds, I'm logging some feedback about terminology for your consideration:

• On the cloud.gov status page, I'm not sure what IAA means and Google wasn't too helpful. I'm not sure who your final audience will be, but it's possible they wouldn't know the term API either.
• What the IAA/API numbers mean in terms of impact to user (e.g. if UAA response time trends down, how will that affect use of cloud foundry)?
• Web-based console, woo! The Application Authorization page requests access to my Pivotal account, which I guess is the same my 18F Cloud Foundry account? You've such a good job of abstracting everything away that references to Pivotal and other terms like deck (instead of console) are confusing.

• each org should have a route for users to bookmark
• refactoring the code this way will cause more api call, but it shouldn't be too many.

Instead of displaying a message here maybe give the user a link to the space it's in.

As a user, the reset password workflow is frustrating.

1. The requirements for a new password are not in the email, nor on the page where you are entering a new password. Instead, they are doled out to you piecemeal based on which constraints you have violated.
2. Apparently once you have "used" a password reset link once you cannot use it again. That fact that is not immediately apparent if you click on the link again and put in a conforming password; the new password has not actually been accepted but no error is given.

In order to easily manage their organization an organization manager should be able to remove a user from the organization through the deck.

Acceptance Criteria

• [] GIVEN an org O AND a active user OM with OrgManager role on O AND an active user OU with OrgMember on O WHEN OM navigates to the organization user list for O THEN OM should see a button to remove OU from the organization
• [] GIVEN an org O AND a active user OM with OrgManager role on O AND an active user OU with OrgMember on O AND OU does not have any associations with O spaces WHEN they click the remove button on the dialog THEN the user is removed from the OUL.

Screen Shot 2015-12-16 at 12.13.09 PM.png (https://18f.aha.io:443/attachments/token/8b9323140f89abec0578e0cdad63af9bdf4fe576b1f24df3cb4a0b75d3805f90.download)

codecheck.sh does basic lint checks and runs the tests. gometalinter should be used as it does alot more

https://github.com/alecthomas/gometalinter

In order to use a service in a space an org manager should be able to create a new service instance from the marketplace page in the deck UI.

• [] GIVEN org manager OM AND org O AND space S AND O has service SV available in the marketplace MP AND SV has service plan SP WHEN OM navigates to MP THEN OM should see a link to add SP to S.
• [] GIVEN org manager OM and org O and space S and O has a service SV available in the marketplace MP AND SV has a service plan SP WHEN OM adds SP to S THEN OM should see SV under Service instances list in S.

While writing acceptance tests for the deck, I found the UAA login page, https://login.cloud.gov/login, will sometimes not automatically redirect to the page that requested it but will instead show another page that includes a button to go to the deck. This button is broken because it doesn't go to the local deck.

This is causing random failures in acceptance tests.

In order developers to be able to use their own CSS for the deck AND for cloudgov users to have a shared visual experience when using the deck, the deck should incorporate the cg-style CSS components into it's own components

Acceptance criteria

• Any existing cg-style components that are in use on the deck should be importable.
• Components CSS should be imported by using CSS modules, minimizing global classes.
• Remove all sass processing from webpack config.

Only in the case when navigating to an app page for an app in the STOPPED state, the event's refresh button never unblocks

The deck is unable to use the nicely designed WDS checkboxes because they use the label to (un)check the box, which has to be incorporated into the react component.

More information can be found here: e95f89c

If you come to the home screen and have not logged in. The sidebar should not show.

After the user gives the the web service access, if that user revokes the client while the session has a token that has not expired time wise, it will still proceed to allow the user to view the page.

Idea is:
Create a separate http test server with a known route.

Have the cf-deck proxy target the new http test server.

Upstream story in Aha: https://18f.aha.io/requirements/CGP-217-2

In order for developers to have accurate React documentation and to have more thorough JS linting, react should be upgraded to at least 0.14.

Acceptance criteria

• React version higher then 0.14.x is in package.json.
• The JS eslinter checks and fails on the use of deprecated React functions, such as React.render

A bunch of methods were deprecated and airbnb style depends on this.

An advanced user could open the console in their browser and change the interval at which they make requests to our backend server for live data.

The backend server should maintain a timestamp of the users last requests for the same endpoint (for certain endpoints). If too many requests are made, refuse passing it on to the CF API server

https://travis-ci.org/18F/cg-deck

• Failure in Spec Setup (BeforeEach) [12.066 seconds]
Services
/root/workplace/src/github.com/18F/cg-deck/acceptance/services_test.go:202
  should allow an org manager to see a list of service plans for services [BeforeEach]
  /root/workplace/src/github.com/18F/cg-deck/acceptance/services_test.go:81
  Timed out after 10.000s.
  Expected page to have URL equaling
      http://127.0.0.1:35848/#/dashboard
  but found
      https://login.cloud.gov/login?error=login_failure

In order for developers to write code in a consistent style, there should be a decided upon coding style guide with linting tools and configuration.

Files that are currently failing linting should be added to a lintignore file that will ensure the linter doesn't error for them.

Acceptance criteria

• A developer should be able to find what CSS style guide is the standard in the CONTRIBUTING document.
• The automated tests should not pass if a file is not linted.
• A developer should be able to see specific output on why their linting failed, including file and file number.
• A developer should be able to add linting to a file by removing the file from a lint ignore file.

#85 did not allow a user to refresh without being redirected to the home page. Reverted

Imagine the following nav:

<ul class="nav">
  <li class="nav-item">
    <a>cf-deck org</a>
  </li>
  <ul class="nav">
    <li class="nav-item">
      <a>spaces</a>
    </li>
    ...
  </ul>
  <li class="nav-item">
    <a>cf org</a>
  </li>
  <ul class="nav">
    <li class="nav-item">
      <a>spaces</a>
    </li>
    ...
  </ul>
</ul>

I want to write agouti functionality to click on the spaces like for a certain org. I start this by finding the link for the org by it's name:

nav.FindByLink('cf org')

Which puts me at the second <a> withing ul li. Now I want to get to the ul above and from there, go to the spaces link. In jquery this would be like nav.parent('ul').children('spaces'). But I can't do this in agouti because there's no parent method. There's no parent selector in CSS, making this impossible.

Any ideas on how I could write a test case like this without a parent method?

Another button on the view would be very useful as getting this info means parsing json from the env of a bound app currently.

In order for a user to change which account they're logged into, there should be a logout button in the UI.

http://intogooglego.blogspot.co.at/2015/09/day-20-go-http2-server-example.html

Implement a handler that clears the Token from the session and redirects the user to the login page.

Results can be recreated using HTML_CodeSniffer

Results for https://console.cloud.gov

• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.09:1. Recommendation: change background to #1b809e.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div:nth-child(2) > div > div:nth-child(2) > div > div > div:nth-child(4) > h3 > span
  • <span class="label label-info">Alpha</span>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.93:1. Recommendation: change background to #fefefe.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div:nth-child(2) > div > div:nth-child(2) > div > div > div:nth-child(4) > a > span
  • <span class="glyphicon glyphicon-link" aria-hidden="true">Contribute</span>
• Error The html element should have a lang or xml:lang attribute which describes the language of the document.
  • WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
  • html
  • <html ng-app="cfdeck" class="ng-scope"><head><style type="text/css">@c...</html>
• Error This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.09:1. Recommendation: change background to #1b809e.
  • WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
  • html > body > div:nth-child(1) > nav > div > div:nth-child(1) > a > span
  • <span class="label label-info">Alpha</span>

Summary

Errors: 4

Upon doing a cf push, now the app will start to use a nodejs build pack.
this can be temporarily fixed by specifying the -b parameter.
cf push -b https://github.com/cloudfoundry/go-buildpack.git
Instead the buildpack should be specified by the manifest.yml file.

In order for the cloud.gov development team to write consistent, clean, tested code the cloud.gov front end codebase should not have tech debt older then a year.

Acceptance criteria

• Any major front end libraries should not be using versions more then a year old
• Developers should be able to run a suite of linting, unit tests and functional tests across the codebase.
• There should be documentation on coding workflow and standards.

WIP

Current stack

• The current JavaScript framework uses AngularJS
  • Relies heavily on two-way binding within it
• Optimistic frontend
  • Surfaces some errors to the user. (@RAMIREZG can talk more about his work with the routes and services error handling)
  • Otherwise, fails silently.
• Bootstrap 3
• Frontend Unit Tests
  • @RAMIREZG can talk more about this system
  • Not covering all edge cases
• Retry system (very much well needed)
  • The CloudFoundry API, that the Go Backend talks to, will timeout so we have the frontend tell the backend retry on certain URLs (@RAMIREZG can tell more about which URLs)
  • Need to somehow show an error if even the retry system fails

External libraries

Angular-ladda

• Used for having bootstrap buttons with spinners to indicate progress

ngSanitize

-@RAMIREZG fill in about this

angular-bootstrap-confirm aka mwl.confirm

• Used for confirmation dialogs. Usually used for destructive / highly impactful actions.
• Not sure if the ATDD framework would like this.
  

angular-toggle-switch

• Used for toggling roles of users.
• Not sure if the ATDD framework would like this.
  

HappyFox Chat

• Used for customers to talk to us about problems
• Cooked into the frontend. (Hard for someone else to fork the project)

Statuspage.io

• Used to indicate the overall status of all of the components.
• Used as AngularJS directive in the header.
• BUG: Doesn't refresh when we go from page to page. (Fixed by Pull 107)
• Cooked into the frontend. (Hard for someone else to fork the project)

New stack

• React
• Gov't Pattern Library

WIP

Orgs are clear, but spaces are not.

Thoughts on having it as just "Organizations [carat]"?

Should we shorten this text? If a user 1) makes the width of their window small or 2) opens their developer console even while their width is fairly large, it will cause the text to go to the next line.

@RAMIREZG

We can go back and change this later, but this should make it clearer which ctrl we're using especially when we have parent child controller setups.

<div ng-controller="MainCtrl as main">
  {{ main.someObject }}
</div>

In order for developers to write code in a consistent style, there should be a decided upon coding style guide with linting tools and configuration.

Files that are currently failing linting should be added to a lintignore file that will ensure the linter doesn't error for them.

Acceptance criteria

• A developer should be able to find what Javascript style guide is the standard in the CONTRIBUTING document.
• The automated tests should not pass if a file is not linted.
• A developer should be able to see specific output on why their linting failed, including file and file number.
• A developer should be able to add linting to a file by removing the file from a lint ignore file.

The quota % (currently displayed) can imply the topline quota amount, most of the time, but when you want to get an immediate read on the quota amount (which is the billing tier), it would be helpful to have the absolute quota number for that space.

This is also required for a space whose usage is currently 0. The "quota usage" will be 0%, but there is no way to know what the quota itself currently is for the app.

Still WIP

Now that we are about to engage on the revamp of the frontend, we are able to also revamp our acceptance testing due to how the ATDD test suite addresses elements in the DOM.

Objective

This issue documents the overall plan for adding more ATDD coverage.
These acceptance tests should continue to reflect features exhibited from the point of view of the user.

Requirements:

• Use of pseudo-live orgs and spaces. Currently we are using real accounts that have access to real orgs and spaces hierarchies. We should instead use credentials of dummy account(s) which have access to dummy orgs and spaces.
  • Dummy users. This allows testing of 1) interactions between two users such as role assignment, 2) compare role access
  • Dummy orgs. Essential for spaces, apps and services
  • Dummy spaces Essential for apps
• Use of pseudo "resources" The introduction of the pseudo org-space hierarchies, need to be populated with pseudo resources such as apps and services.
  • Dummy app(s) The purpose of the dummy app(s) will 1) allow for manipulation of a "live" app without disrupting real apps.
  • Dummy service(s) The purpose of the dummy app(s) will 1) allow for manipulation of a "live" services without cost. can probably skip this one in favor of an existing service that doesn't do much

Implementation

One Time Setup

• Create two dummy users
  • Name: "cf-deck-testuser-01", "cf-deck-testuser-02"
• Create two dummy orgs
  • Name: "cf-deck-testorg-01", "cf-deck-testorg-02"
  • Members
    • "cf-deck-testuser-01" Org Manager of "cf-deck-testorg-01"
    • "cf-deck-testuser-02" Org Manager of "cf-deck-testorg-02"
  • Quota: Minimum quota size for each org
  • Services available: no paid services for each org
• Create 1 dummy space in each dummy org
  • Name:
    • "cf-deck-testorg-01-testspace-01" inside "cf-deck-testorg-01" org
    • "cf-deck-testorg-02-testspace-01" inside "cf-deck-testorg-02" org

Per Test Suite Run / Per Individual Test Run

• Delete any existing resources
• Reset the roles back to their state as of one time setup
• Deploy X dummy app(s) and dummy services(s)
• Run ATDD suite for feature(s)
• Delete any existing resources
• Reset the roles back to their state as of one time setup

Features currently under ATDD

• Authentication
  • Ability to login with correct credentials
  • Redirect unauthenticated users back to home screen when trying to access authenticated links

Features to be covered by ATDD

• App Management
  • Ability to stop, start, and restart controls
  • Ability to view stats
  • Ability to view logs and events
• Authentication
  • Logout workflow
• Marketplace @RAMIREZG
  • View services in marketplace
  • View service plans for a specific service
  • Create a service instances for a Space
• Org
  • Get overview of spaces within the org
  • Search for org can probably skip
• Org Management
  • Add and remove users to org
  • Add and remove org roles to an org user.
• Routes @RAMIREZG
  • Create a route
  • Delete a route
• Service Instances @RAMIREZG
  • View service instances for a space
  • Delete service instances for a space
  • Bind a service to an app
  • Unbind service to an app
• Spaces @RAMIREZG
  • View spaces
• Space Management @RAMIREZG
  • Add and remove users to space
  • Add and remove org roles to an org space.

Still WIP

• This should clean up some of the code in the controllers and make the code more flexible.

@dlapiduz and I were talking a bit about the outcome of this story.

Org-level user management is accessed by first drilling down into a space. This is really misleading and confusing information architecture!

Some suggestions for cleaning this up:

• Move the tab for managing org-level perms to the org view, alongside the list of spaces, as simply "User Management"... Let the IA make it clear that it's at the org-level.
• The pictured area would then only concern managing users for that space, so the extra "[current|all]" row of tabs could be removed and make this much easier to understand.
• The "inherited" users from the org level could be shown in the space-specific list in a read-only form. This would keep that a comprehensive list of people with access to the space.

In order for developers to not have to deal with unused CSS code AND to improve performance of the app, bootstrap CSS should be removed from the app and dependencies, AND there should be no bootstrap classes in the components.

Acceptance criteria

• Bootstrap should not be in the bundled CSS output file
• Bootstrap should not be a dependency in npm
• None of the components should have bootstrap classes in their className attribute.