From 02dcd422feaef1d6ca8701a0a7f1382d0f1c1f1c Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 19 Oct 2020 15:45:50 +0100
Subject: [PATCH] ui: Change text around L7 permissions to app aware (#8963)

...also as a consequence of this we also moved around some of the CSS
---
 .../consul/intention/components.scss          | 34 +++++++++++++++++++
 .../consul/intention/form/fieldsets/index.hbs |  2 +-
 .../components/consul/intention/index.scss    |  8 +++++
 .../consul/intention/list/components.scss     |  2 +-
 .../consul/intention/list/layout.scss         |  4 +--
 .../consul/intention/list/table/index.hbs     |  6 ++--
 .../intention/permission/list/index.hbs       |  2 +-
 .../consul/intention/search-bar/index.hbs     |  8 ++---
 .../consul/intention/search-bar/index.scss    |  9 +++++
 .../styles/base/components/pill/layout.scss   |  1 -
 ui-v2/app/styles/components.scss              |  6 +---
 ui-v2/app/styles/components/pill.scss         | 34 -------------------
 .../app/styles/components/popover-select.scss |  8 ++---
 13 files changed, 65 insertions(+), 59 deletions(-)
 create mode 100644 ui-v2/app/components/consul/intention/components.scss
 create mode 100644 ui-v2/app/components/consul/intention/index.scss
 create mode 100644 ui-v2/app/components/consul/intention/search-bar/index.scss

diff --git a/ui-v2/app/components/consul/intention/components.scss b/ui-v2/app/components/consul/intention/components.scss
new file mode 100644
index 0000000000..51c5755f9d
--- /dev/null
+++ b/ui-v2/app/components/consul/intention/components.scss
@@ -0,0 +1,34 @@
+%pill-allow::before,
+%pill-deny::before,
+%pill-l7::before {
+  @extend %as-pseudo;
+  margin-right: 5px;
+  font-size: 0.9em;
+}
+%pill-allow,
+%pill-deny,
+%pill-l7 {
+  display: inline-block;
+  font-weight: $typo-weight-normal;
+  font-size: $typo-size-600;
+}
+%pill-allow {
+  color: $green-800;
+  background-color: $green-100;
+}
+%pill-deny {
+  color: $red-800;
+  background-color: $red-100;
+}
+%pill-l7 {
+  @extend %frame-gray-900;
+}
+%pill-allow::before {
+  @extend %with-arrow-right-color-mask;
+}
+%pill-deny::before {
+  @extend %with-deny-color-mask;
+}
+%pill-l7::before {
+  @extend %with-layers-mask;
+}
diff --git a/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs b/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs
index be1570673d..02dcd0853e 100644
--- a/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs
+++ b/ui-v2/app/components/consul/intention/form/fieldsets/index.hbs
@@ -119,7 +119,7 @@
             )
             (hash
               intent=""
-              header="L7 Permissions"
+              header="Application Aware"
               body="The source service may or may not connect to the destination service via unique permissions based on L7 criteria: path, header, or method."
             )
           )
diff --git a/ui-v2/app/components/consul/intention/index.scss b/ui-v2/app/components/consul/intention/index.scss
new file mode 100644
index 0000000000..c7539a74cb
--- /dev/null
+++ b/ui-v2/app/components/consul/intention/index.scss
@@ -0,0 +1,8 @@
+@import './components';
+
+@import './search-bar';
+@import './list';
+@import './form/fieldsets';
+@import './permission/list';
+@import './permission/form';
+@import './permission/header/list';
diff --git a/ui-v2/app/components/consul/intention/list/components.scss b/ui-v2/app/components/consul/intention/list/components.scss
index e6b00fdadb..b7a0760b8c 100644
--- a/ui-v2/app/components/consul/intention/list/components.scss
+++ b/ui-v2/app/components/consul/intention/list/components.scss
@@ -12,7 +12,7 @@
   td.intent-deny strong {
     @extend %pill-deny;
   }
-  td.intent-l7-rules strong {
+  td.intent- strong {
     @extend %pill-l7;
   }
   .notice.allow {
diff --git a/ui-v2/app/components/consul/intention/list/layout.scss b/ui-v2/app/components/consul/intention/list/layout.scss
index 515bcbd525..e208890f77 100644
--- a/ui-v2/app/components/consul/intention/list/layout.scss
+++ b/ui-v2/app/components/consul/intention/list/layout.scss
@@ -6,13 +6,13 @@
     width: calc(30% - 50px);
   }
   tr > *:nth-child(2) {
-    width: 100px;
+    width: 120px;
   }
   tr > *:nth-child(3) {
     width: calc(30% - 50px);
   }
   tr > *:nth-child(4) {
-    width: calc(40% - 220px);
+    width: calc(40% - 240px);
   }
   tr > *:nth-child(5) {
     width: 160px;
diff --git a/ui-v2/app/components/consul/intention/list/table/index.hbs b/ui-v2/app/components/consul/intention/list/table/index.hbs
index 89ab400d2c..56da9040d8 100644
--- a/ui-v2/app/components/consul/intention/list/table/index.hbs
+++ b/ui-v2/app/components/consul/intention/list/table/index.hbs
@@ -28,11 +28,9 @@ as |item index|>
             <em class={{concat 'nspace-' (or item.SourceNS 'default')}}>{{or item.SourceNS 'default'}}</em>
           </a>
         </td>
-{{#let (or item.Action "L7 rules") as |intent|}}
-        <td class="intent intent-{{slugify intent}}" data-test-intention-action={{intent}}>
-          <strong>{{capitalize intent}}</strong>
+        <td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}>
+          <strong>{{capitalize (or item.Action "App aware")}}</strong>
         </td>
-{{/let}}
         <td class="destination" data-test-intention-destination={{item.DestinationName}}>
           <span>
             {{#if (eq item.DestinationName '*') }}
diff --git a/ui-v2/app/components/consul/intention/permission/list/index.hbs b/ui-v2/app/components/consul/intention/permission/list/index.hbs
index 5247a2ce0a..8780a4689b 100644
--- a/ui-v2/app/components/consul/intention/permission/list/index.hbs
+++ b/ui-v2/app/components/consul/intention/permission/list/index.hbs
@@ -6,7 +6,7 @@
 as |item|>
   <BlockSlot @name="details">
     <div onclick={{action (optional onclick) item}}>
-      <strong class={{concat 'intent-' item.Action}}>{{item.Action}}</strong>
+      <strong class={{concat 'intent-' item.Action}}>{{capitalize item.Action}}</strong>
 {{#if (gt item.HTTP.Methods.length 0)}}
         <dl class="permission-methods">
           <dt>
diff --git a/ui-v2/app/components/consul/intention/search-bar/index.hbs b/ui-v2/app/components/consul/intention/search-bar/index.hbs
index c848f9a51f..0c3e87ddaa 100644
--- a/ui-v2/app/components/consul/intention/search-bar/index.hbs
+++ b/ui-v2/app/components/consul/intention/search-bar/index.hbs
@@ -1,4 +1,4 @@
-<form class="filter-bar">
+<form class="consul-intention-search-bar filter-bar">
   <FreetextFilter
     @onsearch={{action onsearch}}
     @value={{search}}
@@ -12,13 +12,13 @@
     as |components|>
       <BlockSlot @name="selected">
         <span>
-          Permissions
+          Intent
         </span>
       </BlockSlot>
       <BlockSlot @name="options">
 {{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Option @value="allow" @selected={{contains 'allow' filter.accesses}}>Allow</Option>
-        <Option @value="deny" @selected={{contains 'deny' filter.accesses}}>Deny</Option>
+        <Option class="value-allow" @value="allow" @selected={{contains 'allow' filter.accesses}}>Allow</Option>
+        <Option class="value-deny" @value="deny" @selected={{contains 'deny' filter.accesses}}>Deny</Option>
 {{/let}}
       </BlockSlot>
     </PopoverSelect>
diff --git a/ui-v2/app/components/consul/intention/search-bar/index.scss b/ui-v2/app/components/consul/intention/search-bar/index.scss
new file mode 100644
index 0000000000..22ee1ea745
--- /dev/null
+++ b/ui-v2/app/components/consul/intention/search-bar/index.scss
@@ -0,0 +1,9 @@
+.consul-intention-search-bar {
+  .value-allow button::before {
+    @extend %with-arrow-right-color-mask, %as-pseudo;
+    color: $green-500;
+  }
+  .value-deny button::before {
+    @extend %with-deny-color-icon, %as-pseudo;
+  }
+}
diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss
index e38eb941b4..6b63f13d69 100644
--- a/ui-v2/app/styles/base/components/pill/layout.scss
+++ b/ui-v2/app/styles/base/components/pill/layout.scss
@@ -19,5 +19,4 @@
 %pill-700 {
   @extend %pill;
   padding: 4px 8px;
-  min-width: 87px;
 }
diff --git a/ui-v2/app/styles/components.scss b/ui-v2/app/styles/components.scss
index 5bcb175de3..254c98bd32 100644
--- a/ui-v2/app/styles/components.scss
+++ b/ui-v2/app/styles/components.scss
@@ -64,11 +64,7 @@
 @import 'consul-ui/components/consul/exposed-path/list';
 @import 'consul-ui/components/consul/external-source';
 @import 'consul-ui/components/consul/kind';
-@import 'consul-ui/components/consul/intention/list';
-@import 'consul-ui/components/consul/intention/form/fieldsets';
-@import 'consul-ui/components/consul/intention/permission/list';
-@import 'consul-ui/components/consul/intention/permission/form';
-@import 'consul-ui/components/consul/intention/permission/header/list';
+@import 'consul-ui/components/consul/intention';
 @import 'consul-ui/components/role-selector';
 @import 'consul-ui/components/topology-metrics';
 @import 'consul-ui/components/topology-metrics/series';
diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss
index 8b2cbacc59..038a7e93e9 100644
--- a/ui-v2/app/styles/components/pill.scss
+++ b/ui-v2/app/styles/components/pill.scss
@@ -33,37 +33,3 @@ span.policy-service-identity::before {
 %pill.leader::before {
   @extend %with-star-outline-mask, %as-pseudo;
 }
-%pill-allow:before,
-%pill-deny:before,
-%pill-l7:before {
-  @extend %as-pseudo;
-  margin-right: 5px;
-  font-size: 0.9em;
-}
-%pill-allow,
-%pill-deny,
-%pill-l7 {
-  text-transform: capitalize;
-  font-weight: $typo-weight-normal;
-  font-size: $typo-size-600;
-}
-%pill-allow {
-  color: $green-800;
-  background-color: $green-100;
-}
-%pill-deny {
-  color: $red-800;
-  background-color: $red-100;
-}
-%pill-l7 {
-  @extend %frame-gray-900;
-}
-%pill-allow::before {
-  @extend %with-arrow-right-color-mask;
-}
-%pill-deny::before {
-  @extend %with-deny-color-mask;
-}
-%pill-l7::before {
-  @extend %with-layers-mask;
-}
diff --git a/ui-v2/app/styles/components/popover-select.scss b/ui-v2/app/styles/components/popover-select.scss
index 7cc3675e46..6cad84b09c 100644
--- a/ui-v2/app/styles/components/popover-select.scss
+++ b/ui-v2/app/styles/components/popover-select.scss
@@ -17,13 +17,10 @@
 %popover-select.type-sort label > * {
   @extend %sort-button;
 }
-
-%popover-select.type-access button::before,
-%popover-select.type-source button::before,
-%popover-select.type-status button::before {
+%popover-select button::before {
   margin-right: 10px;
 }
-%popover-select .value-allow button::before,
+
 %popover-select .value-passing button::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
   color: $green-500;
@@ -32,7 +29,6 @@
   @extend %with-alert-triangle-mask, %as-pseudo;
   color: $orange-500;
 }
-%popover-select .value-deny button::before,
 %popover-select .value-critical button::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
   color: $red-500;