fix: 🐛 Add header for dynamic host catalog hosts page (#1743)

✅ Closes: ICU-9629

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>

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>

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}}
-/>
---}}
+  <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>