UI: PKI Roles Edit (#18194)

ui/lib/core/addon/components/info-table-row.hbs

@@ -61,6 +61,8 @@
         {{/if}}
       {{else if @formatDate}}
         {{date-format @value @formatDate}}
+      {{else if @formatTtl}}
+        {{this.formattedTtl}}
       {{else}}
         {{#if (eq @type "array")}}
           <InfoTableItemArray

ui/lib/core/addon/components/info-table-row.js

@@ -2,6 +2,7 @@ import { typeOf } from '@ember/utils';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { convertFromSeconds, largestUnitFromSeconds } from 'core/utils/duration-utils';
 
 /**
  * @module InfoTableRow
@@ -56,6 +57,14 @@ export default class InfoTableRowComponent extends Component {
         return false;
     }
   }
+  get formattedTtl() {
+    const { value } = this.args;
+    if (Number.isInteger(value)) {
+      const unit = largestUnitFromSeconds(value);
+      return `${convertFromSeconds(value, unit)}${unit}`;
+    }
+    return value;
+  }
 
   @action
   calculateLabelOverflow(el) {

ui/lib/core/addon/components/radio-select-ttl-or-string.hbs

@@ -1,49 +0,0 @@
-<div class="column is-narrow is-flex-center has-text-grey has-right-margin-s has-top-margin-negative-s">
-  <RadioButton
-    class="radio"
-    name="ttl"
-    @value="ttl"
-    @onChange={{this.onRadioButtonChange}}
-    @groupValue={{this.groupValue}}
-    data-test-radio-button="ttl"
-  />
-  <label class="has-left-margin-xs">
-    <TtlPicker
-      data-test-input="ttl"
-      @onChange={{this.setAndBroadcastTtl}}
-      @label="TTL"
-      @helperTextEnabled={{@attr.options.helperTextEnabled}}
-      @description={{@attr.helpText}}
-      @time={{this.ttlTime}}
-      @unit="d"
-      @hideToggle={{true}}
-    />
-  </label>
-</div>
-<div class="column is-narrow is-flex-center has-text-grey has-right-margin-s">
-  <RadioButton
-    class="radio"
-    name="not_after"
-    @value="specificDate"
-    @onChange={{this.onRadioButtonChange}}
-    @groupValue={{this.groupValue}}
-    data-test-radio-button="not_after"
-  />
-  <label class="has-left-margin-xs">
-    <span class="ttl-picker-label is-large">Specific date</span><br />
-    <p class="sub-text">
-      This value format should be given in UTC format YYYY-MM-ddTHH:MM:SSZ.
-    </p>
-    {{#if (eq this.groupValue "specificDate")}}
-      <input
-        id="not_after"
-        autocomplete="off"
-        spellcheck="false"
-        value={{this.notAfter}}
-        {{on "input" this.setAndBroadcastInput}}
-        class="input"
-        data-test-input="not_after"
-      />
-    {{/if}}
-  </label>
-</div>

ui/lib/core/addon/components/radio-select-ttl-or-string.js

@@ -1,52 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-/**
- * @module RadioSelectTtlOrString
- * `RadioSelectTtlOrString` components are yielded out within the formField component when the editType on the model is yield.
- * The component is two radio buttons, where the first option is a TTL, and the second option is an input field without a title.
- * This component is used in the PKI engine inside various forms.
- *
- * @example
- * ```js
- * {{#each @model.fields as |attr|}}
- *  <RadioSelectTtlOrString @attr={{attr}} @model={{this.model}} />
- * {{/each}}
- * ```
- * @param {Model} model - Ember Data model that `attr` is defined on.
- * @param {Object} attr - Usually derived from ember model `attributes` lookup, and all members of `attr.options` are optional.
- */
-
-export default class RadioSelectTtlOrString extends Component {
-  @tracked groupValue = 'ttl';
-  @tracked ttlTime;
-  @tracked notAfter;
-
-  @action onRadioButtonChange(selection) {
-    this.groupValue = selection;
-    // Clear the previous selection if they have clicked the other radio button.
-    if (selection === 'specificDate') {
-      this.args.model.set('ttl', '');
-      this.ttlTime = '';
-    }
-    if (selection === 'ttl') {
-      this.args.model.set('notAfter', '');
-      this.notAfter = '';
-      this.args.model.set('ttl', this.ttlTime);
-    }
-  }
-
-  @action setAndBroadcastTtl(value) {
-    const valueToSet = value.enabled === true ? `${value.seconds}s` : 0;
-    if (this.groupValue === 'specificDate') {
-      // do not save ttl on the model until the ttl radio button is selected
-      return;
-    }
-    this.args.model.set('ttl', `${valueToSet}`);
-  }
-
-  @action setAndBroadcastInput(event) {
-    this.args.model.set('notAfter', event.target.value);
-  }
-}

ui/lib/core/addon/components/ttl-picker.js

@@ -28,37 +28,12 @@ import Duration from '@icholy/duration';
 import { guidFor } from '@ember/object/internals';
 import Ember from 'ember';
 import { restartableTask, timeout } from 'ember-concurrency';
-
-export const secondsMap = {
-  s: 1,
-  m: 60,
-  h: 3600,
-  d: 86400,
-};
-const convertToSeconds = (time, unit) => {
-  return time * secondsMap[unit];
-};
-const convertFromSeconds = (seconds, unit) => {
-  return seconds / secondsMap[unit];
-};
-const goSafeConvertFromSeconds = (seconds, unit) => {
-  // Go only accepts s, m, or h units
-  const u = unit === 'd' ? 'h' : unit;
-  return convertFromSeconds(seconds, u) + u;
-};
-const largestUnitFromSeconds = (seconds) => {
-  let unit = 's';
-  if (seconds === 0) return unit;
-  // get largest unit with no remainder
-  if (seconds % secondsMap.d === 0) {
-    unit = 'd';
-  } else if (seconds % secondsMap.h === 0) {
-    unit = 'h';
-  } else if (seconds % secondsMap.m === 0) {
-    unit = 'm';
-  }
-  return unit;
-};
+import {
+  convertFromSeconds,
+  convertToSeconds,
+  goSafeConvertFromSeconds,
+  largestUnitFromSeconds,
+} from 'core/utils/duration-utils';
 export default class TtlPickerComponent extends Component {
   @tracked enableTTL = false;
   @tracked recalculateSeconds = false;