From cb1136151163e2c500c39b55db2cc4d5b7f9e7a4 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 22 Jun 2018 14:29:18 +0100
Subject: [PATCH] Change the appearance of `*` for intention listings

1. Use 'All Services (*)' as opposed to '*'
2. Set 'Destination' in teh same bold font as 'Source'
3. Ensure you can search for all services by using '*' or 'All Services
(*)'
---
 ui-v2/app/controllers/dc/intentions/index.js  | 14 +++++++------
 .../app/styles/routes/dc/intention/index.scss |  7 +++++--
 ui-v2/app/templates/dc/intentions/index.hbs   | 20 ++++++++++++++-----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/ui-v2/app/controllers/dc/intentions/index.js b/ui-v2/app/controllers/dc/intentions/index.js
index 6e6291f41..7b4ce3f17 100644
--- a/ui-v2/app/controllers/dc/intentions/index.js
+++ b/ui-v2/app/controllers/dc/intentions/index.js
@@ -32,13 +32,15 @@ export default Controller.extend(WithFiltering, {
     });
   }),
   filter: function(item, { s = '', action = '' }) {
+    const source = get(item, 'SourceName').toLowerCase();
+    const destination = get(item, 'DestinationName').toLowerCase();
+    const sLower = s.toLowerCase();
+    const allLabel = 'All Services (*)'.toLowerCase();
     return (
-      (get(item, 'SourceName')
-        .toLowerCase()
-        .indexOf(s.toLowerCase()) !== -1 ||
-        get(item, 'DestinationName')
-          .toLowerCase()
-          .indexOf(s.toLowerCase()) !== -1) &&
+      (source.indexOf(sLower) !== -1 ||
+        destination.indexOf(sLower) !== -1 ||
+        (source === '*' && allLabel.indexOf(sLower) !== -1) ||
+        (destination === '*' && allLabel.indexOf(sLower) !== -1)) &&
       (action === '' || get(item, 'Action') === action)
     );
   },
diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss
index 3776270e1..61de303bd 100644
--- a/ui-v2/app/styles/routes/dc/intention/index.scss
+++ b/ui-v2/app/styles/routes/dc/intention/index.scss
@@ -1,8 +1,11 @@
-td.intent-allow strong {
+html.template-intention.template-list td.intent-allow strong {
   @extend %with-allow;
   visibility: hidden;
 }
-td.intent-deny strong {
+html.template-intention.template-list td.intent-deny strong {
   @extend %with-deny;
   visibility: hidden;
 }
+html.template-intention.template-list td.destination {
+  font-weight: $weight-semibold;
+}
diff --git a/ui-v2/app/templates/dc/intentions/index.hbs b/ui-v2/app/templates/dc/intentions/index.hbs
index 8334b5a5c..60ed96a2f 100644
--- a/ui-v2/app/templates/dc/intentions/index.hbs
+++ b/ui-v2/app/templates/dc/intentions/index.hbs
@@ -26,16 +26,26 @@
                 <th>Precedence</th>
             {{/block-slot}}
             {{#block-slot 'row'}}
-                <td data-test-intention="{{item.ID}}">
-                    <a href={{href-to 'dc.intentions.edit' item.ID}}>{{item.SourceName}}</a>
+                <td class="source" data-test-intention="{{item.ID}}">
+                  <a href={{href-to 'dc.intentions.edit' item.ID}}>
+                    {{#if (eq item.SourceName '*') }}
+                      All Services (*)
+                    {{else}}
+                      {{item.SourceName}}
+                    {{/if}}
+                  </a>
                 </td>
                 <td class="intent-{{item.Action}}">
                     <strong>{{item.Action}}</strong>
                 </td>
-                <td>
-                    {{item.DestinationName}}
+                <td class="destination">
+                    {{#if (eq item.DestinationName '*') }}
+                      All Services (*)
+                    {{else}}
+                      {{item.DestinationName}}
+                    {{/if}}
                 </td>
-                <td>
+                <td class="precedence">
                     {{item.Precedence}}
                 </td>
             {{/block-slot}}