Revised Server Groups - Pending Msg., etc.

* Changed markup & style for displaying pending move messages, layout
  of dropdown menu, cancel link, delete group link.
* Changed language of pending msg., delete group link.
* Auto-focused Add Group input field.

Change-Id: I6ed3397a420a0c5facf63aa9b494c0d077a25dc1
Reviewed-on: http://review.couchbase.org/75299
Reviewed-by: Michael Wiederhold <mike@couchbase.com>
Tested-by: Michael Wiederhold <mike@couchbase.com>

priv/public/ui/app/css/cbui-components.css

@@ -1589,7 +1589,6 @@ input[type="checkbox"]:checked + label:before {
   font-size: .875rem;
   display: inline-block;
   position: relative;
-  padding-right: 1.5rem;
   cursor: pointer;
 }
 .menu-toggle:hover {
@@ -1612,7 +1611,7 @@ input[type="checkbox"]:checked + label:before {
 .dropdown-menu {
   background-color: #fff;
   position: absolute;
-  top: 20px;
+  top: 28px;
   right: 0;
   z-index: 10;
   border: 1px solid #d1d1d1;

priv/public/ui/app/mn_admin/mn_groups/group_dialog/mn_groups_group_dialog.html

@@ -9,15 +9,16 @@ <h2 ng-show="!groupsGroupDialogCtl.isEditMode">Create Group</h2>
      class="forms">
     <div class="panel-content">
       <div class="formrow">
-        <label for="new_group_filed">Group Name:</label>
+        <label for="new_group_filed">Group Name</label>
         <input
            type="text"
            autocorrect="off"
            spellcheck="false"
            autocapitalize="off"
            name="group"
            ng-model="groupsGroupDialogCtl.groupName"
-           id="new_group_filed">
+           id="new_group_filed"
+           autofocus>
         <div
            class="error error-form"
            ng-show="groupsGroupDialogCtl.errors.name">

priv/public/ui/app/mn_admin/mn_groups/mn_groups.html

@@ -27,11 +27,11 @@
     <button
        ng-disabled="groupsCtl.disableAddGroupBtn || poolDefault.rebalancing || !rbac.cluster.server_groups.write"
        ng-click="groupsCtl.createGroup()"
-       >Create Group</button>
+       >Add Group</button>
   </span>
 </div>
 
-<div mn-spinner="viewLoading">
+<div mn-spinner="viewLoading" class="margin-bottom2">
   <div
      ng-repeat="group in groupsCtl.state.groups | orderBy:'name'"
      class="margin-bottom1">
@@ -46,7 +46,7 @@ <h4 class="ellipsis">{{group.name}}&nbsp;
       </h4>
     </div>
 
-    <!-- group list of servers ********************** -->
+<!-- group list of servers ********************** -->
     <section
        class="row flex-left"
        ng-repeat="server in group.nodes">
@@ -63,31 +63,40 @@ <h4 class="ellipsis">{{group.name}}&nbsp;
            class="label services cell-label">{{service}}
         </span>
       </span>
-      <span class="cbui-table-cell flex-grow-3"></span>
-      <span>
-        <div uib-dropdown>
-          <div uib-dropdown-toggle class="menu-toggle">move to<span class="has-menu"></span></div>
+      <span class="cbui-table-cell wrap flex-grow-3 text-right">
+        <div uib-dropdown ng-show="!server.toGroupPending">
+          <div uib-dropdown-toggle class="menu-toggle">move to <span class="icon fa-caret-down"></span></div>
           <div uib-dropdown-menu class="dropdown-menu">
             <a
                href=""
                ng-repeat="groupNew in groupsCtl.state.groups | orderBy:'name'"
                ng-click="groupsCtl.changeNodeGroup(group.name, groupNew.name, server)">{{groupNew.name}}</a>
           </div>
         </div>
-        <small ng-show="server.toGroupPending">
-          {{server.toGroupPending}} pending
-          <a href="" ng-click="groupsCtl.changeNodeGroup(server.toGroupPending, group.name, server)">
-            Cancel
+        <small ng-show="server.toGroupPending" class="row success">
+          <span>
+            <span class="icon fa-check"></span>
+            pending move to {{server.toGroupPending}}
+          </span>
+          <a
+             href=""
+             class="indent-1"
+             ng-click="groupsCtl.changeNodeGroup(server.toGroupPending, group.name, server)">
+            cancel
           </a>
         </small>
       </span>
     </section>
-    <!-- ZERO CONTENT ***************** -->
+
+<!-- zero content *********************** -->
     <div ng-show="!group.nodes.length" class="zero-content">
       This group is empty.
       <a
          href=""
-         ng-click="groupsCtl.deleteGroup(group)">click to delete</a>
+         ng-click="groupsCtl.deleteGroup(group)"
+         class="indent-1">
+        delete group
+      </a>
     </div>
   </div>
 </div>