New create entity dialogs (team and robot)

Fixes https://github.com/coreos-inc/design/issues/230

static/directives/create-entity-dialog.html

@@ -0,0 +1,98 @@
+<div class="create-entity-dialog-element">
+  <div class="modal fade co-dialog wider">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" ng-click="hide()" aria-hidden="true">&times;</button>
+          <h4 class="modal-title" ng-show="view == 'enterName' || view == 'creating'">
+            <i class="fa {{ entityIcon }}"></i>
+            Create {{ entityTitle }}
+          </h4>
+          <h4 class="modal-title" ng-show="view == 'addperms' || view == 'addingperms'">
+            Add permissions for <i class="fa {{ entityIcon }}"></i> {{ entity.name }}
+          </h4>
+        </div> <!-- /.model-header -->
+        <div class="modal-body" ng-show="view == 'creating' || view == 'addingperms'">
+          <div class="cor-loader"></div>
+        </div>
+        <div class="modal-body co-modal-body-scrollable" ng-show="view == 'addperms'">
+          <span class="co-filter-box">
+            <span class="filter-message" ng-if="options.filter">
+              Showing {{ orderedRepositories.entries.length }} of {{ repositories.length }} repositories
+            </span>
+            <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Repositories...">
+          </span>
+
+          <label>
+            Select repositories in
+            <span class="avatar" size="16" data="namespace.avatar"></span>
+            {{ info.namespace }}:
+          </label>
+
+          <table class="co-table" style="margin-bottom: 210px;">
+            <thead>
+              <td class="checkbox-col"></td>
+              <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
+                <a ng-click="TableService.orderBy('name', options)">Repository Name</a>
+              </td>
+              <td>Permission</td>
+              <td ng-class="TableService.tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)">
+                <a ng-click="TableService.orderBy('last_modified_datetime', options)">Last Updated</a>
+              </td>
+             </thead>
+
+             <tr class="co-checkable-row"
+                 ng-repeat="repo in orderedRepositories.visibleEntries"
+                 ng-class="checkedRepos.isChecked(repo, checkedRepos.checked) ? 'checked' : ''"
+                 bindonce>
+              <td>
+                <span class="cor-checkable-item" controller="checkedRepos" item="repo"></span>
+              </td>
+              <td>
+                <i class="fa fa-hdd-o"></i>
+                <span bo-text="repo.name"></span>
+              </td>
+              <td>
+                <span class="role-group small" current-role="repo.permission"
+                      roles="repoRolesOrNone"
+                      role-changed="setRole(role, repo)"></span>
+              </td>
+              <td>
+                 <span ng-if="repo.last_modified">
+                   {{ repo.last_modified * 1000 | amCalendar }}
+                 </span>
+                 <span class="empty" ng-if="!repo.last_modified">(Empty Repository)</span>
+              </td>
+            </tr>
+          </table>
+
+          <div class="empty" ng-if="!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="modal-body" ng-show="view == 'enterName'">
+          <form name="enterNameForm" ng-submit="createEntity()">
+            <label>Provide a name for your new {{ entityTitle }}:</label>
+            <input type="text" class="form-control" ng-model="entityName" ng-pattern="entityNameRegexObj" required>
+            <div class="help-text">
+              Choose a name to inform your teammates
+              about this {{ entityTitle }}. Must match {{ entityNameRegex }}.
+            </div>
+          </form>
+        </div> <!-- /.modal-body -->
+        <div class="modal-footer" ng-show="view == 'addperms'">
+          <button type="button" class="btn btn-primary" ng-click="addPermissions()"
+                  ng-show="checkedRepos.checked.length">Add permissions</button>
+          <button type="button" class="btn btn-default" ng-click="hide()">Close</button>
+        </div> <!-- /.footer-body -->
+        <div class="modal-footer" ng-show="view == 'enterName'">
+          <button type="button" class="btn btn-primary" ng-click="createEntity()"
+                  ng-disabled="enterNameForm.$invalid">Create {{ entityTitle }}</button>
+          <button type="button" class="btn btn-default" ng-click="hide()">Cancel</button>
+        </div> <!-- /.footer-body -->
+      </div>
+    </div>
+  </div>
+</div>

static/directives/create-robot-dialog.html

@@ -0,0 +1,9 @@
+<div class="create-robot-dialog-element">
+  <div ng-if="info">
+    <div class="create-entity-dialog" info="info" entity-title="robot account"
+         entity-kind="user"
+         entity-icon="ci-robot" entity-name-regex="{{ ROBOT_PATTERN }}"
+         entity-create-requested="createRobot(name, callback)"
+         entity-create-completed="robotFinished(entity)"></div>
+  </div>
+</div>

static/directives/create-team-dialog.html

@@ -0,0 +1,9 @@
+<div class="create-team-dialog-element">
+  <div ng-if="info">
+    <div class="create-entity-dialog" info="info" entity-title="team"
+         entity-kind="team"
+         entity-icon="fa-group" entity-name-regex="{{ TEAM_PATTERN }}"
+         entity-create-requested="createTeam(name, callback)"
+         entity-create-completed="teamFinished(entity)"></div>
+  </div>
+</div>

static/directives/entity-search.html

@@ -14,12 +14,12 @@
       </li>
 
       <li role="presentation" ng-show="includeTeams && isOrganization && !lazyLoading && isAdmin">
-        <a role="menuitem" class="new-action" tabindex="-1" ng-click="createTeam()">
+        <a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateTeam()">
           <i class="fa fa-group"></i> Create team
         </a>
       </li>
       <li role="presentation" ng-show="includeRobots && !lazyLoading && isAdmin">
-        <a role="menuitem" class="new-action" tabindex="-1" ng-click="createRobot()">
+        <a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateRobot()">
           <i class="fa ci-robot"></i>
           Create robot account
         </a>
@@ -70,4 +70,8 @@
       </li>
     </ul>
   </div>
+  <div class="create-team-dialog" info="createTeamInfo"
+       team-created="handleTeamCreated(team)"></div>
+  <div class="create-robot-dialog" info="createRobotInfo"
+       robot-created="handleRobotCreated(robot)"></div>
 </span>

static/directives/fetch-tag-dialog.html

@@ -38,6 +38,7 @@
               <td class="first-col">Pull Credentials:</td>
               <td>
                 <div class="entity-search" namespace="repository.namespace"
+                     for-repository="repository"
                      placeholder="'Choose Pull Credentials'"
                      allowed-entities="['robot']"
                      clear-value="clearCounter"

static/directives/header-bar.html

@@ -85,12 +85,12 @@
                     Namespace {{ getNamespace(currentPageContext) }}
                   </li>
                   <li ng-if="isOrganization(getNamespace(currentPageContext)) && canAdmin(getNamespace(currentPageContext))">
-                    <a ng-click="createTeam(currentPageContext)">
+                    <a ng-click="askCreateTeam(currentPageContext)">
                       <i class="fa fa-group"></i> New Team
                     </a>
                   </li>
                   <li ng-if="canAdmin(getNamespace(currentPageContext))">
-                    <a ng-click="createRobot(currentPageContext)">
+                    <a ng-click="askCreateRobot(currentPageContext)">
                       <i class="fa ci-robot"></i> New Robot Account
                     </a>
                   </li>
@@ -207,6 +207,14 @@
       </ul>
     </div>
 
+    <div class="create-robot-dialog" info="createRobotInfo"
+         robot-created="handleRobotCreated(robot, currentPageContext)">
+    </div>
+
+    <div class="create-team-dialog" info="createTeamInfo"
+         team-created="handleTeamCreated(team, currentPageContext)">
+    </div>
+
     <div class="dockerfile-build-dialog"
          show-now="showBuildDialogCounter"
          repository="currentPageContext.repository"

static/directives/repo-list-table.html

@@ -30,7 +30,7 @@
    </thead>
 
    <tbody>
-     <tr ng-repeat="repository in orderedRepositories">
+     <tr ng-repeat="repository in orderedRepositories.entries">
        <td class="repo-name-icon">
           <span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span>
           <a href="/repository/{{ repository.namespace }}/{{ repository.name }}">

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

@@ -61,7 +61,7 @@
 
      <span class="co-filter-box">
       <span class="page-controls" total-count="tags.length" current-page="options.page" page-size="tagsPerPage"></span>
-      <input class="form-control" type="text" ng-model="options.tagFilter" placeholder="Filter Tags...">
+      <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Tags...">
      </span>
    </div>
 

static/directives/repository-permissions-table.html

@@ -106,6 +106,8 @@
         <tr class="add-row" ng-if-media="'(min-width: 768px)'">
           <td id="add-entity-permission" class="admin-search">
             <span class="entity-search" namespace="repository.namespace"
+                  for-repository="repository"
+                  skip-permissions="true"
                   placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
                   current-entity="addPermissionInfo.entity"></span>
           </td>
@@ -125,6 +127,8 @@
       <!-- Mobile add permissions -->
       <div class="mobile-add-row" ng-if-media="'(max-width: 767px)'">
         <span class="entity-search" namespace="repository.namespace"
+              for-repository="repository"
+              skip-permissions="true"
               placeholder="'Select a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
               current-entity="addPermissionInfo.entity"
               pull-right="true"></span>

static/directives/robots-manager.html

@@ -4,12 +4,9 @@
 
   <div ng-show="!loading">
     <div class="manager-header" header-title="Robot Accounts">
-      <span class="popup-input-button" pattern="ROBOT_PATTERN"
-            placeholder="'Robot Account Name'"
-            submitted="createRobot(value)"
-            ng-show="isEnabled">
-        <i class="fa fa-plus"></i> Create Robot Account
-      </span>
+      <button class="btn btn-primary" ng-click="askCreateRobot()" ng-show="isEnabled">
+        <i class="fa fa-plus" style="margin-right: 4px;"></i> Create Robot Account
+      </button>
     </div>
 
     <div class="section-description-header">
@@ -134,5 +131,6 @@
     </table>
   </div>
 
+  <div class="create-robot-dialog" info="createRobotInfo" robot-created="robotCreated()"></div>
   <div class="robot-credentials-dialog" info="robotDisplayInfo"></div>
 </div>

static/directives/teams-manager.html

@@ -13,23 +13,17 @@
         </button>
       </div>
     </div>
-
-    <span class="popup-input-button visible-xs" ng-if="!showingMembers"
-          pattern="TEAM_PATTERN" placeholder="'Team Name'"
-          submitted="createTeam(value)" ng-show="organization.is_admin">
-      <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
-    </span>
   </div>
 
   <!-- Teams List -->
   <div ng-show="!showingMembers">
     <div class="row" style="margin-left: 0px; margin-right: 0px;">
-      <span class="popup-input-button hidden-xs"
-            pattern="TEAM_PATTERN" placeholder="'Team Name'"
-            submitted="createTeam(value)" ng-show="organization.is_admin"
-            style="margin-bottom: 10px;">
-        <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
-      </span>
+      <button class="btn btn-primary hidden-xs"
+              ng-show="organization.is_admin"
+              style="margin-bottom: 10px; float: right;"
+              ng-click="askCreateTeam()">
+        <i class="fa fa-plus" style="margin-right: 4px;"></i> Create New Team
+      </button>
     </div>
 
     <div class="row hidden-xs">
@@ -155,6 +149,8 @@
     </table>
   </div>
 
+  <div class="create-team-dialog" info="createTeamInfo" team-created="handleTeamCreated(team)"></div>
+
   <!-- Remove member confirm -->
   <div class="cor-confirm-dialog"
      dialog-context="removeMemberInfo"