From 3c2b74684a3818b96c5c51003f47c26e7f7ea91a Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Mon, 26 Jun 2023 11:55:39 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Add=20header=20for=20dyna?=
 =?UTF-8?q?mic=20host=20catalog=20hosts=20page=20(#1743)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-9629
---
 .../host-set/hosts/host/header/index.hbs      | 17 ++++++++++++
 .../host-set/hosts/host/navigation/index.hbs  | 12 +++++++++
 .../host-sets/host-set/hosts/host/index.hbs   | 26 +++++++++++++------
 3 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs
 create mode 100644 ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/navigation/index.hbs

diff --git a/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs
new file mode 100644
index 000000000..91490ddb5
--- /dev/null
+++ b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs
@@ -0,0 +1,17 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<h2>
+  {{t 'resources.host.title'}}
+  <DocLink @doc='host' @iconSize='large' />
+</h2>
+<p>{{t 'resources.host.description'}}</p>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t 'actions.copy-to-clipboard'}}
+  @acknowledgeText={{t 'states.copied'}}
+>
+  <code>{{@model.id}}</code>
+</Copyable>
\ No newline at end of file
diff --git a/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/navigation/index.hbs b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/navigation/index.hbs
new file mode 100644
index 000000000..295ff2ce4
--- /dev/null
+++ b/ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/navigation/index.hbs
@@ -0,0 +1,12 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Rose::Nav::Tabs as |nav|>
+  <nav.link
+    @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts.host.index'
+  >
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/host/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/host/index.hbs
index b7f599c11..c290d4f87 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/host/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/host/index.hbs
@@ -3,12 +3,22 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Form::Host @model={{@model}} />
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-{{!--
-<Form::Host
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
---}}
\ No newline at end of file
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Hosts::Host::Header
+      @model={{@model}}
+    />
+  </page.header>
+
+  <page.navigation>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Hosts::Host::Navigation />
+  </page.navigation>
+
+  <page.body>
+    <Form::Host @model={{@model}} />
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file