ui: Auth Methods- Updates to certificate and empty state in show page (#9895)

* Update Certificate to be monospaced

* Add empty states for claim and list claim mappings

* Update the styling of empty state actions block

* Update mocked PEM certificate format

ui/packages/consul-ui/app/components/certificate/index.hbs

@@ -7,7 +7,7 @@
   >
   </button>
 {{#if this.show}}
-  <div class="key">{{@item}}</div>
+  <code>{{@item}}</code>
 {{else}}
   <hr />
 {{/if}}

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

@@ -12,9 +12,11 @@
   button.show::before {
     @extend %with-visibility-show-icon, %as-pseudo;
   }
-  div.key {
+  code {
     background-color: var(--gray-050);
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
+    max-width: min-content;
+    padding: 0 12px;
   }
   hr {
     border: 3px dashed var(--gray-300);

ui/packages/consul-ui/app/components/consul/auth-method/view/index.hbs

@@ -166,9 +166,9 @@
 
     <hr />
 
-    {{#if @item.Config.ClaimMappings}}
     <section class="claim-mappings">
       <h2>Claim Mappings</h2>
+    {{#if @item.Config.ClaimMappings}}
       <p>Use this if the claim you are capturing is singular. When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
       <table>
         <thead>
@@ -186,14 +186,32 @@
           {{/each}}
         </tbody>
       </table>
-    </section>
+    {{else}}
+      <EmptyState>
+        <BlockSlot @name="header">
+          <h2>No claim mappings</h2>
+        </BlockSlot>
+        <BlockSlot @name="body">
+          <p>Use this if the claim you are capturing is singular. When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
+        </BlockSlot>
+        <BlockSlot @name="actions">
+          <li class="docs-link">
+          {{#if (eq @item.Type 'jwt')}}
+            <a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/jwt#claimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
+          {{else}}
+            <a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/oidc#claimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
           {{/if}}
+          </li>
+        </BlockSlot>
+      </EmptyState>
+    {{/if}}
+    </section>
 
     <hr />
 
-    {{#if @item.Config.ListClaimMappings}}
     <section class="list-claim-mappings">
       <h2>List Claim Mappings</h2>
+    {{#if @item.Config.ListClaimMappings}}
       <p>Use this if the claim you are capturing is list-like (such as groups). When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
       <table>
         <thead>
@@ -211,7 +229,25 @@
           {{/each}}
         </tbody>
       </table>
+    {{else}}
+      <EmptyState>
+        <BlockSlot @name="header">
+          <h2>No list claim mappings</h2>
+        </BlockSlot>
+        <BlockSlot @name="body">
+          <p>Use this if the claim you are capturing is list-like (such as groups). When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.</p>
+        </BlockSlot>
+        <BlockSlot @name="actions">
+          <li class="docs-link">
+          {{#if (eq @item.Type 'jwt')}}
+            <a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/jwt#listclaimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
+          {{else}}
+            <a href="{{env 'CONSUL_DOCS_URL'}}/security/acl/auth-methods/oidc#listclaimmappings" rel="noopener noreferrer" target="_blank">Read the documentation</a>
+          {{/if}}
+          </li>
+        </BlockSlot>
+      </EmptyState>
+    {{/if}}
     </section>
   {{/if}}
-  {{/if}}
   </div>

ui/packages/consul-ui/app/styles/components/empty-state/layout.scss

@@ -28,10 +28,7 @@
 %empty-state > ul {
   display: flex;
   justify-content: space-between;
-
+  margin-top: 1em;
-  margin-top: 1.5em;
-  padding-top: 0.6em;
-  border-top: 1px solid;
 }
 %empty-state-anchor {
   display: inline-flex;

ui/packages/consul-ui/app/styles/components/empty-state/skin.scss

@@ -2,9 +2,6 @@
   color: $gray-500;
   background-color: $gray-010;
 }
-%empty-state > ul {
-  border-color: $gray-300;
-}
 %empty-state-header {
   border-bottom: none;
 }

ui/packages/consul-ui/mock-api/v1/acl/auth-method/_

@@ -1,6 +1,20 @@
 ${
 	[1].map(i => {
     const type = `${fake.helpers.randomize(['kubernetes', 'jwt', 'oidc'])}`;
+    const cert = `-----BEGIN CERTIFICATE-----
+MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
+MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
+ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
+cm1lZGlhdGUgQ0EgUlNBIFIzMB4XDTIwMDQwMTAwNTgzM1oXDTIxMDcxNjAwNTgz
+M1owgb0xCzAJBgNVBAYTAlVTMQ4wDAYDVQQIDAVUZXhhczEQMA4GA1UEBwwHSG91
+c3RvbjERMA8GA1UECgwIU1NMIENvcnAxFjAUBgNVBAUTDU5WMjAwODE2MTQyNDMx
+FDASBgNVBAMMC3d3dy5zc2wuY29tMR0wGwYDVQQPDBRQcml2YXRlIE9yZ2FuaXph
+dGlvbjEXMBUGCysGAQQBgjc8AgECDAZOZXZhZGExEzARBgsrBgEEAYI3PAIBAxMC
+VVMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDHheRkbb1FCc7xRKst
+wK0JIGaKY8t7JbS2bQ2b6YIJDgnHuIYHqBrCUV79oelikkokRkFvcvpaKinFHDQH
+UpWEI6RUERYmSCg3O8Wi42uOcV2B5ZabmXCkwdxY5Ecl51BbM8UnGdoAGbdNmiRm
+SmTjcs+lhMxg4fFY6lBpiEVFiGUjGRR+61R67Lz6U4KJeLNcCm07QwFYKBmpi08g
+-----END CERTIFICATE-----`;
     let sourceType;
 
     if (type !== 'kubernetes') {
@@ -20,14 +34,14 @@ ${
       case 'kubernetes':
         config = {
           Host: `https://${fake.internet.ip()}:8443`,
-          CACert: `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`,
+          CACert: cert,
           ServiceAccountJWT: `eyJhbGciOiJ${fake.internet.password(25)}.eyJ${fake.internet.password(61)}.${fake.internet.password(32)}`
         };
         break;
       case 'oidc':
         config = {
           OIDCDiscoveryURL: `https://${fake.internet.ip()}:8443`,
-          OIDCDiscoveryCACert: `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`,
+          OIDCDiscoveryCACert: cert,
           OIDCClientID: `${fake.hacker.noun()}-ID`,
           OIDCClientSecret: `${fake.hacker.noun()}-secret`,
           BoundAudiences: ["aud_example_0", "aud_example_1"],
@@ -55,11 +69,11 @@ ${
 
     switch(sourceType) {
       case 'JWTValidationPubKeys':
-        config.JWTValidationPubKeys = `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`;
+        config.JWTValidationPubKeys = cert;
         break;
       case 'JWKSURL':
         config.JWKSURL = `https://${fake.internet.ip()}:8443`;
-        config.JWKSCACert = `-----BEGIN CERTIFICATE-----${fake.internet.password(1357)}-----END CERTIFICATE-----`;
+        config.JWKSCACert = cert;
         break;
       case 'OIDCDiscoveryURL':
         config.OIDCDiscoveryURL = `https://${fake.internet.ip()}:8443`;