From bc76d4972978bfd3b307d58bd36ff5faccf2b872 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Tue, 19 Jul 2022 09:29:43 -0700
Subject: [PATCH] create static credential store form and route updates (#1195)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 static cred store support to route and templates
---
 .../form/credential-store/index.hbs           | 286 +---------------
 .../form/credential-store/static/index.hbs    | 104 ++++++
 .../form/credential-store/vault/index.hbs     | 309 ++++++++++++++++++
 .../scopes/scope/credential-stores/new.js     |   2 +-
 .../scopes/scope/credential-stores/new.js     |  40 ++-
 .../scopes/scope/credential-stores/new.hbs    |   1 +
 6 files changed, 460 insertions(+), 282 deletions(-)
 create mode 100644 ui/admin/app/components/form/credential-store/static/index.hbs
 create mode 100644 ui/admin/app/components/form/credential-store/vault/index.hbs

diff --git a/ui/admin/app/components/form/credential-store/index.hbs b/ui/admin/app/components/form/credential-store/index.hbs
index c887438f1..84c5d2b23 100644
--- a/ui/admin/app/components/form/credential-store/index.hbs
+++ b/ui/admin/app/components/form/credential-store/index.hbs
@@ -1,279 +1,7 @@
-<Rose::Form
-  @onSubmit={{@submit}}
-  @cancel={{@cancel}}
-  @disabled={{@model.isSaving}}
-  @error={{@model.errors.base}}
-  @showEditToggle={{if @model.isNew false true}}
-  as |form|
->
-  {{#if (feature-flag 'static-credentials')}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        {{#if @model.isNew}}
-          {{! Code to allow option to select between cred. store types (vault or static) when it is first created goes here}}
-          <form.input
-            @value={{@model.type}}
-            readonly={{true}}
-            @disabled={{true}}
-          />
-        {{else}}
-          <form.radioGroup
-            @name='types'
-            @selectedValue={{@model.type}}
-            as |radioGroup|
-          >
-            <radioGroup.card
-              @label={{t
-                (concat 'resources.credential-store.types.' @model.type)
-              }}
-              @helperText={{t
-                (concat 'resources.credential-store.help.' @model.type)
-              }}
-              @value={{@model.type}}
-              @layout='wide'
-              readonly={{true}}
-              @disabled={{true}}
-            />
-          </form.radioGroup>
-        {{/if}}
-      </:body>
-    </form.fieldset>
-  {{else}}
-    <form.input
-      @value={{@model.type}}
-      @label={{t 'form.type.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-  {{/if}}
-
-  <form.input
-    @name='name'
-    @type='name'
-    @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  <form.textarea
-    @name='description'
-    @type='description'
-    @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.description}}
-      <field.errors as |errors|>
-        {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.textarea>
-
-  <form.input
-    @name='address'
-    @type='text'
-    @value={{@model.address}}
-    @label={{t 'resources.credential-store.form.address.label'}}
-    @error={{@model.errors.address}}
-    @helperText={{t 'resources.credential-store.form.address.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.address}}
-      <field.errors as |errors|>
-        {{#each @model.errors.address as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  <form.input
-    @name='token'
-    @type='text'
-    @value={{@model.token}}
-    @label={{t 'resources.credential-store.form.token.label'}}
-    @error={{@model.errors.token}}
-    @helperText={{t 'resources.credential-store.form.token.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.token}}
-      <field.errors as |errors|>
-        {{#each @model.errors.token as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  {{#unless @model.isNew}}
-    <form.input
-      @value={{@model.token_hmac}}
-      @label={{t 'resources.credential-store.form.token_hmac.label'}}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-  {{/unless}}
-
-  <form.input
-    @name='namespace'
-    @type='text'
-    @value={{@model.namespace}}
-    @label={{t 'resources.credential-store.form.namespace.label'}}
-    @error={{@model.errors.namespace}}
-    @helperText={{t 'resources.credential-store.form.namespace.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.namespace}}
-      <field.errors as |errors|>
-        {{#each @model.errors.namespace as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  <form.input
-    @name='tls_server_name'
-    @type='text'
-    @value={{@model.tls_server_name}}
-    @label={{t 'resources.credential-store.form.tls_server_name.label'}}
-    @error={{@model.errors.tls_server_name}}
-    @helperText={{t 'resources.credential-store.form.tls_server_name.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.tls_server_name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.tls_server_name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
-
-  <form.checkbox
-    @label={{t 'resources.credential-store.form.tls_skip_verify.label'}}
-    @helperText={{t 'resources.credential-store.form.tls_skip_verify.help'}}
-    @checked={{@model.tls_skip_verify}}
-    @onChange={{fn
-      (mut @model.tls_skip_verify)
-      (if @model.tls_skip_verify false true)
-    }}
-    @error={{@model.errors.tls_skip_verify}}
-    as |field|
-  >
-    {{#if @model.errors.tls_skip_verify}}
-      <field.errors as |errors|>
-        {{#each @model.errors.tls_skip_verify as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.checkbox>
-
-  <form.textarea
-    @name='client_certificate'
-    @type='text'
-    @value={{@model.client_certificate}}
-    @label={{t 'resources.credential-store.form.client_certificate.label'}}
-    @error={{@model.errors.client_certificate}}
-    @helperText={{t 'resources.credential-store.form.client_certificate.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.client_certificate}}
-      <field.errors as |errors|>
-        {{#each @model.errors.client_certificate as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.textarea>
-
-  <form.textarea
-    @name='client_certificate_key'
-    @type='text'
-    @value={{@model.client_certificate_key}}
-    @label={{t 'resources.credential-store.form.client_certificate_key.label'}}
-    @error={{@model.errors.client_certificate_key}}
-    @helperText={{t
-      'resources.credential-store.form.client_certificate_key.help'
-    }}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.client_certificate_key}}
-      <field.errors as |errors|>
-        {{#each @model.errors.client_certificate_key as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.textarea>
-
-  {{#unless @model.isNew}}
-    <form.input
-      @value={{@model.client_certificate_key_hmac}}
-      @label={{t
-        'resources.credential-store.form.client_certificate_key_hmac.label'
-      }}
-      readonly={{true}}
-      @disabled={{true}}
-    />
-  {{/unless}}
-
-  <form.textarea
-    @name='ca_cert'
-    @type='text'
-    @value={{@model.ca_cert}}
-    @label={{t 'resources.credential-store.form.ca_cert.label'}}
-    @error={{@model.errors.ca_cert}}
-    @helperText={{t 'resources.credential-store.form.ca_cert.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
-  >
-    {{#if @model.errors.ca_cert}}
-      <field.errors as |errors|>
-        {{#each @model.errors.ca_cert as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.textarea>
-  {{#if (can 'save model' @model)}}
-    <form.actions
-      @disabled={{if @model.cannotSave @model.cannotSave}}
-      @enableEditText={{t 'actions.edit-form'}}
-      @submitText={{t 'actions.save'}}
-      @cancelText={{t 'actions.cancel'}}
-    />
-  {{/if}}
-</Rose::Form>
\ No newline at end of file
+{{component
+  (concat 'form/credential-store/' @model.type)
+  model=@model
+  submit=@submit
+  cancel=@cancel
+  changeType=@changeType
+}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/credential-store/static/index.hbs b/ui/admin/app/components/form/credential-store/static/index.hbs
new file mode 100644
index 000000000..85cd00832
--- /dev/null
+++ b/ui/admin/app/components/form/credential-store/static/index.hbs
@@ -0,0 +1,104 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @error={{@model.errors.description}}
+    @helperText={{t 'form.description.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  {{#if (feature-flag 'static-credentials')}}
+    <form.fieldset>
+      <:title>{{t 'form.type.label'}}</:title>
+      <:body>
+        {{#if @model.isNew}}
+          <form.radioGroup
+            @name='types'
+            @selectedValue={{@model.type}}
+            @changed={{@changeType}}
+            as |radioGroup|
+          >
+            <radioGroup.card
+              @label={{t 'resources.credential-store.types.static'}}
+              @helperText={{t 'resources.credential-store.help.static'}}
+              @value='static'
+              @layout='wide'
+            />
+            <radioGroup.card
+              @label={{t 'resources.credential-store.types.vault'}}
+              @helperText={{t 'resources.credential-store.help.vault'}}
+              @value='vault'
+              @layout='wide'
+            />
+          </form.radioGroup>
+        {{else}}
+          <form.radioGroup
+            @name='types'
+            @selectedValue={{@model.type}}
+            as |radioGroup|
+          >
+            <radioGroup.card
+              @label={{t
+                (concat 'resources.credential-store.types.' @model.type)
+              }}
+              @helperText={{t
+                (concat 'resources.credential-store.help.' @model.type)
+              }}
+              @value={{@model.type}}
+              @layout='wide'
+              readonly={{true}}
+              @disabled={{true}}
+            />
+          </form.radioGroup>
+        {{/if}}
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/credential-store/vault/index.hbs b/ui/admin/app/components/form/credential-store/vault/index.hbs
new file mode 100644
index 000000000..f3d713ae8
--- /dev/null
+++ b/ui/admin/app/components/form/credential-store/vault/index.hbs
@@ -0,0 +1,309 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @error={{@model.errors.description}}
+    @helperText={{t 'form.description.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  {{#if (feature-flag 'static-credentials')}}
+    <form.fieldset>
+      <:title>{{t 'form.type.label'}}</:title>
+      <:body>
+        {{#if @model.isNew}}
+          <form.radioGroup
+            @name='types'
+            @selectedValue={{@model.type}}
+            @changed={{@changeType}}
+            as |radioGroup|
+          >
+            <radioGroup.card
+              @label={{t 'resources.credential-store.types.static'}}
+              @helperText={{t 'resources.credential-store.help.static'}}
+              @value='static'
+              @layout='wide'
+            />
+            <radioGroup.card
+              @label={{t 'resources.credential-store.types.vault'}}
+              @helperText={{t 'resources.credential-store.help.vault'}}
+              @value='vault'
+              @layout='wide'
+            />
+          </form.radioGroup>
+        {{else}}
+          <form.radioGroup
+            @name='types'
+            @selectedValue={{@model.type}}
+            as |radioGroup|
+          >
+            <radioGroup.card
+              @label={{t
+                (concat 'resources.credential-store.types.' @model.type)
+              }}
+              @helperText={{t
+                (concat 'resources.credential-store.help.' @model.type)
+              }}
+              @value={{@model.type}}
+              @layout='wide'
+              readonly={{true}}
+              @disabled={{true}}
+            />
+          </form.radioGroup>
+        {{/if}}
+      </:body>
+    </form.fieldset>
+  {{else}}
+    <form.fieldset>
+      <:title>{{t 'form.type.label'}}</:title>
+      <:body>
+        <form.radioGroup
+          @name='types'
+          @selectedValue={{@model.type}}
+          as |radioGroup|
+        >
+          <radioGroup.card
+            @label={{t
+              (concat 'resources.credential-store.types.' @model.type)
+            }}
+            @helperText={{t
+              (concat 'resources.credential-store.help.' @model.type)
+            }}
+            @value={{@model.type}}
+            @layout='wide'
+            readonly={{true}}
+            @disabled={{true}}
+          />
+        </form.radioGroup>
+      </:body>
+    </form.fieldset>
+  {{/if}}
+
+  <form.input
+    @name='address'
+    @type='text'
+    @value={{@model.address}}
+    @label={{t 'resources.credential-store.form.address.label'}}
+    @error={{@model.errors.address}}
+    @helperText={{t 'resources.credential-store.form.address.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.address}}
+      <field.errors as |errors|>
+        {{#each @model.errors.address as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.input
+    @name='token'
+    @type='text'
+    @value={{@model.token}}
+    @label={{t 'resources.credential-store.form.token.label'}}
+    @error={{@model.errors.token}}
+    @helperText={{t 'resources.credential-store.form.token.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.token}}
+      <field.errors as |errors|>
+        {{#each @model.errors.token as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  {{#unless @model.isNew}}
+    <form.input
+      @value={{@model.token_hmac}}
+      @label={{t 'resources.credential-store.form.token_hmac.label'}}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+  {{/unless}}
+
+  <form.input
+    @name='namespace'
+    @type='text'
+    @value={{@model.namespace}}
+    @label={{t 'resources.credential-store.form.namespace.label'}}
+    @error={{@model.errors.namespace}}
+    @helperText={{t 'resources.credential-store.form.namespace.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.namespace}}
+      <field.errors as |errors|>
+        {{#each @model.errors.namespace as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.input
+    @name='tls_server_name'
+    @type='text'
+    @value={{@model.tls_server_name}}
+    @label={{t 'resources.credential-store.form.tls_server_name.label'}}
+    @error={{@model.errors.tls_server_name}}
+    @helperText={{t 'resources.credential-store.form.tls_server_name.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.tls_server_name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.tls_server_name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.checkbox
+    @label={{t 'resources.credential-store.form.tls_skip_verify.label'}}
+    @helperText={{t 'resources.credential-store.form.tls_skip_verify.help'}}
+    @checked={{@model.tls_skip_verify}}
+    @onChange={{fn
+      (mut @model.tls_skip_verify)
+      (if @model.tls_skip_verify false true)
+    }}
+    @error={{@model.errors.tls_skip_verify}}
+    as |field|
+  >
+    {{#if @model.errors.tls_skip_verify}}
+      <field.errors as |errors|>
+        {{#each @model.errors.tls_skip_verify as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.checkbox>
+
+  <form.textarea
+    @name='client_certificate'
+    @type='text'
+    @value={{@model.client_certificate}}
+    @label={{t 'resources.credential-store.form.client_certificate.label'}}
+    @error={{@model.errors.client_certificate}}
+    @helperText={{t 'resources.credential-store.form.client_certificate.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.client_certificate}}
+      <field.errors as |errors|>
+        {{#each @model.errors.client_certificate as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.textarea
+    @name='client_certificate_key'
+    @type='text'
+    @value={{@model.client_certificate_key}}
+    @label={{t 'resources.credential-store.form.client_certificate_key.label'}}
+    @error={{@model.errors.client_certificate_key}}
+    @helperText={{t
+      'resources.credential-store.form.client_certificate_key.help'
+    }}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.client_certificate_key}}
+      <field.errors as |errors|>
+        {{#each @model.errors.client_certificate_key as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  {{#unless @model.isNew}}
+    <form.input
+      @value={{@model.client_certificate_key_hmac}}
+      @label={{t
+        'resources.credential-store.form.client_certificate_key_hmac.label'
+      }}
+      readonly={{true}}
+      @disabled={{true}}
+    />
+  {{/unless}}
+
+  <form.textarea
+    @name='ca_cert'
+    @type='text'
+    @value={{@model.ca_cert}}
+    @label={{t 'resources.credential-store.form.ca_cert.label'}}
+    @error={{@model.errors.ca_cert}}
+    @helperText={{t 'resources.credential-store.form.ca_cert.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.ca_cert}}
+      <field.errors as |errors|>
+        {{#each @model.errors.ca_cert as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @disabled={{if @model.cannotSave @model.cannotSave}}
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/controllers/scopes/scope/credential-stores/new.js b/ui/admin/app/controllers/scopes/scope/credential-stores/new.js
index 3f50abb13..41db0548b 100644
--- a/ui/admin/app/controllers/scopes/scope/credential-stores/new.js
+++ b/ui/admin/app/controllers/scopes/scope/credential-stores/new.js
@@ -7,7 +7,7 @@ export default class ScopesScopeCredentialStoresNewController extends Controller
   @service intl;
 
   // =attributes
-
+  queryParams = ['type'];
   /**
    * Breadcrumb for new route
    * @type {string}
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/new.js b/ui/admin/app/routes/scopes/scope/credential-stores/new.js
index e8bc7e431..80fc0e355 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/new.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/new.js
@@ -1,15 +1,51 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeCredentialStoresNewRoute extends Route {
+  // =services
+
+  @service router;
+  @service features;
+  // =attributes
+
+  queryParams = {
+    type: {
+      refreshModel: true,
+    },
+  };
+
   // =methods
   /**
    * Creates a new unsaved credential-store
+   * Also rollback/destroy any new, unsaved instances from this route before
+   * creating another, but reuse name/description if available.
    */
-  model() {
+  model({ type = 'static' }) {
     const scopeModel = this.modelFor('scopes.scope');
+    let name, description;
+    if (this.currentModel?.isNew) {
+      ({ name, description } = this.currentModel);
+      this.currentModel.rollbackAttributes();
+    }
+    //hide static type credential stores if the feature flag isn't enabled
+    if (!this.features.isEnabled('static-credentials')) {
+      type = 'vault';
+    }
     return this.store.createRecord('credential-store', {
-      type: 'vault',
+      type,
       scopeModel,
+      name,
+      description,
     });
   }
+
+  /**
+   * Update type of credential store
+   * @param {string} type
+   */
+  @action
+  changeType(type) {
+    this.router.replaceWith({ queryParams: { type } });
+  }
 }
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/new.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/new.hbs
index cb38701d9..f6d81d7ba 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/new.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/new.hbs
@@ -14,6 +14,7 @@
       @model={{@model}}
       @submit={{route-action 'save' @model}}
       @cancel={{route-action 'cancel' @model}}
+      @changeType={{route-action 'changeType'}}
     />
   </page.body>