Merge pull request #226 from coreos-inc/robotadd

Feedback bar for showing response to user actions

static/css/directives/ui/feedback-bar.css

@@ -0,0 +1,59 @@
+.feedback-bar {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 50;
+  overflow: hidden;
+  text-align: center;
+  height: 42px;
+}
+
+@keyframes flow-down-up {
+    0%   {
+      top: -40px;
+    }
+
+    25%  {
+      top: 0px;
+    }
+
+    75%  {
+      top: 0px;
+    }
+
+    100% {
+      top: -40px;
+    }
+}
+
+.feedback-bar-element {
+  position: relative;
+  top: -40px;
+
+  text-align: center;
+  display: inline-block;
+
+  animation-name: flow-down-up;
+  animation-duration: 5s;
+}
+
+.feedback-bar-element .co-alert {
+  margin: 0px;
+
+  border-top: 0px;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+}
+
+.feedback-bar-element .co-alert:before {
+  top: 5px !important;
+}
+
+.feedback-bar-element .co-alert .feedback-text i {
+  display: inline-block;
+  margin-left: 6px;
+  margin-right: 4px;
+  vertical-align: middle;
+}

static/directives/application-manager.html

@@ -1,4 +1,5 @@
 <div class="application-manager-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="cor-loader" ng-show="loading"></div>
   <div ng-show="!loading">
     <div class="manager-header" header-title="OAuth Applications">

static/directives/feedback-bar.html

@@ -0,0 +1,5 @@
+<div class="feedback-bar-element" ng-class="feedback.kind" ng-show="viewCounter">
+  <div class="co-alert" ng-class="'co-alert-' + feedback.kind">
+    <span class="feedback-text" ng-bind-html="formattedMessage"></span>
+  </div>
+</div>

static/directives/prototype-manager.html

@@ -1,4 +1,5 @@
 <div class="prototype-manager-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="cor-loader" ng-show="loading"></div>
   <div ng-show="!loading">
     <div class="manager-header" header-title="Default Permissions">

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

@@ -1,4 +1,5 @@
 <div class="repo-panel-builds-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="tab-header-controls">
     <button class="btn btn-primary" ng-click="showNewBuildDialog()">
       <i class="fa fa-plus"></i>Start Build

static/directives/robots-manager.html

@@ -1,4 +1,5 @@
 <div class="robots-manager-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="cor-loader" ng-show="loading"></div>
 
   <div ng-show="!loading">

static/directives/teams-manager.html

@@ -1,4 +1,5 @@
 <div class="teams-manager-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="manager-header" header-title="Teams and Membership">
     <div class="tab-header-controls hidden-xs">
       <div class="btn-group btn-group-sm" ng-show="organization.is_admin">

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

@@ -38,6 +38,8 @@ angular.module('quay').directive('repoPanelBuilds', function () {
       $scope.triggerCredentialsModalTrigger = null;
       $scope.triggerCredentialsModalCounter = 0;
 
+      $scope.feedback = null;
+
       var updateBuilds = function() {
         if (!$scope.allBuilds) { return; }
 
@@ -264,6 +266,14 @@ angular.module('quay').directive('repoPanelBuilds', function () {
           $scope.allBuilds.push(build);
         }
         updateBuilds();
+
+        $scope.feedback = {
+          'kind': 'info',
+          'message': 'Build {buildid} started',
+          'data': {
+            'buildid': build.id
+          }
+        };
       };
     }
   };

static/js/directives/ui/application-manager.js

@@ -15,6 +15,7 @@ angular.module('quay').directive('applicationManager', function () {
     controller: function($scope, $element, ApiService) {
       $scope.loading = false;
       $scope.applications = [];
+      $scope.feedback = null;
 
       $scope.createApplication = function(appName) {
         if (!appName) { return; }
@@ -29,6 +30,15 @@ angular.module('quay').directive('applicationManager', function () {
 
         ApiService.createOrganizationApplication(data, params).then(function(resp) {
           $scope.applications.push(resp);
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Application {application_name} created',
+            'data': {
+              'application_name': appName
+            }
+          };
+
         }, ApiService.errorDisplay('Cannot create application'));
       };
 

static/js/directives/ui/feedback-bar.js

@@ -0,0 +1,37 @@
+/**
+ * An element which displays a feedback bar when an action has been taken.
+ */
+angular.module('quay').directive('feedbackBar', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/feedback-bar.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'feedback': '=feedback'
+    },
+    controller: function($scope, $element, AvatarService, Config, UIService, $timeout, StringBuilderService) {
+      $scope.viewCounter = 0;
+      $scope.formattedMessage = '';
+
+      $scope.$watch('feedback', function(feedback) {
+        if (feedback) {
+          $scope.formattedMessage = StringBuilderService.buildString(feedback.message, feedback.data || {}, 'span');
+          $scope.viewCounter++;
+        } else {
+          $scope.viewCounter = 0;
+        }
+      });
+
+      $($element).find('.feedback-bar-element')
+                 .on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
+        function(e) {
+          $scope.$apply(function() {
+            $scope.viewCounter = 0;
+          });
+        });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/prototype-manager.js

@@ -17,6 +17,7 @@ angular.module('quay').directive('prototypeManager', function () {
       $scope.delegateForNew = null;
       $scope.clearCounter = 0;
       $scope.newForWholeOrg = true;
+      $scope.feedback = null;
 
       $scope.setRole = function(role, prototype) {
         var params = {
@@ -31,6 +32,11 @@ angular.module('quay').directive('prototypeManager', function () {
 
         ApiService.updateOrganizationPrototypePermission(data, params).then(function(resp) {
           prototype.role = role;
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Role updated'
+          };
         }, ApiService.errorDisplay('Cannot modify permission'));
       };
 
@@ -94,6 +100,11 @@ angular.module('quay').directive('prototypeManager', function () {
         ApiService.deleteOrganizationPrototypePermission(null, params).then(function(resp) {
           $scope.prototypes.splice($scope.prototypes.indexOf(prototype), 1);
           $scope.loading = false;
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Default Permission deleted'
+          };
         }, ApiService.errorDisplay('Cannot delete permission'));
       };
 

static/js/directives/ui/robots-manager.js

@@ -22,6 +22,7 @@ angular.module('quay').directive('robotsManager', function () {
       $scope.shownRobot = null;
       $scope.showRobotCounter = 0;
       $scope.Config = Config;
+      $scope.feedback = null;
 
       // Listen for route changes and update the tabs accordingly.
       var locationListener = $rootScope.$on('$routeUpdate', function(){
@@ -117,6 +118,13 @@ angular.module('quay').directive('robotsManager', function () {
             created.teams = [];
             created.repositories = [];
             $scope.robots.push(created);
+            $scope.feedback = {
+              'kind': 'success',
+              'message': 'Robot account {robot} was created',
+              'data': {
+                'robot': name
+              }
+            };
           });
       };
 
@@ -126,6 +134,13 @@ angular.module('quay').directive('robotsManager', function () {
           var index = $scope.findRobotIndexByName(info.name);
           if (index >= 0) {
             $scope.robots.splice(index, 1);
+            $scope.feedback = {
+              'kind': 'success',
+              'message': 'Robot account {robot} was deleted',
+              'data': {
+                'robot': info.name
+              }
+            };
           }
         }, ApiService.errorDisplay('Cannot delete robot account'));
       };

static/js/directives/ui/teams-manager.js

@@ -26,6 +26,7 @@ angular.module('quay').directive('teamsManager', function () {
       $scope.orderedTeams = [];
       $scope.showingMembers = false;
       $scope.fullMemberList = null;
+      $scope.feedback = null;
 
       var loadTeamMembers = function() {
         if (!$scope.organization || !$scope.isEnabled) { return; }
@@ -95,6 +96,14 @@ angular.module('quay').directive('teamsManager', function () {
         });
 
         ApiService.updateOrganizationTeam(data, params).then(function(resp) {
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Team {team} role changed to {role}',
+            'data': {
+              'team': teamname,
+              'role': role
+            }
+          };
         }, errorHandler);
       };
 
@@ -118,6 +127,14 @@ angular.module('quay').directive('teamsManager', function () {
           $scope.members[teamname].members = [];
           $scope.organization.ordered_teams.push(teamname);
           $scope.orderedTeams.push(created);
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Team {team} created',
+            'data': {
+              'team': teamname
+            }
+          };
         });
       };
 
@@ -143,6 +160,14 @@ angular.module('quay').directive('teamsManager', function () {
 
           loadOrderedTeams();
           delete $scope.organization.teams[teamname];
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'Team {team} deleted',
+            'data': {
+              'team': teamname
+            }
+          };
         }, ApiService.errorDisplay('Cannot delete team'));
       };
 
@@ -180,6 +205,14 @@ angular.module('quay').directive('teamsManager', function () {
           $scope.showMembers(true);
 
           callback(true);
+
+          $scope.feedback = {
+            'kind': 'success',
+            'message': 'User {user} removed from the organization',
+            'data': {
+              'user': memberInfo.name
+            }
+          };
         }, errorHandler)
       };
 

static/js/services/string-builder-service.js

@@ -39,7 +39,7 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
     return url;
   };
 
-  stringBuilderService.buildString = function(value_or_func, metadata) {
+  stringBuilderService.buildString = function(value_or_func, metadata, opt_codetag) {
      var fieldIcons = {
       'inviter': 'user',
       'username': 'user',
@@ -108,7 +108,9 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
           markedDown = '<i class="fa ' + icon + '"></i>' + markedDown;
         }
 
-        description = description.replace('{' + key + '}', '<code title="' + safe  + '">' + markedDown + '</code>');
+        var codeTag = opt_codetag || 'code';
+        description = description.replace('{' + key + '}',
+          '<' + codeTag + ' title="' + safe  + '">' + markedDown + '</' + codeTag + '>');
       }
     }
     return $sce.trustAsHtml(description.replace('\n', '<br>'));