Add proper cancel method

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

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>

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);

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) {});