Converts schema edit page to react

Author: elsamaryv

app/controllers/miq_ae_class_controller.rb

@@ -501,6 +501,7 @@ def edit_fields
     @in_a_form = true
     @in_a_form_fields = true
     session[:changed] = @changed = false
+    @hide_bottom_bar = true
     replace_right_cell
   end
 
@@ -881,19 +882,11 @@ def fields_form_field_changed
 
     fields_get_form_vars
     @changed = (@edit[:new] != @edit[:current])
-    render :update do |page|
-      page << javascript_prologue
       unless %w[up down].include?(params[:button])
         if params[:field_datatype] == "password"
-          page << javascript_hide("field_default_value")
-          page << javascript_show("field_password_value")
-          page << "$('#field_password_value').val('');"
           session[:field_data][:default_value] =
             @edit[:new_field][:default_value] = ''
         elsif params[:field_datatype]
-          page << javascript_hide("field_password_value")
-          page << javascript_show("field_default_value")
-          page << "$('#field_default_value').val('');"
           session[:field_data][:default_value] =
             @edit[:new_field][:default_value] = ''
         end
@@ -904,19 +897,12 @@ def fields_form_field_changed
           def_field = "fields_default_value_" << f[1].to_s
           pwd_field = "fields_password_value_" << f[1].to_s
           if @edit[:new][:fields][f[1].to_i]['datatype'] == "password"
-            page << javascript_hide(def_field)
-            page << javascript_show(pwd_field)
-            page << "$('##{pwd_field}').val('');"
           else
-            page << javascript_hide(pwd_field)
-            page << javascript_show(def_field)
-            page << "$('##{def_field}').val('');"
           end
           @edit[:new][:fields][f[1].to_i]['default_value'] = nil
         end
       end
-      page << javascript_for_miq_button_visibility_changed(@changed)
-    end
+    render :json => {:message => 'Field updated successfully'}, :status => 200
   end
 
   # AJAX driven routine to check for changes in ANY field on the form
@@ -1140,13 +1126,12 @@ def update_fields
     return unless load_edit("aefields_edit__#{params[:id]}", "replace_cell__explorer")
 
     fields_get_form_vars
-    @changed = (@edit[:new] != @edit[:current])
     case params[:button]
     when "cancel"
       @sb[:action] = session[:edit] = nil # clean out the saved info
-      add_flash(_("Edit of schema for Automate Class \"%{name}\" was cancelled by the user") % {:name => @ae_class.name})
       @in_a_form = false
-      replace_right_cell
+      message = _("Edit of schema for Automate Class \"%{name}\" was cancelled by the user") % {:name => @ae_class.name}
+      render :json => {:status => 200, :message => message}
     when "save"
       ae_class = find_record_with_rbac(MiqAeClass, params[:id])
       begin
@@ -1157,27 +1142,26 @@ def update_fields
           ae_class.save!
         end
       rescue StandardError => bang
-        add_flash(_("Error during 'save': %{error_message}") % {:error_message => bang.message}, :error)
         session[:changed] = @changed = true
-        javascript_flash
+        error_message = _("Error during 'save': %{error_message}") % {:error_message => bang.message}, :error
+        render :json => {:status => 500, :error => error_message}
       else
-        add_flash(_("Schema for Automate Class \"%{name}\" was saved") % {:name => ae_class.name})
         AuditEvent.success(build_saved_audit(ae_class, @edit))
         @sb[:action] = session[:edit] = nil # clean out the saved info
-        @in_a_form = false
-        replace_right_cell(:replace_trees => [:ae])
-        nil
+        success_message = _("Schema for Automate Class \"%{name}\" was saved") % {:name => ae_class.name}
+        render :json => {:status => 200, :message => success_message}
       end
     when "reset"
       fields_set_form_vars
-      session[:changed] = @changed = false
+      session[:changed] = false
       add_flash(_("All changes have been reset"), :warning)
       @button = "reset"
       @in_a_form = true
-      replace_right_cell
+      success_message = _("All changes have been reset")
+      render :json => {:status => 200, :message => success_message}
     else
       @changed = session[:changed] = (@edit[:new] != @edit[:current])
-      replace_right_cell(:replace_trees => [:ae])
+      render :json => {:status => 200}
     end
   end
 
@@ -1440,53 +1424,32 @@ def create_namespace
   def field_select
     assert_privileges('miq_ae_field_edit')
     fields_get_form_vars
-    @combo_xml = build_type_options
-    @dtype_combo_xml = build_dtype_options
     session[:field_data] = {}
     @edit[:new_field][:substitute] = session[:field_data][:substitute] = true
-    @changed = (@edit[:new] != @edit[:current])
-    render :update do |page|
-      page << javascript_prologue
-      page.replace("class_fields_div", :partial => "class_fields")
-      page << javascript_for_miq_button_visibility(@changed)
-      page << "miqSparkle(false);"
-    end
+    render :json => {:status => 200}
   end
 
   # AJAX driven routine to select a classification entry
   def field_accept
     assert_privileges('miq_ae_field_edit')
     fields_get_form_vars
     @changed = (@edit[:new] != @edit[:current])
-    @combo_xml = build_type_options
-    @dtype_combo_xml = build_dtype_options
-    render :update do |page|
-      page << javascript_prologue
-      page.replace("class_fields_div", :partial => "class_fields")
-      page << javascript_for_miq_button_visibility(@changed)
-      page << "miqSparkle(false);"
-    end
+    render :json => {
+      :message => 'Accepted',
+      :status => 200,
+    }
   end
 
   # AJAX driven routine to delete a classification entry
   def field_delete
     assert_privileges('miq_ae_field_edit')
     fields_get_form_vars
-    @combo_xml       = build_type_options
-    @dtype_combo_xml = build_dtype_options
 
     if params.key?(:id) && @edit[:fields_to_delete].exclude?(params[:id])
       @edit[:fields_to_delete].push(params[:id])
     end
-
     @edit[:new][:fields].delete_at(params[:arr_id].to_i)
-    @changed = (@edit[:new] != @edit[:current])
-    render :update do |page|
-      page << javascript_prologue
-      page.replace("class_fields_div", :partial => "class_fields")
-      page << javascript_for_miq_button_visibility(@changed)
-      page << "miqSparkle(false);"
-    end
+    render :json => {:status => 200}
   end
 
   # AJAX driven routine to select a classification entry
@@ -2352,12 +2315,11 @@ def fields_get_form_vars
     if params[:item].blank? && !%w[accept save].include?(params[:button]) && params["action"] != "field_delete"
       field_data = session[:field_data]
       new_field = @edit[:new_field]
-
       field_attributes.each do |field|
         field_name = "field_#{field}".to_sym
         field_sym = field.to_sym
         if field == "substitute"
-          field_data[field_sym] = new_field[field_sym] = params[field_name] == "1" if params[field_name]
+          field_data[field_sym] = new_field[field_sym] = params[field_name] if params.key?(field_name)
         elsif params[field_name]
           field_data[field_sym] = new_field[field_sym] = params[field_name]
         end
@@ -2376,7 +2338,7 @@ def fields_get_form_vars
         field_attributes.each do |field|
           field_name = "fields_#{field}_#{i}"
           if field == "substitute"
-            fld[field] = params[field_name] == "1" if params[field_name]
+            fld[field] = params[field_name] if params.key?(field_name)
           elsif %w[aetype datatype].include?(field)
             var_name = "fields_#{field}#{i}"
             fld[field] = params[var_name.to_sym] if params[var_name.to_sym]
@@ -2389,18 +2351,17 @@ def fields_get_form_vars
         end
       end
     elsif params[:button] == "accept"
-      if session[:field_data][:name].blank? || session[:field_data][:aetype].blank?
-        field = session[:field_data][:name].blank? ? "Name" : "Type"
-        field += " and Type" if field == "Name" && session[:field_data][:aetype].blank?
+      if params[:name].blank? || params[:aetype].blank?
+        field = params[:name].blank? ? "Name" : "Type"
+        field += " and Type" if field == "Name" && params[:aetype].blank?
         add_flash(_("%{field} is required") % {:field => field}, :error)
         return
       end
       new_fields = {}
       field_attributes.each do |field_attribute|
-        new_fields[field_attribute] = @edit[:new_field][field_attribute.to_sym]
+        new_fields[field_attribute] = params[field_attribute.to_sym]
       end
       @edit[:new][:fields].push(new_fields)
-      @edit[:new_field] = session[:field_data] = {}
     end
   end
 

app/helpers/miq_ae_class_helper.rb

@@ -249,7 +249,7 @@ def schema_data(schema_data)
           cells.push({:text => ae_field.send(fname)})
         end
       end
-      push_data({:id => index.to_s, :clickable => false, :cells => cells})
+      push_data({:id => index.to_s, :field_id => ae_field.id, :clickable => false, :cells => cells})
     end
   end
 

app/javascript/components/data-tables/datastore/helper.js

@@ -26,18 +26,29 @@ const commonHeaders = () => [
 const domainOverridesHeaders = () => [{ text: 'defaultKey_0', header_text: __('Domain') }];
 
 /** Function which returns the header data for table with type class_fields schema. */
-const schemaHeaders = () => [
-  { text: 'Name', header_text: __('Name') },
-  { text: 'Description', header_text: __('Description') },
-  { text: 'DefaultValue', header_text: __('Default Value') },
-  { text: 'Collect', header_text: __('Collect') },
-  { text: 'Message', header_text: __('Message') },
-  { text: 'OnEntry', header_text: __('On Entry') },
-  { text: 'OnExit', header_text: __('On Exit') },
-  { text: 'OnError', header_text: __('On Error') },
-  { text: 'MaxRetries', header_text: __('Max Retries') },
-  { text: 'MaxTime', header_text: __('Max Time') },
-];
+export const schemaHeaders = (isEdit = false) => {
+  const headers = [
+    { name: 'name', text: 'Name', header_text: __('Name') },
+    { name: 'description', text: 'Description', header_text: __('Description') },
+    { name: 'default_value', text: 'DefaultValue', header_text: __('Default Value') },
+    { name: 'collect', text: 'Collect', header_text: __('Collect') },
+    { name: 'message', text: 'Message', header_text: __('Message') },
+    { name: 'on_entry', text: 'OnEntry', header_text: __('On Entry') },
+    { name: 'on_exit', text: 'OnExit', header_text: __('On Exit') },
+    { name: 'on_error', text: 'OnError', header_text: __('On Error') },
+    { name: 'max_retries', text: 'MaxRetries', header_text: __('Max Retries') },
+    { name: 'max_time', text: 'MaxTime', header_text: __('Max Time') },
+  ];
+
+  if (isEdit) {
+    headers.push(
+      { name: 'edit', text: 'Edit', header_text: __('Edit') },
+      { name: 'delete', text: 'Delete', header_text: __('Delete') }
+    );
+  }
+
+  return headers;
+};
 
 /** Function which returns the header data for table with type instant_fields. */
 const instantFieldHeaders = (hasOptions) => {
@@ -58,7 +69,7 @@ const instantFieldHeaders = (hasOptions) => {
 /** Function which returns the header items based on its type. */
 const datastoreHeaders = (type, hasOptions, {
   list, details, instances, methods, domain, schema, fields,
-}) => {
+}, isEdit) => {
   switch (type) {
     case list:
       return nsListHeaders(hasOptions);
@@ -69,19 +80,49 @@ const datastoreHeaders = (type, hasOptions, {
     case domain:
       return domainOverridesHeaders();
     case schema:
-      return schemaHeaders();
+      return schemaHeaders(isEdit);
     case fields:
       return instantFieldHeaders(hasOptions);
     default:
       return [];
   }
 };
 
+export const createEditableRows = (data) => {
+  const rowItems = Array.isArray(data) ? data.map((item) => {
+    const updatedCells = [
+      ...item.cells,
+      {
+        is_button: true,
+        text: __('Update'),
+        kind: 'tertiary',
+        size: 'md',
+        callback: 'editClassField',
+      },
+      {
+        is_button: true,
+        text: __('Delete'),
+        kind: 'danger',
+        size: 'md',
+        callback: 'deleteClassField',
+      },
+    ];
+
+    return {
+      ...item,
+      cells: updatedCells,
+    };
+  })
+    : [];
+
+  return rowItems;
+};
+
 /** Function which returns the data needed for table. */
-export const tableData = (type, hasOptions, initialData, datastoreTypes) => {
+export const tableData = (type, hasOptions, initialData, datastoreTypes, isEdit) => {
   const cBox = hasCheckbox(type, datastoreTypes);
   const nodeTree = type === datastoreTypes.domain ? 'x_show' : 'tree_select';
-  const columns = datastoreHeaders(type, hasOptions, datastoreTypes);
+  const columns = datastoreHeaders(type, hasOptions, datastoreTypes, isEdit);
   const { headerKeys, headerItems } = headerData(columns, cBox);
   const miqRows = rowData(headerKeys, initialData, true);
   return {
@@ -105,3 +146,10 @@ export const removeSelected = (array, item) => {
   }
   return array;
 };
+
+export const transformSelectOptions = (array) =>
+  array.map(([label, value, extraProps]) => ({
+    label,
+    value,
+    ...extraProps,
+  }));