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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Only show a partial list of intention permissions, with the option to show all
+```

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}}>

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>

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;
+}

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;
+}

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;
+}

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';

ui/packages/consul-ui/app/styles/components/list-collection.scss

@@ -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;
-}