From e598f6d5c252f5b3c7e51fad92b964fef53f6c23 Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav.28@gmail.com>
Date: Fri, 2 Apr 2021 13:23:56 -0700
Subject: [PATCH] Updated show lease with toggle ttl picker (#11256)

* Updated show lease with toggle ttl picker

For lease renewal, pass increment param instead of interval

* Fixed formatting

* Added changelog
---
 changelog/11256.txt                                |  3 +++
 ui/app/adapters/lease.js                           |  4 ++--
 .../vault/cluster/access/leases/show.js            |  4 ++--
 .../templates/vault/cluster/access/leases/show.hbs | 14 ++++++++++----
 4 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 changelog/11256.txt

diff --git a/changelog/11256.txt b/changelog/11256.txt
new file mode 100644
index 000000000..63f22f614
--- /dev/null
+++ b/changelog/11256.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed and updated lease renewal picker
+```
\ No newline at end of file
diff --git a/ui/app/adapters/lease.js b/ui/app/adapters/lease.js
index 67fff5e2d..4911864c7 100644
--- a/ui/app/adapters/lease.js
+++ b/ui/app/adapters/lease.js
@@ -14,12 +14,12 @@ export default ApplicationAdapter.extend({
     return this.ajax(url, 'PUT');
   },
 
-  renew(lease_id, interval) {
+  renew(lease_id, increment) {
     let url = this.buildURL() + '/leases/renew';
     return this.ajax(url, 'PUT', {
       data: {
         lease_id,
-        interval,
+        increment,
       },
     });
   },
diff --git a/ui/app/controllers/vault/cluster/access/leases/show.js b/ui/app/controllers/vault/cluster/access/leases/show.js
index 343bc0b23..45ab19adc 100644
--- a/ui/app/controllers/vault/cluster/access/leases/show.js
+++ b/ui/app/controllers/vault/cluster/access/leases/show.js
@@ -24,11 +24,11 @@ export default Controller.extend({
       });
     },
 
-    renewLease(model, interval) {
+    renewLease(model, increment) {
       const adapter = model.store.adapterFor('lease');
       const flash = this.flashMessages;
       adapter
-        .renew(model.id, interval)
+        .renew(model.id, increment?.seconds)
         .then(() => {
           this.send('refreshModel');
           // lol this is terrible, but there's no way to get the promise from the route refresh
diff --git a/ui/app/templates/vault/cluster/access/leases/show.hbs b/ui/app/templates/vault/cluster/access/leases/show.hbs
index 04d53f100..8cffd74ae 100644
--- a/ui/app/templates/vault/cluster/access/leases/show.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/show.hbs
@@ -52,16 +52,22 @@
         {{model.expireTime}}
       </code>
     </InfoTableRow>
-    <InfoTableRow @label="Expires in" @value={{date-from-now model.expireTime interval=1000 hideSuffix=true}} />
+    <InfoTableRow @label="Expires in" @value={{date-from-now model.expireTime increment=1000 hideSuffix=true}} />
   {{/if}}
   <InfoTableRow @label="TTL" @value={{model.ttl}} />
 </div>
 {{#if (and (not model.isAuthLease) model.renewable capabilities.renew.canUpdate)}}
   <div class="box is-shadowless" data-test-lease-renew-picker=true>
     <h2 class="title is-6">Renew Lease</h2>
-    <form {{action "renewLease" model interval on="submit"}}>
-      <TtlPicker @labelText="Interval" @labelClass="is-label" @onChange={{action (mut interval)}} @outputSeconds={{true}} />
-      <div class="field">
+    <form {{action "renewLease" model increment on="submit"}}>
+      <TtlPicker2 
+        @label="Increment"
+        @helperTextEnabled="Lease will expire after" 
+        @helperTextDisabled="Vault will use the default lease duration" 
+        @labelClass="is-label" 
+        @onChange={{action (mut increment)}} @unit="s" 
+      />
+      <div class="field has-top-margin-s">
         <div class="control">
           <button
             type="submit"