Convert user form to React

app/controllers/ops_controller.rb

@@ -583,7 +583,9 @@ def replace_right_cell(options = {})
 
     replace_explorer_trees(replace_trees, presenter)
     rebuild_toolbars(presenter)
-    handle_bottom_cell(nodetype, presenter, locals)
+    unless @hide_bottom_bar
+      handle_bottom_cell(nodetype, presenter, locals)
+    end
     x_active_tree_replace_cell(nodetype, presenter)
     extra_js_commands(presenter)
 

app/controllers/ops_controller/ops_rbac.rb

@@ -51,13 +51,15 @@ def rbac_tags_edit
 
   def rbac_user_add
     assert_privileges("rbac_user_add")
+    @hide_bottom_bar = true
     rbac_edit_reset('new', 'user', User)
   end
 
   def rbac_user_copy
     # get users id either from gtl check or detail id
     user_id = params[:miq_grid_checks].presence || params[:id]
-    user = User.find(user_id)
+    user = User.find(user_id)    
+
     # check if it is allowed to copy the user
     if rbac_user_copy_restriction?(user)
       rbac_restricted_user_copy_flash(user)
@@ -66,17 +68,17 @@ def rbac_user_copy
       javascript_flash
       return
     end
+
+    @copy_user_id = user_id
     assert_privileges("rbac_user_copy")
+    @hide_bottom_bar = true
     rbac_edit_reset('copy', 'user', User)
   end
 
   def rbac_user_edit
     assert_privileges("rbac_user_edit")
-    case params[:button]
-    when 'cancel'      then rbac_edit_cancel('user')
-    when 'save', 'add' then rbac_edit_save_or_add('user')
-    when 'reset', nil  then rbac_edit_reset(params[:typ], 'user', User) # Reset or first time in
-    end
+    @hide_bottom_bar = true
+    rbac_edit_reset(params[:typ], 'user', User)
   end
 
   def rbac_group_add
@@ -185,13 +187,6 @@ def rbac_tenant_tags_edit
     end
   end
 
-  # AJAX driven routines to check for changes in ANY field on the form
-  def rbac_user_field_changed
-    assert_privileges(params[:id] == "new" ? "rbac_user_add" : "rbac_user_edit")
-
-    rbac_field_changed("user")
-  end
-
   def rbac_group_field_changed
     assert_privileges(params[:id] == "new" ? "rbac_group_add" : "rbac_group_edit")
 
@@ -660,10 +655,6 @@ def rbac_edit_save_or_add(what, rbac_suffix = what)
     return unless load_edit("rbac_#{what}_edit__#{id}", "replace_cell__explorer")
 
     case key
-    when :user
-      record = @edit[:user_id] ? User.find_by(:id => @edit[:user_id]) : User.new
-      validated = rbac_user_validate?
-      rbac_user_set_record_vars(record)
     when :group then
       record = @edit[:group_id] ? MiqGroup.find_by(:id => @edit[:group_id]) : MiqGroup.new
       validated = rbac_group_validate?
@@ -676,7 +667,6 @@ def rbac_edit_save_or_add(what, rbac_suffix = what)
     end
 
     if record.valid? && validated && record.save!
-      record.update!(:miq_groups => Rbac.filtered(MiqGroup.where(:id => rbac_user_get_group_ids))) if key == :user # only set miq_groups if everything is valid
       populate_role_features(record) if what == "role"
       self.current_user = record if what == 'user' && @edit[:current][:userid] == current_userid
       AuditEvent.success(build_saved_audit(record, @edit))
@@ -746,13 +736,10 @@ def rbac_field_changed(rec_type)
     return unless load_edit("rbac_#{rec_type}_edit__#{id}", "replace_cell__explorer")
 
     case rec_type
-    when "user"  then rbac_user_get_form_vars
     when "group" then rbac_group_get_form_vars
     when "role"  then rbac_role_get_form_vars
     end
 
-    @edit[:new][:group] = rbac_user_get_group_ids if rec_type == "user"
-
     session[:changed] = changed = @edit[:new] != @edit[:current]
 
     render :update do |page|
@@ -764,11 +751,6 @@ def rbac_field_changed(rec_type)
           page.replace(@refresh_div, :partial => @refresh_partial)
         end
       else
-        # only do following for user (adding/editing a user)
-        if x_node.split("-").first == "u" || x_node == "xx-u"
-          page.replace("group_selected",
-                       :partial => "ops/rbac_group_selected")
-        end
         # only do following for groups
         if @refresh_div
           page.replace(@refresh_div,
@@ -966,82 +948,16 @@ def build_rbac_feature_tree
   # Set form variables for user edit
   def rbac_user_set_form_vars
     copy = @sb[:typ] == "copy"
-    # save a shadow copy of the record if record is being copied
-    @user = copy ? @record.dup : @record
-    @user.miq_groups = @record.miq_groups if copy
     @edit = {:new => {}, :current => {}}
     @edit[:user_id] = @record.id unless copy
-    @edit[:key] = "rbac_user_edit__#{@edit[:user_id] || "new"}"
-    # prefill form fields for edit and copy action
-    @edit[:new].merge!(:name  => @user.name,
-                       :email => @user.email,
-                       :group => @user.miq_groups ? @user.miq_groups.map(&:id).sort : nil)
-    unless copy
-      @edit[:new].merge!(:userid   => @user.userid,
-                         :password => @user.password,
-                         :verify   => @user.password)
-    end
-    # load all user groups, filter available for tenant
-    @edit[:groups] = Rbac.filtered(MiqGroup.non_tenant_groups_in_my_region).sort_by { |g| g.description.downcase }.collect { |g| [g.description, g.id] }
-    # store current state of the new users information
-    @edit[:current] = copy_hash(@edit[:new])
+    @edit[:new][:userid] = @record.userid
     @right_cell_text = if @edit[:user_id]
                          _("Editing User \"%{name}\"") % {:name => @record.name}
                        else
                          _('Adding a new User')
                        end
   end
 
-  # Get variables from user edit form
-  def rbac_user_get_form_vars
-    copy_params_if_present(@edit[:new], params, %i[name password verify])
-
-    @edit[:new][:userid] = params[:userid].strip.presence if params[:userid]
-    @edit[:new][:email] = params[:email].strip.presence if params[:email]
-    @edit[:new][:group] = params[:chosen_group] if params[:chosen_group]
-  end
-
-  # Set user record variables to new values
-  def rbac_user_set_record_vars(user)
-    user.name       = @edit[:new][:name]
-    user.userid     = @edit[:new][:userid]
-    user.email      = @edit[:new][:email]
-    user.password   = @edit[:new][:password] if @edit[:new][:password]
-  end
-
-  # Get array of group ids
-  def rbac_user_get_group_ids
-    case @edit[:new][:group]
-    when 'null', nil
-      []
-    when String
-      @edit[:new][:group].split(',').delete_if(&:blank?).map(&:to_i).sort
-    when Array
-      @edit[:new][:group].map(&:to_i).sort
-    end
-  end
-
-  # Validate some of the user fields
-  def rbac_user_validate?
-    valid = true
-    if @edit[:new][:password] != @edit[:new][:verify]
-      add_flash(_("Password/Verify Password do not match"), :error)
-      valid = false
-    end
-
-    new_group_ids = rbac_user_get_group_ids
-    new_groups = new_group_ids.present? && MiqGroup.find(new_group_ids).present? ? MiqGroup.find(new_group_ids) : []
-
-    if new_group_ids.blank?
-      add_flash(_("A User must be assigned to a Group"), :error)
-      valid = false
-    elsif Rbac.filtered(new_groups).count != new_group_ids.count
-      add_flash(_("A User must be assigned to an allowed Group"), :error)
-      valid = false
-    end
-    valid
-  end
-
   def valid_tenant?(tenant_id)
     Rbac.filtered(Tenant.in_my_region.where(:id => tenant_id)).present?
   end

app/javascript/components/async-credentials/edit-password-field.jsx

@@ -10,7 +10,7 @@ import { useFieldApi, componentTypes } from '@@ddf';
 
 const EditPasswordField = ({ componentClass, ...props }) => {
   const {
-    labelText, validateOnMount, isDisabled, editMode, setEditMode, buttonLabel, input, meta, ...rest
+    labelText, validateOnMount, isDisabled, editMode, setEditMode, buttonLabel, input, meta, icon, kind, ...rest
   } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
@@ -58,7 +58,14 @@ const EditPasswordField = ({ componentClass, ...props }) => {
             { field }
           </div>
           <div className="bx--col-sm-1 bx--col-md-1 bx--col-lg-1">
-            <Button hasIconOnly kind="secondary" size="field" onClick={setEditMode} iconDescription={buttonLabel} renderIcon={EditOff16} />
+            <Button
+              hasIconOnly
+              kind={kind || 'secondary'}
+              size="field"
+              onClick={setEditMode}
+              iconDescription={buttonLabel}
+              renderIcon={icon || EditOff16}
+            />
           </div>
         </div>
       </div>

app/javascript/components/selected-groups-list/index.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SelectedGroupsList = ({ groups }) => {
+  const selectedGroups = [];
+  // console.log(groups);
+  groups.sort();
+  if (groups) {
+    groups.forEach((group) => {
+      selectedGroups.push(
+        <div key={group}>
+          <i className="ff ff-group" />
+          <p className="group-name" id={group}>
+            {group}
+          </p>
+          <br />
+        </div>
+      );
+    });
+  }
+
+  return (
+    <div>
+      <label id="selected-groups-label">
+        {__('Selected Groups')}
+      </label>
+      <div id="selected-groups">
+        {selectedGroups}
+      </div>
+    </div>
+  );
+};
+
+SelectedGroupsList.propTypes = {
+  groups: PropTypes.arrayOf(PropTypes.string),
+};
+
+SelectedGroupsList.defaultProps = {
+  groups: [],
+};
+
+export default SelectedGroupsList;

app/javascript/components/user-form/helper.js

@@ -0,0 +1,54 @@
+const areGroupsEqual = (initialValues, selectedGroups = []) => {
+  selectedGroups.sort();
+  initialValues.groups.sort();
+  if (selectedGroups.length !== initialValues.groups.length) {
+    return false;
+  }
+  return selectedGroups.every((group, index) => group === initialValues.groups[index]);
+};
+
+export const passwordValidation = (initialValues, id, editMode, values, setState, selectedGroups) => {
+  if (values.groups === undefined) {
+    if (selectedGroups.length > 0) {
+      setState((state) => ({
+        ...state,
+        selectedGroups: [],
+      }));
+    }
+  }
+  const errors = {};
+  const groupIds = [];
+  if (values.groups) {
+    values.groups.forEach((group) => {
+      if (group.value) {
+        groupIds.push(group.value);
+      } else {
+        groupIds.push(group);
+      }
+    });
+  }
+  if (!editMode && !!id) {
+    values.password = undefined;
+    values.confirmPassword = undefined;
+    if (values.name === initialValues.name
+            && values.userid === initialValues.userid
+            && values.email === initialValues.email
+            && areGroupsEqual(initialValues, groupIds)) {
+      errors.confirmPassword = '';
+    }
+  }
+
+  if (values.password === undefined) {
+    if (!!id && editMode) {
+      errors.password = 'Required';
+    }
+  }
+
+  if (editMode && values.password !== values.confirmPassword) {
+    errors.confirmPassword = 'Password/Verify Password do not match';
+  }
+  if (!!id === false && values.password !== values.confirmPassword) {
+    errors.confirmPassword = 'Password/Verify Password do not match';
+  }
+  return errors;
+};