From 8077a41f429d080592c44830bc3f444815100a06 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Thu, 21 May 2020 13:46:15 -0400
Subject: [PATCH] ui: Make only existing services in Upstreams linkabled with
 hover effect (#7943)

* Create service/exist helper to be used in ListCollection list items

* Make only existing services in Upstreams linkabled with hover effect
---
 ui-v2/app/components/list-collection/index.hbs  | 13 +++++++++++--
 ui-v2/app/helpers/service/exists.js             | 11 +++++++++++
 ui-v2/app/styles/components/composite-row.scss  |  2 +-
 .../templates/dc/services/show/upstreams.hbs    |  6 ++++++
 .../integration/helpers/service/exists-test.js  | 17 +++++++++++++++++
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 ui-v2/app/helpers/service/exists.js
 create mode 100644 ui-v2/tests/integration/helpers/service/exists-test.js

diff --git a/ui-v2/app/components/list-collection/index.hbs b/ui-v2/app/components/list-collection/index.hbs
index 9e077dd6ee..80349e0808 100644
--- a/ui-v2/app/components/list-collection/index.hbs
+++ b/ui-v2/app/components/list-collection/index.hbs
@@ -1,6 +1,15 @@
-<EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
+<EmberNativeScrollable 
+  @tagName="ul" 
+  @content-size={{_contentSize}} 
+  @scroll-left={{_scrollLeft}} 
+  @scroll-top={{_scrollTop}} 
+  @scrollChange={{action "scrollChange"}} 
+  @clientSizeChange={{action "clientSizeChange"}}
+>
     <li></li>
     {{~#each _cells as |cell|~}}
-      <li onclick={{action 'click'}} style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
+      <li onclick={{action 'click'}} style={{{cell.style}}} class={{if (service/exists cell.item) 'linkable' }}>
+        {{yield cell.item cell.index }}
+      </li>
     {{~/each~}}
 </EmberNativeScrollable>
\ No newline at end of file
diff --git a/ui-v2/app/helpers/service/exists.js b/ui-v2/app/helpers/service/exists.js
new file mode 100644
index 0000000000..e611b59cea
--- /dev/null
+++ b/ui-v2/app/helpers/service/exists.js
@@ -0,0 +1,11 @@
+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);
diff --git a/ui-v2/app/styles/components/composite-row.scss b/ui-v2/app/styles/components/composite-row.scss
index 814b082610..c4299dc60b 100644
--- a/ui-v2/app/styles/components/composite-row.scss
+++ b/ui-v2/app/styles/components/composite-row.scss
@@ -6,7 +6,7 @@
   @extend %composite-row;
 }
 /* hoverable rows */
-.consul-upstream-list > ul > li:not(:first-child),
+%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) {
diff --git a/ui-v2/app/templates/dc/services/show/upstreams.hbs b/ui-v2/app/templates/dc/services/show/upstreams.hbs
index 5665ac4847..372b868685 100644
--- a/ui-v2/app/templates/dc/services/show/upstreams.hbs
+++ b/ui-v2/app/templates/dc/services/show/upstreams.hbs
@@ -7,9 +7,15 @@
       </p>
     {{#let item.Service.Namespace as |nspace|}}
       <ListCollection @items={{gateway.Services}} class="consul-upstream-list" as |item index|>
+      {{#if (service/exists item)}}
         <a data-test-service-name href={{href-to 'dc.services.show' item.Name}}>
           {{item.Name}}
         </a>
+      {{else}}
+        <p data-test-service-name>
+          {{item.Name}}
+        </p>
+      {{/if}}
         <ul>
         {{#if (env 'CONSUL_NSPACES_ENABLED')}}
           {{#if (not-eq item.Namespace nspace)}}
diff --git a/ui-v2/tests/integration/helpers/service/exists-test.js b/ui-v2/tests/integration/helpers/service/exists-test.js
new file mode 100644
index 0000000000..508f675df2
--- /dev/null
+++ b/ui-v2/tests/integration/helpers/service/exists-test.js
@@ -0,0 +1,17 @@
+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');
+  });
+});