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 58fc719201..8d0a0e0682 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/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|
>
-
+
+
+ {{else}}
+ {{#if this.hcpLinkStatus.shouldDisplayNavLinkItem}}
+ {{#if this.hcpLinkStatus.alreadyLinked}}
+
+ {{else}}
+
+ {{#if this.shouldDisplayNewBadge}}
+
+ {{/if}}
+ {{this.linkText}}
+
+ {{/if}}
+ {{/if}}
+ {{/if}}
+{{/let}}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/hcp-nav-item/index.js b/ui/packages/consul-ui/app/components/hcp-nav-item/index.js
new file mode 100644
index 0000000000..876690ecd2
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/ui/packages/consul-ui/app/components/link-to-hcp-banner/index.js b/ui/packages/consul-ui/app/components/link-to-hcp-banner/index.js
index 3d0c96f2fa..52168cd7af 100644
--- a/ui/packages/consul-ui/app/components/link-to-hcp-banner/index.js
+++ b/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() {
diff --git a/ui/packages/consul-ui/app/services/hcp-link-status.js b/ui/packages/consul-ui/app/services/hcp-link-status.js
index 6eaa932f10..f6d0416074 100644
--- a/ui/packages/consul-ui/app/services/hcp-link-status.js
+++ b/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;
}