UI: fix config var renaming (#2421)

* delete renamed var after edition

Author: gregone

Diff for: .changelog/2421.txt

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

Diff for: 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;
   }

Diff for: 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[];

Diff for: 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'
+    );
+  });
 });