From e3d5d5957101915a5f4b5d1bc8fa5c9eaafac279 Mon Sep 17 00:00:00 2001
From: Greg Hoin <ghoin@hashicorp.com>
Date: Mon, 9 Aug 2021 18:37:11 +0200
Subject: [PATCH] Add proper cancel method

---
 .../project-config-variables/list-item.ts     |  2 +-
 .../project-config-variables/list.hbs         |  8 +++--
 .../project-config-variables/list.ts          |  7 ++++
 .../project-config-variables-list-test.ts     | 32 ++++++++++++++++++-
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/project-config-variables/list-item.ts b/ui/app/components/project-config-variables/list-item.ts
index b8f1504e76f..44746a55c74 100644
--- a/ui/app/components/project-config-variables/list-item.ts
+++ b/ui/app/components/project-config-variables/list-item.ts
@@ -70,7 +70,7 @@ export default class ProjectConfigVariablesListItemComponent extends Component<V
   cancelCreate() {
     this.isCreating = false;
     this.isEditing = false;
-    this.deleteVariable(this.variable);
+    this.args.cancelCreate(this.variable);
   }
 
   @action
diff --git a/ui/app/components/project-config-variables/list.hbs b/ui/app/components/project-config-variables/list.hbs
index e6c0fbbf7ee..f2af1a68cab 100644
--- a/ui/app/components/project-config-variables/list.hbs
+++ b/ui/app/components/project-config-variables/list.hbs
@@ -7,8 +7,12 @@
       </div>
     </li>
     {{#each this.variablesList as |variable|}}
-      <ProjectConfigVariables::ListItem @variable={{variable}} @isEditing={{eq variable.name this.activeVariable.name}}
-        @isCreating={{this.isCreating}} @saveVariableSettings={{this.saveVariableSettings}}
+      <ProjectConfigVariables::ListItem
+        @variable={{variable}}
+        @isEditing={{eq variable.name this.activeVariable.name}}
+        @isCreating={{this.isCreating}}
+        @cancelCreate={{this.cancelCreate}}
+        @saveVariableSettings={{this.saveVariableSettings}}
         @deleteVariable={{this.deleteVariable}} />
     {{/each}}
   </ul>
diff --git a/ui/app/components/project-config-variables/list.ts b/ui/app/components/project-config-variables/list.ts
index ad242b0c7e5..def7d125072 100644
--- a/ui/app/components/project-config-variables/list.ts
+++ b/ui/app/components/project-config-variables/list.ts
@@ -29,6 +29,13 @@ export default class ProjectConfigVariablesListComponent extends Component<Proje
     this.isCreating = false;
   }
 
+  @action
+  cancelCreate(variable) {
+    this.variablesList.splice(0, 1);
+    this.variablesList = [...this.variablesList];
+    this.isCreating = false;
+  }
+
   @action
   async deleteVariable(variable) {
     await this.saveVariableSettings(variable, undefined, true);
diff --git a/ui/tests/integration/components/project-config-variables-list-test.ts b/ui/tests/integration/components/project-config-variables-list-test.ts
index b9f0d4edd8f..ceaba98cc57 100644
--- a/ui/tests/integration/components/project-config-variables-list-test.ts
+++ b/ui/tests/integration/components/project-config-variables-list-test.ts
@@ -27,16 +27,46 @@ module('Integration | Component | project-config-variables-list', function (hook
 
   test('it renders', async function (assert) {
     let dbproj = await this.server.create('project', { name: 'Proj1' });
+    let proj = dbproj.toProtobuf().toObject();
     let dbVariablesList = this.server.createList('config-variable', 10, 'random');
     let varList = dbVariablesList.map(v => {
       return v.toProtobuf().toObject();
     });
     this.set('variablesList', varList);
-    await render(hbs`<ProjectConfigVariables::List @variablesList={{this.variablesList}}/>`);
+    this.set('project', proj);
+    await render(
+      hbs`<ProjectConfigVariables::List @variablesList={{this.variablesList}} @project={{this.project}}/>`
+    );
     assert.dom('.variables-list').exists('The list renders');
     assert.equal(page.variablesList.length, 10, 'it renders: the list has the proper length');
   });
 
+  test('adding and deleting variables works', async function (assert) {
+    let dbproj = await this.server.create('project', { name: 'Proj1' });
+    let proj = dbproj.toProtobuf().toObject();
+    let dbVariablesList = this.server.createList('config-variable', 3, 'random');
+    let varList = dbVariablesList.map(v => {
+      return v.toProtobuf().toObject();
+    });
+    this.set('variablesList', varList);
+    this.set('project', proj);
+    await render(
+      hbs`<ProjectConfigVariables::List @variablesList={{this.variablesList}} @project={{this.project}}/>`
+    );
+
+    assert.dom('.variables-list').exists('The list renders');
+    assert.equal(page.variablesList.length, 3, 'the list contains all variables');
+    await page.createButton();
+    assert.ok(page.hasForm, 'Attempt to create: the form appears when the Add Variable button is clicked');
+    await page.cancelButton();
+    assert.notOk(page.hasForm, 'Attempt to create: the form is hidden after canceling');
+    assert.equal(
+      page.variablesList.length,
+      3,
+      'Attempt to create: the list still has the normal count of variables after cancelling'
+    );
+  });
+
   // test('only static variables are editable', async function (assert) {});
   // test('internal variables', async function (assert) {});
   // test('nameIsPath works', async function (assert) {});