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');
+ });
});