Converting to the hcp nav item

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -122,7 +122,13 @@
           class='hds-side-nav-hide-when-minimized consul-side-nav__selector-group'
           as |SNL|
         >
-          <Consul::Hcp::Home @list={{SNL}} />
+            <SNL.BackLink
+                    @text={{t "components.hashicorp-consul.side-nav.hcp"}}
+                    @href={{hcpUrl}}
+                    @isHrefExternal={{true}}
+                    data-test-back-to-hcp
+            />
+            <HcpNavItem @list={{SNL}}/>
           <Consul::Datacenter::Selector
             @list={{SNL}}
             @dc={{@dc}}

ui/packages/consul-ui/app/components/hcp-nav-item/index.hbs

@@ -0,0 +1,33 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{#let @list (env "CONSUL_HCP_URL") as |SNL hcpUrl|}}
+    {{#if this.accessedFromHcp}}
+        <SNL.BackLink
+            @text={{t "components.hashicorp-consul.side-nav.hcp"}}
+            @href={{hcpUrl}}
+            @isHrefExternal={{true}}
+            data-test-back-to-hcp
+        />
+    {{else}}
+        {{#if this.hcpLinkStatus.shouldDisplayNavLinkItem}}
+            {{#if this.hcpLinkStatus.alreadyLinked}}
+                <SNL.Link
+                        @text="HCP Consul Central"
+                        @href={{this.hcpLink}}
+                        @isHrefExternal={{true}}
+                        data-test-linked-cluster-hcp-link
+                />
+            {{else}}
+                <SNL.Item>
+                    {{#if this.shouldDisplayNewBadge}}
+                        <Hds::Badge @text="New" @color="highlight"/>
+                    {{/if}}
+                    <Hds::Text::Display @size='200'>{{this.linkText}}</Hds::Text::Display>
+                </SNL.Item>
+            {{/if}}
+        {{/if}}
+    {{/if}}
+{{/let}}

ui/packages/consul-ui/app/components/hcp-nav-item/index.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class HcpLinkItemComponent extends Component {
+  @service('hcp-link-status') hcpLinkStatus;
+  @service env;
+
+  get hcpLink() {
+    // TODO: How do I figure this out? From the linking API?
+    return 'https://corn.com';
+  }
+
+  get accessedFromHcp() {
+    // If the user has accessed consul from HCP managed consul, we do NOT want to display the
+    // "HCP Consul Central↗️" link in the nav bar. As we're already displaying a BackLink from Hcp::Home
+    return !!this.env.var('CONSUL_HCP_URL');
+  }
+
+  get shouldDisplayNewBadge() {
+    return true;
+  }
+}

ui/packages/consul-ui/app/components/link-to-hcp-banner/index.js

@@ -9,7 +9,6 @@ import { inject as service } from '@ember/service';
 
 export default class LinkToHcpBannerComponent extends Component {
   @service('hcp-link-status') hcpLinkStatus;
-  @service('env') env;
 
   @action
   onDismiss() {

ui/packages/consul-ui/app/services/hcp-link-status.js

@@ -11,10 +11,14 @@ const LOCAL_STORAGE_KEY = 'consul:hideHcpLinkBanner';
 export default class HcpLinkStatus extends Service {
   @service abilities;
   @tracked
-  alreadyLinked = false;
+  alreadyLinked = true; // TODO: default to false
   @tracked
   userDismissedBanner = false;
 
+  get shouldDisplayNavLinkItem() {
+    return this.hasPermissionToLink;
+  }
+
   get shouldDisplayBanner() {
     return !this.alreadyLinked && !this.userDismissedBanner && this.hasPermissionToLink;
   }