Update

Author: GilbertCherrie

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
@@ -9,15 +10,31 @@ const SelectedGroupsList = (props) => {
     initialValues, options, id, titleText, label, placeholder,
     ...rest
   } = useFieldApi(prepareProps(props));
-
+  const items = [
+    <i className="ff ff-group" />,
+    <p className="group-name">
+      Item 1
+    </p>,
+    <br />,
+    <i className="ff ff-group" />,
+    <p className="group-name">
+      Item 2
+    </p>,
+    <br />,
+    <i className="ff ff-group" />,
+    <p className="group-name">
+      Item 3
+    </p>,
+    <br />,
+  ];
   return (
     <div>
-      <h2 className="selected-groups-label">
+      <label id="selected-groups-label">
         {__('Selected Groups')}
-      </h2>
-      <UnorderedList>
-        <ListItem>Test</ListItem>
-      </UnorderedList>
+      </label>
+      <div id="selected-groups">
+        {items}
+      </div>
     </div>
   );
 };

app/javascript/components/user-form/index.jsx

@@ -9,36 +9,37 @@ import { passwordValidation } from './helper';
 
 const UserForm = ({ id, data, disabled }) => {
   const [{
-    initialValues, isLoading, editMode, groups,
+    initialValues, isLoading, editMode, groups, selectedGroups, // Use to populate the new custom component
   }, setState] = useState({ isLoading: true });
 
   useEffect(() => {
     if (id) {
-      Promise.all([API.get('/api/groups?&expand=resources')]).then((apiResult) => {
-        console.log(apiResult);
-      });
+      Promise.all([API.get('/api/groups?&expand=resources')])
+        .then((apiResult) => ({ result: apiResult.success ? 'success' : 'error', data: apiResult }))
+        .catch((apiResult) => ({ result: 'error', data: apiResult }));
+
       API.get('/api/groups?&expand=resources').then(({ resources }) => {
-        const temp = [];
+        const availableGroups = [];
         resources.forEach((group) => {
-          temp.push({ label: group.description, value: group.id });
+          availableGroups.push({ label: group.description, value: group.id });
         });
-        return temp;
-      }).then((groups) => {
+        return availableGroups;
+      }).then((availableGroups) => {
         API.get(`/api/users/${id}`).then((values) => {
           values.groups = [values.current_group_id];
           setState({
             initialValues: values,
             isLoading: false,
             editMode: false,
-            groups,
+            groups: availableGroups,
           });
         });
       });
     } else {
       API.get('/api/groups?&expand=resources').then(({ resources }) => {
-        const temp = [];
+        const availableGroups = [];
         resources.forEach((group) => {
-          temp.push({ label: group.description, value: group.id });
+          availableGroups.push({ label: group.description, value: group.id });
         });
         const values = {};
         if (data.name) {
@@ -54,7 +55,8 @@ const UserForm = ({ id, data, disabled }) => {
           initialValues: values,
           isLoading: false,
           editMode: false,
-          groups: temp,
+          groups: availableGroups,
+          selectedGroups: [],
         });
       });
     }

app/stylesheet/selected-groups-list.scss

@@ -1,8 +1,24 @@
-.selected-groups-label {
+#selected-groups-label {
+    display: inline-flex;
     font-family: inherit;
     font-size: 0.75rem;
     letter-spacing: 0.32px;
     color: #525252;
     font-weight: 400;
     line-height: 1rem;
 }
+
+#selected-groups {
+    padding-left: 3rem;
+    display: inline-table;
+}
+
+.group-name {
+    display: inline-flex;
+    font-family: "Open Sans", Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1.67;
+    color: #363636;
+    padding-left: 2px;
+    margin-bottom: 0px;
+}

app/views/ops/_rbac_user_details.html.haml

@@ -2,6 +2,9 @@
   = render :partial => "layouts/flash_msg"
   - url = url_for_only_path(:action => 'rbac_user_field_changed', :id => (@edit[:user_id] || "new"))
   - disabled = @edit && @edit[:new][:userid] == "admin"
+  #user_info
+    %h3
+      = _("User Information")
   = react('UserForm', {:id => (@edit[:user_id]), :data => @record.dup, :disabled => disabled})
 
   - change_stored_password ||= _("Change")