Notify a user if they try to make a variable with an existing path (#13278)

* Notify a user if they try to make a variable with an existing path

* Stylize error fade

* Bugfix: if you click the dupe link to a variable you havent previously loaded, you lack its keyvalues

* rename and typefix for duplicate path warning

ui/app/components/secure-variable-form.hbs

@@ -12,11 +12,19 @@
           @type="text"
           @value={{@model.path}}
           placeholder="/path/to/variable"
-          class="input path-input"
+          class="input path-input {{if this.duplicatePathWarning "error"}}"
           disabled={{not @model.isNew}}
+          {{on "input" this.validatePath}}
           {{autofocus}}
           />
       </label>
+      {{#if this.duplicatePathWarning}}
+        <p class="duplicate-path-error help is-danger">
+          There is already a Secure Variable located at {{@model.path}}.
+          <br />
+          Please choose a different path, or <LinkTo @route="variables.variable.edit" @model={{this.duplicatePathWarning.path}}>edit the existing Secure Variable</LinkTo>.
+        </p>
+      {{/if}}
     </div>
     {{#each @model.keyValues as |entry iter|}}
     <div class="key-value">

ui/app/components/secure-variable-form.js

@@ -1,13 +1,28 @@
+// @ts-check
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { trimPath } from '../helpers/trim-path';
+
 export default class SecureVariableFormComponent extends Component {
   @service router;
+  @service store;
 
   @tracked
   shouldHideValues = true;
 
+  /**
+   * @typedef {Object} DuplicatePathWarning
+   * @property {string} path
+   */
+
+  /**
+   * @type {DuplicatePathWarning}
+   */
+  @tracked duplicatePathWarning = null;
+
   get valueFieldType() {
     return this.shouldHideValues ? 'password' : 'text';
   }
@@ -16,6 +31,22 @@ export default class SecureVariableFormComponent extends Component {
     return !this.args.model?.path;
   }
 
+  @action
+  validatePath(e) {
+    const value = trimPath([e.target.value]);
+    let existingVariable = this.store
+      .peekAll('variable')
+      .without(this.args.model)
+      .find((v) => v.path === value);
+    if (existingVariable) {
+      this.duplicatePathWarning = {
+        path: existingVariable.path,
+      };
+    } else {
+      this.duplicatePathWarning = null;
+    }
+  }
+
   @action
   toggleShowHide() {
     this.shouldHideValues = !this.shouldHideValues;

ui/app/routes/variables/variable/edit.js

@@ -1,3 +1,7 @@
 import Route from '@ember/routing/route';
 
-export default class VariablesVariableEditRoute extends Route {}
+export default class VariablesVariableEditRoute extends Route {
+  model() {
+    return this.modelFor('variables.variable');
+  }
+}

ui/app/styles/components/secure-variables.scss

@@ -7,6 +7,15 @@
     &:disabled {
       background-color: #f5f5f5;
     }
+    &.error {
+      color: $red;
+      border-color: $red;
+    }
+  }
+
+  .duplicate-path-error {
+    position: relative;
+    animation: slide-in 0.3s ease-out;
   }
 
   .key-value {
@@ -45,3 +54,15 @@ table.path-tree {
     }
   }
 }
+
+@keyframes slide-in {
+  0% {
+    top: 10px;
+    opacity: 0;
+  }
+
+  100% {
+    top: 0px;
+    opacity: 1;
+  }
+}

ui/app/templates/variables/variable/edit.hbs

@@ -1,5 +1,2 @@
 {{page-title "Edit Secure Variable"}}
-
-<section class="section">
-  <SecureVariableForm @model={{this.model}} />
-</section>
+<SecureVariableForm @model={{this.model}} />