Add React component CopyCatalogForm

app/controllers/catalog_controller.rb

@@ -81,7 +81,11 @@ def servicetemplate_edit
   def servicetemplate_copy
     checked_id = find_checked_items.first || params[:id]
     @record = find_record_with_rbac(ServiceTemplate, checked_id)
-
+    @tabactive = false
+    @in_a_form = true
+    @edit = {}
+    session[:changed] = false
+    replace_right_cell(:action => "copy_catalog")
   end
 
   def atomic_st_edit
@@ -1972,7 +1976,7 @@ def replace_right_cell(options = {})
                 r[:partial => "stcat_form"]
               elsif action == "dialog_provision"
                 r[:partial => "shared/dialogs/dialog_provision", :locals => options[:dialog_locals]]
-              elsif %w[ot_add ot_copy ot_edit service_dialog_from_ot].include?(action)
+              elsif %w[ot_add ot_copy ot_edit service_dialog_from_ot copy_catalog].include?(action)
                 r[:partial => action]
               elsif record_showing
                 if TreeBuilder.get_model_for_prefix(@nodetype) == "MiqTemplate"
@@ -2009,7 +2013,7 @@ def replace_right_cell(options = {})
       presenter.show(:form_buttons_div).remove_paging
     elsif record_showing || @in_a_form || @sb[:buttons_node] ||
           (@pages && (@items_per_page == ONE_MILLION || @pages[:items] == 0))
-      if %w[button_edit group_edit group_reorder at_st_new st_new st_catalog_new st_catalog_edit].include?(action)
+      if %w[button_edit group_edit group_reorder at_st_new st_new st_catalog_new st_catalog_edit copy_catalog].include?(action)
         presenter.hide(:toolbar).show(:paging_div)
         # incase it was hidden for summary screen, and incase there were no records on show_list
         presenter.remove_paging

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

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import MiqFormRenderer from '../../forms/data-driven-form';
+import createSchema from './copy-catalog-form.schema';
+import { filterOptions, filterValues } from '../dual-list-select/helpers';
+import { API } from '../../http_api';
+
+class CopyCatalogForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoaded: true,
+    };
+  }
+
+  componentDidMount() {
+    this.setState(() => ({
+      schema: createSchema({}, nil),
+      initialValues: {
+        name: '',
+      },
+      isLoaded: true,
+    }));
+    debugger;
+  };
+
+  handleError = (error) => {
+    const { data: { error: { message } } } = error;
+    return message.includes('Name has already been taken') ? __('Name has already been taken') : message;
+  };
+
+  submitValues = () => {
+  };
+
+  render() {
+    const { catalogId } = this.props;
+    const { isLoaded, initialValues, schema } = this.state;
+    if (!isLoaded) return null;
+
+    return (
+      <Grid fluid>
+        <MiqFormRenderer
+          initialValues={initialValues}
+          schema={schema}
+          onSubmit={this.submitValues}
+          onCancel={() => miqAjaxButton('pepa')}
+          onReset={() => add_flash(__('All changes have been reset'), 'warn')}
+          canReset={true}
+          buttonsLabels={{
+            submitLabel: __('Add'),
+          }}
+        />
+      </Grid>
+    );
+  }
+}
+
+CopyCatalogForm.propTypes = {
+  catalogId: PropTypes.string,
+};
+
+CopyCatalogForm.defaultProps = {
+  catalogId: undefined,
+};
+
+export default CopyCatalogForm;

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

@@ -0,0 +1,39 @@
+import { componentTypes } from '@data-driven-forms/react-form-renderer';
+import debouncePromise from '../../helpers/promise-debounce';
+import { API } from '../../http_api';
+
+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, catalogId) {
+  const fields = [{
+    component: componentTypes.SUB_FORM,
+    title: __('Basic Info'),
+    fields: [{
+      component: componentTypes.TEXT_FIELD,
+      name: 'name',
+      validate: [
+        value => asyncValidatorDebounced(value, catalogId),
+      ],
+      label: __('Name'),
+      maxLength: 40,
+      autoFocus: true,
+      validateOnMount: true,
+    }],
+  }, {}];
+  debugger;
+  return { fields };
+}
+
+export default createSchema;

app/javascript/packs/component-definitions-common.js

@@ -8,6 +8,7 @@ import Breadcrumbs from '../components/breadcrumbs';
 import CatalogForm from '../components/catalog-form/catalog-form';
 import CloudNetworkForm from '../components/cloud-network-form/cloud-network-form';
 import CloudTenantForm from '../components/cloud-tenant-form/cloud-tenant-form';
+import CopyCatalogForm from '../components/copy-catalog-form/copy-catalog-form';
 import FlavorForm from '../components/flavor-form/flavor-form';
 import FormButtonsRedux from '../forms/form-buttons-redux';
 import GenericGroupWrapper from '../react/generic_group_wrapper';
@@ -33,6 +34,7 @@ ManageIQ.component.addReact('Breadcrumbs', Breadcrumbs);
 ManageIQ.component.addReact('CatalogForm', CatalogForm);
 ManageIQ.component.addReact('CloudNetworkForm', CloudNetworkForm);
 ManageIQ.component.addReact('CloudTenantForm', CloudTenantForm);
+ManageIQ.component.addReact('CopyCatalogForm', CopyCatalogForm);
 ManageIQ.component.addReact('FlavorForm', FlavorForm);
 ManageIQ.component.addReact('FormButtonsRedux', FormButtonsRedux);
 ManageIQ.component.addReact('GenericGroup', GenericGroup);

config/routes.rb

@@ -283,6 +283,7 @@
     :catalog                  => {
       :get  => %w(
         catalog_item_form_fields
+        copy_catalog
         download_data
         explorer
         ot_edit