Fix async validation in catalog form

app/javascript/components/catalog-form/catalog-form.jsx

@@ -25,7 +25,7 @@ class CatalogForm extends Component {
           const rightValues = service_templates.resources.map(({ href, name }) => ({ key: href, label: name }));
           const options = resources.map(({ href, name }) => ({ key: href, label: name })).concat(rightValues);
           this.setState(() => ({
-            schema: createSchema(options),
+            schema: createSchema(options, catalogId),
             initialValues: {
               name,
               description: description === null ? undefined : description,
@@ -133,7 +133,7 @@ class CatalogForm extends Component {
 }
 
 CatalogForm.propTypes = {
-  catalogId: PropTypes.number,
+  catalogId: PropTypes.string,
 };
 
 CatalogForm.defaultProps = {

app/javascript/components/catalog-form/catalog-form.schema.js

@@ -2,28 +2,29 @@ import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import debouncePromise from '../../helpers/promise-debounce';
 import { API } from '../../http_api';
 
-export const asyncValidator = value => API.get(`/api/service_catalogs?expand=resources&filter[]=name=${value}`)
-  .then((json) => {
-    if (json.resources.length > 0) {
-      return __('Name has already been taken');
-    }
-    if (value === '' || value === undefined) {
-      return __("Name can't be blank");
-    }
-    return undefined;
-  });
+export const asyncValidator = (value, catalogId) =>
+  API.get(`/api/service_catalogs?expand=resources&filter[]=name='${value ? value.replace('%', '%25') : ''}'`)
+    .then((json) => {
+      if (json.resources.find(({ id, name }) => name === value && id !== catalogId)) {
+        return __('Name has already been taken');
+      }
+      if (value === '' || value === undefined) {
+        return __("Name can't be blank");
+      }
+      return undefined;
+    });
 
 const asyncValidatorDebounced = debouncePromise(asyncValidator);
 
-function createSchema(options) {
+function createSchema(options, catalogId) {
   const fields = [{
     component: componentTypes.SUB_FORM,
     title: __('Basic Info'),
     fields: [{
       component: componentTypes.TEXT_FIELD,
       name: 'name',
       validate: [
-        asyncValidatorDebounced,
+        value => asyncValidatorDebounced(value, catalogId),
       ],
       label: __('Name'),
       maxLength: 40,

app/javascript/helpers/promise-debounce.js

@@ -1,6 +1,6 @@
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 
-export default (asyncFunction, debounceTime = 250, options = undefined) => AwesomeDebouncePromise(
+export default (asyncFunction, debounceTime = 250, options = { onlyResolvesLast: false }) => AwesomeDebouncePromise(
   asyncFunction,
   debounceTime,
   options,

app/javascript/spec/catalog-form/catalog-form.spec.js

@@ -70,7 +70,7 @@ describe('Catalog form component', () => {
   it('should render edit variant form', (done) => {
     fetchMock.getOnce(urlFreeTemplates, { resources })
       .getOnce(urlTemplates, assignedResources);
-    const wrapper = shallow(<CatalogForm catalogId={1001} />);
+    const wrapper = shallow(<CatalogForm catalogId="1001" />);
 
     setImmediate(() => {
       wrapper.update();
@@ -82,7 +82,7 @@ describe('Catalog form component', () => {
   it('should call cancel callback ', (done) => {
     fetchMock.getOnce(urlFreeTemplates, { resources })
       .getOnce(urlTemplates, assignedResources);
-    const wrapper = mount(<CatalogForm catalogId={1001} />);
+    const wrapper = mount(<CatalogForm catalogId="1001" />);
     const url = '/catalog/st_catalog_edit/1001?button=cancel';
 
     setImmediate(() => {
@@ -113,7 +113,7 @@ describe('Catalog form component', () => {
     fetchMock
       .getOnce(urlFreeTemplates, { resources })
       .getOnce(urlTemplates, assignedResources);
-    const wrapper = mount(<CatalogForm catalogId={1001} />);
+    const wrapper = mount(<CatalogForm catalogId="1001" />);
 
     expect(submitSpyMiqSparkleOn).toHaveBeenCalled();
     expect(fetchMock.called(urlFreeTemplates)).toBe(true);
@@ -209,7 +209,7 @@ describe('Catalog form component', () => {
     fetchMock.getOnce('/api/service_catalogs/1001?expand=service_templates', {});
     fetchMock.postOnce(apiBase, returnObject);
 
-    const wrapper = mount(<CatalogForm catalogId={1001} />);
+    const wrapper = mount(<CatalogForm catalogId="1001" />);
     const spyHandleError = jest.spyOn(wrapper.instance(), 'handleError');
 
     wrapper.instance().setState({ originalRightValues: [] });
@@ -235,7 +235,7 @@ describe('Catalog form component', () => {
     fetchMock.post(`${apiBase}/service_templates`, {});
     fetchMock.get(urlTemplates, assignedResources);
 
-    const wrapper = mount(<CatalogForm catalogId={1001} />);
+    const wrapper = mount(<CatalogForm catalogId="1001" />);
 
     const values = {
       name: 'Some name',
@@ -262,7 +262,7 @@ describe('Catalog form component', () => {
     fetchMock.post(`${apiBase}/service_templates`, {});
     fetchMock.get(urlTemplates, assignedResources);
 
-    const wrapper = mount(<CatalogForm catalogId={1001} />);
+    const wrapper = mount(<CatalogForm catalogId="1001" />);
 
     const values = {
       name: 'Some name',
@@ -285,7 +285,7 @@ describe('Catalog form component', () => {
       const error = {
         data: { error: { message: 'This is some nice error' } },
       };
-      const wrapper = mount(<CatalogForm catalogId={1001} />);
+      const wrapper = mount(<CatalogForm catalogId="1001" />);
 
       expect(wrapper.instance().handleError(error)).toEqual(error.data.error.message);
     });
@@ -294,7 +294,7 @@ describe('Catalog form component', () => {
       const error = {
         data: { error: { message: 'Service catalog: Name has already been taken' } },
       };
-      const wrapper = mount(<CatalogForm catalogId={1001} />);
+      const wrapper = mount(<CatalogForm catalogId="1001" />);
 
       expect(wrapper.instance().handleError(error)).toEqual(__('Name has already been taken'));
     });

app/javascript/spec/catalog-form/validator.spec.js

@@ -8,28 +8,38 @@ describe('catalog form - promise validator', () => {
   });
 
   it('returns error message when name is taken', () => {
-    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=a1', {
+    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=%27a1%27', {
       resources: [
-        { name: 'a1' },
+        { name: 'a1', id: '1' },
       ],
     });
 
-    return asyncValidator('a1').then(data => expect(data).toEqual(__('Name has already been taken')));
+    return asyncValidator('a1', '2').then(data => expect(data).toEqual(__('Name has already been taken')));
+  });
+
+  it('returns nothing when name is taken but by the same catalog', () => {
+    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=%27a1%27', {
+      resources: [
+        { name: 'a1', id: '1'},
+      ],
+    });
+
+    return asyncValidator('a1', '1').then(data => expect(data).toEqual(undefined));
   });
 
   it('returns error message when name is undefined', () => {
-    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=undefined', {
+    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=%27%27', {
       resources: [],
     });
 
-    return asyncValidator(undefined).then(data => expect(data).toEqual(__("Name can't be blank")));
+    return asyncValidator(undefined, '1').then(data => expect(data).toEqual(__("Name can't be blank")));
   });
 
   it('returns nothing when passes', () => {
-    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=a1', {
+    fetchMock.getOnce('/api/service_catalogs?expand=resources&filter[]=name=%27a1%27', {
       resources: [],
     });
 
-    return asyncValidator('a1').then(data => expect(data).toEqual(undefined));
+    return asyncValidator('a1', '1').then(data => expect(data).toEqual(undefined));
   });
 });

app/views/catalog/_stcat_form.html.haml

@@ -1,3 +1,3 @@
 = render :partial => "layouts/flash_msg"
 .col-md-12
-  = react('CatalogForm', { :catalogId => @edit[:rec_id] || nil })
+  = react('CatalogForm', { :catalogId => @edit[:rec_id].to_s || nil })

package.json

@@ -21,8 +21,8 @@
   },
   "homepage": "https://github.com/ManageIQ/manageiq#readme",
   "dependencies": {
-    "@data-driven-forms/pf3-component-mapper": "^0.4.5",
-    "@data-driven-forms/react-form-renderer": "^1.9.3",
+    "@data-driven-forms/pf3-component-mapper": "^1.9.9",
+    "@data-driven-forms/react-form-renderer": "^1.9.9",
     "@manageiq/react-ui-components": "~0.11.9",
     "@manageiq/ui-components": "~1.2.2",
     "@pf3/select": "~1.12.6",