ui: Add peering establishment to the peer listing page (#13813)

* ui: Add peering establishment to the peer listing page

* Remove this.form.reset

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

@@ -42,6 +42,24 @@ as |item index|>
 {{#if (can 'delete peer' item=item)}}
 
     <Actions as |Action|>
+      <Action
+        data-test-edit-action
+        @href={{href-to 'dc.peers.edit' item.Name}}
+      >
+        <BlockSlot @name="label">
+          View
+        </BlockSlot>
+      </Action>
+{{#if (can "write peer" item=item)}}
+        <Action
+          data-test-edit-action
+          {{on 'click' (fn @onedit item)}}
+        >
+          <BlockSlot @name="label">
+            Regenerate token
+          </BlockSlot>
+        </Action>
+{{/if}}
       <Action
         data-test-delete-action
         @onclick={{fn @ondelete item}}

ui/packages/consul-peerings/app/templates/dc/peers/index.hbs

@@ -1,4 +1,6 @@
-<Route @name={{routeName}} as |route|>
+<Route
+  @name={{routeName}}
+as |route|>
   <DataLoader
     @src={{
       uri '/${partition}/${nspace}/${dc}/peers'
@@ -45,10 +47,13 @@ as |sort filters items|}}
   <AppView>
     <BlockSlot @name="header">
       <h1>
-        <route.Title @title="Peers" />
+        <route.Title
+          @title="Peers"
+        />
       </h1>
     </BlockSlot>
     <BlockSlot @name="toolbar">
+
       {{#if (gt items.length 0)}}
         <Consul::Peer::SearchBar
           @search={{search}}
@@ -60,8 +65,55 @@ as |sort filters items|}}
         />
       {{/if}}
 
+    </BlockSlot>
+    <BlockSlot @name="actions">
+
+
+      <ModalDialog
+        @aria={{hash
+          label="Add peer connection"
+        }}
+      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
@@ -72,8 +124,8 @@ as |sort filters items|}}
         }}
         @type="peer"
         @label="Peer"
-        @ondelete={{refresh-route}}
       as |writer|>
+
         <BlockSlot @name="removed" as |after|>
           <Consul::Peer::Notifications
             {{notification
@@ -83,6 +135,38 @@ as |sort filters items|}}
           />
         </BlockSlot>
         <BlockSlot @name="content">
+
+            <ModalDialog
+              @aria={{hash
+                label="Regenerate token"
+              }}
+              @onclose={{set this 'item' undefined}}
+            as |modal|>
+              <BlockSlot @name="header">
+                {{did-insert (set this 'regenerate' modal)}}
+                <h2>
+                  Regenerate token
+                </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}}
+              </BlockSlot>
+              <BlockSlot @name="actions">
+                <this.regenerateForm.Actions
+                  @onclose={{this.regenerate.close}}
+                />
+              </BlockSlot>
+            </ModalDialog>
+
             <DataCollection
               @type="peer"
               @sort={{sort.value}}
@@ -94,7 +178,10 @@ as |sort filters items|}}
 
                 <Consul::Peer::List
                   @items={{collection.items}}
-                  @onedit={{this.edit.open}}
+                  @onedit={{queue
+                    (set this 'item')
+                    this.regenerate.open
+                  }}
                   @ondelete={{writer.delete}}
                 />
 

ui/packages/consul-ui/app/components/buttons/index.scss

@@ -2,13 +2,13 @@
 @import './layout';
 button[type='submit'],
 button.type-submit,
+button.type-create,
 a.type-create {
   @extend %primary-button;
 }
 // TODO: Once we move action-groups to use aria menu we can get rid of
 // some of this and just use not(aria-haspopup)
 button[type='reset'],
-header .actions button[type='button']:not(.copy-btn),
 button.type-cancel {
   @extend %secondary-button;
 }

ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss

@@ -8,6 +8,9 @@ html[data-route^='dc.acls.index'] .filter-bar {
 html[data-route^='dc.acls.index'] .filter-bar [role='radiogroup'] {
   @extend %expanded-single-select;
 }
+html[data-route^='dc.acls.tokens.edit'] header .actions button {
+  @extend %secondary-button;
+}
 
 @media #{$--lt-wide-form} {
   html[data-route^='dc.acls.create'] main header .actions,