hashicorp · rishabh-gupta-hashicorp · Apr 14, 2026 · Apr 15, 2026 · Apr 15, 2026
@@ -25,3 +25,9 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+# Ignore e2e test reports
+e2e-tests/reports/
+
+# Ignore e2e test state files
+e2e-tests/auth-state.json
@@ -0,0 +1,23 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<span class="consul-acl-ruleset-badge" data-type={{this.type}} aria-label={{this.ariaLabel}} ...attributes>
+  {{#if this.hasIcon}}
+    <Hds::Badge
+      @text={{this.label}}
+      @icon={{this.icon}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
+  {{else}}
+    <Hds::Badge
+      @text={{this.label}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
+  {{/if}}
+</span>
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+export default class ConsulAclRulesetBadgeComponent extends Component {
+  get type() {
+    return this.args.type || '';
+  }
+
+  get label() {
+    return this.args.item?.Name || '';
+  }
+
+  get ariaLabel() {
+    switch (this.type) {
+      case 'policy-service-identity':
+        return `Service Identity: ${this.label}`;
+      case 'policy-node-identity':
+        return `Node Identity: ${this.label}`;
+      default:
+        return this.label;
+    }
+  }
+
+  get icon() {
+    switch (this.type) {
+      case 'policy-management':
+        return 'star-fill';
+      case 'read-only':
+        return 'lock';
+      case 'policy':
+        return 'file-text';
+      case 'role':
+        return 'user';
+      default:
+        return null;
+    }
+  }
+
+  get hasIcon() {
+    return Boolean(this.icon);
+  }
+}
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+.consul-acl-ruleset-badge {
+  // Override icon color for management policy to use Consul brand color
+  &[data-type="policy-management"] {
+    .hds-badge__icon {
+      color: var(--token-color-consul-brand) !important;
+    }
+  }
+}
+
+// Made with Bob
@@ -11,6 +11,11 @@
   }
 }
 
+.consul-auth-method-type--hds {
+  display: inline-flex;
+  align-items: center;
+}
+
 // View
 .consul-auth-method-view {
   margin-bottom: 32px;

@@ -4,10 +4,15 @@
 }}
 
 {{#let (icon-mapping @item.Type) as |flightIcon|}}
-  <span class="consul-auth-method-type {{unless flightIcon @item.Type}}" data-test-type={{@item.Type}}>
+  <span class="consul-auth-method-type--hds" data-test-type={{@item.Type}}>
     {{#if flightIcon}}
       <Hds::Icon @name={{flightIcon}} class="mr-1.5 w-4 h-4" />
     {{/if}}
-    {{t (concat "common.brand." @item.Type)}}
+    <Hds::Badge
+      @text={{t (concat "common.brand." @item.Type)}}
+      @color="neutral"
+      @type="filled"
+      @size="small"
+    />
   </span>
 {{/let}}
@@ -89,6 +89,8 @@
 %route-card > header ul {
   float: right;
   margin-top: -2px;
+  display: flex;
+  flex-wrap: wrap;
 }
 %route-card > header ul li {
   margin-left: 5px;

@@ -13,7 +13,16 @@
 {{#if (gt @item.Definition.Match.HTTP.Methods.length 0) }}
     <ul class="match-methods">
       {{#each @item.Definition.Match.HTTP.Methods as |item|}}
-        <li>{{item}}</li>
+        <li>
+          <span class="route-card__method-badge">
+            <Hds::Badge
+              @text={{item}}
+              @color="neutral"
+              @type="filled"
+              @size="small"
+            />
+          </span>
+        </li>
       {{/each}}
     </ul>
 {{/if}}

@@ -8,8 +8,8 @@
 /* the styling there almost 100% uses our CSS vars */
 /* defined in our CSS files, but be sure to */
 /* take a look in the discovery-chain.hbs */
-%route-card > header ul li {
-  @extend %pill-500, %frame-gray-900;
+%route-card > header ul li .route-card__method-badge {
+  display: inline-flex;
 }
 %discovery-chain-tween {
   transition-duration: 0.1s;

@@ -10,11 +10,15 @@
           <dt>
             <span
               data-test-external-source={{externalSource}}
-              class="consul-external-source"
+              class="consul-external-source consul-external-source--hds"
               ...attributes
             >
-              <Hds::Icon @name={{icon-mapping externalSource}} class="mr-1.5 w-4 h-4"  />
-              Registered via {{t (concat "common.brand." externalSource)}}
+              <Hds::Badge
+                @text={{if @label @label (concat "Registered via " (t (concat "common.brand." externalSource)))}}
+                @icon={{icon-mapping externalSource}}
+                @color="neutral"
+                @size="small"
+              />
             </span>
           </dt>
           <dd>
@@ -38,15 +42,15 @@
   {{else if externalSource}}
     <span
       data-test-external-source={{externalSource}}
-      class="consul-external-source"
+      class="consul-external-source consul-external-source--hds"
       ...attributes
     >
-      <Hds::Icon @name={{icon-mapping externalSource}} @color="var(--token-color-hashicorp-brand)" class="mr-1.5 h-4 w-4" />
-      {{#if @label}}
-        {{@label}}
-      {{else}}
-        Registered via {{t (concat "common.brand." externalSource)}}
-      {{/if}}
+      <Hds::Badge
+        @text={{if @label @label (concat "Registered via " (t (concat "common.brand." externalSource)))}}
+        @icon={{icon-mapping externalSource}}
+        @color="neutral"
+        @size="small"
+      />
     </span>
   {{/if}}
   {{/let}}

@@ -7,10 +7,20 @@
   @extend %pill-200, %frame-gray-600, %body-200-regular;
 }
 
+.consul-external-source--hds {
+  all: unset;
+  display: inline-flex;
+  border: none !important;
+}
+
 .consul-external-source::before {
   --icon-size: icon-300;
 }
 
+.consul-external-source--hds::before {
+  content: none;
+}
+
 .consul-external-source.jwt::before {
   @extend %with-logo-jwt-color-icon, %as-pseudo;
 }

@@ -32,10 +32,18 @@
           <dd data-health-check-type>
             {{item.Type}}
   {{#if item.Exposed}}
-            <em
+            <span
+              class="consul-health-check-list__exposed-badge"
               data-test-exposed="true"
               {{hds-tooltip "Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent." options=(detached-tooltip-options)}}
-            >Exposed</em>
+            >
+              <Hds::Badge
+                @text="Exposed"
+                @color="neutral"
+                @type="filled"
+                @size="small"
+              />
+            </span>
   {{/if}}
           </dd>
         </dl>

@@ -22,12 +22,9 @@
 %healthcheck-output header > * {
   @extend %display-300-semibold;
 }
-%healthcheck-output dd em {
-  @extend %pill;
-  background-color: var(--token-color-surface-strong);
-  /*TODO: Should this be merged into %pill? */
+%healthcheck-output .consul-health-check-list__exposed-badge {
+  display: inline-flex;
   cursor: default;
-  font-style: normal;
   margin-top: -2px;
   margin-left: 0.5em;
 }

@@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<span class="consul-intention-action-badge" ...attributes>
+  <Hds::Badge
+    @text={{this.text}}
+    @icon={{this.icon}}
+    @color={{this.color}}
+    @type="filled"
+    @size="small"
+  />
+</span>
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+export default class ConsulIntentionActionComponent extends Component {
+  get normalizedAction() {
+    return (this.args.action || '').toLowerCase();
+  }
+
+  get text() {
+    return this.args.label || 'App aware';
+  }
+
+  get color() {
+    switch (this.normalizedAction) {
+      case 'allow':
+        return 'success';
+      case 'deny':
+        return 'critical';
+      default:
+        return 'neutral';
+    }
+  }
+
+  get icon() {
+    switch (this.normalizedAction) {
+      case 'allow':
+        return 'check';
+      case 'deny':
+        return 'x';
+      default:
+        return 'info';
+    }
+  }
+}
@@ -8,17 +8,8 @@
   td.destination {
     @extend %tbody-th;
   }
-  td strong {
-    @extend %pill-700;
-  }
-  td.intent-allow strong {
-    @extend %pill-allow;
-  }
-  td.intent-deny strong {
-    @extend %pill-deny;
-  }
-  td.intent- strong {
-    @extend %pill-l7;
+  td .consul-intention-action-badge {
+    display: inline-flex;
   }
   td.permissions {
     @extend %body-100-regular;

@@ -46,7 +46,7 @@
       </a>
     </td>
     <td class='intent intent-{{slugify item.Action}}' data-test-intention-action={{item.Action}}>
-      <strong>{{capitalize (or item.Action 'App aware')}}</strong>
+      <Consul::Intention::Action @action={{item.Action}} @label={{capitalize (or item.Action 'App aware')}} />
     </td>
     <td class='destination' data-test-intention-destination={{item.DestinationName}}>
       <span>

@@ -12,7 +12,7 @@
 as |item|>
   <BlockSlot @name="details">
     <div onclick={{action (optional @onclick) item}}>
-      <strong class={{concat 'intent-' item.Action}}>{{capitalize item.Action}}</strong>
+      <Consul::Intention::Action @action={{item.Action}} @label={{capitalize (or item.Action 'App aware')}} />
 {{#if (gt item.HTTP.Methods.length 0)}}
         <dl class="permission-methods">
           <dt {{hds-tooltip "Methods" options=(detached-tooltip-options)}}>

@@ -11,12 +11,6 @@
 .consul-intention-permission-list:not(.readonly) > ul > li {
   @extend %with-composite-row-intent;
 }
-.consul-intention-permission-list strong {
-  @extend %pill-500;
-}
-.consul-intention-permission-list .intent-allow {
-  @extend %pill-allow;
-}
-.consul-intention-permission-list .intent-deny {
-  @extend %pill-deny;
+.consul-intention-permission-list .consul-intention-action-badge {
+  display: inline-flex;
 }
@@ -8,7 +8,7 @@
     display: flex;
     width: 100%;
   }
-  strong {
+  .consul-intention-action-badge {
     margin-right: 8px;
   }
 }