From 4734d0989cc25af8340282b3701daaf433803b69 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 13 Dec 2021 15:00:51 +0000
Subject: [PATCH] ui: reuse BucketList for intention view pages (#11765)

---
 .../components/consul/bucket/list/README.mdx  | 32 +++++++++++++++----
 .../components/consul/bucket/list/index.hbs   | 25 +++++++++++++--
 .../components/consul/bucket/list/index.scss  | 11 +++++--
 .../consul/intention/view/index.hbs           | 22 +++++++++++--
 .../components/definition-table/layout.scss   |  6 +++-
 5 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/consul/bucket/list/README.mdx b/ui/packages/consul-ui/app/components/consul/bucket/list/README.mdx
index 939b220e8..0d9d7ccc1 100644
--- a/ui/packages/consul-ui/app/components/consul/bucket/list/README.mdx
+++ b/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}}
+    />
+  </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'}}
     />
-</DataSource>
+  </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
 
diff --git a/ui/packages/consul-ui/app/components/consul/bucket/list/index.hbs b/ui/packages/consul-ui/app/components/consul/bucket/list/index.hbs
index d9520749b..d8bc488d0 100644
--- a/ui/packages/consul-ui/app/components/consul/bucket/list/index.hbs
+++ b/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}}
-
diff --git a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss b/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss
index 826ef4841..1a78063ed 100644
--- a/ui/packages/consul-ui/app/components/consul/bucket/list/index.scss
+++ b/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;
   }
   /**/
diff --git a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
index 730dc7cc5..e5e6ea49d 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
+++ b/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>
diff --git a/ui/packages/consul-ui/app/components/definition-table/layout.scss b/ui/packages/consul-ui/app/components/definition-table/layout.scss
index 50762c223..3173fe175 100644
--- a/ui/packages/consul-ui/app/components/definition-table/layout.scss
+++ b/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;
 }