From 0fd17a3e2b6e3e4c20474f964ab5f1dd41683dcb Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 7 May 2021 16:54:45 +0100
Subject: [PATCH] ui: Adds ability to show a 'partial' list in list-collections
 (#10174)

* ui: Add support for showing partial lists in ListCollection

* Add CSS for partial 'View more' button, and move all CSS to /components

* Enable partial view for intention permissions
---
 .changelog/10174.txt                          |  3 ++
 .../intention/permission/list/index.hbs       |  1 +
 .../app/components/list-collection/index.hbs  | 20 ++++++++++++-
 .../app/components/list-collection/index.scss | 11 +++++++
 .../components/list-collection/layout.scss    | 15 ++++++++++
 .../app/components/list-collection/skin.scss  | 15 ++++++++++
 .../consul-ui/app/styles/components.scss      |  2 +-
 .../styles/components/list-collection.scss    | 29 -------------------
 8 files changed, 65 insertions(+), 31 deletions(-)
 create mode 100644 .changelog/10174.txt
 create mode 100644 ui/packages/consul-ui/app/components/list-collection/index.scss
 create mode 100644 ui/packages/consul-ui/app/components/list-collection/layout.scss
 create mode 100644 ui/packages/consul-ui/app/components/list-collection/skin.scss
 delete mode 100644 ui/packages/consul-ui/app/styles/components/list-collection.scss

diff --git a/.changelog/10174.txt b/.changelog/10174.txt
new file mode 100644
index 000000000..cd0748137
--- /dev/null
+++ b/.changelog/10174.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Only show a partial list of intention permissions, with the option to show all
+```
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
index 8780a4689..3474d6400 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/list/index.hbs
@@ -3,6 +3,7 @@
   class="consul-intention-permission-list{{if (not onclick) ' readonly'}}"
   @scroll="native"
   @items={{items}}
+  @partial={{5}}
 as |item|>
   <BlockSlot @name="details">
     <div onclick={{action (optional onclick) item}}>
diff --git a/ui/packages/consul-ui/app/components/list-collection/index.hbs b/ui/packages/consul-ui/app/components/list-collection/index.hbs
index a5dc40837..b906f5779 100644
--- a/ui/packages/consul-ui/app/components/list-collection/index.hbs
+++ b/ui/packages/consul-ui/app/components/list-collection/index.hbs
@@ -42,9 +42,10 @@
     {{~/each~}}
   </EmberNativeScrollable>
 {{else}}
+{{#let (if (and partial (not this.expand)) (slice 0 partial items) items) as |slice|}}
   <ul>
     <li style="display: none;"></li>
-    {{~#each items as |item index|~}}
+    {{~#each slice as |item index|~}}
       <li
         data-test-list-row
         onclick={{action 'click'}}
@@ -67,5 +68,22 @@
       </li>
     {{~/each~}}
   </ul>
+{{#if (and partial (gt items.length partial))}}
+  {{#let (not-eq slice.length items.length) as |more|}}
+  <button
+    class={{if more 'closed'}}
+    type="button"
+    onclick={{action (mut this.expand) more}}
+  >
+    {{#if more}}
+      View {{sub items.length slice.length}} more
+    {{else}}
+      View less
+    {{/if}}
+  </button>
+  {{/let}}
+{{/if}}
+{{/let}}
+
 {{/if}}
 </div>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/list-collection/index.scss b/ui/packages/consul-ui/app/components/list-collection/index.scss
new file mode 100644
index 000000000..b84e8ef7d
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/list-collection/index.scss
@@ -0,0 +1,11 @@
+@import './skin';
+@import './layout';
+.list-collection {
+  @extend %list-collection;
+}
+.list-collection-scroll-virtual {
+  @extend %list-collection-scroll-virtual;
+}
+%list-collection > button {
+  @extend %list-collection-partial-button;
+}
diff --git a/ui/packages/consul-ui/app/components/list-collection/layout.scss b/ui/packages/consul-ui/app/components/list-collection/layout.scss
new file mode 100644
index 000000000..55274a5a8
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/list-collection/layout.scss
@@ -0,0 +1,15 @@
+%list-collection > ul > li,
+%list-collection-scroll-virtual {
+  position: relative;
+}
+%list-collection-scroll-virtual {
+  height: 500px;
+}
+%list-collection-scroll-virtual > ul {
+  overflow-x: hidden !important;
+}
+
+%list-collection-partial-button {
+  width: 100%;
+  padding: 15px;
+}
diff --git a/ui/packages/consul-ui/app/components/list-collection/skin.scss b/ui/packages/consul-ui/app/components/list-collection/skin.scss
new file mode 100644
index 000000000..f94cba340
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/list-collection/skin.scss
@@ -0,0 +1,15 @@
+%list-collection > ul {
+  border-top: 1px solid;
+  border-color: var(--gray-200);
+}
+%list-collection-partial-button {
+  cursor: pointer;
+  background-color: var(--gray-050);
+  color: var(--blue-500);
+}
+%list-collection-partial-button::after {
+  @extend %with-chevron-up-mask, %as-pseudo;
+}
+%list-collection-partial-button.closed::after {
+  @extend %with-chevron-down-mask;
+}
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 441519b09..313b7cf2e 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -27,7 +27,6 @@
 @import './components/empty-state';
 @import './components/tabular-details';
 @import './components/tabular-collection';
-@import './components/list-collection';
 @import './components/popover-select';
 @import './components/tooltip-panel';
 @import './components/menu-panel';
@@ -52,6 +51,7 @@
 @import 'consul-ui/components/tooltip';
 @import 'consul-ui/components/notice';
 @import 'consul-ui/components/modal-dialog';
+@import 'consul-ui/components/list-collection';
 @import 'consul-ui/components/filter-bar';
 @import 'consul-ui/components/freetext-filter';
 @import 'consul-ui/components/informed-action';
diff --git a/ui/packages/consul-ui/app/styles/components/list-collection.scss b/ui/packages/consul-ui/app/styles/components/list-collection.scss
deleted file mode 100644
index abb18d3b9..000000000
--- a/ui/packages/consul-ui/app/styles/components/list-collection.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.list-collection {
-  @extend %list-collection;
-}
-.list-collection-scroll-virtual {
-  @extend %list-collection-scroll-virtual;
-}
-%list-collection-scroll-virtual {
-  height: 500px;
-  position: relative;
-}
-%list-collection > ul {
-  border-top: 1px solid $gray-200;
-}
-%list-collection > ul > li {
-  position: relative;
-}
-%list-collection-scroll-virtual > ul {
-  overflow-x: hidden !important;
-}
-%list-collection > ul > li:nth-child(2) .with-feedback p {
-  bottom: auto;
-  top: 24px;
-}
-%list-collection > ul > li:nth-child(2) p::after {
-  bottom: auto;
-  top: -10px !important;
-  border-bottom-width: 18px;
-  border-top-width: 0;
-}