Ui search select fix (#7338) (#7353)

* guard against options and model not being defined * add test for select with no options
hashicorp · Aug 22, 2019 · 4a72b40 · 4a72b40
1 parent bf334e3
commit 4a72b40
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/ui/app/components/identity/edit-form.js b/ui/app/components/identity/edit-form.js
@@ -20,8 +20,7 @@ export default Component.extend({
   onSave: () => {},
 
   cancelLink: computed('mode', 'model.identityType', function() {
-    let { model, mode } = this.getProperties('model', 'mode');
-    let key = `${mode}-${model.get('identityType')}`;
+    let { model, mode } = this;
     let routes = {
       'create-entity': 'vault.cluster.access.identity',
       'edit-entity': 'vault.cluster.access.identity.show',
@@ -33,25 +32,25 @@ export default Component.extend({
       'create-group-alias': 'vault.cluster.access.identity.aliases',
       'edit-group-alias': 'vault.cluster.access.identity.aliases.show',
     };
-
+    let key = model ? `${mode}-${model.identityType}` : 'merge-entity-alias';
     return routes[key];
   }),
 
   getMessage(model, isDelete = false) {
-    let mode = this.get('mode');
-    let typeDisplay = humanize([model.get('identityType')]);
+    let mode = this.mode;
+    let typeDisplay = humanize([model.identityType]);
     let action = isDelete ? 'deleted' : 'saved';
     if (mode === 'merge') {
       return 'Successfully merged entities';
     }
-    if (model.get('id')) {
+    if (model.id) {
       return `Successfully ${action} ${typeDisplay} ${model.id}.`;
     }
     return `Successfully ${action} ${typeDisplay}.`;
   },
 
   save: task(function*() {
-    let model = this.get('model');
+    let model = this.model;
     let message = this.getMessage(model);
 
     try {
@@ -67,7 +66,8 @@ export default Component.extend({
     .withTestWaiter(),
 
   willDestroy() {
-    let model = this.get('model');
+    let model = this.model;
+    if (!model) return;
     if ((model.get('isDirty') && !model.isDestroyed) || !model.isDestroying) {
       model.rollbackAttributes();
     }

diff --git a/ui/app/components/search-select.js b/ui/app/components/search-select.js
@@ -129,7 +129,7 @@ export default Component.extend({
       return `Add new ${singularize(this.label)}: ${id}`;
     },
     hideCreateOptionOnSameID(id) {
-      let existingOption = this.options.findBy('id', id) || this.options.findBy('name', id);
+      let existingOption = this.options && (this.options.findBy('id', id) || this.options.findBy('name', id));
       return !existingOption;
     },
   },

diff --git a/ui/tests/integration/components/search-select-test.js b/ui/tests/integration/components/search-select-test.js
@@ -173,6 +173,18 @@ module('Integration | Component | search select', function(hooks) {
     assert.equal(component.options.objectAt(0).text, 'Type to search', 'text of option shows Type to search');
   });
 
+  test('it shows add suggestion if there are no options', async function(assert) {
+    const models = [];
+    this.set('models', models);
+    this.set('onChange', sinon.spy());
+    await render(
+      hbs`{{search-select label="foo" inputValue=inputValue models=models fallbackComponent="string-list" onChange=onChange}}`
+    );
+    await clickTrigger();
+
+    await typeInSearch('new item');
+    assert.equal(component.options.objectAt(0).text, 'Add new foo: new item', 'shows the create suggestion');
+  });
   test('it shows items not in the returned response', async function(assert) {
     const models = ['test'];
     this.set('models', models);