ui: Adds Peer initiation form (#13754)

ui/packages/consul-peerings/app/components/consul/peer/form/initiate/README.mdx

@@ -0,0 +1,26 @@
+# Consul::Peer::Form::Initiate
+
+```hbs preview-template
+<DataSource @src={{
+  uri '/${partition/${nspace}/${dc}/peer/${name}'
+    (hash
+      partition=''
+      nspace=''
+      dc='dc1'
+      name=''
+    )
+  }}
+as |source|>
+{{#if source.data}}
+  <Consul::Peer::Form::Initiate
+    @item={{source.data}}
+    @onchange={{noop}}
+  as |form|>
+    <form.Fieldsets />
+    <form.Actions
+      @onclose={{noop}}
+    />
+  </Consul::Peer::Form::Initiate>
+{{/if}}
+</DataSource>
+```

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

@@ -0,0 +1,7 @@
+<Action
+  form={{@id}}
+  @type="submit"
+  ...attributes
+>
+  Add peer
+</Action>

ui/packages/consul-peerings/app/components/consul/peer/form/initiate/fieldsets/index.hbs

@@ -0,0 +1,53 @@
+<div
+  class={{class-map
+    'consul-peer-form-initiate-fieldsets'
+  }}
+  ...attributes
+>
+  {{#let
+    (hash
+      help='Enter a name to locally identify the new peer.'
+      Name=(array
+        (hash
+          test=(t 'common.validations.dns-hostname.test')
+          error=(t 'common.validations.dns-hostname.error' name="Name")
+        )
+      )
+    )
+
+    (hash
+      help='Enter the token received from the operator of the desired peer.'
+      PeeringToken=(array)
+    )
+
+  as |Name PeeringToken|}}
+    <p>
+      Enter a token generated in the desired peer.
+    </p>
+      <StateMachine
+        @src={{require '/machines/validate.xstate' from="/components/consul/peer/form/generate/fieldsets"}}
+      as |fsm|>
+
+      <fieldset>
+        <TextInput
+          @name="Name"
+          @label="Name of peer"
+          @item={{@item}}
+          @validations={{Name}}
+          @chart={{fsm}}
+        />
+        <TextInput
+          @expanded={{true}}
+          @name="Token"
+          @item={{@item}}
+          @validations={{PeeringToken}}
+          @chart={{fsm}}
+        />
+        {{yield (hash
+          valid=(not (state-matches fsm.state 'error'))
+        )}}
+      </fieldset>
+
+    </StateMachine>
+  {{/let}}
+</div>

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

@@ -0,0 +1,41 @@
+<div
+  class={{class-map
+    'consul-peer-form-initiate'
+  }}
+  ...attributes
+>
+  <DataWriter
+    @sink={{uri
+      '/${partition}/${nspace}/${dc}/peer'
+      (hash
+        partition=(or @item.Partition '')
+        nspace=(or @item.Namespace '')
+        dc=(or @item.Datacenter '')
+      )
+    }}
+    @type={{'peer'}}
+    @label={{'peer'}}
+    @onchange={{fn (optional @onsubmit) @item}}
+    as |writer|>
+      <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
+            )
+          )}}
+        </form>
+{{/let}}
+      </BlockSlot>
+  </DataWriter>
+</div>

ui/packages/consul-ui/translations/common/en-us.yaml

@@ -72,3 +72,12 @@ sort:
   status:
     asc: Unhealthy to Healthy
     desc: Healthy to Unhealthy
+validations:
+  dns-hostname:
+    help: |
+      Must be a valid DNS hostname. Must contain 1-64 characters (numbers, letters, and hyphens), and must begin with a letter.
+    test: "^[a-zA-Z0-9]([a-zA-Z0-9-]'{0,62}'[a-zA-Z0-9])?$"
+    error: "{name} must be a valid DNS hostname."
+  immutable:
+    help: Once created, this cannot be changed.
+