ui: migrate peers pages to HDS components

ui/packages/consul-ui/app/components/consul/peer/address/list/index.hbs

@@ -3,28 +3,29 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Providers::Dimension as |p|>
-  {{#if p.data.height}}
-    <div style={{p.data.fillRemainingHeightStyle}} class="overflow-y-scroll">
-      <VerticalCollection
-        @tagName="ul"
-        @estimateHeight={{p.data.height}}
-        @items={{@items}}
-        as |address index|
-      >
-        <li
-          class="px-3 h-12 border-bottom-primary flex items-center justify-between group"
-        >
-          <div
-            class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold"
-          >{{address}}</div>
-          <ConsulCopyButton
-            @value={{address}}
-            @name="Address"
-            class="opacity-0 group-hover:opacity-100"
+<div class="consul-peer-address-list" ...attributes>
+  <Consul::DataTable
+    @items={{@items}}
+    @columns={{this.columns}}
+    @ariaLabel="Server Addresses"
+    @card={{true}}
+  >
+    <:toolbar>
+      {{yield to="toolbar"}}
+    </:toolbar>
+    <:row as |item B|>
+      <B.Td>
+        <span class="consul-peer-address-list__address">
+          {{item}}
+          <Hds::Copy::Button
+            @textToCopy={{item}}
+            @text="Copy address"
+            @isIconOnly={{true}}
+            @size="small"
+            data-test-copy-address
           />
-        </li>
-      </VerticalCollection>
-    </div>
-  {{/if}}
-</Providers::Dimension>
+        </span>
+      </B.Td>
+    </:row>
+  </Consul::DataTable>
+</div>

ui/packages/consul-ui/app/components/consul/peer/address/list/index.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+// Single column, not sortable (per Figma — no sort icon on "Address"; server
+// addresses have no inherent order worth exposing).
+const COLUMNS = [{ label: 'Address', width: '100%' }];
+
+/**
+ * Consul::Peer::Address::List
+ *
+ * Server-addresses-tab specific configuration for the generic
+ * Consul::DataTable. Each row is the plain address string plus a copy-to-
+ * clipboard action; there is no per-row navigation.
+ */
+export default class ConsulPeerAddressList extends Component {
+  columns = COLUMNS;
+}

ui/packages/consul-ui/app/components/consul/peer/address/list/index.scss

@@ -3,6 +3,14 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-.border-bottom-primary {
-  border-bottom: 1px solid var(--token-color-border-primary);
+/* Gap between the tab nav and the table card — matches Figma (24px) and
+   Consul::Peer::Exported::List's equivalent rule. */
+.consul-peer-address-list {
+  margin-top: 24px;
+}
+
+.consul-peer-address-list__address {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }

ui/packages/consul-ui/app/components/consul/peer/address/toolbar/index.hbs

@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{! Server-addresses-tab toolbar: search only, per Figma — no filter groups
+    and no sort control (the "Address" column isn't sortable, see
+    Consul::Peer::Address::List). }}
+<Consul::ListToolbar
+  class="consul-peer-address-toolbar"
+  ...attributes
+  @search={{@search}}
+  @onsearch={{@onsearch}}
+  @searchPlaceholder="Search"
+/>

ui/packages/consul-ui/app/components/consul/peer/address/toolbar/index.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+/* The toolbar renders inside .consul-data-table__card, above the table (see
+   Consul::Peer::Address::List). Give it the same faint-surface background,
+   border and squared bottom corners as Consul::Peer::Toolbar, so the whole
+   toolbar+table reads as one card. */
+.consul-peer-address-toolbar {
+  padding: 8px;
+  background-color: var(--token-color-surface-faint);
+  border: 1px solid var(--token-color-border-faint);
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+}
+
+/* Separator between the controls row (Search) and the applied-filters area
+   ("No filters applied"). */
+.consul-peer-address-toolbar .hds-filter-bar__actions {
+  border-bottom: 1px solid var(--token-color-border-faint);
+  padding-bottom: 8px;
+}

ui/packages/consul-ui/app/components/consul/peer/exported/list/index.hbs

@@ -0,0 +1,35 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<div class="consul-peer-exported-list" ...attributes>
+  <Consul::DataTable
+    @items={{@items}}
+    @columns={{this.columns}}
+    @ariaLabel="Exported Services"
+    @card={{true}}
+  >
+    {{! Passed straight through from the caller so the toolbar renders inside
+        .consul-data-table__card, matching Consul::Peer::List's pattern. }}
+    <:toolbar>
+      {{yield to="toolbar"}}
+    </:toolbar>
+    <:row as |item B|>
+      <B.Td>
+        <a
+          data-test-service-name
+          href={{href-to
+            "dc.services.show.index"
+            item.Name
+            params=(if
+              (not-eq item.Partition @partition)
+              (hash partition=item.Partition nspace=item.Namespace peer=item.PeerName)
+              (hash peer=item.PeerName)
+            )
+          }}
+        >{{item.Name}}</a>
+      </B.Td>
+    </:row>
+  </Consul::DataTable>
+</div>

ui/packages/consul-ui/app/components/consul/peer/exported/list/index.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+// Single sortable column, matching Figma (search-only toolbar plus
+// click-to-sort on the "Service name" header; no separate quick-sort dropdown
+// or per-row actions).
+const COLUMNS = [
+  {
+    label: 'Service name',
+    sortKey: 'Name',
+    sortValue: (item) => (item.Name || '').toLowerCase(),
+    width: '100%',
+  },
+];
+
+/**
+ * Consul::Peer::Exported::List
+ *
+ * Peer-exported-services-tab specific configuration for the generic
+ * Consul::DataTable. Rows link through to the service's show page (in the
+ * peer's own partition/namespace when set); there are no per-row actions.
+ */
+export default class ConsulPeerExportedList extends Component {
+  columns = COLUMNS;
+}

ui/packages/consul-ui/app/components/consul/peer/exported/list/index.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+/* Gap between the tab nav and the table card — matches Figma (24px). */
+.consul-peer-exported-list {
+  margin-top: 24px;
+}

ui/packages/consul-ui/app/components/consul/peer/exported/toolbar/index.hbs

@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{! Exported-services-tab toolbar: search only, per Figma — no filter groups
+    and no quick-sort dropdown (sorting is the "Service name" column's own
+    click-to-sort, see Consul::Peer::Exported::List). }}
+<Consul::ListToolbar
+  class="consul-peer-exported-toolbar"
+  ...attributes
+  @search={{@search}}
+  @onsearch={{@onsearch}}
+  @searchPlaceholder="Search"
+/>

ui/packages/consul-ui/app/components/consul/peer/exported/toolbar/index.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+/* The toolbar renders inside .consul-data-table__card, above the table (see
+   Consul::Peer::Exported::List). Give it the same faint-surface background,
+   border and squared bottom corners as Consul::Peer::Toolbar, so the whole
+   toolbar+table reads as one card. */
+.consul-peer-exported-toolbar {
+  padding: 8px;
+  background-color: var(--token-color-surface-faint);
+  border: 1px solid var(--token-color-border-faint);
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+}
+
+/* Separator between the controls row (Search) and the applied-filters area
+   ("No filters applied"). */
+.consul-peer-exported-toolbar .hds-filter-bar__actions {
+  border-bottom: 1px solid var(--token-color-border-faint);
+  padding-bottom: 8px;
+}

ui/packages/consul-ui/app/components/consul/peer/form/cancel/index.hbs

@@ -0,0 +1,43 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::Button
+  @text="Cancel"
+  @color="secondary"
+  type="button"
+  data-test-cancel
+  {{on "click" this.click}}
+  ...attributes
+/>
+
+{{#if this.confirming}}
+  <Hds::Modal
+    id="discard-peer-form-modal"
+    @color="warning"
+    @onClose={{this.keepEditing}}
+    as |M|
+  >
+    <M.Header @icon="alert-triangle">Discard unsaved changes?</M.Header>
+    <M.Body>
+      <p>You'll lose the information you've entered on this page.</p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button
+          @text="Discard"
+          @color="critical"
+          data-test-confirm-discard
+          {{on "click" this.confirm}}
+        />
+        <Hds::Button
+          @text="Keep editing"
+          @color="secondary"
+          data-test-keep-editing
+          {{on "click" F.close}}
+        />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}

ui/packages/consul-ui/app/components/consul/peer/form/cancel/index.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2024, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+// Cancel button shared by the peer create form's tabs. When the form has
+// unsaved input, clicking it asks for confirmation before discarding it and
+// invoking `@onconfirm` (navigating back to the peers list); an empty form
+// can be left without asking.
+export default class ConsulPeerFormCancelComponent extends Component {
+  @tracked confirming = false;
+
+  get dirty() {
+    return Boolean(this.args.dirty);
+  }
+
+  @action
+  click() {
+    if (this.dirty) {
+      this.confirming = true;
+    } else {
+      this.args.onconfirm();
+    }
+  }
+
+  @action
+  confirm() {
+    this.confirming = false;
+    this.args.onconfirm();
+  }
+
+  @action
+  keepEditing() {
+    this.confirming = false;
+  }
+}

ui/packages/consul-ui/app/components/consul/peer/form/generate/actions/index.hbs

@@ -3,10 +3,15 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Hds::Button
-  @text='Generate token'
-  form={{@id}}
-  type='submit'
-  disabled={{or (eq @item.Name.length 0)}}
-  ...attributes
-/>
+<Hds::ButtonSet ...attributes>
+  <Consul::Peer::Form::Cancel
+    @dirty={{or @item.Name @item.ServerExternalAddresses}}
+    @onconfirm={{@onCancel}}
+  />
+  <Hds::Button
+    @text='Generate token'
+    form={{@id}}
+    type='submit'
+    disabled={{not @item.Name}}
+  />
+</Hds::ButtonSet>

ui/packages/consul-ui/app/components/consul/peer/form/generate/chart.xstate.js

@@ -31,6 +31,12 @@ export default {
         },
       },
     },
-    error: {},
+    error: {
+      on: {
+        LOAD: {
+          target: 'loading',
+        },
+      },
+    },
   },
 };