remove explicit defaults and types so we retrieve from backend, decou…

…ple enabling auto tidy from duration, move params to auto settings section
hashicorp · Sep 26, 2024 · 24332c2 · 24332c2
1 parent 642e5fc
commit 24332c2
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 97 deletions.
diff --git a/ui/app/models/pki/tidy.js b/ui/app/models/pki/tidy.js
@@ -16,7 +16,7 @@ export default class PkiTidyModel extends Model {
     label: 'Tidy ACME enabled',
     labelDisabled: 'Tidy ACME disabled',
     mapToBoolean: 'tidyAcme',
-    helperTextDisabled: 'Tidying of ACME accounts, orders and authorizations is disabled',
+    helperTextDisabled: 'Tidying of ACME accounts, orders and authorizations is disabled.',
     helperTextEnabled:
       'The amount of time that must pass after creation that an account with no orders is marked revoked, and the amount of time after being marked revoked or deactivated.',
     detailsLabel: 'ACME account safety buffer',
@@ -31,47 +31,45 @@ export default class PkiTidyModel extends Model {
   })
   tidyAcme;
 
+  // * auto tidy only fields
   @attr('boolean', {
     label: 'Automatic tidy enabled',
-    defaultValue: false,
+    labelDisabled: 'Automatic tidy disabled',
+    helperTextDisabled: 'Automatic tidy operations will not run.',
   })
-  enabled; // auto-tidy only
+  enabled; // renders outside FormField loop as a toggle, auto tidy fields only render if enabled
 
   @attr({
-    label: 'Automatic tidy enabled',
-    labelDisabled: 'Automatic tidy disabled',
-    mapToBoolean: 'enabled',
+    editType: 'ttl',
     helperTextEnabled:
       'Sets the interval_duration between automatic tidy operations; note that this is from the end of one operation to the start of the next.',
-    helperTextDisabled: 'Automatic tidy operations will not run.',
-    detailsLabel: 'Automatic tidy duration',
+    hideToggle: true,
     formatTtl: true,
   })
-  intervalDuration; // auto-tidy only
+  intervalDuration;
 
-  @attr('string', {
+  @attr({
     label: 'Minimum startup backoff duration',
-    defaultValue: '5m',
     editType: 'ttl',
     helperTextEnabled:
-      'Sets the min_startup_backoff_duration field which forces the minimum delay after Vault startup auto-tidy can run',
+      'Sets the min_startup_backoff_duration field which forces the minimum delay after Vault startup auto-tidy can run.',
     hideToggle: true,
     formatTtl: true,
   })
-  minStartupBackoffDuration; // auto-tidy only
+  minStartupBackoffDuration;
 
-  @attr('string', {
+  @attr({
     label: 'Maximum startup backoff duration',
-    defaultValue: '15m',
     editType: 'ttl',
     helperTextEnabled:
-      'Sets the max_startup_backoff_duration field which forces the maximum delay after Vault startup auto-tidy can run',
+      'Sets the max_startup_backoff_duration field which forces the maximum delay after Vault startup auto-tidy can run.',
     hideToggle: true,
     formatTtl: true,
   })
-  maxStartupBackoffDuration; // auto-tidy only
+  maxStartupBackoffDuration;
+  // * end of auto-tidy only fields
 
-  @attr('string', {
+  @attr({
     editType: 'ttl',
     helperTextEnabled:
       'Specifies a duration that issuers should be kept for, past their NotAfter validity period. Defaults to 365 days (8760 hours).',
@@ -98,7 +96,7 @@ export default class PkiTidyModel extends Model {
   })
   revocationQueueSafetyBuffer; // enterprise only
 
-  @attr('string', {
+  @attr({
     editType: 'ttl',
     helperTextEnabled:
       'For a certificate to be expunged, the time must be after the expiration time of the certificate (according to the local clock) plus the safety buffer. Defaults to 72 hours.',
@@ -153,16 +151,14 @@ export default class PkiTidyModel extends Model {
   tidyRevokedCerts;
 
   get allGroups() {
-    const groups = [
-      { autoTidy: ['enabled', 'intervalDuration', ...this.autoTidyConfigFields] },
-      ...this.sharedFields,
-    ];
+    const groups = [{ autoTidy: ['enabled', ...this.autoTidyConfigFields] }, ...this.sharedFields];
     return this._expandGroups(groups);
   }
 
   // fields that are specific to auto-tidy
   get autoTidyConfigFields() {
-    return ['minStartupBackoffDuration', 'maxStartupBackoffDuration'];
+    // 'enabled' is not included here because it is responsible for hiding/showing these params and renders separately in the form
+    return ['intervalDuration', 'minStartupBackoffDuration', 'maxStartupBackoffDuration'];
   }
 
   // shared between auto and manual tidy operations

diff --git a/ui/lib/pki/addon/components/pki-tidy-form.hbs b/ui/lib/pki/addon/components/pki-tidy-form.hbs
@@ -14,28 +14,33 @@
 
 <form class="has-bottom-margin-s" {{on "submit" (perform this.save)}} data-test-tidy-form={{@tidyType}}>
   {{#if (eq @tidyType "auto")}}
-    {{#let this.intervalDurationAttr as |attr|}}
-      <TtlPicker
-        data-test-input={{attr.name}}
-        @onChange={{fn this.handleTtl attr}}
-        @label={{attr.options.label}}
-        @labelDisabled={{attr.options.labelDisabled}}
-        @helperTextDisabled={{attr.options.helperTextDisabled}}
-        @helperTextEnabled={{attr.options.helperTextEnabled}}
-        @initialEnabled={{get @tidy attr.options.mapToBoolean}}
-        @initialValue={{get @tidy attr.name}}
-      />
+    {{#let (get @tidy.allByKey "enabled") as |enabledAttr|}}
+      <div class="field">
+        <Toggle @onChange={{fn (mut @tidy.enabled)}} @checked={{@tidy.enabled}} @name={{enabledAttr.name}}>
+          <legend>
+            <span class="ttl-picker-label is-large">
+              {{if @tidy.enabled enabledAttr.options.label enabledAttr.options.labelDisabled}}
+            </span>
+            {{#unless @tidy.enabled}}
+              <p class="sub-text">{{enabledAttr.options.helperTextDisabled}}</p>
+            {{/unless}}
+          </legend>
+        </Toggle>
+      </div>
     {{/let}}
-
     {{#if @tidy.enabled}}
+      <h2 class="title is-size-5 has-border-bottom-light page-header" data-test-tidy-header="Automatic tidy settings">
+        Automatic tidy settings
+      </h2>
       {{#each @tidy.autoTidyConfigFields as |field|}}
         <FormField @attr={{get @tidy.allByKey field}} @model={{@tidy}} />
       {{/each}}
     {{/if}}
   {{/if}}
-  {{#each @tidy.formFieldGroups as |fieldGroup|}}
-    {{#each-in fieldGroup as |group fields|}}
-      {{#if (or (eq @tidyType "manual") @tidy.enabled)}}
+
+  {{#if (or (eq @tidyType "manual") @tidy.enabled)}}
+    {{#each @tidy.formFieldGroups as |fieldGroup|}}
+      {{#each-in fieldGroup as |group fields|}}
         <h2 class="title is-size-5 has-border-bottom-light page-header" data-test-tidy-header={{group}}>
           {{group}}
         </h2>
@@ -58,9 +63,9 @@
             {{/if}}
           {{/if}}
         {{/each}}
-      {{/if}}
-    {{/each-in}}
-  {{/each}}
+      {{/each-in}}
+    {{/each}}
+  {{/if}}
 
   <hr class="is-marginless has-background-gray-200" />
   <Hds::ButtonSet class="has-top-margin-m">

diff --git a/ui/lib/pki/addon/components/pki-tidy-form.ts b/ui/lib/pki/addon/components/pki-tidy-form.ts
@@ -23,11 +23,9 @@ interface Args {
 }
 
 interface PkiTidyTtls {
-  intervalDuration: string;
   acmeAccountSafetyBuffer: string;
 }
 interface PkiTidyBooleans {
-  enabled: boolean;
   tidyAcme: boolean;
 }
 
@@ -37,10 +35,6 @@ export default class PkiTidyForm extends Component<Args> {
   @tracked errorBanner = '';
   @tracked invalidFormAlert = '';
 
-  get intervalDurationAttr() {
-    return this.args.tidy?.allByKey.intervalDuration;
-  }
-
   @task
   @waitFor
   *save(event: Event) {

diff --git a/ui/tests/acceptance/pki/pki-tidy-test.js b/ui/tests/acceptance/pki/pki-tidy-test.js
@@ -129,7 +129,7 @@ module('Acceptance | pki tidy', function (hooks) {
     await click(PKI_TIDY.tidyEmptyStateConfigure);
     await click(PKI_TIDY.tidyConfigureModal.tidyModalAutoButton);
     assert.dom(PKI_TIDY_FORM.tidyFormName('auto')).exists('Auto tidy form exists');
-    await click(PKI_TIDY_FORM.toggleLabel('Automatic tidy disabled'));
+    await click(GENERAL.ttl.toggle('enabled'));
     assert
       .dom(PKI_TIDY_FORM.tidySectionHeader('ACME operations'))
       .exists('Auto tidy form enabled shows ACME operations field');
@@ -192,7 +192,7 @@ module('Acceptance | pki tidy', function (hooks) {
     await click(PKI_TIDY.tidyConfigureModal.tidyOptionsModal);
     assert.dom(PKI_TIDY.tidyConfigureModal.configureTidyModal).exists('Configure tidy modal exists');
     await click(PKI_TIDY.tidyConfigureModal.tidyModalAutoButton);
-    await click(PKI_TIDY_FORM.toggleLabel('Automatic tidy disabled'));
+    await click(GENERAL.ttl.toggle('enabled'));
     await click(PKI_TIDY_FORM.inputByAttr('tidyCertStore'));
     await click(PKI_TIDY_FORM.inputByAttr('tidyRevokedCerts'));
     await click(PKI_TIDY_FORM.tidySave);

diff --git a/ui/tests/helpers/pki/pki-selectors.ts b/ui/tests/helpers/pki/pki-selectors.ts
@@ -195,7 +195,6 @@ export const PKI_TIDY_FORM = {
   tidyFormName: (attr: string) => `[data-test-tidy-form="${attr}"]`,
   inputByAttr: (attr: string) => `[data-test-input="${attr}"]`,
   toggleInput: (attr: string) => `[data-test-input="${attr}"] input`,
-  intervalDuration: '[data-test-ttl-value="Automatic tidy enabled"]',
   acmeAccountSafetyBuffer: '[data-test-ttl-value="Tidy ACME enabled"]',
   toggleLabel: (label: string) => `[data-test-toggle-label="${label}"]`,
   tidySectionHeader: (header: string) => `[data-test-tidy-header="${header}"]`,

diff --git a/ui/tests/integration/components/pki/page/pki-tidy-auto-settings-test.js b/ui/tests/integration/components/pki/page/pki-tidy-auto-settings-test.js
@@ -51,12 +51,14 @@ module('Integration | Component | page/pki-tidy-auto-settings', function (hooks)
       .hasText('Edit auto-tidy', 'toolbar edit link has correct text');
 
     assert.dom('[data-test-row="enabled"] [data-test-label-div]').hasText('Automatic tidy enabled');
-    assert.dom('[data-test-row="intervalDuration"] [data-test-label-div]').hasText('Automatic tidy duration');
+    assert.dom('[data-test-value-div="Automatic tidy enabled"]').hasText('No');
+    assert.dom('[data-test-value-div="Interval duration"]').hasText('2 days');
     // Universal operations
     assert.dom('[data-test-group-title="Universal operations"]').hasText('Universal operations');
     assert
       .dom('[data-test-value-div="Tidy the certificate store"]')
       .exists('Renders universal field when value exists');
+    assert.dom('[data-test-value-div="Tidy the certificate store"]').hasText('No');
     assert
       .dom('[data-test-value-div="Tidy revoked certificates"]')
       .doesNotExist('Does not render universal field when value null');
@@ -65,6 +67,7 @@ module('Integration | Component | page/pki-tidy-auto-settings', function (hooks)
     assert
       .dom('[data-test-value-div="Tidy expired issuers"]')
       .exists('Renders issuer op field when value exists');
+    assert.dom('[data-test-value-div="Tidy expired issuers"]').hasText('Yes');
     assert
       .dom('[data-test-value-div="Tidy legacy CA bundle"]')
       .doesNotExist('Does not render issuer op field when value null');