From a4a4383aa89ef5e825803174ad54cca8abf58868 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 1 Sep 2022 18:26:12 +0100
Subject: [PATCH] ui: Adds a HCP home link when in HCP (#14417)

---
 .../app/components/consul/hcp/home/index.hbs        |  8 ++++++++
 .../app/components/consul/hcp/home/index.scss       | 11 +++++++++++
 .../consul-hcp/vendor/consul-hcp/services.js        |  4 +++-
 .../app/components/hashicorp-consul/index.hbs       | 13 +++++++------
 .../app/components/main-nav-vertical/index.scss     |  3 +--
 .../app/styles/base/icons/icons/index.scss          |  2 +-
 ui/packages/consul-ui/app/styles/components.scss    |  1 +
 ui/packages/consul-ui/vendor/consul-ui/services.js  |  3 +++
 8 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
 create mode 100644 ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss

diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
new file mode 100644
index 000000000..053f235da
--- /dev/null
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
@@ -0,0 +1,8 @@
+<div
+  class="consul-hcp-home"
+  ...attributes
+>
+  <a href={{env 'CONSUL_HCP_URL'}}>
+    Back to HCP
+  </a>
+</div>
diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss
new file mode 100644
index 000000000..7ae65f241
--- /dev/null
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss
@@ -0,0 +1,11 @@
+.consul-hcp-home {
+  position: relative;
+  top: -22px;
+}
+.consul-hcp-home a::before {
+  content: '';
+  --icon-name: icon-arrow-left;
+  --icon-size: icon-300;
+  margin-right: 8px;
+}
+
diff --git a/ui/packages/consul-hcp/vendor/consul-hcp/services.js b/ui/packages/consul-hcp/vendor/consul-hcp/services.js
index 159a7a96e..27f9d4a74 100644
--- a/ui/packages/consul-hcp/vendor/consul-hcp/services.js
+++ b/ui/packages/consul-hcp/vendor/consul-hcp/services.js
@@ -1,5 +1,7 @@
 (services => services({
-
+  'component:consul/hcp/home': {
+    class: 'consul-ui/components/consul/hcp/home',
+  },
 }))(
   (json, data = (typeof document !== 'undefined' ? document.currentScript.dataset : module.exports)) => {
     data[`services`] = JSON.stringify(json);
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
index 4d7a040ff..672985310 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -86,13 +86,14 @@
   </:home-nav>
 
   <:main-nav>
+    <Consul::Hcp::Home />
     <ul>
-        <Consul::Datacenter::Selector
-          @dc={{@dc}}
-          @partition={{@partition}}
-          @nspace={{@nspace}}
-          @dcs={{@dcs}}
-        />
+      <Consul::Datacenter::Selector
+        @dc={{@dc}}
+        @partition={{@partition}}
+        @nspace={{@nspace}}
+        @dcs={{@dcs}}
+      />
       <Consul::Partition::Selector
         @dc={{@dc}}
         @partition={{@partition}}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
index a37b1d83e..ab9130b93 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
@@ -8,9 +8,8 @@
   @extend %main-nav-vertical-item;
 }
 /**/
-
 /* actual clickable button-y things plus states */
-%main-nav-vertical > ul > li > a {
+%main-nav-vertical a {
   @extend %main-nav-vertical-action;
 }
 %main-nav-vertical > ul > li.is-active > a {
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
index 20f57edc7..8f8663c4c 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
@@ -2,7 +2,7 @@
 @import './alert-circle-outline/index.scss';
 @import './alert-triangle/index.scss';
 // @import './arrow-down/index.scss';
-// @import './arrow-left/index.scss';
+@import './arrow-left/index.scss';
 @import './arrow-right/index.scss';
 // @import './arrow-up/index.scss';
 // @import './bolt/index.scss';
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index f94f14d44..4a7e7b9e0 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -109,3 +109,4 @@
 @import 'consul-ui/components/consul/node/peer-info';
 @import 'consul-ui/components/consul/peer/info';
 @import 'consul-ui/components/consul/peer/form';
+@import 'consul-ui/components/consul/hcp/home';
diff --git a/ui/packages/consul-ui/vendor/consul-ui/services.js b/ui/packages/consul-ui/vendor/consul-ui/services.js
index 13f2f054b..2b2258d52 100644
--- a/ui/packages/consul-ui/vendor/consul-ui/services.js
+++ b/ui/packages/consul-ui/vendor/consul-ui/services.js
@@ -18,6 +18,9 @@
     'component:consul/peer/selector': {
       class: '@glimmer/component',
     },
+    'component:consul/hcp/home': {
+      class: '@glimmer/component',
+    },
   }))(
   (
     json,