ui: Peer token use form (#13792)

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

@@ -47,6 +47,19 @@
       </fsm.State>
 
       <fsm.State @matches={{'success'}}>
+        {{yield (hash
+          Fieldsets=(component "consul/peer/form/token/fieldsets"
+            item=@item
+            token=fsm.state.context.PeeringToken
+            regenerate=@regenerate
+            onclick=(queue (set @item 'Name' ''))
+          )
+          Actions=(component "consul/peer/form/token/actions"
+            token=fsm.state.context.PeeringToken
+            item=@item
+            id=id
+          )
+        )}}
       </fsm.State>
 
     </form>

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

@@ -0,0 +1,62 @@
+
+.consul-peer-form-token-actions {
+  button:first-of-type {
+    @extend %primary-button;
+  }
+  button:last-of-type {
+    @extend %secondary-button;
+  }
+}
+
+.consul-peer-form-generate {
+  & {
+    width: 416px;
+    min-height: 200px;
+  }
+  ol {
+    list-style-position: outside;
+    list-style-type: none;
+    counter-reset: hexagonal-counter;
+    position: relative;
+  }
+  ol::before {
+    content: '';
+    border-left: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-300));
+    height: 100%;
+    position: absolute;
+    left: 2rem;
+  }
+  li {
+    counter-increment: hexagonal-counter;
+    position: relative;
+    margin-left: 60px;
+    margin-bottom: 1rem;
+  }
+  li .copyable-code {
+    margin-top: 1rem;
+  }
+  li::before {
+    --icon-name: icon-hexagon;
+    --icon-size: icon-600;
+    content: '';
+    position: absolute;
+    z-index: 2;
+  }
+  li::after {
+    content: counter(hexagonal-counter);
+    position: absolute;
+    top: 0px;
+    font-size: 14px;
+    font-weight: var(--typo-weight-bold);
+    background-color: rgb(var(--tone-gray-000));
+    z-index: 1;
+    text-align: center;
+  }
+  li::before,
+  li::after {
+    left: -2.4rem;
+    width: 20px;
+    height: 20px;
+  }
+}

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

@@ -0,0 +1,18 @@
+<div
+  class={{class-map
+    'consul-peer-form-token-actions'
+  }}
+  ...attributes
+>
+  <Action
+    ...attributes
+    {{with-copyable @token}}
+  >
+    Copy token
+  </Action>
+  <Action
+    {{on 'click' @onclose}}
+  >
+    Close
+  </Action>
+</div>

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

@@ -0,0 +1,37 @@
+{{#if @regenerate}}
+        <p>
+          Token regenerated! Here’s what’s next:
+        </p>
+{{else}}
+        <p>
+          Token generated! Here’s what’s next:
+        </p>
+{{/if}}
+        <ol>
+          <li>
+            <strong>Copy the token</strong><br />
+            This token cannot be viewed again after creation.
+            <br />
+            <CopyableCode
+              @value={{@token}}
+              @name="Token"
+            />
+          </li>
+          <li>
+            <strong>Switch to the peer</strong><br />
+            Someone on your team should log into the Datacenter (OSS) or Admin Partition (Enterprise) that you want this one to connect with.
+          </li>
+          <li>
+            <strong>Initiate the peering</strong><br />
+            From there, initiate a new peering, name it, and paste this token in.
+          </li>
+        </ol>
+{{#if (not @regenerate)}}
+        <Action
+          @type="reset"
+          {{on "click" @onclick}}
+        >
+          Generate another token
+        </Action>
+{{/if}}
+

ui/packages/consul-ui/app/styles/base/icons/icons/index.scss

@@ -382,7 +382,7 @@
 // @import './heart-fill/index.scss';
 // @import './heart-off/index.scss';
 // @import './help/index.scss';
-// @import './hexagon/index.scss';
+@import './hexagon/index.scss';
 // @import './hexagon-fill/index.scss';
 @import './history/index.scss';
 // @import './home/index.scss';

ui/packages/consul-ui/app/styles/components.scss

@@ -108,3 +108,4 @@
 @import 'consul-ui/components/peerings/badge';
 @import 'consul-ui/components/consul/node/peer-info';
 @import 'consul-ui/components/consul/service/peer-info';
+@import 'consul-ui/components/consul/peer/form';