js: fixed team name validation behaviour

Previously the inline validation was being done only over the scoped
teams current user had access too without their hidden team.

This way when the user tried to create a team with their own hidden name
or another user's name, an error happened.

With this patch the error appears inline as we expect from validation.

I also changed the polyfills syntax import.

app/assets/javascripts/modules/teams/components/new-form.js

@@ -40,7 +40,7 @@ export default {
         Alert.show(`Team '${team.name}' was created successfully`);
         EventBus.$emit('teamCreated', team);
       }).catch((response) => {
-        let errors = response.data;
+        let errors = response.data.errors || response.data.error;
 
         if (Array.isArray(errors)) {
           errors = errors.join('<br />');
@@ -65,7 +65,7 @@ export default {
 
           return new Promise((resolve) => {
             const searchTeam = () => {
-              const promise = TeamsService.exists(value);
+              const promise = TeamsService.exists(value, { unscoped: true });
 
               promise.then((exists) => {
                 // leave it for the back-end

app/assets/javascripts/modules/teams/service.js

@@ -10,7 +10,7 @@ const customActions = {
   },
 };
 
-const resource = Vue.resource('api/v1/teams{/id}', {}, customActions);
+const resource = Vue.resource('api/v1/teams{/id}{?hidden}', {}, customActions);
 
 function all(params = {}) {
   return resource.get({}, params);
@@ -24,12 +24,14 @@ function save(team) {
   return resource.save({}, team);
 }
 
-function searchTeam(teamName) {
-  return resource.teamTypeahead({ teamName });
+function searchTeam(teamName, options = {}) {
+  const params = Object.assign({ teamName }, options);
+
+  return resource.teamTypeahead(params);
 }
 
-function exists(value) {
-  return searchTeam(value)
+function exists(value, options) {
+  return searchTeam(value, options)
     .then((response) => {
       const collection = response.data;
 

app/assets/javascripts/polyfill.js

@@ -1,3 +1,4 @@
-require('core-js/fn/array/some');
-require('core-js/fn/array/from');
-require('core-js/fn/array/find-index');
+import 'core-js/fn/array/some';
+import 'core-js/fn/array/from';
+import 'core-js/fn/array/find-index';
+import 'core-js/fn/object/assign';

app/controllers/teams_controller.rb

@@ -52,7 +52,8 @@ def typeahead
   # GET /teams/typeahead/%QUERY
   def all_with_query
     query = "#{params[:query]}%"
-    teams = policy_scope(Team).where("name LIKE ?", query).pluck(:name)
+    teams = params[:unscoped] == "true" ? Team.all : policy_scope(Team)
+    teams = teams.where("name LIKE ?", query).pluck(:name)
     matches = teams.map { |t| { name: ActionController::Base.helpers.sanitize(t) } }
     respond_to do |format|
       format.json { render json: matches.to_json }

app/views/teams/components/_form.html.slim

@@ -8,7 +8,7 @@ div ref="form" class="collapse"
           span v-if="!$v.team.name.required"
             | Name can't be blank
           span v-if="!$v.team.name.available"
-            | Name has already been taken
+            | Name is reserved or has already been taken
     .form-group
       = f.label :description, {class: 'control-label col-md-2'}
       .col-md-7

spec/features/teams_spec.rb

@@ -32,7 +32,7 @@
       fill_in "Name", with: Team.last.name
       wait_for_ajax
 
-      expect(page).to have_content("Name has already been taken")
+      expect(page).to have_content("Name is reserved or has already been taken")
       expect(page).to have_button("Add", disabled: true)
     end