ui: [Backport] Backport of #11095 to 1.8.x

.changelog/11102.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: **(Enterprise Only)** Fixes a visual issue where namespaces would "double up" in the Source/Destination select menu when creating/editing intentions
+```

ui-v2/app/components/consul-intention-form/index.js

@@ -72,7 +72,7 @@ export default Component.extend({
     change: function(e, form, item) {
       const target = e.target;
 
-      let name, selected, match;
+      let name, selected;
       switch (target.name) {
         case 'SourceName':
         case 'DestinationName':
@@ -93,21 +93,24 @@ export default Component.extend({
           // basically the difference between
           // `item.DestinationName` and just `DestinationName`
           // see if the name is already in the list
-          match = this.services.filterBy('Name', name);
-          if (match.length === 0) {
-            // if its not make a new 'fake' Service that doesn't exist yet
-            // and add it to the possible services to make an intention between
-            selected = { Name: name };
-            switch (target.name) {
-              case 'SourceName':
-              case 'DestinationName':
+
+          // if its not make a new 'fake' Service that doesn't exist yet
+          // and add it to the possible services to make an intention between
+          switch (target.name) {
+            case 'SourceName':
+            case 'DestinationName':
+              if (this.services.filterBy('Name', name).length === 0) {
+                selected = { Name: name };
                 set(this, 'services', [selected].concat(this.services.toArray()));
-                break;
-              case 'SourceNS':
-              case 'DestinationNS':
+              }
+              break;
+            case 'SourceNS':
+            case 'DestinationNS':
+              if (this.nspaces.filterBy('Name', name).length === 0) {
+                selected = { Name: name };
                 set(this, 'nspaces', [selected].concat(this.nspaces.toArray()));
-                break;
-            }
+              }
+              break;
           }
           set(this, target.name, selected);
           break;

ui-v2/tests/acceptance/dc/intentions/create.feature

@@ -3,7 +3,64 @@ Feature: dc / intentions / create: Intention Create
   In order to define intentions
   As a user
   I want to visit the intention create page, fill in the form and hit the create button and see a success notification
-  Scenario:
+  @onlyNamespaceable
+  Scenario: with namespaces enabled
+    Given 1 datacenter model with the value "datacenter"
+    And 3 service models from yaml
+    ---
+    - Name: web
+      Kind: ~
+    - Name: db
+      Kind: ~
+    - Name: cache
+      Kind: ~
+    ---
+    And 1 nspace model from yaml
+    ---
+    - Name: nspace-0
+    ---
+    When I visit the intention page for yaml
+    ---
+      dc: datacenter
+    ---
+    Then the url should be /datacenter/intentions/create
+    And the title should be "New Intention - Consul"
+    # Set source
+    And I click "[data-test-source-element] .ember-power-select-trigger"
+    And I type "web" into ".ember-power-select-search-input"
+    And I click ".ember-power-select-option:first-child"
+    Then I see the text "web" in "[data-test-source-element] .ember-power-select-selected-item"
+    # Set destination
+    And I click "[data-test-destination-element] .ember-power-select-trigger"
+    And I type "db" into ".ember-power-select-search-input"
+    And I click ".ember-power-select-option:first-child"
+    Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item"
+    # Set source nspace
+    And I click "[data-test-source-nspace] .ember-power-select-trigger"
+    And I click ".ember-power-select-option:nth-child(3)"
+    Then I see the text "nspace-0" in "[data-test-source-nspace] .ember-power-select-selected-item"
+    # Set destination nspace
+    And I click "[data-test-destination-nspace] .ember-power-select-trigger"
+    And I click ".ember-power-select-option:nth-child(3)"
+    Then I see the text "nspace-0" in "[data-test-destination-nspace] .ember-power-select-selected-item"
+    # Specifically set deny
+    And I click "[value=deny]"
+    And I submit
+    Then a POST request was made to "/v1/connect/intentions?dc=datacenter" from yaml
+    ---
+      body:
+        SourceName: web
+        DestinationName: db
+        SourceNS: nspace-0
+        DestinationNS: nspace-0
+        Action: deny
+    ---
+    Then the url should be /datacenter/intentions
+    And the title should be "Intentions - Consul"
+    And "[data-notification]" has the "notification-update" class
+    And "[data-notification]" has the "success" class
+  @notNamespaceable
+  Scenario: with namespaces disabled
     Given 1 datacenter model with the value "datacenter"
     And 3 service models from yaml
     ---

ui-v2/tests/acceptance/dc/intentions/filtered-select.feature

@@ -16,21 +16,51 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
     - Name: service-3
       Kind: connect-proxy
     ---
-    And 1 intention model from yaml
-    ---
-    SourceName: 'service-0'
-    DestinationName: 'service-1'
-    ---
     When I visit the intention page for yaml
     ---
       dc: datacenter
-      intention: intention
     ---
-    Then the url should be /datacenter/intentions/intention
+    Then the url should be /datacenter/intentions/create
     And I click "[data-test-[Name]-element] .ember-power-select-trigger"
     Then I see the text "* (All Services)" in ".ember-power-select-option:nth-last-child(3)"
     Then I see the text "service-0" in ".ember-power-select-option:nth-last-child(2)"
     Then I see the text "service-1" in ".ember-power-select-option:last-child"
+    Where:
+      ---------------
+      | Name        |
+      | source      |
+      | destination |
+    ---------------
+  @onlyNamespaceable
+  Scenario: Opening and closing the nspace [Name] dropdown doesn't double up items
+    Given 1 datacenter model with the value "datacenter"
+    And 2 nspace models from yaml
+    ---
+    - Name: nspace-0
+    - Name: nspace-1
+    ---
+    When I visit the intention page for yaml
+    ---
+      dc: datacenter
+    ---
+    Then the url should be /datacenter/intentions/create
+    Given a network latency of 60000
+    And I click "[data-test-[Name]-nspace] .ember-power-select-trigger"
+    Then I see the text "* (All Namespaces)" in ".ember-power-select-option:nth-last-child(3)"
+    Then I see the text "nspace-0" in ".ember-power-select-option:nth-last-child(2)"
+    Then I see the text "nspace-1" in ".ember-power-select-option:last-child"
+    And I click ".ember-power-select-option:last-child"
+    And I click "[data-test-[Name]-nspace] .ember-power-select-trigger"
+    And I click ".ember-power-select-option:last-child"
+    And I click "[data-test-[Name]-nspace] .ember-power-select-trigger"
+    And I click ".ember-power-select-option:last-child"
+    And I click "[data-test-[Name]-nspace] .ember-power-select-trigger"
+    Then I don't see the text "nspace-1" in ".ember-power-select-option:nth-last-child(6)"
+    Then I don't see the text "nspace-1" in ".ember-power-select-option:nth-last-child(5)"
+    Then I don't see the text "nspace-1" in ".ember-power-select-option:nth-last-child(4)"
+    Then I see the text "* (All Namespaces)" in ".ember-power-select-option:nth-last-child(3)"
+    Then I see the text "nspace-0" in ".ember-power-select-option:nth-last-child(2)"
+    Then I see the text "nspace-1" in ".ember-power-select-option:last-child"
     Where:
       ---------------
       | Name        |
@@ -47,17 +77,11 @@ Feature: dc / intentions / filtered-select: Intention Service Select Dropdowns
       Namespace: nspace
       Kind: ~
     ---
-    And 1 intention model from yaml
-    ---
-    SourceName: 'service-0'
-    DestinationName: 'service-0'
-    ---
     When I visit the intention page for yaml
     ---
       dc: datacenter
-      intention: intention
     ---
-    Then the url should be /datacenter/intentions/intention
+    Then the url should be /datacenter/intentions/create
     And I click "[data-test-[Name]-element] .ember-power-select-trigger"
     Then I see the text "* (All Services)" in ".ember-power-select-option:nth-last-child(2)"
     Then I see the text "service-0" in ".ember-power-select-option:last-child"

ui-v2/tests/steps/assertions/dom.js

@@ -1,3 +1,4 @@
+const dont = `( don't| shouldn't| can't)?`;
 export default function(scenario, assert, pauseUntil, find, currentURL, clipboard) {
   scenario
     .then('pause until I see the text "$text" in "$selector"', function(text, selector) {
@@ -13,11 +14,11 @@ export default function(scenario, assert, pauseUntil, find, currentURL, clipboar
         return retry();
       }, `Expected to see "${text}" in "${selector}"`);
     })
-    .then(['I see the text "$text" in "$selector"'], function(text, selector) {
-      const textContent = find(selector).textContent;
-      assert.ok(
+    .then([`I${dont} see the text "$text" in "$selector"`], function(negative, text, selector) {
+      const textContent = (find(selector) || { textContent: '' }).textContent;
+      assert[negative ? 'notOk' : 'ok'](
         textContent.indexOf(text) !== -1,
-        `Expected to see "${text}" in "${selector}", was "${textContent}"`
+        `Expected${negative ? ' not' : ''} to see "${text}" in "${selector}", was "${textContent}"`
       );
     })
     .then(['I copied "$text"'], function(text) {