ui: Namespaces Redesign (#8336)

* ui: Add new consul-nspace-list component

* ui: Use new consul-nspace-list component

* Fix up other components to use linkable list-collection action

* ui: Remove some dead CSS

ui-v2/app/components/consul-nspace-list/README.mdx

@@ -0,0 +1,24 @@
+## ConsulNspaceList
+
+```
+<ConsulNspaceList
+  @items={{items}}
+  @ondelete={{action 'delete'}}
+/>
+```
+
+A presentational component for rendering Consul Namespaces
+
+### Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `array` |  | An array of Namespaces |
+| `ondelete` | `function` |  | An action to execute when the `Delete` action is clicked |
+
+### See
+
+- [Component Source Code](./index.js)
+- [Template Source Code](./index.hbs)
+
+---

ui-v2/app/components/consul-nspace-list/index.hbs

@@ -0,0 +1,55 @@
+{{#if (gt items.length 0)}}
+<ListCollection @items={{items}} @linkable={{action "isLinkable"}} class="consul-nspace-list" as |item|>
+    <BlockSlot @name="header">
+{{#if item.DeletedAt}}
+    <p>
+      Deleting {{item.Name}}...
+    </p>
+{{else}}
+      <a href={{href-to 'dc.nspaces.edit' item.Name}}>{{item.Name}}</a>
+{{/if}}
+    </BlockSlot>
+    <BlockSlot @name="details">
+      <dl>
+        <dt>Description</dt>
+        <dd data-test-description>
+          {{item.Description}}
+        </dd>
+      </dl>
+  {{#if (env 'CONSUL_ACLS_ENABLED')}}
+      <ConsulTokenRulesetList @item={{item}} />
+  {{/if}}
+    </BlockSlot>
+    <BlockSlot @name="actions" as |Actions|>
+      <Actions as |Action|>
+        <Action data-test-edit-action @href={{href-to 'dc.nspaces.edit' item.Name}}>
+          <BlockSlot @name="label">
+            Edit
+          </BlockSlot>
+        </Action>
+      {{#if (not-eq item.Name 'default') }}
+        <Action data-test-delete-action @onclick={{action ondelete item}} class="dangerous">
+          <BlockSlot @name="label">
+            Delete
+          </BlockSlot>
+          <BlockSlot @name="confirmation" as |Confirmation|>
+            <Confirmation class="warning">
+              <BlockSlot @name="header">
+                Confirm delete
+              </BlockSlot>
+              <BlockSlot @name="body">
+                <p>
+                  Are you sure you want to delete this namespace?
+                </p>
+              </BlockSlot>
+              <BlockSlot @name="confirm" as |Confirm|>
+                <Confirm>Delete</Confirm>
+              </BlockSlot>
+            </Confirmation>
+          </BlockSlot>
+        </Action>
+  {{/if}}
+      </Actions>
+    </BlockSlot>
+</ListCollection>
+{{/if}}

ui-v2/app/components/consul-nspace-list/index.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+  actions: {
+    isLinkable: function(item) {
+      return !item.DeletedAt;
+    },
+  },
+});

ui-v2/app/components/consul-nspace-list/pageobject.js

@@ -0,0 +1,7 @@
+export default (collection, clickable, attribute, text, actions) => () => {
+  return collection('.consul-nspace-list li:not(:first-child)', {
+    nspace: clickable('a'),
+    description: text('[data-test-description]'),
+    ...actions(['edit', 'delete']),
+  });
+};

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

@@ -1,5 +1,5 @@
 {{#if (gt items.length 0)}}
-<ListCollection @items={{items}} class="consul-service-list" as |item index|>
+<ListCollection @items={{items}} @linkable={{action "isLinkable"}} class="consul-service-list" as |item index|>
   <BlockSlot @name="header">
 {{#let (get proxies item.Name) as |proxy|}}
   {{#let (service/health-checks item proxy) as |health|}}
@@ -23,6 +23,7 @@
     </dl>
   {{/let}}
 {{/let}}
+{{#if (gt item.InstanceCount 0)}}
   {{#if (eq item.Kind 'terminating-gateway')}}
     <a data-test-service-name href={{href-to "dc.services.show.services" item.Name}}>
       {{item.Name}}
@@ -36,6 +37,11 @@
       {{item.Name}}
     </a>
   {{/if}}
+{{else}}
+  <p data-test-service-name>
+      {{item.Name}}
+  </p>
+{{/if}}
   </BlockSlot>
   <BlockSlot @name="details">
 {{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}}

ui-v2/app/components/consul-service-list/index.js

@@ -1,5 +1,11 @@
 import Component from '@ember/component';
+import { get } from '@ember/object';
 
 export default Component.extend({
   tagName: '',
+  actions: {
+    isLinkable: function(item) {
+      return get(item, 'InstanceCount') > 0;
+    },
+  },
 });

ui-v2/app/components/consul-token-ruleset-list/index.hbs

@@ -1,4 +1,4 @@
-{{#let (policy/group item.Policies) as |policies|}}
+{{#let (policy/group (or item.Policies item.ACLs.PolicyDefaults (array))) as |policies|}}
   {{#let (get policies 'management') as |management|}}
     {{#if (gt management.length 0)}}
         <dl>
@@ -33,7 +33,7 @@
           </dd>
         </dl>
   {{else}}
-    {{#let (append (get policies 'policies') (or item.Roles (array))) as |policies|}}
+    {{#let (append (get policies 'policies') (or item.Roles item.ACLs.RoleDefaults (array))) as |policies|}}
       {{#if (gt policies.length 0)}}
         <dl>
           <dt>Rules</dt>

ui-v2/app/components/consul-upstream-list/index.hbs

@@ -1,6 +1,6 @@
-<ListCollection @items={{items}} class="consul-upstream-list" as |item index|>
+<ListCollection @items={{items}} @linkable={{action "isLinkable"}} class="consul-upstream-list" as |item index|>
   <BlockSlot @name="header">
-  {{#if (service/exists item)}}
+  {{#if (gt item.InstanceCount 0)}}
     <dl class={{service/health-checks item}}>
       <dt>
         Health

ui-v2/app/components/consul-upstream-list/index.js

@@ -1,5 +1,11 @@
 import Component from '@ember/component';
+import { get } from '@ember/object';
 
 export default Component.extend({
   tagName: '',
+  actions: {
+    isLinkable: function(item) {
+      return get(item, 'InstanceCount') > 0;
+    },
+  },
 });

ui-v2/app/components/list-collection/index.hbs

@@ -10,7 +10,13 @@
 >
     <li></li>
     {{~#each _cells as |cell|~}}
-      <li onclick={{action 'click'}} style={{{cell.style}}} class={{if (service/exists cell.item) 'linkable'}}>
+      <li
+        onclick={{action 'click'}} style={{{cell.style}}}
+        class={{if
+              (compute (action (or linkable (noop)) cell.item))
+              'linkable'
+        }}
+      >
         <YieldSlot @name="header"><div>{{yield cell.item cell.index}}</div></YieldSlot>
         <YieldSlot @name="details"><div>{{yield cell.item cell.index}}</div></YieldSlot>
         <YieldSlot @name="actions"

ui-v2/app/helpers/service/exists.js

@@ -1,11 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-export function serviceExists([item], hash) {
-  if (typeof item.InstanceCount === 'undefined') {
-    return false;
-  }
-
-  return item.InstanceCount > 0;
-}
-
-export default helper(serviceExists);

ui-v2/app/styles/components/composite-row.scss

@@ -7,9 +7,7 @@
 }
 /* hoverable rows */
 %composite-row.linkable,
-.consul-gateway-service-list > ul > li:not(:first-child),
 .consul-service-instance-list > ul > li:not(:first-child),
-.consul-service-list > ul > li:not(:first-child),
 .consul-token-list > ul > li:not(:first-child),
 .consul-policy-list > ul > li:not(:first-child),
 .consul-role-list > ul > li:not(:first-child) {
@@ -17,6 +15,7 @@
 }
 /*TODO: This hides the icons-less dt's in the below lists as */
 /* they don't have tooltips */
+.consul-nspace-list > ul > li:not(:first-child) dt,
 .consul-token-list > ul > li:not(:first-child) dt,
 .consul-policy-list > ul li:not(:first-child) dl:not(.datacenter) dt,
 .consul-role-list > ul > li:not(:first-child) dt {

ui-v2/app/styles/components/table.scss

@@ -23,16 +23,6 @@
   --consul-icon: #{$consul-logo-color-svg};
   --aws-icon: #{$aws-logo-color-svg};
 }
-html.template-node.template-show #services td:first-child a span {
-  @extend %with-external-source-icon;
-  float: left;
-  margin-right: 10px;
-  margin-top: 2px;
-}
-/* This nudges the th in for the external source icons */
-html.template-node.template-show #services th:first-child {
-  text-indent: 28px;
-}
 
 td.folder::before {
   @extend %with-folder-outline-mask, %as-pseudo;
@@ -88,22 +78,11 @@ th span em {
 }
 /**/
 
-/* ideally these would be in route css files, but left here as they */
-/* accomplish the same thing (hide non-essential columns for tables) */
-@media #{$--lt-medium-table} {
-  /* Policy > Datacenters */
-  html.template-policy.template-list tr > :nth-child(2) {
-    display: none;
-  }
-}
 @media #{$--lt-wide-table} {
   /* hide actions on narrow screens, you can always click in do everything from there */
   tr > .actions {
     display: none;
   }
-  html.template-node.template-show #services tr > :last-child {
-    display: none;
-  }
   html.template-node.template-show #lock-sessions tr > :not(:first-child):not(:last-child) {
     display: none;
   }

ui-v2/app/styles/components/tabular-collection.scss

@@ -69,15 +69,6 @@ table.has-actions tr > *:nth-last-child(5):first-child ~ * {
 }
 
 /*TODO: trs only live in tables, get rid of table */
-html.template-nspace.has-acls.template-list main table tr {
-  @extend %with-acls-nspaces-row;
-}
-html.template-nspace:not(.has-acls).template-list main table tr {
-  @extend %nspaces-row;
-}
-html.template-role.template-list main table tr {
-  @extend %roles-row;
-}
 html.template-policy.template-edit [role='dialog'] table tr,
 html.template-policy.template-edit main table tr,
 html.template-role.template-edit [role='dialog'] table tr,
@@ -100,23 +91,6 @@ html.template-node.template-show main table.sessions tr {
   width: calc(100% - 240px) !important;
 }
 
-%roles-row > *:nth-child(1),
-%roles-row > *:nth-child(2),
-%with-acls-nspaces-row > *:nth-child(1),
-%with-acls-nspaces-row > *:nth-child(2) {
-  width: calc(22% - 20px) !important;
-}
-%with-acls-nspaces-row > *:nth-child(3),
-%roles-row > *:nth-child(3) {
-  width: calc(56% - 20px) !important;
-}
-%nspaces-row > *:nth-child(1) {
-  width: 30%;
-}
-%nspaces-row > *:nth-child(2) {
-  width: calc(70% - 60px);
-}
-
 @media #{$--horizontal-session-list} {
   %node-sessions-row > * {
     // (100% / 7) - (300px / 6) - (120px / 6)

ui-v2/app/templates/dc/nspaces/index.hbs

@@ -21,106 +21,40 @@
     />
 {{/if}}
     <ChangeableSet @dispatcher={{searchable 'nspace' items}} @terms={{search}}>
-      <BlockSlot @name="set" as |filtered|>
-        <TabularCollection @items={{filtered}} as |item index|>
-          <BlockSlot @name="header">
-              <th>Name</th>
-              <th>Description</th>
-{{#if (env 'CONSUL_ACLS_ENABLED')}}
-              <th>Roles &amp; Policies</th>
-{{/if}}
-          </BlockSlot>
-          <BlockSlot @name="row">
-{{#if item.DeletedAt}}
-              <td class="no-actions" colspan="3">
-                <p>
-                  Deleting {{item.Name}}...
-                </p>
-              </td>
-{{else}}
-              <td data-test-namespace={{item.Name}}>
-                <a href={{href-to 'dc.nspaces.edit' item.Name}}>{{item.Name}}</a>
-              </td>
-              <td data-test-description>
-                <p>{{item.Description}}</p>
-              </td>
-  {{#if (env 'CONSUL_ACLS_ENABLED')}}
-              <td>
-                {{#each (compact (append item.ACLs.PolicyDefaults item.ACLs.RoleDefaults)) as |item|}}
-                  <strong data-test-policy class={{policy/typeof item}}>{{item.Name}}</strong>
-                {{/each}}
-              </td>
-  {{/if}}
-{{/if}}
-          </BlockSlot>
-          <BlockSlot @name="actions" as |index change checked|>
-            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-              <BlockSlot @name="trigger">
-                More
-              </BlockSlot>
-              <BlockSlot @name="menu" as |confirm send keypressClick clickTrigger|>
-                  <li role="none">
-                    <a data-test-edit role="menuitem" tabindex="-1" href={{href-to 'dc.nspaces.edit' item.Name}}>Edit</a>
-                  </li>
-{{#if (not-eq item.Name 'default') }}
-                  <li role="none" class="dangerous">
-                    <label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
-                    <div role="menu">
-                      <div class="confirmation-alert warning">
-                        <div>
-                          <header>
-                            Confirm Delete
-                          </header>
-                          <p>
-                            Are you sure you want to delete this key?
-                          </p>
-                        </div>
-                        <ul>
-                          <li class="dangerous">
-                            <button tabindex="-1" type="button" class="type-delete" onclick={{queue (action send 'delete' item) (queue clickTrigger)}}>Delete</button>
-                          </li>
-                          <li>
-                            <label for={{confirm}}>Cancel</label>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </li>
-{{/if}}
-              </BlockSlot>
-            </PopoverMenu>
-          </BlockSlot>
-        </TabularCollection>
-      </BlockSlot>
-      <BlockSlot @name="empty">
-        <EmptyState @allowLogin={{true}}>
-          <BlockSlot @name="header">
-            <h2>
-              {{#if (gt items.length 0)}}
-                No namespaces found
-              {{else}}
-                Welcome to Namespaces
-              {{/if}}
-            </h2>
-          </BlockSlot>
-          <BlockSlot @name="body">
-            <p>
-              {{#if (gt items.length 0)}}
-                No namespaces where found matching that search, or you may not have access to view the namespaces you are searching for.
-              {{else}}
-                There don't seem to be any namespaces, or you may not have access to view namespaces yet.
-              {{/if}}
-            </p>
-          </BlockSlot>
-          <BlockSlot @name="actions">
-            <li class="docs-link">
-              <a href="{{env 'CONSUL_DOCS_URL'}}/commands/namespace" rel="noopener noreferrer" target="_blank">Documentation on namespaces</a>
-            </li>
-            <li class="learn-link">
-              <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/namespaces/secure-namespaces" rel="noopener noreferrer" target="_blank">Read the guide</a>
-            </li>
-          </BlockSlot>
-        </EmptyState>
+      <BlockSlot @name="content" as |filtered|>
+        <ConsulNspaceList
+          @items={{filtered}}
+          @ondelete={{queue (action send 'delete')}}
+        >
+          <EmptyState @allowLogin={{true}}>
+            <BlockSlot @name="header">
+              <h2>
+                {{#if (gt items.length 0)}}
+                  No namespaces found
+                {{else}}
+                  Welcome to Namespaces
+                {{/if}}
+              </h2>
+            </BlockSlot>
+            <BlockSlot @name="body">
+              <p>
+                {{#if (gt items.length 0)}}
+                  No namespaces where found matching that search, or you may not have access to view the namespaces you are searching for.
+                {{else}}
+                  There don't seem to be any namespaces, or you may not have access to view namespaces yet.
+                {{/if}}
+              </p>
+            </BlockSlot>
+            <BlockSlot @name="actions">
+              <li class="docs-link">
+                <a href="{{env 'CONSUL_DOCS_URL'}}/commands/namespace" rel="noopener noreferrer" target="_blank">Documentation on namespaces</a>
+              </li>
+              <li class="learn-link">
+                <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/namespaces/secure-namespaces" rel="noopener noreferrer" target="_blank">Read the guide</a>
+              </li>
+            </BlockSlot>
+          </EmptyState>
+        </ConsulNspaceList>
       </BlockSlot>
     </ChangeableSet>
   </BlockSlot>

ui-v2/app/templates/dc/services/show/services.hbs

@@ -5,7 +5,10 @@
         The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
         <a href="{{env 'CONSUL_DOCS_URL'}}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
       </p>
-      <ConsulServiceList @items={{gatewayServices}} @nspace={{nspace}} />
+      <ConsulServiceList
+        @items={{gatewayServices}}
+        @nspace={{nspace}}
+        />
   {{else}}
     <EmptyState>
       <BlockSlot @name="body">

ui-v2/tests/integration/helpers/service/exists-test.js

@@ -1,17 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Helper | service/exists', function(hooks) {
-  setupRenderingTest(hooks);
-
-  // Replace this with your real tests.
-  test('it renders', async function(assert) {
-    this.set('inputValue', { InstanceCount: 3 });
-
-    await render(hbs`{{service/exists inputValue}}`);
-
-    assert.equal(this.element.textContent.trim(), 'true');
-  });
-});

ui-v2/tests/pages.js

@@ -41,6 +41,7 @@ import consulTokenListFactory from 'consul-ui/components/consul-token-list/pageo
 import consulRoleListFactory from 'consul-ui/components/consul-role-list/pageobject';
 import consulPolicyListFactory from 'consul-ui/components/consul-policy-list/pageobject';
 import consulIntentionListFactory from 'consul-ui/components/consul-intention-list/pageobject';
+import consulNspaceListFactory from 'consul-ui/components/consul-nspace-list/pageobject';
 import consulKvListFactory from 'consul-ui/components/consul-kv-list/pageobject';
 
 // pages
@@ -97,6 +98,13 @@ const morePopoverMenu = morePopoverMenuFactory(clickable);
 const popoverSelect = popoverSelectFactory(clickable, collection);
 
 const consulIntentionList = consulIntentionListFactory(collection, clickable, attribute, deletable);
+const consulNspaceList = consulNspaceListFactory(
+  collection,
+  clickable,
+  attribute,
+  text,
+  morePopoverMenu
+);
 const consulKvList = consulKvListFactory(collection, clickable, attribute, deletable);
 const consulTokenList = consulTokenListFactory(
   collection,
@@ -166,9 +174,7 @@ export default {
   ),
   intentions: create(intentions(visitable, creatable, consulIntentionList, intentionFilter)),
   intention: create(intention(visitable, submitable, deletable, cancelable)),
-  nspaces: create(
-    nspaces(visitable, deletable, creatable, clickable, attribute, collection, text, freetextFilter)
-  ),
+  nspaces: create(nspaces(visitable, creatable, consulNspaceList, freetextFilter)),
   nspace: create(
     nspace(visitable, submitable, deletable, cancelable, policySelector, roleSelector)
   ),

ui-v2/tests/pages/dc/nspaces/index.js

@@ -1,24 +1,7 @@
-export default function(
-  visitable,
-  deletable,
-  creatable,
-  clickable,
-  attribute,
-  collection,
-  text,
-  filter
-) {
+export default function(visitable, creatable, nspaces, filter) {
   return creatable({
     visit: visitable('/:dc/namespaces'),
-    nspaces: collection(
-      '[data-test-tabular-row]',
-      deletable({
-        action: attribute('data-test-nspace-action', '[data-test-nspace-action]'),
-        description: text('[data-test-description]'),
-        nspace: clickable('a'),
-        actions: clickable('label'),
-      })
-    ),
+    nspaces: nspaces(),
     filter: filter(),
   });
 }