From ac41499d9bc8ffa7768f4cf422e3246c0abac570 Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Wed, 26 Oct 2022 10:11:41 +0200
Subject: [PATCH 1/3] prettify peer/initiate form

---
 .../consul/peer/form/initiate/index.hbs       | 77 ++++++++-----------
 1 file changed, 33 insertions(+), 44 deletions(-)

diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
index 8b29c46b8..f7daf88cf 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
@@ -1,54 +1,43 @@
-<div
-  class={{class-map
-    'consul-peer-form-initiate'
-  }}
-  ...attributes
->
+<div class={{class-map "consul-peer-form-initiate"}} ...attributes>
   <DataWriter
     @sink={{uri
-      '/${partition}/${nspace}/${dc}/peer'
+      "/${partition}/${nspace}/${dc}/peer"
       (hash
-        partition=(or @item.Partition '')
-        nspace=(or @item.Namespace '')
-        dc=(or @item.Datacenter '')
+        partition=(or @item.Partition "")
+        nspace=(or @item.Namespace "")
+        dc=(or @item.Datacenter "")
       )
     }}
-    @type={{'peer'}}
-    @label={{'peer'}}
+    @type={{"peer"}}
+    @label={{"peer"}}
     @onchange={{fn (optional @onsubmit) @item}}
-    as |writer|>
-      <BlockSlot @name="error" as |after error|>
-        <Notice
-          @type="error"
-          role="alert"
-        as |notice|>
-          <notice.Body>
-            <p>
-              <strong>Error</strong><br />
-              {{error.message}}
-            </p>
-          </notice.Body>
-        </Notice>
-      </BlockSlot>
-      <BlockSlot @name="content">
-{{#let
-  (unique-id)
-as |id|}}
-        <form
-          id={{id}}
-          {{on 'submit' (fn writer.persist @item)}}
-        >
-          {{yield (hash
-            Fieldsets=(component "consul/peer/form/initiate/fieldsets"
-              item=@item
+    as |writer|
+  >
+    <BlockSlot @name="error" as |after error|>
+      <Notice @type="error" role="alert" as |notice|>
+        <notice.Body>
+          <p>
+            <strong>Error</strong><br />
+            {{error.message}}
+          </p>
+        </notice.Body>
+      </Notice>
+    </BlockSlot>
+    <BlockSlot @name="content">
+      {{#let (unique-id) as |id|}}
+        <form id={{id}} {{on "submit" (fn writer.persist @item)}}>
+          {{yield
+            (hash
+              Fieldsets=(component
+                "consul/peer/form/initiate/fieldsets" item=@item
+              )
+              Actions=(component
+                "consul/peer/form/initiate/actions" item=@item id=id
+              )
             )
-            Actions=(component "consul/peer/form/initiate/actions"
-              item=@item
-              id=id
-            )
-          )}}
+          }}
         </form>
-{{/let}}
+      {{/let}}
     </BlockSlot>
   </DataWriter>
-</div>
+</div>
\ No newline at end of file

From 6eaa9d94dae32eb6464df3a93de25db387559bb8 Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Wed, 26 Oct 2022 11:15:06 +0200
Subject: [PATCH 2/3] Prettify peers.index template

---
 .../app/templates/dc/peers/index.hbs          | 386 +++++++++---------
 1 file changed, 191 insertions(+), 195 deletions(-)

diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
index 75ee9afa7..aa1bfee1c 100644
--- a/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
+++ b/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
@@ -1,235 +1,231 @@
-<Route
-  @name={{routeName}}
-as |route|>
+<Route @name={{routeName}} as |route|>
   <DataLoader
-    @src={{
-      uri '/${partition}/${nspace}/${dc}/peers'
+    @src={{uri
+      "/${partition}/${nspace}/${dc}/peers"
       (hash
         partition=route.params.partition
         nspace=route.params.nspace
         dc=route.params.dc
-      )}}
-    as |loader|>
+      )
+    }}
+    as |loader|
+  >
 
     <BlockSlot @name="error">
-      <AppError
-        @error={{loader.error}}
-        @login={{route.model.app.login.open}}
-      />
+      <AppError @error={{loader.error}} @login={{route.model.app.login.open}} />
     </BlockSlot>
 
     <BlockSlot @name="loaded">
-{{#let
-
-  (hash
-    value=(or sortBy "State:asc")
-    change=(action (mut sortBy) value="target.selected")
-  )
-
-  (hash
-    state=(hash
-      value=(if state (split state ',') undefined)
-      change=(action (mut state) value="target.selectedItems")
-    )
-    searchproperty=(hash
-      value=(if (not-eq searchproperty undefined)
-        (split searchproperty ',')
-        searchProperties
-      )
-      change=(action (mut searchproperty) value="target.selectedItems")
-      default=searchProperties
-    )
-  )
-
-  loader.data
-
-as |sort filters items|}}
-  <AppView>
-    <BlockSlot @name="header">
-      <h1>
-        <route.Title
-          @title="Peers"
-        />
-      </h1>
-    </BlockSlot>
-    <BlockSlot @name="toolbar">
-
-      {{#if (gt items.length 0)}}
-        <Consul::Peer::SearchBar
-          @search={{search}}
-          @onsearch={{action (mut search) value="target.value"}}
-
-          @sort={{sort}}
-
-          @filter={{filters}}
-        />
-      {{/if}}
-
-    </BlockSlot>
-    <BlockSlot @name="actions">
-
-
-      <ModalDialog
-        @aria={{hash
-          label="Add peer connection"
-        }}
-        class="peer-create-modal"
-      as |modal|>
-        <BlockSlot @name="header">
-          {{did-insert (set this 'create' modal)}}
-          <h2>
-            Add peer connection
-          </h2>
-        </BlockSlot>
-        <BlockSlot @name="body">
-
-          {{#if modal.opened}}
-            <Consul::Peer::Form
-              @params={{route.params}}
-            as |form|>
-              <form.Form
-                @onchange={{loader.invalidate}}
-                @onsubmit={{modal.close}}
-              as |form|>
-                {{did-insert (set this 'form' form)}}
-                <form.Fieldsets />
-              </form.Form>
-            </Consul::Peer::Form>
-          {{/if}}
-
-        </BlockSlot>
-        <BlockSlot @name="actions">
-          <this.form.Actions
-            @onclose={{this.create.close}}
-          />
-        </BlockSlot>
-      </ModalDialog>
-      <Action
-        data-test-create
-        class="type-create"
-        {{on "click" (optional this.create.open)}}
-      >
-        Add peer connection
-      </Action>
-
-    </BlockSlot>
-    <BlockSlot @name="content">
-
-      <DataWriter
-        @sink={{uri '/${partition}/${dc}/${nspace}/peer/'
-          (hash
-            partition=route.params.partition
-            nspace=route.params.nspace
-            dc=route.params.dc
+      {{#let
+        (hash
+          value=(or sortBy "State:asc")
+          change=(action (mut sortBy) value="target.selected")
+        )
+        (hash
+          state=(hash
+            value=(if state (split state ",") undefined)
+            change=(action (mut state) value="target.selectedItems")
           )
-        }}
-        @type="peer"
-        @label="Peer"
-      as |writer|>
+          searchproperty=(hash
+            value=(if
+              (not-eq searchproperty undefined)
+              (split searchproperty ",")
+              searchProperties
+            )
+            change=(action (mut searchproperty) value="target.selectedItems")
+            default=searchProperties
+          )
+        )
+        loader.data
+        as |sort filters items|
+      }}
+        <AppView>
+          <BlockSlot @name="header">
+            <h1>
+              <route.Title @title="Peers" />
+            </h1>
+          </BlockSlot>
+          <BlockSlot @name="toolbar">
 
-        <BlockSlot @name="removed" as |after|>
-          <Consul::Peer::Notifications
-            {{notification
-              after=(action after)
-            }}
-            @type="remove"
-          />
-        </BlockSlot>
-        <BlockSlot @name="content">
+            {{#if (gt items.length 0)}}
+              <Consul::Peer::SearchBar
+                @search={{search}}
+                @onsearch={{action (mut search) value="target.value"}}
+                @sort={{sort}}
+                @filter={{filters}}
+              />
+            {{/if}}
+
+          </BlockSlot>
+          <BlockSlot @name="actions">
 
             <ModalDialog
-              @aria={{hash
-                label="Regenerate token"
-              }}
-              @onclose={{set this 'item' undefined}}
-            as |modal|>
+              @aria={{hash label="Add peer connection"}}
+              class="peer-create-modal"
+              as |modal|
+            >
               <BlockSlot @name="header">
-                {{did-insert (set this 'regenerate' modal)}}
+                {{did-insert (set this "create" modal)}}
                 <h2>
-                  Regenerate token
+                  Add peer connection
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                {{#if this.item}}
-                  <Consul::Peer::Form::Generate
-                    @item={{this.item}}
-                    @onchange={{loader.invalidate}}
-                    @regenerate={{true}}
-                  as |form|>
-                    {{did-insert (set this 'regenerateForm' form)}}
-                    <form.Fieldsets />
-                  </Consul::Peer::Form::Generate>
+
+                {{#if modal.opened}}
+                  <Consul::Peer::Form @params={{route.params}} as |form|>
+                    <form.Form
+                      @onchange={{loader.invalidate}}
+                      @onsubmit={{modal.close}}
+                      as |form|
+                    >
+                      {{did-insert (set this "form" form)}}
+                      <form.Fieldsets />
+                    </form.Form>
+                  </Consul::Peer::Form>
                 {{/if}}
+
               </BlockSlot>
               <BlockSlot @name="actions">
-                <this.regenerateForm.Actions
-                  @onclose={{this.regenerate.close}}
-                />
+                <this.form.Actions @onclose={{this.create.close}} />
               </BlockSlot>
             </ModalDialog>
+            <Action
+              data-test-create
+              class="type-create"
+              {{on "click" (optional this.create.open)}}
+            >
+              Add peer connection
+            </Action>
 
-            <DataCollection
+          </BlockSlot>
+          <BlockSlot @name="content">
+
+            <DataWriter
+              @sink={{uri
+                "/${partition}/${dc}/${nspace}/peer/"
+                (hash
+                  partition=route.params.partition
+                  nspace=route.params.nspace
+                  dc=route.params.dc
+                )
+              }}
               @type="peer"
-              @sort={{sort.value}}
-              @filters={{filters}}
-              @search={{search}}
-              @items={{items}}
-            as |collection|>
-              <collection.Collection>
+              @label="Peer"
+              as |writer|
+            >
 
-                <Consul::Peer::List
-                  @items={{collection.items}}
-                  @onedit={{queue
-                    (set this 'item')
-                    this.regenerate.open
-                  }}
-                  @ondelete={{writer.delete}}
+              <BlockSlot @name="removed" as |after|>
+                <Consul::Peer::Notifications
+                  {{notification after=(action after)}}
+                  @type="remove"
                 />
+              </BlockSlot>
+              <BlockSlot @name="content">
 
-              </collection.Collection>
-              <collection.Empty>
-                {{!-- TODO: do we need to check permissions here or will we receive an error automatically? --}}
-                <EmptyState
-                  @login={{route.model.app.login.open}}
+                <ModalDialog
+                  @aria={{hash label="Regenerate token"}}
+                  @onclose={{set this "item" undefined}}
+                  as |modal|
                 >
                   <BlockSlot @name="header">
+                    {{did-insert (set this "regenerate" modal)}}
                     <h2>
-                      {{t 'routes.dc.peers.index.empty.header'
-                        items=items.length
-                        }}
+                      Regenerate token
                     </h2>
                   </BlockSlot>
                   <BlockSlot @name="body">
-                    <p>
-                      {{t 'routes.dc.peers.index.empty.body'
-                        items=items.length
-                        canUsePartitions=(can "use partitions")
-                        canUseACLs=(can "use acls")
-                        htmlSafe=true
-                      }}
-                    </p>
+                    {{#if this.item}}
+                      <Consul::Peer::Form::Generate
+                        @item={{this.item}}
+                        @onchange={{loader.invalidate}}
+                        @regenerate={{true}}
+                        as |form|
+                      >
+                        {{did-insert (set this "regenerateForm" form)}}
+                        <form.Fieldsets />
+                      </Consul::Peer::Form::Generate>
+                    {{/if}}
                   </BlockSlot>
                   <BlockSlot @name="actions">
-                    <li class="docs-link">
-                      {{!-- what's the docs for peering?--}}
-                      <a href="{{env 'CONSUL_DOCS_URL'}}/connect/cluster-peering" rel="noopener noreferrer" target="_blank">
-                        Documentation on Peers
-                      </a>
-                    </li>
-                    <li class="learn-link">
-                      <a href="{{env "CONSUL_DOCS_URL"}}/connect/cluster-peering/create-manage-peering" rel="noopener noreferrer" target="_blank">
-                        Take the tutorial
-                      </a>
-                    </li>
+                    <this.regenerateForm.Actions
+                      @onclose={{this.regenerate.close}}
+                    />
                   </BlockSlot>
-                </EmptyState>
-              </collection.Empty>
-            </DataCollection>
-        </BlockSlot>
-      </DataWriter>
-    </BlockSlot>
-  </AppView>
-{{/let}}
+                </ModalDialog>
+
+                <DataCollection
+                  @type="peer"
+                  @sort={{sort.value}}
+                  @filters={{filters}}
+                  @search={{search}}
+                  @items={{items}}
+                  as |collection|
+                >
+                  <collection.Collection>
+
+                    <Consul::Peer::List
+                      @items={{collection.items}}
+                      @onedit={{queue (set this "item") this.regenerate.open}}
+                      @ondelete={{writer.delete}}
+                    />
+
+                  </collection.Collection>
+                  <collection.Empty>
+                    {{! TODO: do we need to check permissions here or will we receive an error automatically? }}
+                    <EmptyState @login={{route.model.app.login.open}}>
+                      <BlockSlot @name="header">
+                        <h2>
+                          {{t
+                            "routes.dc.peers.index.empty.header"
+                            items=items.length
+                          }}
+                        </h2>
+                      </BlockSlot>
+                      <BlockSlot @name="body">
+                        <p>
+                          {{t
+                            "routes.dc.peers.index.empty.body"
+                            items=items.length
+                            canUsePartitions=(can "use partitions")
+                            canUseACLs=(can "use acls")
+                            htmlSafe=true
+                          }}
+                        </p>
+                      </BlockSlot>
+                      <BlockSlot @name="actions">
+                        <li class="docs-link">
+                          {{! what's the docs for peering?}}
+                          <a
+                            href="{{env
+                              'CONSUL_DOCS_URL'
+                            }}/connect/cluster-peering"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            Documentation on Peers
+                          </a>
+                        </li>
+                        <li class="learn-link">
+                          <a
+                            href="{{env
+                              'CONSUL_DOCS_URL'
+                            }}/connect/cluster-peering/create-manage-peering"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            Take the tutorial
+                          </a>
+                        </li>
+                      </BlockSlot>
+                    </EmptyState>
+                  </collection.Empty>
+                </DataCollection>
+              </BlockSlot>
+            </DataWriter>
+          </BlockSlot>
+        </AppView>
+      {{/let}}
     </BlockSlot>
   </DataLoader>
-</Route>
+</Route>
\ No newline at end of file

From be97a2a4a8057986fea60e65415d1ae696a92adc Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Wed, 26 Oct 2022 11:15:57 +0200
Subject: [PATCH 3/3] Redirect to peers.show after establishing peering

---
 .../app/controllers/dc/peers/index.js                | 12 ++++++++++++
 .../consul-peerings/app/templates/dc/peers/index.hbs |  2 +-
 .../tests/acceptance/dc/peers/establish.feature      |  1 +
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 ui/packages/consul-peerings/app/controllers/dc/peers/index.js

diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/index.js b/ui/packages/consul-peerings/app/controllers/dc/peers/index.js
new file mode 100644
index 000000000..e8812e486
--- /dev/null
+++ b/ui/packages/consul-peerings/app/controllers/dc/peers/index.js
@@ -0,0 +1,12 @@
+import Controller from "@ember/controller";
+import { inject as service } from "@ember/service";
+
+export default class DcPeersIndexController extends Controller {
+  @service router;
+
+  redirectToPeerShow = (modalCloseFn, peerModel) => {
+    modalCloseFn?.();
+
+    this.router.transitionTo("dc.peers.show", peerModel.Name);
+  };
+}
diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
index aa1bfee1c..2d57dec8d 100644
--- a/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
+++ b/ui/packages/consul-peerings/app/templates/dc/peers/index.hbs
@@ -76,7 +76,7 @@
                   <Consul::Peer::Form @params={{route.params}} as |form|>
                     <form.Form
                       @onchange={{loader.invalidate}}
-                      @onsubmit={{modal.close}}
+                      @onsubmit={{fn this.redirectToPeerShow modal.close}}
                       as |form|
                     >
                       {{did-insert (set this "form" form)}}
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/peers/establish.feature b/ui/packages/consul-ui/tests/acceptance/dc/peers/establish.feature
index f037d4572..c773155ac 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/peers/establish.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/peers/establish.feature
@@ -28,3 +28,4 @@ Feature: dc / peers / establish: Peer Establish Peering
     ---
     And "[data-notification]" has the "notification-update" class
     And "[data-notification]" has the "success" class
+    And the url should be /dc-1/peers/new-peer/imported-services