ui: Change text around L7 permissions to app aware (#8963)

...also as a consequence of this we also moved around some of the CSS

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

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."
             )
           )

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

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 {

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;

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 item.Action}}" data-test-intention-action={{item.Action}}>
-        <td class="intent intent-{{slugify intent}}" data-test-intention-action={{intent}}>
+          <strong>{{capitalize (or item.Action "App aware")}}</strong>
-          <strong>{{capitalize intent}}</strong>
         </td>
-{{/let}}
         <td class="destination" data-test-intention-destination={{item.DestinationName}}>
           <span>
             {{#if (eq item.DestinationName '*') }}

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>

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 class="value-allow" @value="allow" @selected={{contains 'allow' filter.accesses}}>Allow</Option>
-        <Option @value="deny" @selected={{contains 'deny' filter.accesses}}>Deny</Option>
+        <Option class="value-deny" @value="deny" @selected={{contains 'deny' filter.accesses}}>Deny</Option>
 {{/let}}
       </BlockSlot>
     </PopoverSelect>

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

ui-v2/app/styles/base/components/pill/layout.scss

@@ -19,5 +19,4 @@
 %pill-700 {
   @extend %pill;
   padding: 4px 8px;
-  min-width: 87px;
 }

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';
-@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/role-selector';
 @import 'consul-ui/components/topology-metrics';
 @import 'consul-ui/components/topology-metrics/series';

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

ui-v2/app/styles/components/popover-select.scss

@@ -17,13 +17,10 @@
 %popover-select.type-sort label > * {
   @extend %sort-button;
 }
-
+%popover-select button::before {
-%popover-select.type-access button::before,
-%popover-select.type-source button::before,
-%popover-select.type-status 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;