From 1f8e0b72be5f0c109d0f87b6f97ee4a22f22a2d7 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Thu, 27 Sep 2018 15:59:00 -0400
Subject: [PATCH] Add clear instructions to the github trigger setup on how to
 authorize additional organizations

Until now, this has been quite hard for customers to find
---
 .../manage-trigger.component.css               | 18 ++++++++++++++++++
 .../manage-trigger.component.html              |  4 ++--
 .../manage-trigger/manage-trigger.component.ts |  7 ++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 static/js/directives/ui/manage-trigger/manage-trigger.component.css

diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.css b/static/js/directives/ui/manage-trigger/manage-trigger.component.css
new file mode 100644
index 000000000..fabda654e
--- /dev/null
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.css
@@ -0,0 +1,18 @@
+.gh-button {
+  color: #0366d6;
+  background-color: #fff;
+  padding: 3px 10px;
+  font-size: 12px;
+  border: 1px solid rgba(27,31,35,0.2);
+  border-radius: 0.25em;
+}
+
+.gh-grant-message {
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+.gh-grant-message b {
+  display: block;
+  margin-bottom: 10px;
+}
diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.html b/static/js/directives/ui/manage-trigger/manage-trigger.component.html
index 913beb3c9..957516c57 100644
--- a/static/js/directives/ui/manage-trigger/manage-trigger.component.html
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.html
@@ -61,8 +61,8 @@
         <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 class="co-alert co-alert-info gh-grant-message" ng-if="$ctrl.githost == 'github'">
+          <b>Don't see an expected organization here?</b>Please visit <a href="{{ $ctrl.githubTriggerEndpoint }}settings/connections/applications/{{ $ctrl.githubTriggerClientId }}" target="_blank" rel="nofollow noopener">Connections with <span class="registry-name"></span></a> and choose <span class="gh-button">Grant</span> or <span class="gh-button">Request</span> before reloading this page.
         </p>
       </div>
     </linear-workflow-section><!-- /Section: Namespace -->
diff --git a/static/js/directives/ui/manage-trigger/manage-trigger.component.ts b/static/js/directives/ui/manage-trigger/manage-trigger.component.ts
index 9b4797533..5f04e656b 100644
--- a/static/js/directives/ui/manage-trigger/manage-trigger.component.ts
+++ b/static/js/directives/ui/manage-trigger/manage-trigger.component.ts
@@ -3,6 +3,7 @@ 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';
+import './manage-trigger.component.css';
 
 
 /**
@@ -37,13 +38,17 @@ export class ManageTriggerComponent implements OnChanges {
   private namespaceTitle: string;
   private namespace: any;
   private buildSource: string;
+  private githubTriggerEndpoint: string;
+  private githubTriggerClientId: string;
 
   constructor(@Inject('ApiService') private apiService: any,
               @Inject('TableService') private tableService: any,
               @Inject('TriggerService') private triggerService: any,
               @Inject('RolesService') private rolesService: any,
+              @Inject('KeyService') private keyService: any,
               @Inject('$scope') private $scope: ng.IScope) {
-
+    this.githubTriggerEndpoint = keyService['githubTriggerEndpoint'];
+    this.githubTriggerClientId = keyService['githubTriggerClientId'];
   }
 
   public ngOnChanges(changes: SimpleChanges): void {