KV spelling error on destroy (#13313) (#13315)

* fix spelling error

* add test coverage

* whoops

* browserstack fail

ui/app/components/secret-delete-menu.js

@@ -138,6 +138,8 @@ export default class SecretDeleteMenu extends Component {
         .v2DeleteOperation(this.store, this.args.modelForData.id, deleteType, currentVersionForNoReadMetadata)
         .then(resp => {
           if (Ember.testing) {
+            this.showDeleteModal = false;
+            // we don't want a refresh otherwise test loop will rerun in a loop
             return;
           }
           if (!resp) {

ui/app/models/secret-v2-version.js

@@ -7,7 +7,7 @@ export default class SecretV2VersionModel extends SecretModel {
   @attr('string') path;
   @attr('string') deletionTime;
   @attr('string') createdTime;
-  @attr('boolean') detroyed;
+  @attr('boolean') destroyed;
   @attr('number') currentVersion;
   @belongsTo('secret-v2') secret;
 

ui/app/templates/components/secret-edit.hbs

@@ -21,7 +21,7 @@
   <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
     <nav class="tabs">
       <ul>
-        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{key.id}} @tagName="li" @activeClass="is-active">
+        <LinkTo @route="vault.cluster.secrets.backend.show" @model={{key.id}} @tagName="li" @activeClass="is-active" data-test-secret-tab>
           <LinkTo @route="vault.cluster.secrets.backend.show">
             Secret
           </LinkTo>

ui/tests/acceptance/secrets/backend/kv/secret-test.js

@@ -682,6 +682,19 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     assert.dom('[data-test-delete-modal="destroy-version"]').exists('destroy this version option shows');
     assert.dom('[data-test-delete-modal="destroy-all-versions"]').exists('destroy all versions option shows');
     assert.dom('[data-test-delete-modal="delete-version"]').doesNotExist('delete version does not show');
+
+    // because destroy requires a page refresh (making the test suite run in a loop) this action is caught in ember testing and does not refresh.
+    // therefore to show new state change after modal closes we jump to the metadata tab and then back.
+    await click('#destroy-version');
+    await settled();
+    await click('[data-test-modal-delete]');
+    await settled();
+    await click('[data-test-secret-metadata-tab]');
+    await settled();
+    await click('[data-test-secret-tab]');
+    await settled();
+    let text = document.querySelector('[data-test-empty-state-title]').innerText.trim();
+    assert.equal(text, 'Version 1 of this secret has been permanently destroyed');
   });
 
   test('version 2 with policy with only delete option does not show modal and undelete is an option', async function(assert) {
@@ -721,6 +734,7 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     await visit(url);
     await settled();
     await click(`[data-test-secret-link=${secretPath}]`);
+    await settled();
     assert.dom('[data-test-component="empty-state"]').exists('secret has been deleted');
     assert.dom('[data-test-secret-undelete]').exists('undelete button shows');
   });