quay/static/directives/robots-manager.html

<div class="robots-manager-element">
  <div class="cor-loader" ng-show="loading"></div>

  <div ng-show="!loading">
    <div class="manager-header">
      <div class="side-controls">
        <span class="popup-input-button" pattern="ROBOT_PATTERN"
              placeholder="'Robot Account Name'"
              submitted="createRobot(value)">
          <i class="fa fa-plus"></i> Create Robot Account
        </span>
      </div>
      <h3>Robot Accounts</h3>
    </div>

    <div class="manager-header section-description-header">
      Robot Accounts are named tokens that can be granted permissions on multiple repositories
      under this <span ng-if="organization">organization</span><span ng-if="!organization">user namespace</span>. They are typically used in environments where credentials will
      be shared, such as deployment systems.
    </div>

    <span class="co-filter-box" ng-show="robots.length">
       <input class="form-control" type="text" ng-model="robotFilter" placeholder="Filter Robot Accounts...">
    </span>

    <div class="empty" ng-if="!robots.length">
      <div class="empty-primary-msg">No robot accounts defined.</div>
      <div class="empty-secondary-msg">
        Click the "Create Robot Account" button above to create a robot account.
      </div>
    </div>

    <div class="empty" ng-if="robots.length && !(robots | filter:robotFilter).length">
      <div class="empty-primary-msg">No robot accounts found matching filter.</div>
      <div class="empty-secondary-msg">
        Please change your filter to display robot accounts.
      </div>
    </div>

    <table class="co-table" ng-if="(robots | filter:robotFilter).length">
      <thead>
        <td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()"></td>
        <td>Robot Account Name</td>
        <td ng-if="organization && Config.isNewLayout()">Teams</td>
        <td ng-if="Config.isNewLayout()">Repository Permissions</td>
        <td class="options-col"></td>
      </thead>

      <tbody ng-repeat="robotInfo in robots | filter:robotFilter | orderBy:getShortenedRobotName">
        <tr ng-class="robotInfo.showing_permissions ? 'open' : 'closed'">
          <td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()">
            <span ng-if="robotInfo.repositories.length > 0" ng-click="showPermissions(robotInfo)">
              <i class="fa"
                 ng-class="robotInfo.showing_permissions ? 'fa-caret-down' : 'fa-caret-right'"
                 data-title="View Permissions List" bs-tooltip></i>
            </span>
          </td>
          <td class="robot">
            <i class="fa fa-wrench"></i>
            <a ng-click="showRobot(robotInfo)">
              <span class="prefix">{{ getPrefix(robotInfo.name) }}+</span>{{ getShortenedName(robotInfo.name) }}
            </a>
          </td>
          <td ng-if="organization && Config.isNewLayout()">
            <span class="empty" ng-if="robotInfo.teams.length == 0">
              (Not a member of any team)
            </span>
            <span class="empty" ng-if="robotInfo.teams.length > 0">
               <span ng-repeat="team in robotInfo.teams"
                     data-title="Team {{ team.name }}" bs-tooltip>
                 <span class="anchor" is-text-only="!organization.admin" href="/organization/{{ organization.name }}/teams/{{ team.name }}">
                   <span class="avatar" size="24" data="team.avatar"></span>
                 </span>
               </span>
            </span>
          </td>
          <td ng-if="Config.isNewLayout()">
            <span class="empty" ng-if="robotInfo.repositories.length == 0">
              (No permissions on any repositories)
            </span>

            <span class="member-perm-summary" ng-if="robotInfo.repositories.length > 0">
              Permissions on
              <span class="anchor" href="javascript:void(0)" is-text-only="!organization.is_admin" ng-click="showPermissions(robotInfo)">{{ robotInfo.repositories.length }}
                <span ng-if="robotInfo.repositories.length == 1">repository</span>
                <span ng-if="robotInfo.repositories.length > 1">repositories</span>
              </span>
            </span>
          </td>
          <td class="options-col">
            <span class="cor-options-menu">
              <span class="cor-option" option-click="showRobot(robotInfo)">
                <i class="fa fa-key"></i> View Credentials
              </span>
              <span class="cor-option" option-click="deleteRobot(robotInfo)">
                <i class="fa fa-times"></i> Delete Robot {{ robotInfo.name }}
              </span>
            </span>
          </td>
        </tr>
        <tr ng-if="robotInfo.showing_permissions">
          <td class="permissions-display-row" colspan="4">
            <span class="cor-loader" ng-if="robotInfo.loading_permissions"></span>
            <div class="permissions-table-wrapper">
              <table class="permissions-table" ng-if="!robotInfo.loading_permissions">
                <thead>
                  <td>Repository</td>
                  <td>Permission</td>
                </thead>

                <tr ng-repeat="permission in robotInfo.permissions">
                  <td>
                    <span class="repo-icon repo-circle no-background" repo="permission.repository"></span>
                    <a ng-href="/repository/{{ getPrefix(robotInfo.name) }}/{{ permission.repository.name }}?tab=settings">{{ getPrefix(robotInfo.name) }}/{{ permission.repository.name }}</a>
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm">
                      <span class="role-group" current-role="permission.role" roles="roles"
                            read-only="true"></span>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="docker-auth-dialog" username="shownRobot.name" token="shownRobot.token"
       shown="!!shownRobot" counter="showRobotCounter" supports-regenerate="true" regenerate="regenerateToken(username)">
    <i class="fa fa-wrench"></i> {{ shownRobot.name }}
  </div>
</div>