New implementation of user-group membership (admin, supervisor) management (to reflect changes in API as well as increasing ux comforts).

Author: krulis-martin

src/components/Groups/AddSupervisor/AddSupervisor.js

@@ -1,24 +1,110 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import { defaultMemoize } from 'reselect';
 
-import MakeRemoveSupervisorButtonContainer from '../../../containers/MakeRemoveSupervisorButtonContainer';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import AddUserContainer from '../../../containers/AddUserContainer';
 import { knownRoles, isSupervisorRole } from '../../helpers/usersRoles';
+import { AdminIcon, SupervisorIcon, LoadingIcon } from '../../icons';
 
 const ROLES_FILTER = knownRoles.filter(isSupervisorRole);
 
-const AddSupervisor = ({ groupId, instanceId }) => (
-  <AddUserContainer
-    instanceId={instanceId}
-    id={`add-supervisor-${groupId}`}
-    rolesFilter={ROLES_FILTER}
-    createActions={({ id }) => <MakeRemoveSupervisorButtonContainer userId={id} groupId={groupId} />}
-  />
+const buildMembersIndex = defaultMemoize(
+  (primaryAdmins, supervisors, students) =>
+    new Set([...primaryAdmins.map(u => u.id), ...supervisors.map(u => u.id), ...students.map(u => u.id)])
 );
 
+const AddSupervisor = ({
+  groupId,
+  instanceId,
+  primaryAdmins,
+  supervisors,
+  students,
+  addAdmin = null,
+  addSupervisor = null,
+  pendingMemberships,
+}) => {
+  const membersIndex = buildMembersIndex(primaryAdmins, supervisors, students);
+  return (
+    <AddUserContainer
+      instanceId={instanceId}
+      id={`add-supervisor-${groupId}`}
+      rolesFilter={ROLES_FILTER}
+      createActions={({ id }) => {
+        const isMember = membersIndex.has(id);
+        const isPending = pendingMemberships.includes(id);
+        return isPending ? (
+          <LoadingIcon />
+        ) : (
+          <TheButtonGroup>
+            {addAdmin && (
+              <OverlayTrigger
+                placement="bottom"
+                overlay={
+                  <Tooltip id={`adminButtonTooltip-${id}`}>
+                    {isMember ? (
+                      <FormattedMessage
+                        id="app.membersList.alreadyMember"
+                        defaultMessage="Selected user is already a member of the group"
+                      />
+                    ) : (
+                      <FormattedMessage id="app.membersList.addAsAdmin" defaultMessage="Add as administrator" />
+                    )}
+                  </Tooltip>
+                }>
+                <Button
+                  size="xs"
+                  onClick={() => addAdmin(groupId, id)}
+                  disabled={isMember}
+                  variant={isMember ? 'secondary' : 'success'}>
+                  <AdminIcon smallGapRight smallGapLeft fixedWidth />
+                </Button>
+              </OverlayTrigger>
+            )}
+
+            {addSupervisor && (
+              <OverlayTrigger
+                placement="bottom"
+                overlay={
+                  <Tooltip id={`supervisorButtonTooltip-${id}`}>
+                    {isMember ? (
+                      <FormattedMessage
+                        id="app.membersList.alreadyMember"
+                        defaultMessage="Selected user is already a member of the group"
+                      />
+                    ) : (
+                      <FormattedMessage id="app.membersList.addAsSupervisor" defaultMessage="Add as supervisor" />
+                    )}
+                  </Tooltip>
+                }>
+                <Button
+                  size="xs"
+                  onClick={() => addSupervisor(groupId, id)}
+                  disabled={isMember}
+                  variant={isMember ? 'secondary' : 'success'}>
+                  <SupervisorIcon smallGapRight smallGapLeft fixedWidth />
+                </Button>
+              </OverlayTrigger>
+            )}
+          </TheButtonGroup>
+        );
+      }}
+    />
+  );
+};
+
 AddSupervisor.propTypes = {
   instanceId: PropTypes.string.isRequired,
   groupId: PropTypes.string.isRequired,
+  primaryAdmins: PropTypes.array.isRequired,
+  supervisors: PropTypes.array.isRequired,
+  students: PropTypes.array.isRequired,
+  addAdmin: PropTypes.func,
+  addSupervisor: PropTypes.func,
+  pendingMemberships: ImmutablePropTypes.list,
 };
 
 export default AddSupervisor;

src/components/Groups/MakeGroupAdminButton/MakeGroupAdminButton.js

@@ -1,42 +1,78 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Table } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
-import SupervisorsListItem, { LoadingSupervisorsListItem } from '../SupervisorsListItem';
 
-const SupervisorsList = ({ groupId, users, isLoaded = true, isAdmin, primaryAdminsIds }) => (
-  <Table hover>
-    <tbody>
-      {isLoaded &&
-        users.map(user => (
+import SupervisorsListItem from '../SupervisorsListItem';
+
+const SupervisorsList = ({
+  groupId,
+  primaryAdmins,
+  supervisors,
+  isLoaded = true,
+  showButtons = false,
+  addAdmin = null,
+  addSupervisor = null,
+  removeMember = null,
+  pendingMemberships,
+}) =>
+  isLoaded ? (
+    <Table hover responsive className="mb-1">
+      <tbody>
+        {primaryAdmins.map(user => (
           <SupervisorsListItem
             key={user.id}
             {...user}
             groupId={groupId}
-            isAdmin={isAdmin}
-            primaryAdminsIds={primaryAdminsIds}
+            showButtons={showButtons}
+            type="admin"
+            addSupervisor={addSupervisor}
+            removeMember={removeMember}
+            pendingMembership={pendingMemberships.includes(user.id)}
           />
         ))}
 
-      {users.length === 0 && isLoaded && (
-        <tr>
-          <td className="text-center">
-            <FormattedMessage id="app.userList.noSupervisors" defaultMessage="There are no supervisors on the list." />
-          </td>
-        </tr>
-      )}
-
-      {!isLoaded && <LoadingSupervisorsListItem isAdmin={isAdmin} />}
-    </tbody>
-  </Table>
-);
+        {supervisors.map(user => (
+          <SupervisorsListItem
+            key={user.id}
+            {...user}
+            groupId={groupId}
+            showButtons={showButtons}
+            type="supervisor"
+            addAdmin={addAdmin}
+            removeMember={removeMember}
+            pendingMembership={pendingMemberships.includes(user.id)}
+          />
+        ))}
+        {primaryAdmins.length === 0 && supervisors.length === 0 && (
+          <tr>
+            <td className="text-center text-muted">
+              <FormattedMessage
+                id="app.membersList.noMembers"
+                defaultMessage="The group has no supervisors or admins."
+              />
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </Table>
+  ) : (
+    <div>
+      <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
+    </div>
+  );
 
 SupervisorsList.propTypes = {
-  users: PropTypes.array.isRequired,
+  primaryAdmins: PropTypes.array.isRequired,
+  supervisors: PropTypes.array.isRequired,
   groupId: PropTypes.string.isRequired,
   isLoaded: PropTypes.bool,
-  isAdmin: PropTypes.bool,
-  primaryAdminsIds: PropTypes.array.isRequired,
+  showButtons: PropTypes.bool,
+  addAdmin: PropTypes.func,
+  addSupervisor: PropTypes.func,
+  removeMember: PropTypes.func,
+  pendingMemberships: ImmutablePropTypes.list,
 };
 
 export default SupervisorsList;