UI: fix config var renaming (#2421)

* delete renamed var after edition

.changelog/2421.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixed config variable duplication when renaming 
+```

ui/app/components/project-config-variables/list-item.ts

@@ -1,10 +1,11 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { ConfigVar, Project } from 'waypoint-pb';
-import { inject as service } from '@ember/service';
+
 import ApiService from 'waypoint/services/api';
+import Component from '@glimmer/component';
 import FlashMessagesService from 'waypoint/services/pds-flash-messages';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 interface VariableArgs {
  variable: ConfigVar.AsObject;
@@ -60,7 +61,13 @@ export default class ProjectConfigVariablesListItemComponent extends Component<V
  this.flashMessages.error('Variable keys or values can not be empty');
  return;
  }
- await this.args.saveVariableSettings(this.variable, false);
+ if (this.initialVariable.name !== this.variable.name) {
+ await this.args.saveVariableSettings(this.variable, false);
+ await this.args.deleteVariable(this.initialVariable);
+ this.storeInitialVariable();
+ } else {
+ await this.args.saveVariableSettings(this.variable, false);
+ }
  this.isCreating = false;
  this.isEditing = false;
  }

ui/app/components/project-config-variables/list.ts

@@ -1,11 +1,12 @@
+import { ConfigGetRequest, ConfigSetRequest, ConfigVar, Project, Ref } from 'waypoint-pb';
+
+import ApiService from 'waypoint/services/api';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { ConfigSetRequest, ConfigGetRequest, ConfigVar, Project, Ref } from 'waypoint-pb';
 import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
-import { inject as service } from '@ember/service';
-import ApiService from 'waypoint/services/api';
 import FlashMessagesService from 'waypoint/services/pds-flash-messages';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 interface ProjectConfigArgs {
  variablesList: ConfigVar.AsObject[];

ui/tests/integration/components/project-config-variables-list-test.ts

@@ -1,10 +1,11 @@
+import { clickable, collection, create, fillable, isPresent, text } from 'ember-cli-page-object';
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { setupMirage } from 'ember-cli-mirage/test-support';
-import { render, settled } from '@ember/test-helpers';
+import { pauseTest, render, settled } from '@ember/test-helpers';
+
 import { TestContext } from 'ember-test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import { create, collection, clickable, isPresent, fillable, text } from 'ember-cli-page-object';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { setupRenderingTest } from 'ember-qunit';
 
 const page = create({
  hasForm: isPresent('[data-test-config-variables-form]'),
@@ -113,4 +114,33 @@ module('Integration | Component | project-config-variables-list', function (hook
  assert.ok(page.variablesList.objectAt(0).hasDropDownEdit, 'Static Variable is editable');
  assert.notOk(page.variablesList.objectAt(3).hasDropDown, 'Dynamic Variable is not editable or deletable');
  });
+
+ test('renaming 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', { project: dbproj });
+ let dynamicVar = this.server.create('config-variable', 'dynamic', { project: dbproj });
+ dbVariablesList.push(dynamicVar);
+ 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.equal(page.variablesList.length, 4, 'the list contains the right number of variables');
+ await page.variablesList.objectAt(0).dropdown();
+ await page.variablesList.objectAt(0).dropdownEdit();
+ await page.varName('edited_var_name');
+ await page.saveButton();
+ // Necessary to wait for the next request after save
+ await settled();
+ await page.variablesList.objectAt(1).dropdown();
+ assert.equal(
+ page.variablesList.length,
+ 4,
+ 'the list contains the right number of variables after name edition'
+ );
+ });
 });