ui: Cope with service names that contain slashes (#4756)

ui-v2/app/adapters/service.js

@@ -1,15 +1,24 @@
 import Adapter from './application';
 import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/service';
 import { OK as HTTP_OK } from 'consul-ui/utils/http/status';
+const URL_PREFIX_SINGLE = 'health/service';
+const URL_PREFIX_MULTIPLE = 'internal/ui/services';
 export default Adapter.extend({
   urlForQuery: function(query, modelName) {
-    return this.appendURL('internal/ui/services', [], this.cleanQuery(query));
+    return this.appendURL(URL_PREFIX_MULTIPLE, [], this.cleanQuery(query));
   },
   urlForQueryRecord: function(query, modelName) {
     if (typeof query.id === 'undefined') {
       throw new Error('You must specify an id');
     }
-    return this.appendURL('health/service', [query.id], this.cleanQuery(query));
+    return this.appendURL(URL_PREFIX_SINGLE, [query.id], this.cleanQuery(query));
+  },
+  isQueryRecord: function(url, method) {
+    // services can have slashes in them
+    // so just check for the prefix which is
+    // unique to the url here
+    const parts = url.pathname.split('/');
+    return `${parts[2]}/${parts[3]}` === URL_PREFIX_SINGLE;
   },
   handleResponse: function(status, headers, payload, requestData) {
     let response = payload;

ui-v2/package.json

@@ -34,7 +34,7 @@
     ]
   },
   "devDependencies": {
-    "@hashicorp/consul-api-double": "^1.4.0",
+    "@hashicorp/consul-api-double": "^1.5.3",
     "@hashicorp/ember-cli-api-double": "^1.3.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",

ui-v2/tests/acceptance/dc/services/show-with-slashes.feature

@@ -0,0 +1,21 @@
+@setupApplicationTest
+Feature: dc / services / show-with-slashes: Show Service that has slashes in its name
+  In order to view services that have slashes in their name
+  As a user
+  I want to view the service in the service listing and click on it to see the service detail
+  Scenario: Given a service with slashes in its name
+    Given 1 datacenter model with the value "dc1"
+    And 1 node model
+    And 1 service model from yaml
+    ---
+    - Name: hashicorp/service/service-0
+    ---
+    When I visit the services page for yaml
+    ---
+      dc: dc1
+    ---
+    Then the url should be /dc1/services
+    Then I see 1 service model
+    And I click service on the services
+    Then the url should be /dc1/services/hashicorp/service/service-0
+

ui-v2/tests/acceptance/steps/dc/services/show-with-slashes-steps.js

@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}

ui-v2/yarn.lock

@@ -82,9 +82,9 @@
     faker "^4.1.0"
     js-yaml "^3.10.0"
 
-"@hashicorp/consul-api-double@^1.4.0":
+"@hashicorp/consul-api-double@^1.5.3":
-  version "1.5.1"
+  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.5.1.tgz#73ce7696dc4475f69a59462e6690611b73ec6ced"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.5.3.tgz#c797bd702c1c1f9c669b9df7f95126b3a76dd1c6"
 
 "@hashicorp/ember-cli-api-double@^1.3.0":
   version "1.6.1"