UI: VAULT-13782 VAULT-13794 pki ui improvements for phase two (#19312)

* VAULT-13782 move keys tab next to issuers

* VAULT-13794 move private_key_format to key paramter toggle

* Fix failing tests!

* Move format and private key format out

* Address feedback and fix not valid after spacing

* Add more spacing and code cleanup

* Remove engines stylesheet

* Remove class conditional logic

ui/app/models/pki/certificate/generate.js

@@ -4,7 +4,7 @@ import PkiCertificateBaseModel from './base';
 
 const generateFromRole = [
   {
-    default: ['commonName', 'customTtl'],
+    default: ['commonName', 'customTtl', 'format', 'privateKeyFormat'],
   },
   {
     'Subject Alternative Name (SAN) Options': [
@@ -15,9 +15,6 @@ const generateFromRole = [
       'otherSans',
     ],
   },
-  {
-    'More Options': ['format', 'privateKeyFormat'],
-  },
 ];
 @withFormFields(null, generateFromRole)
 export default class PkiCertificateGenerateModel extends PkiCertificateBaseModel {

ui/app/styles/app.scss

@@ -1,7 +1,6 @@
 @import 'ember-basic-dropdown';
 @import 'ember-power-select';
 @import './core';
-@import './engines';
 
 @mixin font-face($name) {
   @font-face {

ui/app/styles/core/helpers.scss

@@ -153,6 +153,12 @@
 .has-padding-m {
   padding: $spacing-m;
 }
+.has-padding-xs {
+  padding: $spacing-xs;
+}
+.has-padding-xxs {
+  padding: $spacing-xxs;
+}
 .has-top-bottom-margin {
   margin: 1.25rem 0rem;
 }
@@ -219,6 +225,9 @@
   font-size: $size-8;
   text-transform: lowercase;
 }
+.has-top-padding-xxs {
+  padding-top: $spacing-xxs;
+}
 .has-top-padding-s {
   padding-top: $spacing-s;
 }

ui/lib/core/addon/helpers/options-for-backend.js

@@ -25,14 +25,14 @@ const PKI_ENGINE_BACKEND = {
       label: 'Issuers',
       link: 'issuers',
     },
-    {
-      label: 'Certificates',
-      link: 'certificates',
-    },
     {
       label: 'Keys',
       link: 'keys',
     },
+    {
+      label: 'Certificates',
+      link: 'certificates',
+    },
     {
       label: 'Configuration',
       link: 'configuration',

ui/lib/pki/addon/components/pki-generate-csr.ts

@@ -34,7 +34,6 @@ export default class PkiGenerateCsrComponent extends Component<Args> {
       'commonName',
       'excludeCnFromSans',
       'format',
-      'privateKeyFormat',
       'serialNumber',
       'addBasicConstraints',
     ]);

ui/lib/pki/addon/components/pki-generate-root.js

@@ -39,7 +39,6 @@ export default class PkiGenerateRootComponent extends Component {
       'customTtl',
       'notBeforeDuration',
       'format',
-      'privateKeyFormat',
       'permittedDnsDomains',
       'maxPathLength',
     ];

ui/lib/pki/addon/components/pki-not-valid-after-form.hbs

@@ -1,4 +1,4 @@
-<div class="column is-narrow is-flex-center has-text-grey has-right-margin-s has-top-margin-negative-s pki-radiogroup-label">
+<div class="column is-narrow is-flex-align-baseline has-text-grey has-right-margin-s has-padding-xs">
   <RadioButton
     id="ttlType"
     class="radio"
@@ -27,7 +27,9 @@
     {{/if}}
   </div>
 </div>
-<div class="column is-narrow is-flex-center has-text-grey has-right-margin-s pki-radiogroup-label">
+<div
+  class="column is-narrow is-flex-align-baseline has-text-grey has-right-margin-s has-top-margin-negative-s has-padding-xs"
+>
   <RadioButton
     id="dateType"
     class="radio"

ui/lib/pki/addon/components/pki-role-generate.hbs

@@ -18,7 +18,6 @@
         @groupName="formFieldGroups"
         @showHelpText={{false}}
       />
-      <FormFieldGroups @model={{@model}} @renderGroup="More Options" @groupName="formFieldGroups" />
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">
       <div class="control">

ui/lib/pki/addon/utils/action-params.js

@@ -9,6 +9,8 @@ export function keyParamsByType(type) {
     fields = ['keyRef'];
   } else if (type === 'kms') {
     fields = ['keyName', 'managedKeyName', 'managedKeyId'];
+  } else if (type === 'exported') {
+    fields = [...fields, 'privateKeyFormat'];
   }
   return fields;
 }

ui/tests/integration/components/pki/pki-generate-root-test.js

@@ -101,7 +101,7 @@ module('Integration | Component | pki-generate-root', function (hooks) {
     assert.strictEqual(this.model.type, this.type);
     assert
       .dom(`[data-test-group="Key parameters"] ${SELECTORS.formField}`)
-      .exists({ count: 3 }, '3 form fields under keyParams toggle');
+      .exists({ count: 4 }, '4 form fields under keyParams toggle');
     assert.dom(SELECTORS.fieldByName('keyName')).exists(`Key name field shown when type=${this.type}`);
     assert.dom(SELECTORS.fieldByName('keyType')).exists(`Key type field shown when type=${this.type}`);
     assert.dom(SELECTORS.fieldByName('keyBits')).exists(`Key bits field shown when type=${this.type}`);

ui/tests/integration/components/pki/pki-generate-toggle-groups-test.js

@@ -35,7 +35,7 @@ module('Integration | Component | PkiGenerateToggleGroups', function (hooks) {
         'Placeholder renders for key params when type is not selected'
       );
     const fields = {
-      exported: ['keyName', 'keyType', 'keyBits'],
+      exported: ['keyName', 'keyType', 'keyBits', 'privateKeyFormat'],
       internal: ['keyName', 'keyType', 'keyBits'],
       existing: ['keyRef'],
       kms: ['keyName', 'managedKeyName', 'managedKeyId'],