From e81f29f4b81129ee37e5645fecbf5a40e329729a Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 8 Sep 2022 11:45:20 +0100
Subject: [PATCH] ui: Add 'self-managed' badge when
 CONSUL_HCP_MANAGED_RUNTIME=self (#14496)

---
 .../consul/datacenter/selector/index.hbs         |  3 +++
 .../app/components/hashicorp-consul/index.scss   | 16 +++++++++++-----
 .../consul-ui/app/utils/get-environment.js       |  3 +++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
index be1c33da45..72b44e3a9b 100644
--- a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
@@ -58,6 +58,9 @@
   {{else}}
     <div class="dc-name" data-test-datacenter-single>
       {{@dcs.firstObject.Name}}
+      {{#if (env 'CONSUL_HCP_MANAGED_RUNTIME')}}
+        <span>Self-managed</span>
+      {{/if}}
     </div>
   {{/if}}
 </li>
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index e33168eaa8..fe989b06ca 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -13,6 +13,17 @@
   nav .dcs li.is-local span {
     @extend %menu-panel-badge;
   }
+  nav .dcs .dc-name {
+    color: rgb(var(--tone-gray-600));
+    padding: 3.25px 0px;
+    font-weight: var(--typo-weight-semibold)
+  }
+  nav .dcs .dc-name span {
+    @extend %pill-200;
+    margin-left: 1rem;
+    background-color: rgb(var(--tone-gray-300));
+    color: rgb(var(--tone-gray-999));
+  }
   nav li.partitions,
   nav li.nspaces {
     @extend %main-nav-vertical-popover-menu;
@@ -50,11 +61,6 @@
     top: 2px;
     margin-left: 2px;
   }
-  .dc-name {
-    color: rgb(var(--tone-gray-600));
-    padding: 3.25px 0px;
-    font-weight: var(--typo-weight-semibold)
-  }
 }
 .hashicorp-consul {
   @extend %hashicorp-consul;
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index 0e363eed98..f7ec678f0a 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -132,6 +132,8 @@ export default function(config = {}, win = window, doc = document) {
         return operatorConfig.LocalDatacenter;
       case 'CONSUL_DATACENTER_PRIMARY':
         return operatorConfig.PrimaryDatacenter;
+      case 'CONSUL_HCP_MANAGED_RUNTIME':
+        return operatorConfig.HCPManagedRuntime;
       case 'CONSUL_API_PREFIX':
         // we want API prefix to look like an env var for if we ever change
         // operator config to be an API request, we need this variable before we
@@ -267,6 +269,7 @@ export default function(config = {}, win = window, doc = document) {
       case 'CONSUL_UI_CONFIG':
       case 'CONSUL_DATACENTER_LOCAL':
       case 'CONSUL_DATACENTER_PRIMARY':
+      case 'CONSUL_HCP_MANAGED_RUNTIME':
       case 'CONSUL_API_PREFIX':
       case 'CONSUL_HCP_URL':
       case 'CONSUL_ACLS_ENABLED':