Disable path input when model is not new (#13273)

* Disable path input when model is not new

* isDisabled tests for secure variables path

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}}
           />
       </label>

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;

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`<SecureVariableForm @model={{this.variable}} />`);
+    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`<SecureVariableForm @model={{this.variable}} />`);
+    assert
+      .dom('input.path-input')
+      .isNotDisabled('New variable is not in disabled state');
+  });
 });