Get the remainder of the repo settings panel working

static/css/directives/repo-view/repo-panel-builds.css

@@ -10,20 +10,3 @@
   margin-right: 6px;
   vertical-align: middle;
 }
-
-.repo-panel-builds .heading-title {
-  font-size: 20px;
-}
-
-.repo-panel-builds .heading-controls {
-  font-size: 14px;
-  float: right;
-}
-
-.repo-panel-builds .heading-controls .btn {
-  margin-top: -10px;
-}
-
-.repo-panel-builds .heading-controls .btn .fa {
-  margin-right: 6px;
-}

static/css/directives/repo-view/repo-panel-settings.css

@@ -0,0 +1,25 @@
+.repo-panel-settings-element .panel-section {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.repo-panel-settings-element .lock-section {
+  position: relative;
+  padding-left: 80px;
+}
+
+.repo-panel-settings-element .lock-section .lock-icon {
+  position: absolute;
+  top: 10px;
+  left: 22px;
+  color: #ccc;
+  font-size: 46px;
+}
+
+.repo-panel-settings-element .panel-section .btn {
+  margin-top: 20px;
+}
+
+.repo-panel-settings-element .panel-section .btn .fa {
+  margin-right: 6px;
+}

static/css/directives/ui/repository-events-table.css

@@ -0,0 +1,3 @@
+.repository-events-table-element .notification-row i.fa {
+  margin-right: 6px;
+}

static/css/pages/repo-view.css

@@ -22,3 +22,20 @@
 .repository-view .tab-header-controls .btn .fa {
   margin-right: 6px;
 }
+
+.repository-view .heading-title {
+  font-size: 20px;
+}
+
+.repository-view .heading-controls {
+  font-size: 14px;
+  float: right;
+}
+
+.repository-view .heading-controls .btn {
+  margin-top: -10px;
+}
+
+.repository-view .heading-controls .btn .fa {
+  margin-right: 6px;
+}

static/directives/repo-view/repo-panel-settings.html

@@ -10,5 +10,86 @@
     </div>
 
     <!-- Access Tokens (DEPRECATED) -->
+    <div class="co-panel" ng-show="hasTokens">
+      <div class="co-panel-heading"><i class="fa fa-key"></i> Access Token Permissions</div>
+      <div class="panel-body">
+        <div class="repository-tokens-table" repository="repository" has-tokens="hasTokens"></div>
+      </div>
+    </div>
 
+    <!-- Events and Notifications -->
+    <div class="repository-events-table" repository="repository"></div>
+
+    <!-- Other settings -->
+    <div class="co-panel">
+      <div class="co-panel-heading"><i class="fa fa-gears"></i> Repository Settings</div>
+
+      <div class="cor-loader" ng-show="!repository"></div>
+
+      <div ng-show="repository">
+        <!-- Public/Private -->
+        <div class="panel-body panel-section lock-section" ng-if="!repository.is_public">
+          <i class="fa fa-lock lock-icon"></i>
+          <div>This repository is currently <b>private</b>. Only users on the permissions list may view and interact with it.</div>
+
+          <button class="btn btn-default" ng-click="askChangeAccess('public')">
+            <i class="fa fa-unlock"></i>Make Public
+          </button>
+        </div>
+
+        <div class="panel-body panel-section lock-section" ng-if="repository.is_public">
+          <i class="fa fa-unlock lock-icon"></i>
+
+          <div>This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.</div>
+
+          <button class="btn btn-default" ng-click="askChangeAccess('private')">
+            <i class="fa fa-lock"></i>Make Private
+          </button>
+        </div>
+
+        <!-- Delete Repository -->
+        <div class="panel-body panel-section">
+          <div>Deleting a repository <b>cannot be undone</b>. Here be dragons!</div>
+          <button class="btn btn-danger" ng-click="askDelete()">
+            <i class="fa fa-trash"></i>
+            Delete Repository
+          </button>
+        </div>
+
+        <!-- Build Status Badge -->
+        <div class="panel-body panel-section">
+          <!-- Status Image -->
+          <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">
+            <img ng-src="/repository/{{ repository.namespace }}/{{ repository.name }}/status?token={{ repository.status_token }}"
+                 data-title="Docker Repository on Quay.io">
+          </a>
+
+          <!-- Embed formats -->
+          <table style="margin-top: 20px; width: 600px;">
+            <thead>
+              <th style="width: 150px"></th>
+              <th></th>
+            </thead>
+            <tr>
+              <td>Image (SVG):</td>
+              <td>
+                <div class="copy-box" hovering-message="true" value="getBadgeFormat('svg', repository)"></div>
+              </td>
+            </tr>
+            <tr>
+              <td>Markdown:</td>
+              <td>
+                <div class="copy-box" hovering-message="true" value="getBadgeFormat('md', repository)"></div>
+              </td>
+            </tr>
+            <tr>
+              <td>AsciiDoc:</td>
+              <td>
+                <div class="copy-box" hovering-message="true" value="getBadgeFormat('asciidoc', repository)"></div>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
 </div>

static/directives/repository-events-table.html

@@ -0,0 +1,75 @@
+<div class="repository-events-table-element">
+  <div class="co-panel">
+    <div class="co-panel-heading">
+      <i class="fa fa-bell"></i> Events and Notifications
+
+      <div class="heading-controls hidden-sm hidden-xs">
+        <button class="btn btn-primary" ng-click="askCreateNotification()">
+          <i class="fa fa-plus"></i> Create Notification
+        </button>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="resource-view" resource="notificationsResource"
+           error-message="'Could not load repository events'">
+
+          <div class="empty" ng-if="!notifications.length">
+            <div class="empty-primary-msg">No notification have been setup for this repository.</div>
+            <div class="empty-secondary-msg" ng-if="repository.can_write">
+              Click the "Create Notification" button above to add a new notification for a repository event.
+            </div>
+          </div>
+
+          <table class="co-table permissions" ng-if="notifications.length">
+            <thead>
+              <tr>
+                <td>Event</td>
+                <td>Notification</td>
+                <td class="options-col"></td>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr class="notification-row" ng-repeat="notification in notifications">
+                <td>
+                  <span class="notification-event">
+                    <i class="fa fa-lg" ng-class="getEventInfo(notification).icon"></i>
+                    {{ getEventInfo(notification).title }}
+                  </span>
+                </td>
+
+                <td>
+                  <span class="notification-method">
+                    <i class="fa fa-lg" ng-class="getMethodInfo(notification).icon"></i>
+                    {{ getMethodInfo(notification).title }}
+                  </span>
+                </td>
+
+                <td>
+                  <span class="cor-options-menu">
+                    <span class="cor-option" option-click="testNotification(notification)">
+                      <i class="fa fa-send"></i> Test Notification
+                    </span>
+                    <span class="cor-option" option-click="showWebhookInfo(notification)"
+                          ng-if="getMethodInfo(notification).id == 'webhook'">
+                        <i class="fa fa-book"></i>
+                        Webhook Documentation
+                    </span>
+                    <span class="cor-option" option-click="deleteNotification(notification)">
+                      <i class="fa fa-times"></i> Delete Notification
+                    </span>
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+  </div>
+
+  <!--  New notification dialog-->
+  <div class="create-external-notification-dialog"
+       repository="repository"
+       counter="showNewNotificationCounter"
+       notification-created="handleNotificationCreated(notification)"></div>
+</div>

static/directives/repository-permissions-table.html

@@ -5,9 +5,9 @@
       <table class="co-table permissions">
         <thead>
           <tr>
-            <td style="min-width: 400px;">Account Name</td>
+            <td>Account Name</td>
-            <td>Permissions</td>
+            <td style="width: 300px">Permissions</td>
-            <td style="width: 95px;"></td>
+            <td class="options-col"></td>
           </tr>
         </thead>
 
@@ -21,8 +21,13 @@
           <td class="user-permissions">
             <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
           </td>
-          <td>
+
-            <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'team')"></span>
+          <td class="options-col">
+            <span class="cor-options-menu">
+              <span class="cor-option" option-click="deleteRole(name, 'team')">
+                <i class="fa fa-times"></i> Delete Permission
+              </span>
+            </span>
           </td>
         </tr>
 
@@ -38,8 +43,12 @@
               <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'user')" roles="roles"></span>
             </div>
           </td>
-          <td>
+          <td class="options-col">
-            <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'user')"></span>
+            <span class="cor-options-menu">
+              <span class="cor-option" option-click="deleteRole(name, 'user')">
+                <i class="fa fa-times"></i> Delete Permission
+              </span>
+            </span>
           </td>
         </tr>
 
@@ -49,12 +58,10 @@
                   placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
                   current-entity="addPermissionInfo.entity"></span>
           </td>
-          <td>
+          <td colspan="2">
             <span class="role-group" current-role="addPermissionInfo.role" roles="roles"
                   role-changed="addPermissionInfo.role = role"></span>
-          </td>
+            <button class="btn btn-success" style="margin-left: 10px"
-          <td>
-            <button class="btn btn-success"
                     ng-disabled="!addPermissionInfo.role || !addPermissionInfo.entity"
                     ng-click="addPermission()">
               Add Permission

static/directives/repository-tokens-table.html

@@ -0,0 +1,35 @@
+<div class="repository-tokens-table-element">
+  <div class="resource-view" resource="tokensResource"
+       error-message="'Could not load repository tokens'">
+      <div class="alert alert-warning">Note: Access tokens are <strong>deprecated</strong> and will be removed in the near future. <a href="http://docs.quay.io/glossary/robot-accounts.html">Robot accounts</a> are the recommended replacement.
+      </div>
+
+      <table class="co-table permissions">
+        <thead>
+          <tr>
+            <td style="min-width: 400px;">Token Name</td>
+            <td>Permissions</td>
+            <td style="width: 95px;"></td>
+          </tr>
+        </thead>
+
+        <tbody>
+         <tr ng-repeat="(code, token) in tokens">
+            <td class="user token">
+              <i class="fa fa-key"></i>
+              <a ng-click="showToken(token.code)">{{ token.friendlyName }}</a>
+            </td>
+            <td class="user-permissions">
+              <div class="btn-group btn-group-sm">
+                <button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'read')" ng-class="{read: 'active', write: ''}[token.role]">Read only</button>
+                <button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'write')" ng-class="{read: '', write: 'active'}[token.role]">Write</button>
+              </div>
+            </td>
+            <td>
+              <span class="delete-ui" delete-title="'Delete Token'" perform-delete="deleteToken(token.code)"></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+  </div>
+</div>

static/js/directives/repo-view/repo-panel-settings.js

@@ -11,7 +11,72 @@ angular.module('quay').directive('repoPanelSettings', function () {
     scope: {
       'repository': '=repository'
     },
-    controller: function($scope, $element, ApiService) {
+    controller: function($scope, $element, ApiService, Config) {
+      $scope.getBadgeFormat = function(format, repository) {
+        if (!repository) { return ''; }
+
+        var imageUrl = Config.getUrl('/repository/' + repository.namespace + '/' + repository.name + '/status');
+        if (!$scope.repository.is_public) {
+          imageUrl += '?token=' + repository.status_token;
+        }
+
+        var linkUrl = Config.getUrl('/repository/' + repository.namespace + '/' + repository.name);
+
+        switch (format) {
+          case 'svg':
+            return imageUrl;
+
+          case 'md':
+            return '[![Docker Repository on ' + Config.REGISTRY_TITLE_SHORT + '](' + imageUrl +
+              ' "Docker Repository on ' + Config.REGISTRY_TITLE_SHORT  + '")](' + linkUrl + ')';
+
+          case 'asciidoc':
+            return 'image:' + imageUrl + '["Docker Repository on ' + Config.REGISTRY_TITLE_SHORT  + '", link="' + linkUrl + '"]';
+        }
+
+        return '';
+      };
+
+      $scope.askDelete = function() {
+        bootbox.confirm('Are you sure you want delete this repository?', function(r) {
+          if (!r) { return; }
+          $scope.deleteRepo();
+        });
+      };
+
+      $scope.deleteRepo = function() {
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        ApiService.deleteRepository(null, params).then(function() {
+          setTimeout(function() {
+            document.location = '/repository/';
+          }, 100);
+        }, ApiService.errorDisplay('Could not delete repository'));
+      };
+
+
+      $scope.askChangeAccess = function(newAccess) {
+        bootbox.confirm('Are you sure you want to make this repository ' + newAccess + '?', function(r) {
+          if (!r) { return; }
+          $scope.changeAccess(newAccess);
+        });
+      };
+
+      $scope.changeAccess = function(newAccess) {
+        var visibility = {
+          'visibility': newAccess
+        };
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        ApiService.changeRepoVisibility(visibility, params).then(function() {
+          $scope.repository.is_public = newAccess == 'public';
+        }, ApiService.errorDisplay('Could not change repository visibility'));
+      };
     }
   };
   return directiveDefinitionObject;

static/js/directives/ui/external-notification-view.js

@@ -1,5 +1,5 @@
 /**
- * An element which displays controls and information about a defined external notification on
+ * DEPRECATED: An element which displays controls and information about a defined external notification on
  * a repository.
  */
 angular.module('quay').directive('externalNotificationView', function () {

static/js/directives/ui/repository-events-table.js

@@ -0,0 +1,91 @@
+/**
+ * An element which displays a table of events on a repository and allows them to be
+ * edited.
+ */
+angular.module('quay').directive('repositoryEventsTable', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repository-events-table.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository'
+    },
+    controller: function($scope, $element, ApiService, Restangular, UtilService, ExternalNotificationData) {
+      $scope.showNewNotificationCounter = 0;
+
+      var loadNotifications = function() {
+        if (!$scope.repository || $scope.notificationsResource) { return; }
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        $scope.notificationsResource = ApiService.listRepoNotificationsAsResource(params).get(
+          function(resp) {
+            $scope.notifications = resp.notifications;
+            return $scope.notifications;
+          });
+      };
+
+      $scope.$watch('repository', loadNotifications);
+      loadNotifications();
+
+      $scope.handleNotificationCreated = function(notification) {
+        $scope.notifications.push(notification);
+      };
+
+      $scope.askCreateNotification = function() {
+        $scope.showNewNotificationCounter++;
+      };
+
+      $scope.getEventInfo = function(notification) {
+        return ExternalNotificationData.getEventInfo(notification.event);
+      };
+
+      $scope.getMethodInfo = function(notification) {
+        return ExternalNotificationData.getMethodInfo(notification.method);
+      };
+
+      $scope.deleteNotification = function(notification) {
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'uuid': notification.uuid
+        };
+
+        ApiService.deleteRepoNotification(null, params).then(function() {
+          var index = $.inArray(notification, $scope.notifications);
+          if (index < 0) { return; }
+          $scope.notifications.splice(index, 1);
+        }, ApiService.errorDisplay('Cannot delete notification'));
+      };
+
+      $scope.showWebhookInfo = function(notification) {
+        var eventId = notification.event;
+        document.location = 'http://docs.quay.io/guides/notifications.html#webhook_' + eventId;
+      };
+
+      $scope.testNotification = function(notification) {
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'uuid': notification.uuid
+        };
+
+        ApiService.testRepoNotification(null, params).then(function() {
+          bootbox.dialog({
+            "title": "Test Notification Queued",
+            "message": "A test version of this notification has been queued and should appear shortly",
+            "buttons": {
+              "close": {
+                "label": "Close",
+                "className": "btn-primary"
+              }
+            }
+          });
+        }, ApiService.errorDisplay('Could not issue test notification'));
+      };
+
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/repository-tokens-table.js

@@ -0,0 +1,68 @@
+/**
+ * An element which displays a table of tokens on a repository and allows them to be
+ * edited.
+ */
+angular.module('quay').directive('repositoryTokensTable', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repository-tokens-table.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository',
+      'hasTokens': '=hasTokens'
+    },
+    controller: function($scope, $element, ApiService, Restangular, UtilService) {
+      $scope.roles = [
+          { 'id': 'read', 'title': 'Read', 'kind': 'success' },
+          { 'id': 'write', 'title': 'Write', 'kind': 'success' },
+          { 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
+      ];
+
+      $scope.hasTokens = false;
+
+      var loadTokens = function() {
+        if (!$scope.repository || $scope.tokensResource) { return; }
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        $scope.tokensResource = ApiService.listRepoTokensAsResource(params).get(function(resp) {
+          $scope.tokens = resp.tokens;
+          $scope.hasTokens = Object.keys($scope.tokens).length >= 1;
+        }, ApiService.errorDisplay('Could not load access tokens'));
+      };
+
+      $scope.$watch('repository', loadTokens);
+      loadTokens();
+
+      $scope.deleteToken = function(tokenCode) {
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'code': tokenCode
+        };
+
+        ApiService.deleteToken(null, params).then(function() {
+          delete $scope.tokens[tokenCode];
+        });
+      };
+
+      $scope.changeTokenAccess = function(tokenCode, newAccess) {
+        var role = {
+          'role': newAccess
+        };
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name,
+          'code': tokenCode
+        };
+
+        ApiService.changeToken(role, params).then(function(updated) {
+          $scope.tokens[updated.code] = updated;
+        });
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});