ui: Improve display peer info in service list (#14111)

* Include nspace when surfacing peer in bucket-list

Whenever we display a peer and we are not on OSS we will surface
the namespace as well. The rest of the ui logic of the bucket list
has not changed.

* Display bucket-list after instance-count service-list

ui/packages/consul-ui/app/components/consul/bucket/list/index.js

@@ -58,7 +58,7 @@ export default class ConsulBucketList extends Component {
 
   get namespacePart() {
     const { item, nspace } = this.args;
-    const { abilities, partitionPart } = this;
+    const { abilities, partitionPart, peerPart } = this;
 
     const nspaceItem = {
       type: 'nspace',
@@ -71,15 +71,13 @@ export default class ConsulBucketList extends Component {
       return [nspaceItem];
     }
 
+    if (peerPart.length && abilities.can('use nspaces')) {
+      return [nspaceItem];
+    }
+
     if (nspace && abilities.can('use nspaces')) {
       if (item.Namespace !== nspace) {
-        return [
+        return [nspaceItem];
-          {
-            type: 'nspace',
-            label: 'Namespace',
-            item: item.Namespace,
-          },
-        ];
       }
     }
 

ui/packages/consul-ui/app/components/consul/service/list/index.hbs

@@ -56,6 +56,11 @@
       {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'instance' without-count=true}}
     </span>
   {{/if}}
+  <Consul::Bucket::List
+    @item={{item}}
+    @nspace={{@nspace}}
+    @partition={{@partition}}
+  />
   {{#if (eq item.Kind 'terminating-gateway')}}
     <span data-test-associated-service-count>
       {{format-number item.GatewayConfig.AssociatedServiceCount}} {{pluralize item.GatewayConfig.AssociatedServiceCount 'linked service' without-count=true}}
@@ -87,11 +92,6 @@
       {{/if}}
     </dl>
   {{/if}}
-    <Consul::Bucket::List
-      @item={{item}}
-      @nspace={{@nspace}}
-      @partition={{@partition}}
-    />
     <TagList @item={{item}} />
   </BlockSlot>
 </ListCollection>

ui/packages/consul-ui/tests/integration/components/consul/bucket/list-test.js

@@ -224,31 +224,31 @@ module('Integration | Component | consul bucket list', function(hooks) {
       assert.dom('[data-test-bucket-item="partition"]').doesNotExist('partition is not displayed');
     });
 
-    test('it displays a peer and no nspace and no service when item.namespace and nspace match', async function(assert) {
+    test('it displays a peer and nspace when item.namespace and nspace match', async function(assert) {
       const PEER_NAME = 'Tomster';
       const NAMESPACE_NAME = 'Mascot';
-      const SERVICE_NAME = 'Ember.js';
 
       this.set('peerName', PEER_NAME);
       this.set('namespace', NAMESPACE_NAME);
-      this.set('service', SERVICE_NAME);
 
       await render(hbs`
         <Consul::Bucket::List
           @item={{hash
             PeerName=this.peerName
             Namespace=this.namespace
-            Service=this.service
             Partition="default"
           }}
           @nspace={{this.namespace}}
-          @service="default"
         />
       `);
 
       assert.dom('[data-test-bucket-item="peer"]').hasText(PEER_NAME, 'Peer is displayed');
-      assert.dom('[data-test-bucket-item="nspace"]').doesNotExist('namespace is not displayed');
+      assert
-      assert.dom('[data-test-bucket-item="service"]').doesNotExist('service is not displayed');
+        .dom('[data-test-bucket-item="nspace"]')
+        .hasText(
+          NAMESPACE_NAME,
+          'namespace is displayed when peer is displayed and we are not on OSS (i.e. cannot use nspaces)'
+        );
       assert.dom('[data-test-bucket-item="partition"]').doesNotExist('partition is not displayed');
     });
   });