From 97256841bdb0a93d35b2b913c85f725c0f2cf29a Mon Sep 17 00:00:00 2001
From: Alec Merdler <merdlera@oregonstate.edu>
Date: Mon, 22 May 2017 13:59:12 -0700
Subject: [PATCH] Refactor Manage Trigger to Single Workflow (#2577)

* Refactor Manage Trigger to Single Workflow
---
 endpoints/api/robot.py                        |   2 +-
 static/css/core-ui.css                        |   1 +
 .../context-path-select.component.spec.ts     |  32 +-
 .../context-path-select.component.ts          |  25 +-
 .../ui/cor-table/cor-table-col.component.ts   |  10 +-
 .../ui/cor-table/cor-table.component.html     |  28 +-
 .../ui/cor-table/cor-table.component.ts       |  20 +-
 .../dockerfile-path-select.component.spec.ts  |  24 +-
 .../dockerfile-path-select.component.ts       |  25 +-
 .../linear-workflow-section.component.spec.ts |  14 +
 .../linear-workflow-section.component.ts      |  25 +-
 .../linear-workflow.component.html            |  14 +-
 .../linear-workflow.component.spec.ts         |  33 +-
 .../linear-workflow.component.ts              |  22 +-
 .../manage-trigger-custom-git.component.html  |  64 ---
 ...anage-trigger-custom-git.component.spec.ts |  14 -
 .../manage-trigger-custom-git.component.ts    |  35 --
 .../manage-trigger-githost.component.html     | 413 -----------------
 .../manage-trigger-githost.component.spec.ts  | 113 -----
 .../manage-trigger-githost.component.ts       | 327 -------------
 .../manage-trigger.component.html             | 432 ++++++++++++++++++
 .../manage-trigger.component.spec.ts          | 266 +++++++++++
 .../manage-trigger.component.ts               | 331 ++++++++++++++
 static/js/quay.module.ts                      |   6 +-
 static/js/types/common.types.ts               |  41 +-
 static/partials/trigger-setup.html            |  22 +-
 26 files changed, 1262 insertions(+), 1077 deletions(-)
 delete mode 100644 static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
 delete mode 100644 static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts
 delete mode 100644 static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts
 delete mode 100644 static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html
 delete mode 100644 static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.spec.ts
 delete mode 100644 static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.ts
 create mode 100644 static/js/directives/ui/manage-trigger/manage-trigger.component.html
 create mode 100644 static/js/directives/ui/manage-trigger/manage-trigger.component.spec.ts
 create mode 100644 static/js/directives/ui/manage-trigger/manage-trigger.component.ts

diff --git a/endpoints/api/robot.py b/endpoints/api/robot.py
index 8f1cbde73..b2bf36563 100644
--- a/endpoints/api/robot.py
+++ b/endpoints/api/robot.py
@@ -78,7 +78,7 @@ class UserRobotList(ApiResource):
   @nickname('getUserRobots')
   @parse_args()
   @query_param('permissions',
-               'Whether to include repostories and teams in which the robots have permission.',
+               'Whether to include repositories and teams in which the robots have permission.',
                type=truthy_bool, default=False)
   def get(self, parsed_args):
     """ List the available robots for the user. """
diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index ef80ab7d7..d894b95b4 100644
--- a/static/css/core-ui.css
+++ b/static/css/core-ui.css
@@ -1239,6 +1239,7 @@ a:focus {
 
 .co-top-bar {
   height: 50px;
+  padding-bottom: 40px;
 }
 
 .co-check-bar .co-checked-actions .btn {
diff --git a/static/js/directives/ui/context-path-select/context-path-select.component.spec.ts b/static/js/directives/ui/context-path-select/context-path-select.component.spec.ts
index ebd2a71f6..18a5c0dda 100644
--- a/static/js/directives/ui/context-path-select/context-path-select.component.spec.ts
+++ b/static/js/directives/ui/context-path-select/context-path-select.component.spec.ts
@@ -1,4 +1,4 @@
-import { ContextPathSelectComponent } from './context-path-select.component';
+import { ContextPathSelectComponent, ContextChangeEvent } from './context-path-select.component';
 
 
 describe("ContextPathSelectComponent", () => {
@@ -57,23 +57,33 @@ describe("ContextPathSelectComponent", () => {
 
       expect(component.isValidContext).toBe(false);
     });
+
+    it("emits output event indicating build context changed", (done) => {
+      component.contextChanged.subscribe((event: ContextChangeEvent) => {
+        expect(event.contextDir).toEqual(newContext);
+        expect(event.isValid).toEqual(component.isValidContext);
+        done();
+      });
+
+      component.setContext(newContext);
+    });
   });
 
   describe("setSelectedContext", () => {
-    var context: string;
+    var newContext: string;
 
     beforeEach(() => {
-      context = '/conf';
+      newContext = '/conf';
     });
 
     it("sets current context to given context", () => {
-      component.setSelectedContext(context);
+      component.setSelectedContext(newContext);
 
-      expect(component.currentContext).toEqual(context);
+      expect(component.currentContext).toEqual(newContext);
     });
 
     it("sets valid context flag to true if given context is valid", () => {
-      component.setSelectedContext(context);
+      component.setSelectedContext(newContext);
 
       expect(component.isValidContext).toBe(true);
     });
@@ -83,5 +93,15 @@ describe("ContextPathSelectComponent", () => {
 
       expect(component.isValidContext).toBe(false);
     });
+
+    it("emits output event indicating build context changed", (done) => {
+      component.contextChanged.subscribe((event: ContextChangeEvent) => {
+        expect(event.contextDir).toEqual(newContext);
+        expect(event.isValid).toEqual(component.isValidContext);
+        done();
+      });
+
+      component.setSelectedContext(newContext);
+    });
   });
 });
\ No newline at end of file
diff --git a/static/js/directives/ui/context-path-select/context-path-select.component.ts b/static/js/directives/ui/context-path-select/context-path-select.component.ts
index bfd635c71..3fd9f33d4 100644
--- a/static/js/directives/ui/context-path-select/context-path-select.component.ts
+++ b/static/js/directives/ui/context-path-select/context-path-select.component.ts
@@ -1,4 +1,4 @@
-import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
+import { Input, Component, OnChanges, SimpleChanges, Output, EventEmitter } from 'ng-metadata/core';
 
 
 /**
@@ -10,10 +10,10 @@ import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
 })
 export class ContextPathSelectComponent implements OnChanges {
 
-  // FIXME: Use one-way data binding
-  @Input('=') public currentContext: string = '';
-  @Input('=') public isValidContext: boolean;
-  @Input('=') public contexts: string[];
+  @Input('<') public currentContext: string = '';
+  @Input('<') public contexts: string[];
+  @Output() public contextChanged: EventEmitter<ContextChangeEvent> = new EventEmitter();
+  public isValidContext: boolean;
   private isUnknownContext: boolean = true;
   private selectedContext: string | null = null;
 
@@ -25,12 +25,16 @@ export class ContextPathSelectComponent implements OnChanges {
     this.currentContext = context;
     this.selectedContext = null;
     this.isValidContext = this.checkContext(context, this.contexts);
+
+    this.contextChanged.emit({contextDir: context, isValid: this.isValidContext});
   }
 
   public setSelectedContext(context: string): void {
     this.currentContext = context;
     this.selectedContext = context;
     this.isValidContext = this.checkContext(context, this.contexts);
+
+    this.contextChanged.emit({contextDir: context, isValid: this.isValidContext});
   }
 
   private checkContext(context: string = '', contexts: string[] = []): boolean {
@@ -39,8 +43,17 @@ export class ContextPathSelectComponent implements OnChanges {
 
     if (context.length > 0 && context[0] === '/') {
       isValidContext = true;
-      this.isUnknownContext = true;
+      this.isUnknownContext = contexts.indexOf(context) != -1;
     }
     return isValidContext;
   }
 }
+
+
+/**
+ * Build context changed event.
+ */
+export type ContextChangeEvent = {
+  contextDir: string;
+  isValid: boolean;
+};
diff --git a/static/js/directives/ui/cor-table/cor-table-col.component.ts b/static/js/directives/ui/cor-table/cor-table-col.component.ts
index fcda31d89..9a53141bd 100644
--- a/static/js/directives/ui/cor-table/cor-table-col.component.ts
+++ b/static/js/directives/ui/cor-table/cor-table-col.component.ts
@@ -15,9 +15,13 @@ export class CorTableColumn implements OnInit {
   @Input('@') public datafield: string;
   @Input('@') public sortfield: string;
   @Input('@') public selected: string;
+  @Input('=') public bindModel: any;
+  @Input('@') public style: string;
+  @Input('@') public class: string;
   @Input('@') public kindof: string;
 
-  constructor(@Host() @Inject(CorTableComponent) private parent: CorTableComponent) {
+  constructor(@Host() @Inject(CorTableComponent) private parent: CorTableComponent,
+              @Inject('TableService') private tableService: any) {
 
   }
 
@@ -29,9 +33,9 @@ export class CorTableColumn implements OnInit {
     return this.kindof == 'datetime';
   }
 
-  public processColumnForOrdered(tableService: any, value: any): any {
+  public processColumnForOrdered(value: any): any {
     if (this.kindof == 'datetime') {
-       return tableService.getReversedTimestamp(value);
+      return this.tableService.getReversedTimestamp(value);
     }
 
     return value;
diff --git a/static/js/directives/ui/cor-table/cor-table.component.html b/static/js/directives/ui/cor-table/cor-table.component.html
index 1ed8fb961..f6d18048c 100644
--- a/static/js/directives/ui/cor-table/cor-table.component.html
+++ b/static/js/directives/ui/cor-table/cor-table.component.html
@@ -4,29 +4,39 @@
   <!-- Filter -->
   <div class="co-top-bar" ng-if="$ctrl.compact != 'true'">
     <span class="co-filter-box with-options" ng-if="$ctrl.tableData.length && $ctrl.filterFields.length">
+      <span class="page-controls"
+            total-count="$ctrl.orderedData.entries.length"
+            current-page="$ctrl.options.page"
+            page-size="$ctrl.maxDisplayCount"></span>
       <span class="filter-message" ng-if="$ctrl.options.filter">
-        Showing {{ $ctrl.orderedData.entries.length }} of {{ $ctrl.tableData.length }} {{ $ctrl.tableItemTitle }}
+        Showing {{ $ctrl.orderedData.entries.length }} of {{ $ctrl.tableData.length }} {{ ::$ctrl.tableItemTitle }}
       </span>
-      <input class="form-control" type="text" ng-model="$ctrl.options.filter"
-             placeholder="Filter {{ $ctrl.tableItemTitle }}..." ng-change="$ctrl.refreshOrder()">
+      <input class="form-control" type="text"
+             placeholder="Filter {{ ::$ctrl.tableItemTitle }}..."
+             ng-model="$ctrl.options.filter"
+             ng-change="$ctrl.refreshOrder()">
     </span>
   </div>
 
   <!-- Empty -->
   <div class="empty" ng-if="!$ctrl.tableData.length && $ctrl.compact != 'true'">
-    <div class="empty-primary-msg">No {{ $ctrl.tableItemTitle }} found.</div>
+    <div class="empty-primary-msg">No {{ ::$ctrl.tableItemTitle }} found.</div>
   </div>
 
   <!-- Table -->
   <table class="co-table" ng-show="$ctrl.tableData.length">
     <thead>
-      <td ng-repeat="col in $ctrl.columns" ng-class="$ctrl.tablePredicateClass(col, $ctrl.options)">
-        <a ng-click="$ctrl.setOrder(col)">{{ col.title }}</a>
+      <td ng-repeat="col in $ctrl.columns"
+          ng-class="$ctrl.tablePredicateClass(col)" style="{{ ::col.style }}">
+        <a ng-click="$ctrl.setOrder(col)">{{ ::col.title }}</a>
       </td>
     </thead>
-    <tbody ng-repeat="item in $ctrl.orderedData.visibleEntries | limitTo:$ctrl.maxDisplayCount">
+    <tbody ng-repeat="item in $ctrl.orderedData.visibleEntries"
+           ng-if="($index >= $ctrl.options.page * $ctrl.maxDisplayCount &&
+                   $index < ($ctrl.options.page + 1) * $ctrl.maxDisplayCount)">
       <tr>
-        <td ng-repeat="col in $ctrl.columns">
+        <td ng-repeat="col in $ctrl.columns"
+            style="{{ ::col.style }}" class="{{ ::col.class }} nowrap-col">
           <div ng-include="col.templateurl" ng-if="col.templateurl"></div>
           <div ng-if="!col.templateurl">{{ item[col.datafield] }}</div>
         </td>
@@ -36,7 +46,7 @@
 
   <div class="empty" ng-if="!$ctrl.orderedData.entries.length && $ctrl.tableData.length"
        style="margin-top: 20px;">
-    <div class="empty-primary-msg">No matching {{ $ctrl.tableItemTitle }} found.</div>
+    <div class="empty-primary-msg">No matching {{ ::$ctrl.tableItemTitle }} found.</div>
     <div class="empty-secondary-msg">Try adjusting your filter above.</div>
   </div>
 </div>
\ No newline at end of file
diff --git a/static/js/directives/ui/cor-table/cor-table.component.ts b/static/js/directives/ui/cor-table/cor-table.component.ts
index 6d7839ae6..2c899c0ee 100644
--- a/static/js/directives/ui/cor-table/cor-table.component.ts
+++ b/static/js/directives/ui/cor-table/cor-table.component.ts
@@ -13,7 +13,7 @@ import { CorTableColumn } from './cor-table-col.component';
   }
 })
 export class CorTableComponent implements OnChanges {
-  @Input('<') public tableData: any[];
+  @Input('<') public tableData: any[] = [];
   @Input('@') public tableItemTitle: string;
   @Input('<') public filterFields: string[];
   @Input('@') public compact: string;
@@ -22,7 +22,7 @@ export class CorTableComponent implements OnChanges {
   private orderedData: any;
   private options: any;
 
-  constructor(@Inject('TableService') private TableService: any) {
+  constructor(@Inject('TableService') private tableService: any) {
     this.columns = [];
     this.options = {
       'filter': '',
@@ -49,15 +49,17 @@ export class CorTableComponent implements OnChanges {
   }
 
   private setOrder(col: CorTableColumn): void {
-    this.TableService.orderBy(col.datafield, this.options);
+    this.tableService.orderBy(col.datafield, this.options);
     this.refreshOrder();
   }
 
   private tablePredicateClass(col: CorTableColumn, options: any) {
-    return this.TableService.tablePredicateClass(col.datafield, this.options.predicate, this.options.reverse);
+    return this.tableService.tablePredicateClass(col.datafield, this.options.predicate, this.options.reverse);
   }
 
   private refreshOrder(): void {
+    this.options.page = 0;
+
     var columnMap = {};
     this.columns.forEach(function(col) {
       columnMap[col.datafield] = col;
@@ -69,18 +71,16 @@ export class CorTableComponent implements OnChanges {
     const numericCols = this.columns.filter(col => col.isNumeric())
       .map(col => col.datafield);
 
-    const tableData = this.tableData || [];
-    const processed = tableData.map((item) => {
-      var newObj = Object.assign({}, item);
+    const processed = this.tableData.map((item) => {
       Object.keys(item).forEach((key) => {
         if (columnMap[key]) {
-          newObj[key] = columnMap[key].processColumnForOrdered(this.TableService, item[key]);
+          item[key] = columnMap[key].processColumnForOrdered(item[key]);
         }
       });
 
-      return newObj;
+      return item;
     });
 
-    this.orderedData = this.TableService.buildOrderedItems(processed, this.options, filterCols, numericCols);
+    this.orderedData = this.tableService.buildOrderedItems(processed, this.options, filterCols, numericCols);
   }
 }
diff --git a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts
index f1210037d..b96307406 100644
--- a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts
+++ b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts
@@ -1,4 +1,4 @@
-import { DockerfilePathSelectComponent } from './dockerfile-path-select.component';
+import { DockerfilePathSelectComponent, PathChangeEvent } from './dockerfile-path-select.component';
 
 
 describe("DockerfilePathSelectComponent", () => {
@@ -60,6 +60,16 @@ describe("DockerfilePathSelectComponent", () => {
 
       expect(component.isValidPath).toBe(false);
     });
+
+    it("emits output event indicating Dockerfile path has changed", (done) => {
+      component.pathChanged.subscribe((event: PathChangeEvent) => {
+        expect(event.path).toEqual(newPath);
+        expect(event.isValid).toBe(component.isValidPath);
+        done();
+      });
+
+      component.setPath(newPath);
+    });
   });
 
   describe("setCurrentPath", () => {
@@ -86,5 +96,15 @@ describe("DockerfilePathSelectComponent", () => {
 
       expect(component.isValidPath).toBe(false);
     });
+
+    it("emits output event indicating Dockerfile path has changed", (done) => {
+      component.pathChanged.subscribe((event: PathChangeEvent) => {
+        expect(event.path).toEqual(newPath);
+        expect(event.isValid).toBe(component.isValidPath);
+        done();
+      });
+
+      component.setSelectedPath(newPath);
+    });
   });
-});
\ No newline at end of file
+});
diff --git a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts
index bebb563f9..fe63e66b3 100644
--- a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts
+++ b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts
@@ -1,4 +1,4 @@
-import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
+import { Input, Output, EventEmitter, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
 
 
 /**
@@ -10,11 +10,11 @@ import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
 })
 export class DockerfilePathSelectComponent implements OnChanges {
 
-  // FIXME: Use one-way data binding
-  @Input('=') public currentPath: string = '';
-  @Input('=') public isValidPath: boolean;
-  @Input('=') public paths: string[];
-  @Input('=') public supportsFullListing: boolean;
+  @Input('<') public currentPath: string = '';
+  @Input('<') public paths: string[];
+  @Input('<') public supportsFullListing: boolean;
+  @Output() public pathChanged: EventEmitter<PathChangeEvent> = new EventEmitter();
+  public isValidPath: boolean;
   private isUnknownPath: boolean = true;
   private selectedPath: string | null = null;
 
@@ -26,12 +26,16 @@ export class DockerfilePathSelectComponent implements OnChanges {
     this.currentPath = path;
     this.selectedPath = null;
     this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
+
+    this.pathChanged.emit({path: this.currentPath, isValid: this.isValidPath});
   }
 
   public setSelectedPath(path: string): void {
     this.currentPath = path;
     this.selectedPath = path;
     this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
+
+    this.pathChanged.emit({path: this.currentPath, isValid: this.isValidPath});
   }
 
   private checkPath(path: string = '', paths: string[] = [], supportsFullListing: boolean): boolean {
@@ -45,3 +49,12 @@ export class DockerfilePathSelectComponent implements OnChanges {
     return isValidPath;
   }
 }
+
+
+/**
+ * Dockerfile path changed event.
+ */
+export type PathChangeEvent = {
+  path: string;
+  isValid: boolean;
+};
diff --git a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
index f2a65b337..71ad913d8 100644
--- a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts
@@ -35,6 +35,11 @@ describe("LinearWorkflowSectionComponent", () => {
           previousValue: false,
           isFirstChange: () => false,
         },
+        skipSection: {
+          currentValue: true,
+          previousValue: false,
+          isFirstChange: () => false,
+        },
       };
     });
 
@@ -56,6 +61,15 @@ describe("LinearWorkflowSectionComponent", () => {
 
       expect(onSectionInvalidSpy.calls.argsFor(0)[0]).toEqual(component.sectionId);
     });
+
+    it("calls parent method to go to next section if 'skipSection' input is true and is current section", () => {
+      delete changesObj['sectionValid'];
+      const onNextSectionSpy: Spy = spyOn(parentMock, 'onNextSection').and.returnValue(null);
+      component.isCurrentSection = true;
+      component.ngOnChanges(changesObj);
+
+      expect(onNextSectionSpy).toHaveBeenCalled();
+    });
   });
 
   describe("onSubmitSection", () => {
diff --git a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
index 8896f640c..f3c3529d7 100644
--- a/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges } from 'ng-metadata/core';
+import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges, HostListener } from 'ng-metadata/core';
 import { LinearWorkflowComponent } from './linear-workflow.component';
 
 
@@ -16,21 +16,34 @@ export class LinearWorkflowSectionComponent implements OnChanges, OnInit {
 
   @Input('@') public sectionId: string;
   @Input('@') public sectionTitle: string;
-  @Input() public sectionValid: boolean = false;
+  @Input('<') public sectionValid: boolean = false;
+  @Input('<') public skipSection: boolean = false;
   public sectionVisible: boolean = false;
   public isCurrentSection: boolean = false;
 
   constructor(@Host() @Inject(LinearWorkflowComponent) private parent: LinearWorkflowComponent) {
 
   }
-
+  
   public ngOnInit(): void {
-    this.parent.addSection(this);
+    if (!this.skipSection) {
+      this.parent.addSection(this);
+    }
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
-    if (changes['sectionValid'] !== undefined && !changes['sectionValid'].currentValue) {
-      this.parent.onSectionInvalid(this.sectionId);
+    switch (Object.keys(changes)[0]) {
+      case 'sectionValid':
+        if (!changes['sectionValid'].currentValue && this.parent) {
+          this.parent.onSectionInvalid(this.sectionId);
+        }
+        break;
+
+      case 'skipSection':
+        if (changes['skipSection'].currentValue && this.isCurrentSection && this.parent) {
+          this.parent.onNextSection();
+        }
+        break;
     }
   }
 
diff --git a/static/js/directives/ui/linear-workflow/linear-workflow.component.html b/static/js/directives/ui/linear-workflow/linear-workflow.component.html
index 899dc4c2d..559d1d405 100644
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.html
+++ b/static/js/directives/ui/linear-workflow/linear-workflow.component.html
@@ -8,12 +8,12 @@
         <td>
           <!-- Next button -->
           <button class="btn btn-primary"
-            ng-disabled="!$ctrl.currentSection.component.sectionValid"
-            ng-click="$ctrl.onNextSection()"
-            ng-class="{
-              'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
-              'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
-            }">
+                  ng-disabled="!$ctrl.currentSection.component.sectionValid"
+                  ng-click="$ctrl.onNextSection()"
+                  ng-class="{
+                    'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
+                    'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
+                  }">
             <span ng-if="$ctrl.currentSection.index != sections.length - 1">Continue</span>
             <span ng-if="$ctrl.currentSection.index == sections.length - 1">
               <i class="fa fa-check-circle"></i>{{ ::$ctrl.doneTitle }}
@@ -27,7 +27,7 @@
             <b>Next:</b>
             <ul>
               <li ng-repeat="section in $ctrl.sections"
-                  ng-if="section.index > $ctrl.currentSection.index">
+                  ng-if="section.index > $ctrl.currentSection.index && !section.component.skipSection">
                 {{ section.component.sectionTitle }}
               </li>
             </ul>
diff --git a/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts b/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
index 43bb5e3e3..e984b7ab4 100644
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts
@@ -17,23 +17,13 @@ describe("LinearWorkflowComponent", () => {
       newSection = new LinearWorkflowSectionComponent(component);
     });
 
-    it("does not set 'sectionVisible' or 'isCurrentSection' of given section if not the first section added", () => {
-      component.addSection(new LinearWorkflowSectionComponent(component));
-      component.addSection(newSection);
-
-      expect(newSection.sectionVisible).toBe(false);
-      expect(newSection.isCurrentSection).toBe(false);
-    });
-
-    it("sets 'sectionVisible' of given section to true if it is the first section added", () => {
+    it("sets 'sectionVisible' and 'isCurrentSection' to first section in list that is not skipped", () => {
+      var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      skippedSection.skipSection = true;
+      component.addSection(skippedSection);
       component.addSection(newSection);
 
       expect(newSection.sectionVisible).toBe(true);
-    });
-
-    it("sets 'isCurrentSection' of given section to true if it is the first section added", () => {
-      component.addSection(newSection);
-
       expect(newSection.isCurrentSection).toBe(true);
     });
   });
@@ -71,6 +61,21 @@ describe("LinearWorkflowComponent", () => {
       expect(nextSection.isCurrentSection).toBe(true);
       expect(nextSection.sectionVisible).toBe(true);
     });
+
+    it("does not set the current section to a skipped section", () => {
+      var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
+      skippedSection.skipSection = true;
+      component.addSection(skippedSection);
+      component.addSection(nextSection);
+      component.onNextSection();
+
+      expect(currentSection.isCurrentSection).toBe(false);
+      expect(skippedSection.isCurrentSection).toBe(false);
+      expect(skippedSection.sectionVisible).toBe(false);
+      expect(nextSection.isCurrentSection).toBe(true);
+      expect(nextSection.sectionVisible).toBe(true);
+    });
   });
 
   describe("onSectionInvalid", () => {
diff --git a/static/js/directives/ui/linear-workflow/linear-workflow.component.ts b/static/js/directives/ui/linear-workflow/linear-workflow.component.ts
index a3c93d46d..1cb82aa56 100644
--- a/static/js/directives/ui/linear-workflow/linear-workflow.component.ts
+++ b/static/js/directives/ui/linear-workflow/linear-workflow.component.ts
@@ -26,10 +26,8 @@ export class LinearWorkflowComponent {
       component: component,
     });
 
-    if (this.sections.length == 1) {
-      this.currentSection = this.sections[0];
-      this.currentSection.component.sectionVisible = true;
-      this.currentSection.component.isCurrentSection = true;
+    if (this.sections.length > 0 && !this.currentSection) {
+      this.setNextSection(0);
     }
   }
 
@@ -39,9 +37,7 @@ export class LinearWorkflowComponent {
     }
     else if (this.currentSection.component.sectionValid && this.currentSection.index + 1 < this.sections.length) {
       this.currentSection.component.isCurrentSection = false;
-      this.currentSection = this.sections[this.currentSection.index + 1];
-      this.currentSection.component.sectionVisible = true;
-      this.currentSection.component.isCurrentSection = true;
+      this.setNextSection(this.currentSection.index + 1);
     }
   }
 
@@ -50,6 +46,7 @@ export class LinearWorkflowComponent {
     if (invalidSection.index <= this.currentSection.index) {
       invalidSection.component.isCurrentSection = true;
       this.currentSection = invalidSection;
+
       this.sections.forEach((section) => {
         if (section.index > invalidSection.index) {
           section.component.sectionVisible = false;
@@ -58,6 +55,17 @@ export class LinearWorkflowComponent {
       });
     }
   }
+
+  private setNextSection(startingIndex: number = 0): void {
+    // Find the next section that is not set to be skipped
+    this.currentSection = this.sections.slice(startingIndex)
+      .filter(section => !section.component.skipSection)[0];
+
+    if (this.currentSection) {
+      this.currentSection.component.sectionVisible = true;
+      this.currentSection.component.isCurrentSection = true;
+    }
+  }
 }
 
 
diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
deleted file mode 100644
index 42175e616..000000000
--- a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<div class="manage-trigger-custom-git-element manage-trigger-control">
-  <linear-workflow
-    done-title="Create Trigger"
-    (on-workflow-complete)="$ctrl.activateTrigger.emit({config: $ctrl.config})">
-    <!-- Section: Repository -->
-    <linear-workflow-section class="row"
-      section-id="repo"
-      section-title="Git Repository"
-      section-valid="$ctrl.config.build_source !== undefined">
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
-        <h3>Enter repository</h3>
-        <strong>Please enter the HTTP or SSH style URL used to clone your git repository:</strong>
-        <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
-               ng-model="$ctrl.config.build_source"
-               ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
-      </div>
-      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
-        <p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
-
-        <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
-      </div>
-    </linear-workflow-section><!-- /Section: Repository -->
-
-    <!-- Section: Build context -->
-    <linear-workflow-section class="row"
-      section-id="dockerfile"
-      section-title="Build context"
-      section-valid="$ctrl.config.context">
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
-        <h3>Select build context directory</h3>
-        <strong>Please select the build context directory under the git repository:</strong>
-        <input class="form-control" type="text"
-               ng-model="$ctrl.config.context"
-               ng-pattern="/^($|\/|\/.+)/">
-      </div>
-      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
-        <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
-        <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Build context -->
-
-    <!-- Section: Dockerfile Location -->
-    <linear-workflow-section class="row"
-      section-id="dockerfilelocation"
-      section-title="Select Dockerfile"
-      section-valid="$ctrl.config.dockerfile_path">
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
-        <h3>Select dockerfile path</h3>
-        <strong>Please select the build context directory under the git repository:</strong>
-        <input class="form-control" type="text"
-               ng-model="$ctrl.config.dockerfile_path"
-               ng-pattern="/^($|\/|\/.+)/">
-      </div>
-      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
-        <p>The dockerfile path stars with the context and ends with the path to the dockefile that you would like to build</p>
-        <p>If the Dockerfile is located at the root of the git repository and named Dockerfile, enter <code>/Dockerfile</code> as the dockerfile path.</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Dockerfile Location -->
-
-  </linear-workflow>
-</div>
diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts
deleted file mode 100644
index 45c9f9eb9..000000000
--- a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ManageTriggerCustomGitComponent } from './manage-trigger-custom-git.component';
-
-
-describe("ManageTriggerCustomGitComponent", () => {
-  var component: ManageTriggerCustomGitComponent;
-
-  beforeEach(() => {
-    component = new ManageTriggerCustomGitComponent();
-  });
-
-  describe("ngOnChanges", () => {
-
-  });
-});
diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts
deleted file mode 100644
index 3705c6e87..000000000
--- a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from "ng-metadata/core";
-
-
-/**
- * A component that lets the user set up a build trigger for a custom Git repository.
- */
-@Component({
-  selector: 'manage-trigger-custom-git',
-  templateUrl: '/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html'
-})
-export class ManageTriggerCustomGitComponent implements OnChanges {
-
-  // FIXME: Use one-way data binding
-  @Input('=') public trigger: {config: any};
-  @Output() public activateTrigger: EventEmitter<{config: any, pull_robot?: any}> = new EventEmitter();
-  private config: any = {"context": "/", "dockerfile_path": "/Dockerfile"};
-  private currentState: any | null;
-
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (changes['trigger'] !== undefined) {
-      this.config = Object.assign({}, changes['trigger'].currentValue.config);
-    }
-    if (this.config.context === "") {
-      this.config.context = "/";
-    }
-
-    if (this.config.dockerfile_path === "") {
-      if (this.config.context.endsWith("/")) {
-        this.config.dockerfile_path = this.config.context + "Dockerfile";
-      } else {
-        this.config.dockerfile_path = this.config.context + "/Dockerfile";
-      }
-    }
-  }
-}
diff --git a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html b/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html
deleted file mode 100644
index 142ec850e..000000000
--- a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html
+++ /dev/null
@@ -1,413 +0,0 @@
-<div class="manage-trigger-githost-element manage-trigger-control">
-  <linear-workflow done-title="Create Trigger"
-                   (on-workflow-complete)="$ctrl.createTrigger($event)">
-
-    <!-- Section: Namespace -->
-    <linear-workflow-section class="row"
-                             section-id="namespace"
-                             section-title="{{ 'Select ' + $ctrl.namespaceTitle }}"
-                             section-valid="$ctrl.local.selectedNamespace">
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
-           ng-if="$ctrl.local.namespaces">
-        <h3>Select {{ $ctrl.namespaceTitle }}</h3>
-        <strong>Please select the {{ $ctrl.namespaceTitle }} under which the repository lives</strong>
-
-        <div class="co-top-bar">
-          <div class="co-filter-box">
-            <span class="page-controls"
-                  total-count="$ctrl.local.orderedNamespaces.entries.length"
-                  current-page="$ctrl.local.namespaceOptions.page"
-                  page-size="$ctrl.namespacesPerPage"></span>
-            <input class="form-control" type="text"
-                   ng-model="$ctrl.local.namespaceOptions.filter"
-                   placeholder="Filter {{ $ctrl.namespaceTitle }}s...">
-          </div>
-        </div>
-
-        <table class="co-table">
-          <thead>
-            <td class="checkbox-col"></td>
-            <td ng-class="$ctrl.TableService.tablePredicateClass('id', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)">
-              <a ng-click="$ctrl.TableService.orderBy('id', $ctrl.local.namespaceOptions)">{{ $ctrl.namespaceTitle }}</a>
-            </td>
-            <td ng-class="$ctrl.TableService.tablePredicateClass('score', $ctrl.local.namespaceOptions.predicate, $ctrl.local.namespaceOptions.reverse)"
-                class="importance-col hidden-xs">
-              <a ng-click="$ctrl.TableService.orderBy('score', $ctrl.local.namespaceOptions)">Importance</a>
-            </td>
-          </thead>
-
-          <tr class="co-checkable-row"
-              ng-repeat="namespace in $ctrl.local.orderedNamespaces.visibleEntries | slice:($ctrl.namespacesPerPage * $ctrl.local.namespaceOptions.page):($ctrl.namespacesPerPage * ($ctrl.local.namespaceOptions.page + 1))"
-              ng-class="$ctrl.local.selectedNamespace == namespace ? 'checked' : ''"
-              bindonce>
-            <td>
-              <input type="radio"
-                     ng-model="$ctrl.local.selectedNamespace"
-                     ng-value="namespace">
-            </td>
-            <td>
-              <img class="namespace-avatar" ng-src="{{ namespace.avatar_url }}" ng-if="namespace.avatar_url">
-              <span class="anchor"
-                    href="{{ namespace.url }}"
-                    is-text-only="!namespace.url">{{ namespace.id }}</span>
-            </td>
-            <td class="importance-col hidden-xs">
-              <span class="strength-indicator" value="::namespace.score" maximum="::$ctrl.local.maxScore"
-                    log-base="10"></span>
-            </td>
-          </tr>
-        </table>
-        <div class="empty"
-             ng-if="$ctrl.local.namespaces.length && !$ctrl.local.orderedNamespaces.entries.length"
-             style="margin-top: 20px;">
-          <div class="empty-primary-msg">No matching {{ $ctrl.namespaceTitle }} found.</div>
-          <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
-        </div>
-      </div>
-
-      <div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-if="!$ctrl.local.namespaces">
-        <span class="cor-loader-inline"></span> Retrieving {{ $ctrl.namespaceTitle }}s
-      </div>
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-if="$ctrl.local.namespaces">
-        <p>
-          <span class="registry-name"></span> has been granted access to read and view these {{ $ctrl.namespaceTitle }}s.
-        </p>
-        <p>
-          Don't see an expected {{ $ctrl.namespaceTitle }} here? Please make sure third-party access is enabled for <span class="registry-name"></span> under that {{ $ctrl.namespaceTitle }}.
-        </p>
-      </div>
-    </linear-workflow-section><!-- /Section: Namespace -->
-
-    <!-- Section: Repository -->
-    <linear-workflow-section class="row"
-                             section-id="repo"
-                             section-title="Select Repository"
-                             section-valid="$ctrl.local.selectedRepository">
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.repositories">
-        <h3>Select Repository</h3>
-        <strong>
-          Select a repository in
-          <img class="namespace-avatar" ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}" ng-if="$ctrl.local.selectedNamespace.avatar_url">
-          {{ $ctrl.local.selectedNamespace.id }}
-        </strong>
-
-        <div class="co-top-bar">
-          <div class="co-filter-box">
-            <span class="page-controls"
-                  total-count="$ctrl.local.orderedRepositories.entries.length"
-                  current-page="$ctrl.local.repositoryOptions.page"
-                  page-size="$ctrl.repositoriesPerPage"></span>
-            <input class="form-control" type="text"
-                   ng-model="$ctrl.local.repositoryOptions.filter"
-                   placeholder="Filter repositories...">
-            <div class="filter-options">
-              <label>
-                <input type="checkbox"
-                       ng-model="$ctrl.local.repositoryOptions.hideStale">
-                Hide stale repositories
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <table class="co-table" style="margin-top: 20px;">
-          <thead>
-          <td class="checkbox-col"></td>
-          <td ng-class="$ctrl.TableService.tablePredicateClass('name', $ctrl.local.repositoryOptions.predicate, $ctrl.local.repositoryOptions.reverse)" class="nowrap-col">
-            <a ng-click="$ctrl.TableService.orderBy('name', $ctrl.local.repositoryOptions)">Repository Name</a>
-          </td>
-          <td ng-class="$ctrl.TableService.tablePredicateClass('last_updated_datetime', $ctrl.local.repositoryOptions.predicate, $ctrl.local.repositoryOptions.reverse)"
-              class="last-updated-col nowrap-col">
-            <a ng-click="$ctrl.TableService.orderBy('last_updated_datetime', $ctrl.local.namespaceOptions)">Last Updated</a>
-          </td>
-          <td class="hidden-xs">Description</td>
-          </thead>
-
-          <tr class="co-checkable-row"
-              ng-repeat="repository in $ctrl.local.orderedRepositories.visibleEntries | slice:($ctrl.repositoriesPerPage * $ctrl.local.repositoryOptions.page):($ctrl.repositoriesPerPage * ($ctrl.local.repositoryOptions.page + 1))"
-              ng-class="$ctrl.local.selectedRepository == repository ? 'checked' : ''"
-              bindonce>
-            <td>
-              <span ng-if="!repository.has_admin_permissions">
-                <i class="fa fa-exclamation-triangle"
-                   data-title="Admin access is required to add the webhook trigger to this repository" bs-tooltip></i>
-              </span>
-              <input type="radio"
-                     ng-model="$ctrl.local.selectedRepository"
-                     ng-value="repository"
-                     ng-if="repository.has_admin_permissions">
-            </td>
-            <td class="nowrap-col">
-              <i class="service-icon fa {{ $ctrl.getTriggerIcon() }}"></i>
-              <span class="anchor"
-                    href="{{ repository.url }}"
-                    is-text-only="!repository.url">{{ repository.name }}</span>
-            </td>
-            <td class="last-updated-col nowrap-col">
-              <span am-time-ago="repository.last_updated_datetime"></span>
-            </td>
-            <td class="hidden-xs">
-              <span ng-if="repository.description">{{ repository.description }}</span>
-              <span class="empty-description" ng-if="!repository.description">(None)</span>
-            </td>
-          </tr>
-        </table>
-        <div class="empty"
-             ng-if="$ctrl.local.repositories.length && !$ctrl.local.orderedRepositories.entries.length"
-             style="margin-top: 20px;">
-          <div class="empty-primary-msg">No matching repositories found.</div>
-          <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
-        </div>
-      </div>
-
-      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
-           ng-if="!$ctrl.local.repositories">
-        <span class="cor-loader-inline"></span> Retrieving repositories
-      </div>
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
-           ng-if="$ctrl.local.repositories">
-        <p>
-          A webhook will be added to the selected repository in order to detect when new commits are made.
-        </p>
-        <p>
-          Don't see an expected repository here? Please make sure you have admin access on that repository.
-        </p>
-      </div>
-
-    </linear-workflow-section><!-- /Section: Repository -->
-
-    <!-- Section: Trigger Options -->
-    <linear-workflow-section class="row"
-                             section-id="triggeroptions"
-                             section-title="Configure Trigger"
-                             section-valid="$ctrl.local.triggerOptions">
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.repositoryRefs">
-        <h3>Configure Trigger</h3>
-        <strong>
-          Configure trigger options for
-          <img class="namespace-avatar" ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}" ng-if="$ctrl.local.selectedNamespace.avatar_url">
-          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
-        </strong>
-
-        <div class="radio" style="margin-top: 20px;">
-          <label>
-            <input type="radio" name="optionRadio"
-                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
-                   ng-value="false">
-            <div class="title">Trigger for all branches and tags <span class="weak">(default)</span></div>
-            <div class="description">Build a container image for each commit across all branches and tags</div>
-          </label>
-        </div>
-        <div class="radio">
-          <label>
-            <input type="radio"
-                   name="optionRadio"
-                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
-                   ng-value="true">
-            <div class="title">Trigger only on branches and tags matching a regular expression</div>
-            <div class="description">Only build container images for a subset of branches and/or tags.</div>
-            <div class="extended" ng-if="$ctrl.local.triggerOptions.hasBranchTagFilter">
-              <table>
-                <tr>
-                  <td style="white-space: nowrap;">Regular Expression:</td>
-                  <td>
-                    <input type="text" class="form-control"
-                           ng-model="$ctrl.local.triggerOptions.branchTagFilter"
-                           required>
-                    <div class="description">Examples: heads/master, tags/tagname, heads/.+</div>
-                    <regex-match-view items="$ctrl.local.repositoryFullRefs"
-                                      regex="$ctrl.local.triggerOptions.branchTagFilter"
-                                      ng-if="$ctrl.local.triggerOptions.branchTagFilter"></regex-match-view>
-                  </td>
-                </tr>
-              </table>
-            </div>
-          </label>
-        </div>
-      </div>
-
-      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
-           ng-if="!$ctrl.local.repositoryRefs">
-        <span class="cor-loader-inline"></span> Retrieving repository refs
-      </div>
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
-        <p>Do you want to build a new container image for commits across all branches and tags, or limit to a subset?</p>
-        <p>For example, if you use release branches instead of <code>master</code> for building versions of your software, you can configure the trigger to only build images for these branches.</p>
-        <p>All images built will be tagged with the name of the branch or tag whose change invoked the trigger</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Trigger Options -->
-
-    <!-- Section: Dockerfile Location -->
-    <linear-workflow-section class="row"
-                             section-id="dockerfilelocation"
-                             section-title="Select Dockerfile"
-                             section-valid="$ctrl.local.hasValidDockerfilePath">
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
-           ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
-        <div class="co-alert co-alert-warning">
-          {{ $ctrl.local.dockerfileLocations.message }}
-        </div>
-      </div>
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.dockerfileLocations.status == 'success'">
-        <h3>Select Dockerfile</h3>
-        <strong>
-          Please select the location of the Dockerfile to build when this trigger is invoked
-        </strong>
-
-        <dockerfile-path-select current-path="$ctrl.local.dockerfilePath"
-                                paths="$ctrl.local.dockerfileLocations.dockerfile_paths"
-                                supports-full-listing="true"
-                                is-valid-path="$ctrl.local.hasValidDockerfilePath"></dockerfile-path-select>
-      </div>
-
-      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
-           ng-if="!$ctrl.local.dockerfileLocations">
-        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
-      </div>
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
-        <p>Please select the location containing the Dockerfile to be built.</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Dockerfile Location -->
-
-    <!-- Section: Context Location -->
-    <linear-workflow-section class="row"
-                             section-id="contextlocation"
-                             section-title="Select Docker Context"
-                             section-valid="$ctrl.local.hasValidContextLocation">
-          <div class="col-lg-7 col-md-7 col-sm-12 main-col"
-               ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
-            <div class="co-alert co-alert-warning">
-              {{ $ctrl.local.dockerfileLocations.message }}
-            </div>
-          </div>
-
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.dockerfileLocations.status == 'success'">
-        <h3>Select Context</h3>
-        <strong>
-          Please select the context for the docker build
-        </strong>
-
-        <context-path-select current-context="$ctrl.local.dockerContext"
-                             current-path="$ctrl.local.dockerfilePath"
-                             contexts="$ctrl.local.contexts"
-                             is-valid-context="$ctrl.local.hasValidContextLocation"></context-path-select>
-      </div>
-
-      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
-           ng-if="!$ctrl.local.dockerfileLocations">
-        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
-      </div>
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
-        <p>Please select a docker context.</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Context Location -->
-
-    <!-- Section: Robot Account -->
-    <linear-workflow-section class="row"
-                             section-id="verification"
-                             section-title="Robot Account"
-                             section-valid="$ctrl.local.triggerAnalysis.status != 'error' &&
-                                            ($ctrl.local.triggerAnalysis.status != 'requiresrobot' || $ctrl.local.robotAccount != null)">
-      <!-- Error -->
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
-           ng-if="$ctrl.local.triggerAnalysis.status == 'error'">
-        <h3 class="error"><i class="fa fa-exclamation-circle"></i> Verification Error</h3>
-        <strong>
-          There was an error when verifying the state of <img class="namespace-avatar" ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}" ng-if="$ctrl.local.selectedNamespace.avatar_url">
-          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
-        </strong>
-
-        {{ $ctrl.local.triggerAnalysis.message }}
-      </div>
-
-      <!-- Robot display for non-error cases -->
-      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
-           ng-if="$ctrl.local.triggerAnalysis.status != 'error'">
-        <!-- Warning -->
-        <div ng-if="$ctrl.local.triggerAnalysis.status == 'warning'">
-          <h3 class="warning"><i class="fa fa-exclamation-triangle"></i> Verification Warning</h3>
-          {{ $ctrl.local.triggerAnalysis.message }}
-        </div>
-
-        <!-- Public base -->
-        <div ng-if="$ctrl.local.triggerAnalysis.status == 'publicbase'">
-          <h3 class="success"><i class="fa fa-check-circle"></i> Ready to go!</h3>
-          <strong>
-            <span ng-if="$ctrl.local.triggerAnalysis.is_admin">Choose an optional robot account below or click "Continue" to complete setup of this build trigger</span>
-            <span ng-if="!$ctrl.local.triggerAnalysis.is_admin">Click "Continue" to complete setup of this build trigger</span>
-          </strong>
-        </div>
-
-        <!-- Requires robot and is not admin -->
-        <div ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' && !$ctrl.local.triggerAnalysis.is_admin">
-          <h3>Robot Account Required</h3>
-          <p>The selected Dockerfile in the selected repository depends upon a private base image</p>
-          <p>A robot account with access to the base image is required to setup this trigger, but you are not the administrator of this namespace.</p>
-          <p>Administrative access is required to continue to ensure security of the robot credentials.</p>
-        </div>
-
-        <!-- Robots view -->
-        <div ng-if="$ctrl.local.triggerAnalysis.is_admin">
-          <div class="co-top-bar">
-            <div class="co-filter-box">
-              <span class="page-controls"
-                    total-count="$ctrl.local.orderedRobotAccounts.entries.length"
-                    current-page="$ctrl.local.robotOptions.page"
-                    page-size="$ctrl.robotsPerPage"></span>
-              <input class="form-control"
-                     type="text"
-                     ng-model="$ctrl.local.robotOptions.filter"
-                     placeholder="Filter robot accounts...">
-            </div>
-          </div>
-
-          <table class="co-table" style="margin-top: 20px;">
-            <thead>
-            <td class="checkbox-col"></td>
-            <td ng-class="$ctrl.TableService.tablePredicateClass('name', $ctrl.local.robotOptions.predicate, $ctrl.local.robotOptions.reverse)">
-              <a ng-click="$ctrl.TableService.orderBy('name', $ctrl.local.robotOptions)">Robot Account</a>
-            </td>
-            <td ng-class="$ctrl.TableService.tablePredicateClass('can_read', $ctrl.local.robotOptions.predicate, $ctrl.local.robotOptions.reverse)"
-                ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot'">
-              <a ng-click="$ctrl.TableService.orderBy('can_read', $ctrl.local.robotOptions)">Has Read Access</a>
-            </td>
-            </thead>
-
-            <tr class="co-checkable-row"
-                ng-repeat="robot in $ctrl.local.orderedRobotAccounts.visibleEntries | slice:($ctrl.robotsPerPage * $ctrl.local.namespaceOptions.page):($ctrl.robotsPerPage * ($ctrl.local.robotOptions.page + 1))"
-                ng-class="$ctrl.local.robotAccount == robot ? 'checked' : ''"
-                bindonce>
-              <td>
-                <input type="radio"
-                       ng-model="$ctrl.local.robotAccount"
-                       ng-value="robot">
-              </td>
-              <td>
-                <span class="entity-reference" entity="robot"></span>
-              </td>
-              <td ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot'">
-                <span ng-if="robot.can_read" class="success">Can Read</span>
-                <span ng-if="!robot.can_read">Read access will be added if selected</span>
-              </td>
-            </tr>
-          </table>
-          <div class="empty" style="margin-top: 20px;"
-               ng-if="$ctrl.local.triggerAnalysis.robots.length && !$ctrl.local.orderedRobotAccounts.entries.length">
-            <div class="empty-primary-msg">No matching robot accounts found.</div>
-            <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
-          </div>
-        </div> <!-- /Robots view -->
-      </div>
-
-      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
-           ng-if="$ctrl.local.triggerAnalysis.is_admin">
-        <p>In order for the <span class="registry-name"></span> to pull a <b>private base image</b> during the build process, a robot account with access must be selected.</p>
-        <p ng-if="$ctrl.local.triggerAnalysis.status != 'requiresrobot'">If you know that a private base image is not used, you can skip this step.</p>
-        <p ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot'">Robot accounts that already have access to this base image are listed first. If you select a robot account that does not currently have access, read permission will be granted to that robot account on trigger creation.</p>
-      </div>
-    </linear-workflow-section><!-- /Section: Robot Account -->
-
-  </linear-workflow>
-</div>
\ No newline at end of file
diff --git a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.spec.ts b/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.spec.ts
deleted file mode 100644
index 91a0cf15c..000000000
--- a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.spec.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { ManageTriggerGithostComponent } from './manage-trigger-githost.component';
-import { Local, Trigger, Repository } from '../../../types/common.types';
-import { Mock } from 'ts-mocks';
-import Spy = jasmine.Spy;
-
-
-describe("ManageTriggerGithostComponent", () => {
-  var component: ManageTriggerGithostComponent;
-  var apiServiceMock: Mock<any>;
-  var tableServiceMock: Mock<any>;
-  var triggerServiceMock: Mock<any>;
-  var rolesServiceMock: Mock<any>;
-  var repository: any;
-  var trigger: Trigger;
-  var $scopeMock: Mock<ng.IScope>;
-
-  beforeEach(inject(($injector: ng.auto.IInjectorService) => {
-    apiServiceMock = new Mock<any>();
-    tableServiceMock = new Mock<any>();
-    triggerServiceMock = new Mock<any>();
-    rolesServiceMock = new Mock<any>();
-    $scopeMock = new Mock<ng.IScope>();
-    component = new ManageTriggerGithostComponent(apiServiceMock.Object,
-                                                  tableServiceMock.Object,
-                                                  triggerServiceMock.Object,
-                                                  rolesServiceMock.Object,
-                                                  $scopeMock.Object);
-    trigger = {service: "serviceMock", id: 1};
-    component.trigger = trigger;
-  }));
-
-  describe("constructor", () => {
-    // TODO
-  });
-
-  describe("$onInit", () => {
-    // TODO
-  });
-
-  describe("getTriggerIcon", () => {
-
-    beforeEach(() => {
-      triggerServiceMock.setup(mock => mock.getIcon).is((service: any) => null);
-    });
-
-    it("calls trigger service to get icon", () => {
-      const icon: any = component.getTriggerIcon();
-
-      expect((<Spy>triggerServiceMock.Object.getIcon).calls.argsFor(0)[0]).toEqual(component.trigger.service);
-    });
-  });
-
-  describe("createTrigger", () => {
-
-    beforeEach(() => {
-      component.local.selectedRepository = new Mock<Repository>().Object;
-      component.local.selectedRepository.full_name = "someorg/some-repository";
-      component.local.dockerfilePath = "/Dockerfile";
-      component.local.dockerContext = "/";
-      component.local.triggerOptions = {};
-      component.local.triggerAnalysis = {};
-      rolesServiceMock.setup(mock => mock.setRepositoryRole).is((repo, role, entityKind, entityName, callback) => {
-        callback();
-      });
-    });
-
-    it("calls roles service to grant read access to selected robot if robot is required and cannot read", (done) => {
-      component.local.triggerAnalysis = {status: 'requiresrobot', name: 'privatebase', namespace: 'someorg'};
-      component.local.robotAccount = {can_read: false, is_robot: true, kind: 'user', name: 'test-robot'};
-      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
-        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[0]).toEqual({
-          name: component.local.triggerAnalysis.name,
-          namespace: component.local.triggerAnalysis.namespace,
-        });
-        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[1]).toEqual('read');
-        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[2]).toEqual('robot');
-        done();
-      });
-
-      component.createTrigger();
-    });
-
-    it("does not call roles service if robot is required but already has read access", (done) => {
-      component.local.robotAccount = {can_read: true, is_robot: true, kind: 'user', name: 'test-robot'};
-      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
-        expect((<Spy>rolesServiceMock.Object.setRepositoryRole)).not.toHaveBeenCalled();
-        done();
-      });
-
-      component.createTrigger();
-    });
-
-    it("does not call roles service if robot is not required", (done) => {
-      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
-        expect((<Spy>rolesServiceMock.Object.setRepositoryRole)).not.toHaveBeenCalled();
-        done();
-      });
-
-      component.createTrigger();
-    });
-
-    it("emits output event with config and pull robot", (done) => {
-      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
-        expect(event.config.build_source).toEqual(component.local.selectedRepository.full_name);
-        expect(event.config.dockerfile_path).toEqual(component.local.dockerfilePath);
-        expect(event.config.context).toEqual(component.local.dockerContext);
-        done();
-      });
-
-      component.createTrigger();
-    });
-  });
-});
\ No newline at end of file
diff --git a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.ts b/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.ts
deleted file mode 100644
index be7969965..000000000
--- a/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-import { Input, Output, Component, Inject, EventEmitter, OnInit } from 'ng-metadata/core';
-import * as moment from 'moment';
-import { Local, Trigger, Repository, Namespace } from '../../../types/common.types';
-
-
-/**
- * A component that lets the user set up a build trigger for a public Git repository host service.
- */
-@Component({
-  selector: 'manage-trigger-githost',
-  templateUrl: '/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html'
-})
-export class ManageTriggerGithostComponent implements OnInit {
-
-  // FIXME: Use one-way data binding
-  @Input('=') public repository: Repository;
-  @Input('=') public trigger: Trigger;
-  @Output() public activateTrigger: EventEmitter<{config: any, pull_robot?: any}> = new EventEmitter();
-  public config: any;
-  public local: Local = {
-    namespaceOptions: {filter: '', predicate: 'score', reverse: false, page: 0},
-    repositoryOptions: {filter: '', predicate: 'score', reverse: false, page: 0, hideStale: true},
-    robotOptions: {filter: '', predicate: 'score', reverse: false, page: 0},
-  };
-  private currentState: any | null;
-  private namespacesPerPage: number = 10;
-  private repositoriesPerPage: number = 10;
-  private robotsPerPage: number = 10;
-  private namespaceTitle: string;
-  private namespace: any;
-
-  constructor(@Inject('ApiService') private ApiService: any,
-              @Inject('TableService') private TableService: any,
-              @Inject('TriggerService') private TriggerService: any,
-              @Inject('RolesService') private RolesService: any,
-              @Inject('$scope') private $scope: ng.IScope) {
-    // FIXME: Here binding methods to class context in order to pass them as arguments to $scope.$watch
-    this.buildOrderedNamespaces = this.buildOrderedNamespaces.bind(this);
-    this.loadNamespaces = this.loadNamespaces.bind(this);
-    this.buildOrderedRepositories = this.buildOrderedRepositories.bind(this);
-    this.loadRepositories = this.loadRepositories.bind(this);
-    this.loadRepositoryRefs = this.loadRepositoryRefs.bind(this);
-    this.buildOrderedRobotAccounts = this.buildOrderedRobotAccounts.bind(this);
-    this.loadDockerfileLocations = this.loadDockerfileLocations.bind(this);
-    this.checkDockerfilePath = this.checkDockerfilePath.bind(this);
-  }
-
-  public ngOnInit(): void {
-    // TODO: Replace $scope.$watch with @Output methods for child component mutations or $onChanges for parent mutations
-    this.$scope.$watch(() => this.trigger, this.initialSetup.bind(this));
-    this.$scope.$watch(() => this.repository, this.initialSetup.bind(this));
-
-    this.$scope.$watch(() => this.local.selectedNamespace, (namespace) => {
-      if (namespace) {
-        this.loadRepositories(namespace);
-      }
-    });
-
-    this.$scope.$watch(() => this.local.selectedRepository, (repository) => {
-      if (repository) {
-        this.loadRepositoryRefs(repository);
-        this.loadDockerfileLocations(repository);
-      }
-    });
-
-    this.$scope.$watch(() => this.local.dockerfilePath, (path) => {
-      if (path && this.local.selectedRepository) {
-        this.setPossibleContexts(path);
-        this.checkDockerfilePath(this.local.selectedRepository, path, this.local.dockerContext);
-      }
-    });
-
-    this.$scope.$watch(() => this.local.dockerContext, (context) => {
-      if (context && this.local.selectedRepository) {
-        this.checkDockerfilePath(this.local.selectedRepository, this.local.dockerfilePath, context);
-      }
-    });
-
-    this.$scope.$watch(() => this.local.namespaceOptions.predicate, this.buildOrderedNamespaces);
-    this.$scope.$watch(() => this.local.namespaceOptions.reverse, this.buildOrderedNamespaces);
-    this.$scope.$watch(() => this.local.namespaceOptions.filter, this.buildOrderedNamespaces);
-    this.$scope.$watch(() => this.local.repositoryOptions.predicate, this.buildOrderedRepositories);
-    this.$scope.$watch(() => this.local.repositoryOptions.reverse, this.buildOrderedRepositories);
-    this.$scope.$watch(() => this.local.repositoryOptions.filter, this.buildOrderedRepositories);
-    this.$scope.$watch(() => this.local.repositoryOptions.hideStale, this.buildOrderedRepositories);
-    this.$scope.$watch(() => this.local.robotOptions.predicate, this.buildOrderedRobotAccounts);
-    this.$scope.$watch(() => this.local.robotOptions.reverse, this.buildOrderedRobotAccounts);
-    this.$scope.$watch(() => this.local.robotOptions.filter, this.buildOrderedRobotAccounts);
-  }
-
-  private initialSetup(): void {
-    if (!this.repository || !this.trigger) { return; }
-
-    if (this.namespaceTitle) {
-      // Already setup.
-      return;
-    }
-
-    this.config = this.trigger['config'] || {};
-    this.namespaceTitle = 'organization';
-    this.local.selectedNamespace = null;
-    this.loadNamespaces();
-  }
-
-  public getTriggerIcon(): any {
-    return this.TriggerService.getIcon(this.trigger.service);
-  }
-
-  public createTrigger(): void {
-    var config: any = {
-      build_source: this.local.selectedRepository.full_name,
-      dockerfile_path: this.local.dockerfilePath,
-      context: this.local.dockerContext
-    };
-
-    if (this.local.triggerOptions['hasBranchTagFilter'] && this.local.triggerOptions['branchTagFilter']) {
-      config['branchtag_regex'] = this.local.triggerOptions['branchTagFilter'];
-    }
-
-    const activate = () => {
-      this.activateTrigger.emit({config: config, pull_robot: this.local.robotAccount});
-    };
-
-    if (this.local.triggerAnalysis.status == 'requiresrobot' && this.local.robotAccount) {
-      if (this.local.robotAccount.can_read) {
-        activate();
-      } else {
-        // Add read permission onto the base repository for the robot and then activate the trigger.
-        const baseRepo: any = {name: this.local.triggerAnalysis.name, namespace: this.local.triggerAnalysis.namespace};
-        this.RolesService.setRepositoryRole(baseRepo, 'read', 'robot', this.local.robotAccount.name, activate);
-      }
-    } else {
-      activate();
-    }
-  }
-
-  private buildOrderedNamespaces(): void {
-    if (!this.local.namespaces) {
-      return;
-    }
-
-    var namespaces: Namespace[] = this.local.namespaces || [];
-    this.local.orderedNamespaces = this.TableService.buildOrderedItems(namespaces,
-      this.local.namespaceOptions,
-      ['id'],
-      ['score']);
-
-    this.local.maxScore = 0;
-    namespaces.forEach((namespace) => {
-      this.local.maxScore = Math.max(namespace.score, this.local.maxScore);
-    });
-  }
-
-  private loadNamespaces(): void {
-    this.local.namespaces = null;
-    this.local.selectedNamespace = null;
-    this.local.orderedNamespaces = null;
-
-    this.local.selectedRepository = null;
-    this.local.orderedRepositories = null;
-
-    var params = {
-      'repository': this.repository.namespace + '/' + this.repository.name,
-      'trigger_uuid': this.trigger.id
-    };
-
-    this.ApiService.listTriggerBuildSourceNamespaces(null, params)
-      .then((resp) => {
-        this.local.namespaces = resp['namespaces'];
-        this.local.repositories = null;
-        this.buildOrderedNamespaces();
-    }, this.ApiService.errorDisplay('Could not retrieve the list of ' + this.namespaceTitle));
-  }
-
-  private buildOrderedRepositories(): void {
-    if (!this.local.repositories) {
-      return;
-    }
-
-    var repositories = this.local.repositories || [];
-    repositories.forEach((repository) => {
-      repository['last_updated_datetime'] = new Date(repository['last_updated'] * 1000);
-    });
-
-    if (this.local.repositoryOptions.hideStale) {
-      var existingRepositories = repositories;
-
-      repositories = repositories.filter((repository) => {
-        var older_date = moment(repository['last_updated_datetime']).add(1, 'months');
-        return !moment().isAfter(older_date);
-      });
-
-      if (existingRepositories.length > 0 && repositories.length == 0) {
-        repositories = existingRepositories;
-      }
-    }
-
-    this.local.orderedRepositories = this.TableService.buildOrderedItems(repositories,
-      this.local.repositoryOptions,
-      ['name', 'description'],
-      []);
-  }
-
-  private loadRepositories(namespace: any): void {
-    this.local.repositories = null;
-    this.local.selectedRepository = null;
-    this.local.repositoryRefs = null;
-    this.local.triggerOptions = {
-      'hasBranchTagFilter': false
-    };
-
-    this.local.orderedRepositories = null;
-
-    var params = {
-      'repository': this.repository.namespace + '/' + this.repository.name,
-      'trigger_uuid': this.trigger.id
-    };
-
-    var data = {
-      'namespace': namespace.id
-    };
-
-    this.ApiService.listTriggerBuildSources(data, params).then((resp) => {
-      if (namespace == this.local.selectedNamespace) {
-        this.local.repositories = resp['sources'];
-        this.buildOrderedRepositories();
-      }
-    }, this.ApiService.errorDisplay('Could not retrieve repositories'));
-  }
-
-  private loadRepositoryRefs(repository: any): void {
-    this.local.repositoryRefs = null;
-    this.local.triggerOptions = {
-      'hasBranchTagFilter': false
-    };
-
-    var params = {
-      'repository': this.repository.namespace + '/' + this.repository.name,
-      'trigger_uuid': this.trigger.id,
-      'field_name': 'refs'
-    };
-
-    var config = {
-      'build_source': repository.full_name
-    };
-
-    this.ApiService.listTriggerFieldValues(config, params).then((resp) => {
-      if (repository == this.local.selectedRepository) {
-        this.local.repositoryRefs = resp['values'];
-        this.local.repositoryFullRefs = resp['values'].map((ref) => {
-          var kind = ref.kind == 'branch' ? 'heads' : 'tags';
-          var icon = ref.kind == 'branch' ? 'fa-code-fork' : 'fa-tag';
-          return {
-            'value': kind + '/' + ref.name,
-            'icon': icon,
-            'title': ref.name
-          };
-        });
-      }
-    }, this.ApiService.errorDisplay('Could not retrieve repository refs'));
-  }
-
-  private loadDockerfileLocations(repository: any): void {
-    this.local.dockerfilePath = null;
-    this.local.dockerContext = null;
-
-    var params = {
-      'repository': this.repository.namespace + '/' + this.repository.name,
-      'trigger_uuid': this.trigger.id
-    };
-
-    var config = {
-      'build_source': repository.full_name
-    };
-
-    this.ApiService.listBuildTriggerSubdirs(config, params)
-      .then((resp) => {
-        if (repository == this.local.selectedRepository) {
-          this.local.dockerfileLocations = resp;
-        }
-      }, this.ApiService.errorDisplay('Could not retrieve Dockerfile locations'));
-  }
-
-  private buildOrderedRobotAccounts(): void {
-    if (!this.local.triggerAnalysis || !this.local.triggerAnalysis.robots) {
-      return;
-    }
-
-    var robots = this.local.triggerAnalysis.robots;
-    this.local.orderedRobotAccounts = this.TableService.buildOrderedItems(robots,
-                                                                          this.local.robotOptions,
-                                                                          ['name'],
-                                                                          []);
-  }
-
-  private checkDockerfilePath(repository: any, path: string, context: string): void {
-    this.local.triggerAnalysis = null;
-    this.local.robotAccount = null;
-
-    var params = {
-      'repository': this.repository.namespace + '/' + this.repository.name,
-      'trigger_uuid': this.trigger.id
-    };
-
-    var config = {
-      'build_source': repository.full_name,
-      'dockerfile_path': path.substr(1),
-      'context': context
-    };
-
-    var data = {
-      'config': config
-    };
-
-    this.ApiService.analyzeBuildTrigger(data, params)
-      .then((resp) => {
-        this.local.triggerAnalysis = resp;
-        this.buildOrderedRobotAccounts();
-      }, this.ApiService.errorDisplay('Could not analyze trigger'));
-  }
-
-  private setPossibleContexts(path){
-    if(this.local.dockerfileLocations.contextMap){
-      this.local.contexts = this.local.dockerfileLocations.contextMap[path] || [];
-    }
-  }
-}
diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.html b/static/js/directives/ui/manage-trigger/manage-trigger.component.html
new file mode 100644
index 000000000..05c08e0da
--- /dev/null
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.html
@@ -0,0 +1,432 @@
+<div class="manage-trigger-githost-element manage-trigger-control">
+  <linear-workflow done-title="Create Trigger"
+                   (on-workflow-complete)="$ctrl.createTrigger($event)">
+    <!-- Section: Namespace -->
+    <linear-workflow-section class="row"
+                             section-id="namespace"
+                             section-title="::{{ 'Select ' + $ctrl.namespaceTitle }}"
+                             section-valid="$ctrl.local.selectedNamespace"
+                             skip-section="::$ctrl.githost == 'custom-git'">
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.namespaces">
+        <h3>Select {{ ::$ctrl.namespaceTitle }}</h3>
+        <strong>Please select the {{ ::$ctrl.namespaceTitle }} under which the repository lives</strong>
+
+        <cor-table table-data="$ctrl.local.namespaces"
+                   table-item-title="namespaces"
+                   max-display-count="$ctrl.namespacesPerPage"
+                   filter-fields="::['title', 'id']">
+          <cor-table-col datafield="title"
+                         style="width: 20px;"
+                         sortfield="title"
+                         bind-model="$ctrl.local.selectedNamespace"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-radio-input.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-radio-input.html">
+              <input type="radio"
+                     ng-model="col.bindModel" ng-value="item"
+                     ng-dblclick="col.bindModel = null">
+            </script>
+          </cor-table-col>
+          <cor-table-col title="{{ ::$ctrl.namespaceTitle }}"
+                         datafield="id"
+                         sortfield="id"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-name.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-name.html">
+              <img class="namespace-avatar" ng-src="{{ ::item.avatar_url }}" ng-if="::item.avatar_url">
+              <span class="anchor"
+                    href="{{ ::item.url }}"
+                    is-text-only="::!item.url">{{ ::item.id }}</span>
+            </script>
+          </cor-table-col>
+          <cor-table-col title="Importance"
+                         datafield="score"
+                         bind-model="$ctrl.local.maxScore"
+                         style="display: flex; justify-content: flex-end"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-score.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-score.html">
+              <div style="padding-right: 40px;">
+                <span class="strength-indicator"
+                      value="::item.score" maximum="::col.bindModel" log-base="10"></span>
+              </div>
+            </script>
+          </cor-table-col>
+        </cor-table>
+      </div>
+
+      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
+           ng-if="!$ctrl.local.namespaces">
+        <span class="cor-loader-inline"></span> Retrieving {{ $ctrl.namespaceTitle }}s
+      </div>
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-if="$ctrl.local.namespaces">
+        <p>
+          <span class="registry-name"></span> has been granted access to read and view these {{ $ctrl.namespaceTitle }}s.
+        </p>
+        <p>
+          Don't see an expected {{ $ctrl.namespaceTitle }} here? Please make sure third-party access is enabled for <span class="registry-name"></span> under that {{ $ctrl.namespaceTitle }}.
+        </p>
+      </div>
+    </linear-workflow-section><!-- /Section: Namespace -->
+
+    <!-- Section: Githost Repository -->
+    <linear-workflow-section class="row"
+                             section-id="repo"
+                             section-title="Select Repository"
+                             section-valid="$ctrl.local.selectedRepository.full_name"
+                             skip-section="::$ctrl.githost == 'custom-git'">
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.repositories">
+        <h3>Select Repository</h3>
+        <strong>
+          Select a repository in
+          <img class="namespace-avatar"
+               ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
+               ng-if="$ctrl.local.selectedNamespace.avatar_url">
+          {{ $ctrl.local.selectedNamespace.id }}
+        </strong>
+
+        <div style="display: flex; justify-content: flex-end;">
+          <div class="filter-options">
+            <label>
+              <input type="checkbox"
+                     ng-model="$ctrl.local.repositoryOptions.hideStale"
+                     ng-change="$ctrl.buildOrderedRepositories()">
+              Hide stale repositories
+            </label>
+          </div>
+        </div>
+
+        <cor-table table-data="$ctrl.local.orderedRepositories.entries"
+                   table-item-title="repositories"
+                   max-display-count="$ctrl.repositoriesPerPage"
+                   filter-fields="['name', 'description']">
+          <cor-table-col bind-model="$ctrl.local.selectedRepository"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-radio-input.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-radio-input.html">
+              <span ng-if="!item.has_admin_permissions">
+              <i class="fa fa-exclamation-triangle"
+                 data-title="Admin access is required to add the webhook trigger to this repository" bs-tooltip></i>
+            </span>
+              <div ng-if="item.has_admin_permissions">
+                <input type="radio"
+                       ng-model="col.bindModel" ng-value="item"
+                       ng-dblclick="col.bindModel = null">
+              </div>
+            </script>
+          </cor-table-col>
+          <cor-table-col title="Repository Name"
+                         datafield="name"
+                         sortfield="name"
+                         bind-model="$ctrl.getTriggerIcon()"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-name.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-name.html">
+              <i class="service-icon fa {{ ::col.bindModel }}"></i>
+              <span class="anchor"
+                    href="{{ item.url }}"
+                    is-text-only="!item.url">{{ item.name }}</span>
+            </script>
+          </cor-table-col>
+          <cor-table-col title="Updated"
+                         datafield="last_updated_datetime"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
+              <span am-time-ago="item.last_updated_datetime"></span>
+            </script>
+          </cor-table-col>
+          <cor-table-col title="Description"
+                         datafield="description"
+                         sortfield="description"
+                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-description.html">
+            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-description.html">
+              <span ng-if="item.description">{{ item.description }}</span>
+              <span class="empty-description" ng-if="!item.description">(None)</span>
+            </script>
+          </cor-table-col>
+        </cor-table>
+      </div>
+
+      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
+           ng-if="!$ctrl.local.repositories">
+        <span class="cor-loader-inline"></span> Retrieving repositories
+      </div>
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
+           ng-if="$ctrl.local.repositories">
+        <p>
+          A webhook will be added to the selected repository in order to detect when new commits are made.
+        </p>
+        <p>
+          Don't see an expected repository here? Please make sure you have admin access on that repository.
+        </p>
+      </div>
+    </linear-workflow-section><!-- /Section: Githost Repository -->
+
+    <!-- Section: Custom Git Repository -->
+    <linear-workflow-section class="row"
+                             section-id="repo"
+                             section-title="Git Repository"
+                             section-valid="$ctrl.local.selectedRepository.full_name"
+                             skip-section="::$ctrl.githost != 'custom-git'">
+
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
+        <h3>Enter repository</h3>
+        <strong>Please enter the HTTP or SSH style URL used to clone your git repository</strong>
+        <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
+               ng-model="$ctrl.buildSource"
+               ng-change="$ctrl.checkBuildSource($ctrl.buildSource)"
+               ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
+      </div>
+      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
+        <p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
+
+        <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
+      </div>
+    </linear-workflow-section><!-- /Section: Repository -->
+
+    <!-- Section: Trigger Options -->
+    <linear-workflow-section class="row"
+                             section-id="triggeroptions"
+                             section-title="Configure Trigger"
+                             section-valid="$ctrl.local.triggerOptions"
+                             skip-section="$ctrl.githost == 'custom-git'">
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.repositoryRefs">
+        <h3>Configure Trigger</h3>
+        <strong>
+          Configure trigger options for
+          <img class="namespace-avatar"
+               ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
+               ng-if="$ctrl.local.selectedNamespace.avatar_url">
+          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
+        </strong>
+
+        <div class="radio" style="margin-top: 20px;">
+          <label>
+            <input type="radio" name="optionRadio"
+                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
+                   ng-value="false">
+            <div class="title">Trigger for all branches and tags <span class="weak">(default)</span></div>
+            <div class="description">Build a container image for each commit across all branches and tags</div>
+          </label>
+        </div>
+        <div class="radio">
+          <label>
+            <input type="radio"
+                   name="optionRadio"
+                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
+                   ng-value="true">
+            <div class="title">Trigger only on branches and tags matching a regular expression</div>
+            <div class="description">Only build container images for a subset of branches and/or tags.</div>
+            <div class="extended"
+                 ng-if="$ctrl.local.triggerOptions.hasBranchTagFilter">
+              <table>
+                <tr>
+                  <td style="white-space: nowrap;">Regular Expression:</td>
+                  <td>
+                    <input type="text" class="form-control"
+                           ng-model="$ctrl.local.triggerOptions.branchTagFilter"
+                           required>
+                    <div class="description">Examples: heads/master, tags/tagname, heads/.+</div>
+                    <regex-match-view items="$ctrl.local.repositoryFullRefs"
+                                      regex="$ctrl.local.triggerOptions.branchTagFilter"
+                                      ng-if="$ctrl.local.triggerOptions.branchTagFilter"></regex-match-view>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
+           ng-if="!$ctrl.local.repositoryRefs">
+        <span class="cor-loader-inline"></span> Retrieving repository refs
+      </div>
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
+        <p>Do you want to build a new container image for commits across all branches and tags, or limit to a subset?</p>
+        <p>For example, if you use release branches instead of <code>master</code> for building versions of your software, you can configure the trigger to only build images for these branches.</p>
+        <p>All images built will be tagged with the name of the branch or tag whose change invoked the trigger</p>
+      </div>
+    </linear-workflow-section><!-- /Section: Trigger Options -->
+
+    <!-- Section: Dockerfile Location -->
+    <linear-workflow-section class="row"
+                             section-id="dockerfilelocation"
+                             section-title="Select Dockerfile"
+                             section-valid="$ctrl.local.hasValidDockerfilePath">
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
+        <div class="co-alert co-alert-warning">
+          {{ $ctrl.local.dockerfileLocations.message }}
+        </div>
+      </div>
+
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.githost == 'custom-git' || $ctrl.local.dockerfileLocations.status == 'success'">
+        <h3>Select Dockerfile</h3>
+        <strong>Please select the location of the Dockerfile to build when this trigger is invoked</strong>
+        <dockerfile-path-select current-path="$ctrl.local.dockerfilePath"
+                                paths="$ctrl.local.dockerfileLocations.dockerfile_paths"
+                                supports-full-listing="true"
+                                (path-changed)="$ctrl.checkDockerfilePath($event)"></dockerfile-path-select>
+        <span ng-if="$ctrl.local.dockerfilePath.split('/').splice(-1)[0] == ''"
+              style="color: #D64456;">
+          Dockerfile path must end with a file, probably named <code>Dockerfile</code>
+        </span>
+      </div>
+
+      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
+           ng-if="$ctrl.githost != 'custom-git' && !$ctrl.local.dockerfileLocations">
+        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
+      </div>
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
+        <p>Please select the location containing the Dockerfile to be built.</p>
+        <p>The Dockerfile path starts with the context and ends with the path to the Dockefile that you would like to build</p>
+        <p>If the Dockerfile is located at the root of the git repository and named Dockerfile, enter <code>/Dockerfile</code> as the Dockerfile path.</p>
+      </div>
+    </linear-workflow-section><!-- /Section: Dockerfile Location -->
+
+    <!-- Section: Context Location -->
+    <linear-workflow-section class="row"
+                             section-id="contextlocation"
+                             section-title="Select Docker Context"
+                             section-valid="$ctrl.local.hasValidContextLocation">
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
+        <div class="co-alert co-alert-warning">
+          {{ $ctrl.local.dockerfileLocations.message }}
+        </div>
+      </div>
+
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.githost == 'custom-git' || $ctrl.local.dockerfileLocations.status == 'success'">
+        <h3>Select Context</h3>
+        <strong>Please select the context for the Docker build</strong>
+
+        <context-path-select current-context="$ctrl.local.dockerContext"
+                             contexts="$ctrl.local.contexts"
+                             (context-changed)="$ctrl.checkBuildContext($event)"></context-path-select>
+      </div>
+
+      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
+           ng-if="$ctrl.githost != 'custom-git' && !$ctrl.local.dockerfileLocations">
+        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
+      </div>
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
+        <p>Please select a Docker context.</p>
+        <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
+        <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
+      </div>
+    </linear-workflow-section><!-- /Section: Context Location -->
+
+    <!-- Section: Robot Account -->
+    <linear-workflow-section class="row"
+                             section-id="robot"
+                             section-title="Robot Account"
+                             section-valid="$ctrl.local.triggerAnalysis.status != 'error' &&
+                                            ($ctrl.local.triggerAnalysis.status != 'requiresrobot' || $ctrl.local.robotAccount)">
+      <!-- Error -->
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.triggerAnalysis.status == 'error'">
+        <h3 class="error"><i class="fa fa-exclamation-circle"></i> Verification Error</h3>
+        <strong>
+          There was an error when verifying the state of <img class="namespace-avatar"
+                                                              ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
+                                                              ng-if="$ctrl.local.selectedNamespace.avatar_url">
+          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
+        </strong>
+
+        {{ $ctrl.local.triggerAnalysis.message }}
+      </div>
+
+      <!-- Robot display for non-error cases -->
+      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
+           ng-if="$ctrl.local.triggerAnalysis.status != 'error'">
+        <!-- Warning -->
+        <div ng-if="$ctrl.local.triggerAnalysis.status == 'warning'">
+          <h3 class="warning"><i class="fa fa-exclamation-triangle"></i> Verification Warning</h3>
+          {{ $ctrl.local.triggerAnalysis.message }}
+        </div>
+
+        <!-- Public base -->
+        <div ng-if="$ctrl.local.triggerAnalysis.status == 'publicbase'">
+          <strong>
+            <span ng-if="$ctrl.local.triggerAnalysis.is_admin">Choose an optional robot account below or click "Continue" to complete setup of this build trigger.</span>
+          </strong>
+        </div>
+
+        <!-- Requires robot and is not admin -->
+        <div ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' && !$ctrl.local.triggerAnalysis.is_admin">
+          <h3>Robot Account Required</h3>
+          <p>The selected Dockerfile in the selected repository depends upon a private base image.</p>
+          <p>A robot account with access to the base image is required to setup this trigger, but you are not the administrator of this namespace.</p>
+          <p>Administrative access is required to continue to ensure security of the robot credentials.</p>
+        </div>
+
+        <!-- Requires robot and is admin -->
+        <div ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' && $ctrl.local.triggerAnalysis.is_admin">
+          <h3>Robot Account Required</h3>
+          <p>The selected Dockerfile in the selected repository depends upon a private base image.</p>
+          <p>A robot account with access to the base image is required to setup this trigger.</p>
+        </div>
+
+        <!-- Robots view -->
+        <div ng-if="$ctrl.local.triggerAnalysis.is_admin">
+          <cor-table table-data="$ctrl.local.triggerAnalysis.robots"
+                     table-item-title="robot accounts"
+                     filter-fields="['name']"
+                     max-display-count="$ctrl.robotsPerPage">
+            <cor-table-col datafield="name"
+                           bind-model="$ctrl.local.robotAccount"
+                           style="width: 20px;"
+                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/robot-radio-input.html">
+              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/robot-radio-input.html">
+                <input type="radio"
+                       ng-model="col.bindModel" ng-value="item"
+                       ng-dblclick="col.bindModel = null">
+              </script>
+            </cor-table-col>
+            <cor-table-col title="Robot Account"
+                           sortfield="name"
+                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/robot-name.html">
+              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/robot-name.html">
+                <span class="entity-reference" entity="item"></span>
+              </script>
+            </cor-table-col>
+            <cor-table-col ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' || true"
+                           datafield="can_read"
+                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/can-read.html">
+              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/can-read.html">
+                <span ng-if="item.can_read" class="success">Can Read</span>
+                <span ng-if="!item.can_read">Read access will be added if selected</span>
+              </script>
+            </cor-table-col>
+          </cor-table>
+        </div> <!-- /Robots view -->
+      </div>
+
+      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
+           ng-if="$ctrl.local.triggerAnalysis.is_admin">
+        <p>
+          In order for the <span class="registry-name"></span> to pull a <b>private base image</b> during the build
+          process, a robot account with access must be selected.
+        </p>
+        <p ng-if="$ctrl.local.triggerAnalysis.status != 'requiresrobot'">
+          If you know that a private base image is not used, you can skip this step.
+        </p>
+        <p ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot'">
+          Robot accounts that already have access to this base image are listed first. If you select a robot account
+          that does not currently have access, read permission will be granted to that robot account on trigger creation.
+        </p>
+      </div>
+    </linear-workflow-section><!-- /Section: Verification and Robot Account -->
+
+    <!-- Verification -->
+    <linear-workflow-section class="row"
+                             section-id="verification"
+                             section-title="Verification"
+                             section-valid="true">
+      <span>
+        <h3 class="success"><i class="fa fa-check-circle"></i> Ready to go!</h3>
+        Click "Continue" to complete setup of this build trigger.
+      </span>
+    </linear-workflow-section><!-- /Section: Verification -->
+  </linear-workflow>
+</div>
diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.spec.ts b/static/js/directives/ui/manage-trigger/manage-trigger.component.spec.ts
new file mode 100644
index 000000000..0c7ea80b6
--- /dev/null
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.spec.ts
@@ -0,0 +1,266 @@
+import { ManageTriggerComponent } from './manage-trigger.component';
+import { Local, Trigger, Repository } from '../../../types/common.types';
+import { ViewArray } from '../../../services/view-array/view-array';
+import { ContextChangeEvent } from '../context-path-select/context-path-select.component';
+import { PathChangeEvent } from '../dockerfile-path-select/dockerfile-path-select.component';
+import { Mock } from 'ts-mocks';
+import Spy = jasmine.Spy;
+
+
+describe("ManageTriggerComponent", () => {
+  var component: ManageTriggerComponent;
+  var apiServiceMock: Mock<any>;
+  var tableServiceMock: Mock<any>;
+  var triggerServiceMock: Mock<any>;
+  var rolesServiceMock: Mock<any>;
+  var repository: any;
+  var $scopeMock: Mock<ng.IScope>;
+
+  beforeEach(() => {
+    apiServiceMock = new Mock<any>();
+    tableServiceMock = new Mock<any>();
+    triggerServiceMock = new Mock<any>();
+    rolesServiceMock = new Mock<any>();
+    $scopeMock = new Mock<ng.IScope>();
+    component = new ManageTriggerComponent(apiServiceMock.Object,
+                                           tableServiceMock.Object,
+                                           triggerServiceMock.Object,
+                                           rolesServiceMock.Object,
+                                           $scopeMock.Object);
+    component.repository = {namespace: "someuser", name: "somerepo"};
+    component.trigger = {id: "2cac6317-754e-47d4-88d3-2a50b3f09ee3", service: "github"};
+  });
+
+  describe("ngOnInit", () => {
+
+    beforeEach(() => {
+      apiServiceMock.setup(mock => mock.listTriggerBuildSourceNamespaces).is(() => Promise.resolve({}));
+      apiServiceMock.setup(mock => mock.errorDisplay).is((message) => null);
+      $scopeMock.setup(mock => mock.$watch).is((val, callback) => null);
+    });
+
+    it("sets default values for config and selected namespace", () => {
+      component.ngOnInit();
+
+      expect(component.config).toEqual({});
+      expect(component.local.selectedNamespace).toBe(null);
+    });
+  });
+
+  describe("getTriggerIcon", () => {
+
+    beforeEach(() => {
+      triggerServiceMock.setup(mock => mock.getIcon).is((service: any) => null);
+    });
+
+    it("calls trigger service to get icon", () => {
+      const icon: any = component.getTriggerIcon();
+
+      expect((<Spy>triggerServiceMock.Object.getIcon).calls.argsFor(0)[0]).toEqual(component.trigger.service);
+    });
+  });
+
+  describe("checkDockerfilePath", () => {
+    var event: PathChangeEvent;
+
+    beforeEach(() => {
+      event = {path: '/Dockerfile', isValid: true};
+      component.local.selectedRepository = {name: "", full_name: "someorg/somerepo"};
+      component.local.dockerContext = '/';
+      component.local.dockerfileLocations = {contextMap: {}};
+      spyOn(component, "analyzeDockerfilePath").and.returnValue(null);
+    });
+
+    it("sets local Dockerfile path and validity to given event values", () => {
+      component.checkDockerfilePath(event);
+
+      expect(component.local.hasValidDockerfilePath).toEqual(event.isValid);
+      expect(component.local.dockerfilePath).toEqual(event.path);
+    });
+
+    it("sets local Dockerfile contexts if present in local Dockerfile locations", () => {
+      component.local.dockerfileLocations.contextMap[event.path] = ['/', '/dir'];
+      component.checkDockerfilePath(event);
+
+      expect(component.local.contexts).toEqual(component.local.dockerfileLocations.contextMap[event.path]);
+    });
+
+    it("sets local Dockerfile contexts to empty array if given path not present in local Dockerfile locations", () => {
+      component.checkDockerfilePath(event);
+
+      expect(component.local.contexts).toEqual([]);
+    });
+
+    it("calls component method to analyze new Dockerfile path", () => {
+      component.checkDockerfilePath(event);
+
+      expect((<Spy>component.analyzeDockerfilePath).calls.argsFor(0)[0]).toEqual(component.local.selectedRepository);
+      expect((<Spy>component.analyzeDockerfilePath).calls.argsFor(0)[1]).toEqual(event.path);
+      expect((<Spy>component.analyzeDockerfilePath).calls.argsFor(0)[2]).toEqual(component.local.dockerContext);
+    });
+  });
+
+  describe("checkBuildContext", () => {
+    var event: ContextChangeEvent;
+
+    beforeEach(() => {
+      event = {contextDir: '/', isValid: true};
+    });
+  });
+
+  describe("analyzeDockerfilePath", () => {
+    var selectedRepository: Repository;
+    var path: string;
+    var context: string;
+    var robots: {robots:  {[key: string]: any}[]};
+    var analysis: {[key: string]: any};
+    var orderedRobots: Mock<ViewArray>;
+
+    beforeEach(() => {
+      selectedRepository = {name: "", full_name: "someorg/somerepo"};
+      path = "/Dockerfile";
+      context = "/";
+      robots = {robots: [{name: 'robot'}]};
+      analysis = {'publicbase': true, robots: robots.robots};
+      orderedRobots = new Mock<ViewArray>();
+      apiServiceMock.setup(mock => mock.analyzeBuildTrigger).is((data, params) => Promise.resolve(analysis));
+      apiServiceMock.setup(mock => mock.getRobots).is((user, arg, params) => Promise.resolve(robots));
+      apiServiceMock.setup(mock => mock.errorDisplay).is((message) => null);
+      tableServiceMock.setup(mock => mock.buildOrderedItems).is((items, options, filterFields, numericFields) => orderedRobots.Object);
+    });
+
+    it("does nothing if given invalid Git repository", (done) => {
+      const invalidRepositories: Repository[] = [null];
+      invalidRepositories.forEach((repo, index) => {
+        component.analyzeDockerfilePath(repo, path, context);
+
+        expect((<Spy>apiServiceMock.Object.analyzeBuildTrigger)).not.toHaveBeenCalled();
+
+        if (index == invalidRepositories.length - 1) {
+          done();
+        }
+      });
+    });
+
+    it("uses default values for Dockerfile path and context if not given", (done) => {
+      const spy: Spy = <Spy>apiServiceMock.Object.analyzeBuildTrigger;
+      component.analyzeDockerfilePath(selectedRepository);
+
+      setTimeout(() => {
+        expect(spy.calls.argsFor(0)[0]['config']['build_source']).toEqual(selectedRepository.full_name);
+        expect(spy.calls.argsFor(0)[0]['config']['dockerfile_path']).toEqual('Dockerfile');
+        expect(spy.calls.argsFor(0)[0]['config']['context']).toEqual('/');
+        expect(spy.calls.argsFor(0)[1]['repository']).toEqual(`${component.repository.namespace}/${component.repository.name}`);
+        expect(spy.calls.argsFor(0)[1]['trigger_uuid']).toEqual(component.trigger.id);
+        done();
+      }, 10);
+    });
+
+    it("calls API service to analyze build trigger config with given values", (done) => {
+      const spy: Spy = <Spy>apiServiceMock.Object.analyzeBuildTrigger;
+      component.analyzeDockerfilePath(selectedRepository, path, context);
+
+      setTimeout(() => {
+        expect(spy.calls.argsFor(0)[0]['config']['build_source']).toEqual(selectedRepository.full_name);
+        expect(spy.calls.argsFor(0)[0]['config']['dockerfile_path']).toEqual(path.substr(1));
+        expect(spy.calls.argsFor(0)[0]['config']['context']).toEqual(context);
+        expect(spy.calls.argsFor(0)[1]['repository']).toEqual(`${component.repository.namespace}/${component.repository.name}`);
+        expect(spy.calls.argsFor(0)[1]['trigger_uuid']).toEqual(component.trigger.id);
+        done();
+      }, 10);
+    });
+
+    it("calls API service to display error if API service's trigger analysis fails", (done) => {
+      apiServiceMock.setup(mock => mock.analyzeBuildTrigger).is((data, params) => Promise.reject("Error"));
+      component.analyzeDockerfilePath(selectedRepository, path, context);
+
+      setTimeout(() => {
+        expect((<Spy>apiServiceMock.Object.errorDisplay).calls.argsFor(0)[0]).toEqual('Could not analyze trigger');
+        done();
+      }, 10);
+    });
+
+    it("updates component trigger analysis with successful trigger analysis response", (done) => {
+      component.analyzeDockerfilePath(selectedRepository, path, context);
+
+      setTimeout(() => {
+        expect(component.local.triggerAnalysis).toEqual(analysis);
+        done();
+      }, 10);
+    });
+  });
+
+  describe("createTrigger", () => {
+
+    beforeEach(() => {
+      component.local.selectedRepository = new Mock<Repository>().Object;
+      component.local.selectedRepository.full_name = "someorg/some-repository";
+      component.local.dockerfilePath = "/Dockerfile";
+      component.local.dockerContext = "/";
+      component.local.triggerOptions = {};
+      component.local.triggerAnalysis = {};
+      rolesServiceMock.setup(mock => mock.setRepositoryRole).is((repo, role, entityKind, entityName, callback) => {
+        callback();
+      });
+    });
+
+    it("does not call roles service if robot is required but robot is not selected", (done) => {
+      component.local.triggerAnalysis = {status: 'requiresrobot', name: 'privatebase', namespace: 'someorg'};
+      component.local.robotAccount = null;
+      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole)).not.toHaveBeenCalled();
+        done();
+      });
+
+      component.createTrigger();
+    });
+
+    it("calls roles service to grant read access to selected robot if robot is required and cannot read", (done) => {
+      component.local.triggerAnalysis = {status: 'requiresrobot', name: 'privatebase', namespace: 'someorg'};
+      component.local.robotAccount = {can_read: false, is_robot: true, kind: 'user', name: 'test-robot'};
+      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[0]).toEqual({
+          name: component.local.triggerAnalysis.name,
+          namespace: component.local.triggerAnalysis.namespace,
+        });
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[1]).toEqual('read');
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole).calls.argsFor(0)[2]).toEqual('robot');
+        done();
+      });
+
+      component.createTrigger();
+    });
+
+    it("does not call roles service if robot is required but already has read access", (done) => {
+      component.local.triggerAnalysis = {status: 'requiresrobot', name: 'privatebase', namespace: 'someorg'};
+      component.local.robotAccount = {can_read: true, is_robot: true, kind: 'user', name: 'test-robot'};
+      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole)).not.toHaveBeenCalled();
+        done();
+      });
+
+      component.createTrigger();
+    });
+
+    it("does not call roles service if robot is not required", (done) => {
+      component.local.triggerAnalysis = {status: 'publicbase', name: 'publicrepo', namespace: 'someorg'};
+      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
+        expect((<Spy>rolesServiceMock.Object.setRepositoryRole)).not.toHaveBeenCalled();
+        done();
+      });
+
+      component.createTrigger();
+    });
+
+    it("emits output event with config and pull robot", (done) => {
+      component.activateTrigger.subscribe((event: {config: any, pull_robot: any}) => {
+        expect(event.config.build_source).toEqual(component.local.selectedRepository.full_name);
+        expect(event.config.dockerfile_path).toEqual(component.local.dockerfilePath);
+        expect(event.config.context).toEqual(component.local.dockerContext);
+        done();
+      });
+
+      component.createTrigger();
+    });
+  });
+});
diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.ts b/static/js/directives/ui/manage-trigger/manage-trigger.component.ts
new file mode 100644
index 000000000..08ebf93f2
--- /dev/null
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.ts
@@ -0,0 +1,331 @@
+import { Input, Output, Component, Inject, EventEmitter, OnInit } from 'ng-metadata/core';
+import * as moment from 'moment';
+import { Local, Trigger, TriggerConfig, Repository, Namespace } from '../../../types/common.types';
+import { ContextChangeEvent } from '../context-path-select/context-path-select.component';
+import { PathChangeEvent } from '../dockerfile-path-select/dockerfile-path-select.component';
+
+
+/**
+ * A component that lets the user set up a build trigger for a public Git repository host service.
+ */
+@Component({
+  selector: 'manage-trigger',
+  templateUrl: '/static/js/directives/ui/manage-trigger/manage-trigger.component.html'
+})
+export class ManageTriggerComponent implements OnInit {
+
+  @Input('<') public githost: string = 'custom-git';
+  @Input('<') public repository: Repository;
+  @Input('<') public trigger: Trigger;
+  @Output() public activateTrigger: EventEmitter<{config: TriggerConfig, pull_robot?: any}> = new EventEmitter();
+  public config: TriggerConfig;
+  public local: Local = {
+    selectedRepository: {name: ''},
+    hasValidDockerfilePath: false,
+    dockerfileLocations: [],
+    triggerOptions: {},
+    namespaceOptions: {filter: '', predicate: 'score', reverse: false, page: 0},
+    repositoryOptions: {filter: '', predicate: 'score', reverse: false, page: 0, hideStale: true},
+    robotOptions: {filter: '', predicate: 'score', reverse: false, page: 0},
+  };
+  private namespacesPerPage: number = 10;
+  private repositoriesPerPage: number = 10;
+  private robotsPerPage: number = 10;
+  private namespaceTitle: string;
+  private namespace: any;
+  private buildSource: string;
+
+  constructor(@Inject('ApiService') private apiService: any,
+              @Inject('TableService') private tableService: any,
+              @Inject('TriggerService') private triggerService: any,
+              @Inject('RolesService') private rolesService: any,
+              @Inject('$scope') private $scope: ng.IScope) {
+
+  }
+
+  public ngOnInit(): void {
+    this.config = this.trigger.config || {};
+    this.namespaceTitle = 'organization';
+    this.local.selectedNamespace = null;
+    if (this.githost != 'custom-git') {
+      this.loadNamespaces();
+    }
+
+    // FIXME: Need to have watchers here because cor-table doesn't have ng-change functionality yet
+    this.$scope.$watch(() => this.local.selectedNamespace, (namespace: Namespace) => {
+      if (namespace) {
+        this.loadRepositories(namespace);
+      }
+    });
+    this.$scope.$watch(() => this.local.selectedRepository, (selectedRepository: Repository) => {
+      if (selectedRepository && this.githost != 'custom-git') {
+        this.loadRepositoryRefs(selectedRepository);
+        this.loadDockerfileLocations(selectedRepository);
+      }
+    });
+  }
+
+  public getTriggerIcon(): any {
+    return this.triggerService.getIcon(this.trigger.service);
+  }
+
+  public checkBuildSource(buildSource: string): void {
+    try {
+      this.local.selectedRepository.full_name = buildSource.split(':')[1].replace('.git', '');
+    } catch (error) {
+      this.local.selectedRepository.full_name = null;
+    }
+  }
+
+  public checkDockerfilePath(event: PathChangeEvent): void {
+    this.local.hasValidDockerfilePath = event.isValid && event.path.split('/')[event.path.split('/').length - 1] != '';
+    this.local.dockerfilePath = event.path;
+
+    if (event.path && this.local.selectedRepository) {
+      this.setPossibleContexts(event.path);
+      this.analyzeDockerfilePath(this.local.selectedRepository, this.local.dockerfilePath, this.local.dockerContext);
+    }
+  }
+
+  public checkBuildContext(event: ContextChangeEvent): void {
+    this.local.hasValidContextLocation = event.isValid;
+    this.local.dockerContext = event.contextDir;
+
+    if (event.contextDir && this.local.selectedRepository) {
+      this.analyzeDockerfilePath(this.local.selectedRepository, this.local.dockerfilePath, this.local.dockerContext);
+    }
+  }
+
+  public analyzeDockerfilePath(selectedRepo: Repository, path: string = '/Dockerfile', context: string = '/'): void {
+    if (selectedRepo != undefined && selectedRepo.full_name) {
+      this.local.triggerAnalysis = null;
+      this.local.robotAccount = null;
+
+      const params = {
+        'repository': this.repository.namespace + '/' + this.repository.name,
+        'trigger_uuid': this.trigger.id
+      };
+      const config: TriggerConfig = {
+        build_source: selectedRepo.full_name,
+        dockerfile_path: path.substr(1),
+        context: context
+      };
+      const data = {config: config};
+
+      // Try to analyze git repository, fall back to retrieving all namespace's robots
+      this.apiService.analyzeBuildTrigger(data, params)
+        .then((resp) => {
+          if (resp['status'] === 'notimplemented') {
+            return this.apiService.getRobots(this.repository.namespace, null, {'permissions': true});
+          } else {
+            this.local.triggerAnalysis = Object.assign({}, resp);
+            this.buildOrderedRobotAccounts();
+          }
+        })
+        .catch((error) => {
+          this.apiService.errorDisplay('Could not analyze trigger');
+        })
+        .then((resp) => {
+          this.local.triggerAnalysis = {
+            status: 'publicbase',
+            is_admin: true,
+            robots: resp.robots,
+            name: this.repository.name,
+            namespace: this.repository.namespace
+          };
+          this.buildOrderedRobotAccounts();
+        })
+        .catch((error) => {
+          this.apiService.errorDisplay('Could not retrieve robot accounts');
+        });
+    }
+  }
+
+  public createTrigger(): void {
+    var config: TriggerConfig = {
+      build_source: this.local.selectedRepository.full_name,
+      dockerfile_path: this.local.dockerfilePath,
+      context: this.local.dockerContext
+    };
+
+    if (this.local.triggerOptions['hasBranchTagFilter'] && this.local.triggerOptions['branchTagFilter']) {
+      config.branchtag_regex = this.local.triggerOptions['branchTagFilter'];
+    }
+
+    const activate = () => {
+      this.activateTrigger.emit({config: config, pull_robot: Object.assign({}, this.local.robotAccount)});
+    };
+
+    if (this.local.triggerAnalysis.status == 'requiresrobot' && this.local.robotAccount) {
+      if (this.local.robotAccount.can_read) {
+        activate();
+      } else {
+        // Add read permission onto the base repository for the robot and then activate the trigger.
+        const baseRepo: any = {name: this.local.triggerAnalysis.name, namespace: this.local.triggerAnalysis.namespace};
+        this.rolesService.setRepositoryRole(baseRepo, 'read', 'robot', this.local.robotAccount.name, activate);
+      }
+    } else {
+      activate();
+    }
+  }
+
+  private setPossibleContexts(path: string) {
+    if (this.local.dockerfileLocations.contextMap){
+      this.local.contexts = this.local.dockerfileLocations.contextMap[path] || [];
+    } else {
+      this.local.contexts = [path.split('/').slice(0, -1).join('/').concat('/')];
+    }
+  }
+
+  private buildOrderedNamespaces(): void {
+    if (this.local.namespaces) {
+      this.local.maxScore = 0;
+      this.local.namespaces.forEach((namespace) => {
+        this.local.maxScore = Math.max(namespace.score, this.local.maxScore);
+      });
+    }
+  }
+
+  private loadNamespaces(): void {
+    this.local.namespaces = null;
+    this.local.selectedNamespace = null;
+    this.local.orderedNamespaces = null;
+
+    this.local.selectedRepository = null;
+    this.local.orderedRepositories = null;
+
+    var params = {
+      'repository': this.repository.namespace + '/' + this.repository.name,
+      'trigger_uuid': this.trigger.id
+    };
+
+    this.apiService.listTriggerBuildSourceNamespaces(null, params)
+      .then((resp) => {
+        this.local.namespaces = resp['namespaces'];
+        this.local.repositories = null;
+        this.buildOrderedNamespaces();
+      }, this.apiService.errorDisplay('Could not retrieve the list of ' + this.namespaceTitle));
+  }
+
+  private buildOrderedRepositories(): void {
+    if (this.local.repositories) {
+      var repositories = this.local.repositories || [];
+      repositories.forEach((repository) => {
+        repository['last_updated_datetime'] = new Date(repository['last_updated'] * 1000);
+      });
+
+      if (this.local.repositoryOptions.hideStale) {
+        var existingRepositories = repositories;
+
+        repositories = repositories.filter((repository) => {
+          var older_date = moment(repository['last_updated_datetime']).add(1, 'months');
+          return !moment().isAfter(older_date);
+        });
+
+        if (existingRepositories.length > 0 && repositories.length == 0) {
+          repositories = existingRepositories;
+        }
+      }
+
+      this.local.orderedRepositories = this.tableService.buildOrderedItems(repositories,
+        this.local.repositoryOptions,
+        ['name', 'description'],
+        []);
+    }
+  }
+
+  private loadRepositories(namespace: any): void {
+    this.local.repositories = null;
+    this.local.selectedRepository = null;
+    this.local.repositoryRefs = null;
+    this.local.triggerOptions = {
+      'hasBranchTagFilter': false
+    };
+
+    this.local.orderedRepositories = null;
+
+    const params = {
+      'repository': this.repository.namespace + '/' + this.repository.name,
+      'trigger_uuid': this.trigger.id
+    };
+
+    const data = {
+      'namespace': namespace.id
+    };
+
+    this.apiService.listTriggerBuildSources(data, params).then((resp) => {
+      if (namespace == this.local.selectedNamespace) {
+        this.local.repositories = resp['sources'];
+        this.buildOrderedRepositories();
+      }
+    }, this.apiService.errorDisplay('Could not retrieve repositories'));
+  }
+
+  private loadRepositoryRefs(repository: any): void {
+    this.local.repositoryRefs = null;
+    this.local.triggerOptions = {
+      'hasBranchTagFilter': false
+    };
+
+    const params = {
+      'repository': this.repository.namespace + '/' + this.repository.name,
+      'trigger_uuid': this.trigger.id,
+      'field_name': 'refs'
+    };
+
+    const config = {
+      'build_source': repository.full_name
+    };
+
+    this.apiService.listTriggerFieldValues(config, params).then((resp) => {
+      if (repository == this.local.selectedRepository) {
+        this.local.repositoryRefs = resp['values'];
+        this.local.repositoryFullRefs = resp['values'].map((ref) => {
+          const kind = ref.kind == 'branch' ? 'heads' : 'tags';
+          const icon = ref.kind == 'branch' ? 'fa-code-fork' : 'fa-tag';
+          return {
+            'value': kind + '/' + ref.name,
+            'icon': icon,
+            'title': ref.name
+          };
+        });
+      }
+    }, this.apiService.errorDisplay('Could not retrieve repository refs'));
+  }
+
+  private loadDockerfileLocations(repository: any): void {
+    this.local.dockerfilePath = null;
+    this.local.dockerContext = null;
+
+    const params = {
+      'repository': this.repository.namespace + '/' + this.repository.name,
+      'trigger_uuid': this.trigger.id
+    };
+    const config: TriggerConfig = {build_source: repository.full_name};
+
+    this.apiService.listBuildTriggerSubdirs(config, params)
+      .then((resp) => {
+        if (repository == this.local.selectedRepository) {
+          this.local.dockerfileLocations = resp;
+        }
+      })
+      .catch((error) => {
+        this.apiService.errorDisplay('Could not retrieve Dockerfile locations');
+      });
+  }
+
+  private buildOrderedRobotAccounts(): void {
+    if (this.local.triggerAnalysis && this.local.triggerAnalysis.robots) {
+      this.local.triggerAnalysis.robots = this.local.triggerAnalysis.robots.map((robot) => {
+        robot.kind = robot.kind || 'user';
+        robot.is_robot = robot.is_robot || true;
+        return robot;
+      });
+
+      this.local.orderedRobotAccounts = this.tableService.buildOrderedItems(this.local.triggerAnalysis.robots,
+        this.local.robotOptions,
+        ['name'],
+        []);
+    }
+  }
+}
diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts
index f3d13681f..b90dffc49 100644
--- a/static/js/quay.module.ts
+++ b/static/js/quay.module.ts
@@ -4,8 +4,6 @@ import { NgModule } from 'ng-metadata/core';
 import { QuayRoutesModule } from "./quay-routes.module";
 import { DockerfilePathSelectComponent } from './directives/ui/dockerfile-path-select/dockerfile-path-select.component';
 import { ContextPathSelectComponent } from './directives/ui/context-path-select/context-path-select.component';
-import { ManageTriggerCustomGitComponent } from './directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component';
-import { ManageTriggerGithostComponent } from './directives/ui/manage-trigger-githost/manage-trigger-githost.component';
 import { LinearWorkflowComponent } from './directives/ui/linear-workflow/linear-workflow.component';
 import { LinearWorkflowSectionComponent } from './directives/ui/linear-workflow/linear-workflow-section.component';
 import { QuayConfigModule } from './quay-config.module';
@@ -37,6 +35,7 @@ import { MarkdownViewComponent } from './directives/ui/markdown/markdown-view.co
 import { MarkdownToolbarComponent } from './directives/ui/markdown/markdown-toolbar.component';
 import { MarkdownEditorComponent } from './directives/ui/markdown/markdown-editor.component';
 import { BrowserPlatform, browserPlatform } from './constants/platform.constant';
+import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-trigger.component';
 import { Converter, ConverterOptions } from 'showdown';
 
 
@@ -52,8 +51,6 @@ import { Converter, ConverterOptions } from 'showdown';
     RegexMatchViewComponent,
     DockerfilePathSelectComponent,
     ContextPathSelectComponent,
-    ManageTriggerCustomGitComponent,
-    ManageTriggerGithostComponent,
     LinearWorkflowComponent,
     LinearWorkflowSectionComponent,
     AppPublicViewComponent,
@@ -77,6 +74,7 @@ import { Converter, ConverterOptions } from 'showdown';
     CorTabsComponent,
     CorTabComponent,
     CorTabPaneComponent,
+    ManageTriggerComponent,
   ],
   providers: [
     ViewArrayImpl,
diff --git a/static/js/types/common.types.ts b/static/js/types/common.types.ts
index f3331cc71..042785e9e 100644
--- a/static/js/types/common.types.ts
+++ b/static/js/types/common.types.ts
@@ -50,7 +50,7 @@ export type Local = {
   selectedRepository?: Repository;
   triggerAnalysis?: any;
   triggerOptions?: {
-    [key: string]: boolean;
+    [key: string]: any;
   };
 };
 
@@ -70,17 +70,18 @@ export type RobotAccount = {
  * A type representing a Git repository.
  */
 export type Repository = {
-  description: string;
-  full_name: string;
-  has_admin_permissions: boolean;
-  last_updated: number;
-  last_updated_datetime: Date;
   name: string;
-  private: boolean;
-  url: string;
+  description?: string;
+  full_name?: string;
+  has_admin_permissions?: boolean;
+  last_updated?: number;
+  last_updated_datetime?: Date;
+  private?: boolean;
+  url?: string;
+  kind?: string;
   namespace?: string;
-  trust_enabled: boolean;
-}
+  trust_enabled?: boolean;
+};
 
 
 /**
@@ -100,8 +101,24 @@ export type Namespace = {
  * A type representing a trigger.
  */
 export type Trigger = {
-  id: number;
-  service: any;
+  id: string;
+  service: string;
+  is_active?: boolean;
+  build_source?: string;
+  can_invoke?: boolean;
+  repository_url?: string;
+  config?: any;
+};
+
+
+/**
+ * A type representing a build trigger config.
+ */
+export type TriggerConfig = {
+  build_source: string;
+  dockerfile_path?: string;
+  context?: string;
+  branchtag_regex?: string;
 };
 
 
diff --git a/static/partials/trigger-setup.html b/static/partials/trigger-setup.html
index 6f5e36e55..dba5fe074 100644
--- a/static/partials/trigger-setup.html
+++ b/static/partials/trigger-setup.html
@@ -40,24 +40,10 @@
       <!-- state = managing or activating -->
       <div ng-if="state == 'managing' || state == 'activating'"
            ng-class="{'activating': state == 'activating'}">
-        <!-- Select the correct flow -->
-        <div ng-switch on="trigger.service">
-          <!-- Custom Git -->
-          <div ng-switch-when="custom-git">
-            <manage-trigger-custom-git
-              trigger="trigger"
-              (activate-trigger)="activateTrigger($event)"></manage-trigger-custom-git>
-          </div> <!-- /custom-git -->
-
-          <!-- Hosted Git (GitHub, Gitlab, BitBucket) -->
-          <div ng-switch-default>
-            <manage-trigger-githost
-                 trigger="trigger"
-                 repository="repository"
-                 (activate-trigger)="activateTrigger($event)"></manage-trigger-githost>
-          </div> <!-- /hosted -->
-        </div>  <!-- /ngSwitch -->
-
+        <manage-trigger githost="trigger.service"
+                        trigger="trigger"
+                        repository="repository"
+                        (activate-trigger)="activateTrigger($event)"></manage-trigger>
         <div class="activating-message" ng-show="state == 'activating'">
           <div class="cor-loader-inline"></div><b>Completing setup of the build trigger</b>
         </div>