diff --git a/ui/app/components/secure-variable-form.hbs b/ui/app/components/secure-variable-form.hbs index 2727e4718..f5275dca7 100644 --- a/ui/app/components/secure-variable-form.hbs +++ b/ui/app/components/secure-variable-form.hbs @@ -12,7 +12,8 @@ @type="text" @value={{@model.path}} placeholder="/path/to/variable" - class="input" + class="input path-input" + disabled={{not @model.isNew}} {{autofocus}} /> diff --git a/ui/app/styles/components/secure-variables.scss b/ui/app/styles/components/secure-variables.scss index 524735fd4..fcba9448d 100644 --- a/ui/app/styles/components/secure-variables.scss +++ b/ui/app/styles/components/secure-variables.scss @@ -2,6 +2,13 @@ & > div { margin-bottom: 1rem; } + + .path-input { + &:disabled { + background-color: #f5f5f5; + } + } + .key-value { display: grid; grid-template-columns: 1fr 4fr 130px; diff --git a/ui/tests/integration/components/secure-variable-form-test.js b/ui/tests/integration/components/secure-variable-form-test.js index 8549c0452..ca88650c8 100644 --- a/ui/tests/integration/components/secure-variable-form-test.js +++ b/ui/tests/integration/components/secure-variable-form-test.js @@ -144,4 +144,30 @@ module('Integration | Component | secure-variable-form', function (hooks) { ); }); }); + + test('Prevent editing path input on existing variables', async function (assert) { + assert.expect(3); + + const variable = await this.server.create('variable', { + name: 'foo', + namespace: 'bar', + path: '/baz/bat', + keyValues: [{ key: '', value: '' }], + }); + variable.isNew = false; + this.set('variable', variable); + await render(hbs``); + assert.dom('input.path-input').hasValue('/baz/bat', 'Path is set'); + assert + .dom('input.path-input') + .isDisabled('Existing variable is in disabled state'); + + variable.isNew = true; + variable.path = ''; + this.set('variable', variable); + await render(hbs``); + assert + .dom('input.path-input') + .isNotDisabled('New variable is not in disabled state'); + }); });