moved Angular routes to separate module; load Webpack bundle before other main scripts

endpoints/common.py

@@ -166,6 +166,9 @@ def render_page_template(name, route_data=None, **kwargs):
     file_lists = [library_styles, main_styles, library_scripts, main_scripts]
     for file_list in file_lists:
       file_list.sort()
+    # Ensure Webpack bundle is first script on page
+    if 'js/build/bundle.js' in main_scripts: main_scripts.remove('js/build/bundle.js')
+    main_scripts = ['js/build/bundle.js'] + main_scripts
   else:
     library_styles = []
     main_styles = ['dist/quay-frontend.css']

karma.conf.js

@@ -39,27 +39,9 @@ module.exports = function(config) {
     preprocessors: {
       'static/lib/ngReact/react.ngReact.min.js': ['webpack'],
       'static/lib/angular-moment.min.js': ['webpack'],
-      // 'static/js/**/*.ts*': ['karma-typescript'],
       'static/js/**/*.ts*': ['webpack'],
     },
-    webpack: {
+    webpack: webpackConfig,
-      resolve: webpackConfig.resolve,
-      externals: webpackConfig.externals,
-      module: {
-        loaders: [
-          {
-            test: /\.tsx?$/,
-            loader: "ts-loader",
-            exclude: /node_modules/
-          },
-          {
-            test: /\.scss$/,
-            loaders: ['style', 'css', 'sass'],
-            exclude: /node_modules/
-          },
-        ]
-      }
-    },
     webpackMiddleware: {
       stats: 'errors-only'
     },

package.json

@@ -5,7 +5,7 @@
   "version": "1.0.0",
   "scripts": {
     "test": "./node_modules/.bin/karma start --single-run --browsers PhantomJS",
-    "test:node": "./node_modules/.bin/jasmine-ts './static/js/**/*.spec.ts'",
+    "test:node": "JASMINE_CONFIG_PATH=static/test/jasmine.json ./node_modules/.bin/jasmine-ts './static/js/**/*.spec.ts'",
     "build": "./node_modules/.bin/webpack --progress -p -v",
     "watch": "./node_modules/.bin/webpack --watch"
   },
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/angular": "1.5.16",
     "@types/angular-mocks": "^1.5.8",
+    "@types/angular-route": "^1.3.3",
     "@types/jasmine": "^2.5.41",
     "@types/react": "0.14.39",
     "@types/react-dom": "0.14.17",

static/js/constants/name-patterns.constant.ts

@@ -1,3 +1,6 @@
+/**
+ * Regex patterns to for validating account names.
+ */
 export default {
   TEAM_PATTERN: '^[a-z][a-z0-9]+$',
   ROBOT_PATTERN: '^[a-z][a-z0-9_]{1,254}$',

static/js/constants/pages.constant.ts

@@ -1,6 +1,18 @@
+/**
+ * Manages the creation and retrieval of pages (route + controller)
+ * TODO: Convert to class/Angular service
+ */
 export default {
   '_pages': {},
 
+  /**
+   * Create a page.
+   * @param pageName The name of the page.
+   * @param templateName The file name of the template.
+   * @param opt_controller Controller for the page.
+   * @param opt_flags Additional flags passed to route provider.
+   * @param opt_profiles Available profiles.
+   */
   'create': function (pageName, templateName, opt_controller, opt_flags, opt_profiles) {
     var profiles = opt_profiles || ['old-layout', 'layout'];
     for (var i = 0; i < profiles.length; ++i) {
@@ -13,6 +25,11 @@ export default {
     }
   },
 
+  /**
+   * Retrieve a registered page.
+   * @param pageName The name of the page.
+   * @param profiles Available profiles to search.
+   */
   'get': function (pageName, profiles) {
     for (var i = 0; i < profiles.length; ++i) {
       var current = profiles[i];

static/js/directives/ui/create-robot-dialog.js

@@ -12,8 +12,8 @@ angular.module('quay').directive('createRobotDialog', function () {
       'info': '=info',
       'robotCreated': '&robotCreated'
     },
-    controller: function($scope, $element, ApiService, UserService, namePatterns) {
+    controller: function($scope, $element, ApiService, UserService, NAME_PATTERNS) {
-      $scope.ROBOT_PATTERN = namePatterns.ROBOT_PATTERN;
+      $scope.ROBOT_PATTERN = NAME_PATTERNS.ROBOT_PATTERN;
 
       $scope.robotFinished = function(robot) {
         $scope.robotCreated({'robot': robot});

static/js/directives/ui/create-team-dialog.js

@@ -12,8 +12,8 @@ angular.module('quay').directive('createTeamDialog', function () {
       'info': '=info',
       'teamCreated': '&teamCreated'
     },
-    controller: function($scope, $element, ApiService, UserService, namePatterns) {
+    controller: function($scope, $element, ApiService, UserService, NAME_PATTERNS) {
-      $scope.TEAM_PATTERN = namePatterns.TEAM_PATTERN;
+      $scope.TEAM_PATTERN = NAME_PATTERNS.TEAM_PATTERN;
 
       $scope.teamFinished = function(team) {
         $scope.teamCreated({'team': team});

static/js/directives/ui/namespace-input.js

@@ -15,9 +15,9 @@ angular.module('quay').directive('namespaceInput', function () {
 
       'namespaceTitle': '@namespaceTitle',
     },
-    controller: function($scope, $element, namePatterns) {
+    controller: function($scope, $element, NAME_PATTERNS) {
-      $scope.USERNAME_PATTERN = namePatterns.USERNAME_PATTERN;
+      $scope.USERNAME_PATTERN = NAME_PATTERNS.USERNAME_PATTERN;
-      $scope.usernamePattern = new RegExp(namePatterns.USERNAME_PATTERN);
+      $scope.usernamePattern = new RegExp(NAME_PATTERNS.USERNAME_PATTERN);
 
       $scope.$watch('binding', function(binding) {
         if (!binding) {

static/js/quay.config.ts

@@ -1,5 +1,4 @@
 import * as Raven from 'raven-js';
-import { RouteBuilder } from './route-builder/route-builder.service';
 
 
 quayConfig.$inject = [
@@ -7,10 +6,6 @@ quayConfig.$inject = [
   'cfpLoadingBarProvider',
   '$tooltipProvider',
   '$compileProvider',
-  '$routeProvider',
-  '$locationProvider',
-  'pages',
-  'RouteBuilderProvider',
   'RestangularProvider',
   '$analyticsProvider',
 ];
@@ -20,17 +15,13 @@ export function quayConfig(
   cfpLoadingBarProvider,
   $tooltipProvider,
   $compileProvider,
-  $routeProvider,
-  $locationProvider,
-  pages,
-  RouteBuilderProvider,
   RestangularProvider,
   $analyticsProvider) {
   cfpLoadingBarProvider.includeSpinner = false;
 
   // decorate the tooltip getter
   var tooltipFactory = $tooltipProvider.$get[$tooltipProvider.$get.length - 1];
-  $tooltipProvider.$get[$tooltipProvider.$get.length - 1] = function($window) {
+  $tooltipProvider.$get[$tooltipProvider.$get.length - 1] = function($window: ng.IWindowService) {
     if ('ontouchstart' in $window) {
       var existing = tooltipFactory.apply(this, arguments);
       return function(element) {
@@ -51,132 +42,6 @@ export function quayConfig(
     $compileProvider.debugInfoEnabled(false);
   }
 
-  $locationProvider.html5Mode(true);
-
-  // WARNING WARNING WARNING
-  // If you add a route here, you must add a corresponding route in thr endpoints/web.py
-  // index rule to make sure that deep links directly deep into the app continue to work.
-  // WARNING WARNING WARNING
-
-  var layoutProfile: string = 'layout';
-
-  var routeBuilder: RouteBuilder = new RouteBuilderProvider.$get()($routeProvider, pages, [
-    // Start with the old pages (if we asked for it).
-    {id: 'old-layout', templatePath: '/static/partials/'},
-
-    // Fallback back combined new/existing pages.
-    {id: 'layout', templatePath: '/static/partials/'}
-  ], layoutProfile);
-
-  if ((<any>window).__features.SUPER_USERS) {
-    // QE Management
-    routeBuilder.route('/superuser/', 'superuser')
-
-    // QE Setup
-    .route('/setup/', 'setup');
-  }
-
-  routeBuilder
-  // Repository View
-  .route('/repository/:namespace/:name', 'repo-view')
-  .route('/repository/:namespace/:name/tag/:tag', 'repo-view')
-
-  // Image View
-  .route('/repository/:namespace/:name/image/:image', 'image-view')
-
-  // Repo Build View
-  .route('/repository/:namespace/:name/build/:buildid', 'build-view')
-
-  // Create repository notification
-  .route('/repository/:namespace/:name/create-notification', 'create-repository-notification')
-
-  // Repo List
-  .route('/repository/', 'repo-list')
-
-  // Organizations
-  .route('/organizations/', 'organizations')
-
-  // New Organization
-  .route('/organizations/new/', 'new-organization')
-
-  // View Organization
-  .route('/organization/:orgname', 'org-view')
-
-  // View Organization Team
-  .route('/organization/:orgname/teams/:teamname', 'team-view')
-
-  // Organization View Application
-  .route('/organization/:orgname/application/:clientid', 'manage-application')
-
-  // View Organization Billing
-  .route('/organization/:orgname/billing', 'billing')
-
-  // View Organization Billing Invoices
-  .route('/organization/:orgname/billing/invoices', 'invoices')
-
-  // View User
-  .route('/user/:username', 'user-view')
-
-  // View User Billing
-  .route('/user/:username/billing', 'billing')
-
-  // View User Billing Invoices
-  .route('/user/:username/billing/invoices', 'invoices')
-
-  // Sign In
-  .route('/signin/', 'signin')
-
-  // New Repository
-  .route('/new/', 'new-repo')
-
-  // Plans
-  .route('/plans/', 'plans')
-
-  // Tutorial
-  .route('/tutorial/', 'tutorial')
-
-  // Contact
-  .route('/contact/', 'contact')
-
-  // About
-  .route('/about/', 'about')
-
-  // Security
-  .route('/security/', 'security')
-
-  // TOS
-  .route('/tos', 'tos')
-
-  // Privacy
-  .route('/privacy', 'privacy')
-
-  // Change username
-  .route('/updateuser', 'update-user')
-
-  // Landing Page
-  .route('/', 'landing')
-
-  // Tour
-  .route('/tour/', 'tour')
-  .route('/tour/features', 'tour')
-  .route('/tour/organizations', 'tour')
-  .route('/tour/enterprise', 'tour')
-
-  // Confirm Invite
-  .route('/confirminvite', 'confirm-invite')
-
-  // Enterprise marketing page
-  .route('/enterprise', 'enterprise')
-
-  // Public Repo Experiments
-  .route('/__exp/publicRepo', 'public-repo-exp')
-
-  // 404/403
-  .route('/:catchall', 'error-view')
-  .route('/:catch/:all', 'error-view')
-  .route('/:catch/:all/:things', 'error-view')
-  .route('/:catch/:all/:things/:here', 'error-view');
-
   // Configure compile provider to add additional URL prefixes to the sanitization list. We use
   // these on the Contact page.
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|irc):/);

static/js/quay.module.ts

@@ -4,7 +4,8 @@ import quayPages from './quay-pages.module';
 import quayRun from './quay.run';
 import { angularViewArrayFactory } from './services/angular-view-array/angular-view-array';
 import { routeBuilderFactory } from './route-builder/route-builder.service.impl';
-import namePatterns from './constants/name-patterns.constant';
+import NAME_PATTERNS from './constants/name-patterns.constant';
+import { routeConfig } from './quay.routes';
 
 
 var quayDependencies: string[] = [
@@ -46,7 +47,8 @@ if ((<any>window).__config && (<any>window).__config.RECAPTCHA_SITE_KEY) {
 export default angular
   .module('quay', quayDependencies)
   .config(quayConfig)
-  .constant('namePatterns', namePatterns)
+  .config(routeConfig)
+  .constant('NAME_PATTERNS', NAME_PATTERNS)
   .factory('RouteBuilder', routeBuilderFactory)
   .factory('AngularViewArray', angularViewArrayFactory)
   .run(quayRun)

static/js/quay.routes.ts

@@ -0,0 +1,141 @@
+import { RouteBuilder } from './route-builder/route-builder.service';
+import pages from './constants/pages.constant';
+
+
+routeConfig.$inject = [
+  'pages',
+  'RouteBuilderProvider',
+  '$routeProvider',
+  '$locationProvider',
+];
+
+export function routeConfig(
+  pages: any,
+  RouteBuilderProvider: any,
+  $routeProvider: ng.route.IRouteProvider,
+  $locationProvider: ng.ILocationProvider) {
+  $locationProvider.html5Mode(true);
+
+  // WARNING WARNING WARNING
+  // If you add a route here, you must add a corresponding route in thr endpoints/web.py
+  // index rule to make sure that deep links directly deep into the app continue to work.
+  // WARNING WARNING WARNING
+
+  var layoutProfile: string = 'layout';
+
+  var routeBuilder: RouteBuilder = new RouteBuilderProvider.$get()($routeProvider, pages, [
+    // Start with the old pages (if we asked for it).
+    {id: 'old-layout', templatePath: '/static/partials/'},
+
+    // Fallback back combined new/existing pages.
+    {id: 'layout', templatePath: '/static/partials/'}
+  ], layoutProfile);
+
+  if ((<any>window).__features.SUPER_USERS) {
+    // QE Management
+    routeBuilder.route('/superuser/', 'superuser')
+      // QE Setup
+      .route('/setup/', 'setup');
+  }
+
+  routeBuilder
+    // Repository View
+    .route('/repository/:namespace/:name', 'repo-view')
+    .route('/repository/:namespace/:name/tag/:tag', 'repo-view')
+
+    // Image View
+    .route('/repository/:namespace/:name/image/:image', 'image-view')
+
+    // Repo Build View
+    .route('/repository/:namespace/:name/build/:buildid', 'build-view')
+
+    // Create repository notification
+    .route('/repository/:namespace/:name/create-notification', 'create-repository-notification')
+
+    // Repo List
+    .route('/repository/', 'repo-list')
+
+    // Organizations
+    .route('/organizations/', 'organizations')
+
+    // New Organization
+    .route('/organizations/new/', 'new-organization')
+
+    // View Organization
+    .route('/organization/:orgname', 'org-view')
+
+    // View Organization Team
+    .route('/organization/:orgname/teams/:teamname', 'team-view')
+
+    // Organization View Application
+    .route('/organization/:orgname/application/:clientid', 'manage-application')
+
+    // View Organization Billing
+    .route('/organization/:orgname/billing', 'billing')
+
+    // View Organization Billing Invoices
+    .route('/organization/:orgname/billing/invoices', 'invoices')
+
+    // View User
+    .route('/user/:username', 'user-view')
+
+    // View User Billing
+    .route('/user/:username/billing', 'billing')
+
+    // View User Billing Invoices
+    .route('/user/:username/billing/invoices', 'invoices')
+
+    // Sign In
+    .route('/signin/', 'signin')
+
+    // New Repository
+    .route('/new/', 'new-repo')
+
+    // Plans
+    .route('/plans/', 'plans')
+
+    // Tutorial
+    .route('/tutorial/', 'tutorial')
+
+    // Contact
+    .route('/contact/', 'contact')
+
+    // About
+    .route('/about/', 'about')
+
+    // Security
+    .route('/security/', 'security')
+
+    // TOS
+    .route('/tos', 'tos')
+
+    // Privacy
+    .route('/privacy', 'privacy')
+
+    // Change username
+    .route('/updateuser', 'update-user')
+
+    // Landing Page
+    .route('/', 'landing')
+
+    // Tour
+    .route('/tour/', 'tour')
+    .route('/tour/features', 'tour')
+    .route('/tour/organizations', 'tour')
+    .route('/tour/enterprise', 'tour')
+
+    // Confirm Invite
+    .route('/confirminvite', 'confirm-invite')
+
+    // Enterprise marketing page
+    .route('/enterprise', 'enterprise')
+
+    // Public Repo Experiments
+    .route('/__exp/publicRepo', 'public-repo-exp')
+
+    // 404/403
+    .route('/:catchall', 'error-view')
+    .route('/:catch/:all', 'error-view')
+    .route('/:catch/:all/:things', 'error-view')
+    .route('/:catch/:all/:things/:here', 'error-view');
+}

static/test/jasmine.json

@@ -0,0 +1,6 @@
+{
+  "spec_dir": "./static/js",
+  "spec_files": [
+    "**/*.spec.js"
+  ]
+}

templates/base.html

@@ -64,8 +64,6 @@
 
     {% endblock %}
 
-    <script src="/static/js/build/bundle.js"></script>
-
     {% for script_path, cache_buster in main_scripts %}
       <script src="/static/{{ script_path }}?v={{ cache_buster }}"></script>
     {% endfor %}

webpack.config.js

@@ -13,6 +13,7 @@ var config = {
       "sass": path.resolve('./static/css/directives/components/pages/')
     }
   },
+  // Use window.angular to maintain compatibility with non-Webpack components
   externals: {
     "angular": "angular",
   },