ui: reuse BucketList for intention view pages (#11765)

ui/packages/consul-ui/app/components/consul/bucket/list/README.mdx

@@ -11,22 +11,41 @@ the namespace will be displayed, whereas if the partition is different it will
 show both the partition and namespace (as a namespace called 'team-1' in
 `partition-1` is different to a namespace called 'team-1' in `partition-2`)
 
-If you don't need the nspace only support for the view you are building then
-omit the `@nspace` argument.
+Showing the service name is a tiny bit awkward (different boolean type,
+doesn't care about difference) and could be improved but we only use it for
+the read only view of intentions.
 
 At the time of writing, this is not currently used across the entire UI
 (specifically in intentions and maybe other areas) but eventually should be.
 
 
 ```hbs preview-template
-<DataSource
-  @src={{uri "/partition/default/dc-1/gateways/for-service/service-name"}} as |source|>
+  <figure>
+    <figcaption>Show everything</figcaption>
     <Consul::Bucket::List
-      @item={{object-at 0 source.data}}
+      @item={{hash
+        Namespace="different-nspace"
+        Partition="different-partition"
+        Service="service-name"
+      }}
       @nspace={{'nspace'}}
       @partition={{'partition'}}
+      @service={{true}}
     />
-</DataSource>
+  </figure>
+
+  <figure>
+    <figcaption>Show just the top-level buckets</figcaption>
+    <Consul::Bucket::List
+      @item={{hash
+        Namespace="different-nspace"
+        Partition="different-partition"
+      }}
+      @nspace={{'nspace'}}
+      @partition={{'partition'}}
+    />
+  </figure>
+
 ```
 
 ## Arguments
@@ -36,6 +55,7 @@ At the time of writing, this is not currently used across the entire UI
 | `item` | `array` |  | A Consul object that could have both a `Partition` and a `Namespace` property |
 | `nspace` | `string` | | The name of the current namespace |
 | `partition` | `string` | | The name of the current partition |
+| `service` | `boolean` | | Whether to show the service name on the end or not. Please note you must also pass a item.Service for it to show. We flag this incase an API request has a Service property but you don't want to show it |
 
 ## See
 

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

@@ -19,11 +19,23 @@
       <dd>
         {{@item.Namespace}}
       </dd>
+
+{{#if (and @service @item.Service)}}
+      <dt
+        class="service"
+      >
+        Service
+      </dt>
+      <dd>
+        {{@item.Service}}
+      </dd>
+{{/if}}
+
     </dl>
   {{/if}}
 {{else if (and @nspace (can 'use nspace'))}}
   {{#if (not-eq @item.Namespace @nspace)}}
-    <dl>
+    <dl class="consul-bucket-list">
       <dt
         class="nspace"
         {{tooltip}}
@@ -33,7 +45,16 @@
       <dd>
         {{@item.Namespace}}
       </dd>
+{{#if (and @service @item.Service)}}
+      <dt
+        class="service"
+      >
+        Service
+      </dt>
+      <dd>
+        {{@item.Service}}
+      </dd>
+{{/if}}
     </dl>
   {{/if}}
 {{/if}}
-

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

@@ -8,15 +8,22 @@
   .nspace::before {
     @extend %with-folder-outline-mask, %as-pseudo;
   }
+  .service {
+    @extend %visually-hidden;
+  }
+  .service + dd {
+    font-weight: var(--typo-weight-semibold);
+  }
   /* potential for some sort of %composite-kv thing here */
-  .partition + dd::after {
+  dd:not(:last-child)::after {
     display: inline-block;
     content: '/';
     margin: 0 3px;
     /*TODO: In isolation this is not needed */
     margin-right: 6px;
   }
-  .partition + dd + .nspace {
+  .service + dd,
+  dd + dt {
     margin-left: 0 !important;
   }
   /**/

ui/packages/consul-ui/app/components/consul/intention/view/index.hbs

@@ -4,11 +4,29 @@
       <dl>
         <dt>Destination</dt>
         <dd>
-          {{item.DestinationName}}{{#if (can "use partitions")}} / {{item.DestinationPartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.DestinationNS}}{{/if}}
+          <Consul::Bucket::List
+            @item={{hash
+              Namespace=item.DestinationNS
+              Partition=item.DestinationPartition
+              Service=item.DestinationName
+            }}
+            @nspace="-"
+            @partition="-"
+            @service={{true}}
+          />
         </dd>
         <dt>Source</dt>
         <dd>
-        {{item.SourceName}}{{#if (can "use partitions")}} / {{item.SourcePartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.SourceNS}}{{/if}}
+          <Consul::Bucket::List
+            @item={{hash
+              Namespace=item.SourceNS
+              Partition=item.SourcePartition
+              Service=item.SourceName
+            }}
+            @nspace="-"
+            @partition="-"
+            @service={{true}}
+          />
         </dd>
 {{#if item.Action}}
         <dt>Action</dt>

ui/packages/consul-ui/app/components/definition-table/layout.scss

@@ -6,6 +6,10 @@
 %definition-table > dl {
   margin-bottom: 1.4em;
 }
-%definition-table dd > * {
+/* TODO: We currently have one instance of nested dls */
+/* and that is for nesting a bucket list */
+/* we should probably think about changing this to possibly inline flex */
+/* or individually styling the contents */
+%definition-table > dl > dd > *:not(dl) {
   display: inline-block;
 }