From 754afd356aecc22447073c1fd2e8769cda9aa65a Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 12 Jan 2022 09:31:54 +0000
Subject: [PATCH] ui: Alter position of dashboard button in the service
 instance header (#11988)

---
 .../consul-ui/app/components/app-view/layout.scss      |  3 ---
 .../consul-ui/app/styles/routes/dc/services/index.scss |  8 ++++++++
 .../consul-ui/app/templates/dc/services/show.hbs       | 10 +++++-----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/app-view/layout.scss b/ui/packages/consul-ui/app/components/app-view/layout.scss
index 725b0cba2..f08c05096 100644
--- a/ui/packages/consul-ui/app/components/app-view/layout.scss
+++ b/ui/packages/consul-ui/app/components/app-view/layout.scss
@@ -21,9 +21,6 @@
 %app-view-actions {
   margin-top: 9px;
 }
-%app-view-actions > *:not(:last-child) {
-  margin-right: 12px;
-}
 
 /* content */
 /* TODO: Think about an %app-form or similar */
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
index ac0c58023..ed24d44f4 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
@@ -1,3 +1,11 @@
+/* drop the external dashboard button down if it exists */
+/* so it doesn't sit next to the Intentions create button */
+/* awkwardly */
+html[data-route^='dc.services.show'] .app-view .actions .external-dashboard {
+  position: absolute;
+  top: 50px;
+  right: 0;
+}
 /* instance detail dl text*/
 html[data-route^='dc.services.instance'] .app-view > header dl {
   float: left;
diff --git a/ui/packages/consul-ui/app/templates/dc/services/show.hbs b/ui/packages/consul-ui/app/templates/dc/services/show.hbs
index 4817b0984..5bfd29fd5 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/show.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/show.hbs
@@ -186,8 +186,8 @@ as |items item dc|}}
               }}
             as |config|>
             {{#if config.data.dashboard_url_templates.service}}
-              <a
-                href={{render-template config.data.dashboard_url_templates.service
+              <Action
+                @href={{render-template config.data.dashboard_url_templates.service
                   (hash
                     Datacenter=dc.Name
                     Service=(hash
@@ -197,12 +197,12 @@ as |items item dc|}}
                     )
                   )
                 }}
-                target="_blank"
-                rel="noopener noreferrer"
+                @external={{true}}
+                class="external-dashboard"
                 data-test-dashboard-anchor
               >
                 Open dashboard
-              </a>
+              </Action>
             {{/if}}
             </DataSource>
           </BlockSlot>