[web] Migrate group management to React (#11293)

* Rename manage group entry point * Migrate group management root page to React * Add cypress tests for the group management react page * Fix linting * Add checkbox labels for screen-readers + remove unused classes * Await on add/remove members calls * Display the export CSV link for a full group * Display error message when group is full * Sort locales * Handle the managers management page in React version * Fix missing type in GroupMemberRow * Split members and managers React pages * Build API paths on frontend side + add cypress tests for each page * Fix linting * Update unit tests * Review improvements * Type API errors GitOrigin-RevId: d124a9d24cbf33de8aacc5d69e9d46e7bcda93c5
2026-11-15 06:33:55 +01:00 · 2023-02-07 09:04:18 +00:00
parent b1cf4aa1e9
commit ed40a87cdc
29 changed files with 1678 additions and 45 deletions
@@ -6,6 +6,7 @@
  "about_to_delete_the_following": "",
  "about_to_leave_projects": "",
  "about_to_trash_projects": "",
+  "accepted_invite": "",
  "access_denied": "",
  "access_your_projects_with_git": "",
  "account_has_been_link_to_institution_account": "",
@@ -14,14 +15,18 @@
  "account_settings": "",
  "acct_linked_to_institution_acct_2": "",
  "actions": "",
+  "add": "",
  "add_affiliation": "",
  "add_another_email": "",
+  "add_comma_separated_emails_help": "",
  "add_email_to_claim_features": "",
  "add_files": "",
+  "add_more_members": "",
  "add_new_email": "",
  "add_or_remove_project_from_tag": "",
  "add_role_and_department": "",
  "add_to_folder": "",
+  "adding": "",
  "additional_licenses": "",
  "all_projects": "",
  "also": "",
@@ -201,6 +206,7 @@
  "error_performing_request": "",
  "example_project": "",
  "expand": "",
+  "export_csv": "",
  "export_project_to_github": "",
  "fast": "",
  "faster_compiles_feedback_question": "",
@@ -298,6 +304,7 @@
  "go_to_pdf_location_in_code": "",
  "group_plan_tooltip": "",
  "group_plan_with_name_tooltip": "",
+  "group_subscription": "",
  "have_an_extra_backup": "",
  "headers": "",
  "help": "",
@@ -359,6 +366,8 @@
  "labs_program_already_participating": "",
  "labs_program_benefits": "<0></0>",
  "labs_program_not_participating": "",
+  "last_active": "",
+  "last_active_description": "",
  "last_modified": "",
  "last_name": "",
  "last_resort_trouble_shooting_guide": "",
@@ -415,9 +424,11 @@
  "manage_members": "",
  "manage_newsletter": "",
  "manage_sessions": "",
+  "managers_management": "",
  "math_display": "",
  "math_inline": "",
  "maximum_files_uploaded_together": "",
+  "members_management": "",
  "mendeley_groups_loading_error": "",
  "mendeley_groups_relink": "",
  "mendeley_integration": "",
@@ -430,6 +441,7 @@
  "more": "",
  "n_items": "",
  "n_items_plural": "",
+  "name": "",
  "navigate_log_source": "",
  "navigation": "",
  "need_to_add_new_primary_before_remove": "",
@@ -445,6 +457,7 @@
  "newsletter": "",
  "next_payment_of_x_collectected_on_y": "",
  "no_existing_password": "",
+  "no_members": "",
  "no_messages": "",
  "no_new_commits_in_github": "",
  "no_other_projects_found": "",
@@ -573,7 +586,10 @@
  "remote_service_error": "",
  "remove": "",
  "remove_collaborator": "",
+  "remove_from_group": "",
+  "remove_manager": "",
  "remove_tag": "",
+  "removing": "",
  "rename": "",
  "rename_folder": "",
  "rename_project": "",
@@ -611,6 +627,7 @@
  "search_whole_word": "",
  "select_a_file": "",
  "select_a_project": "",
+  "select_all": "",
  "select_all_projects": "",
  "select_an_output_file": "",
  "select_from_output_files": "",
@@ -620,6 +637,7 @@
  "select_project": "",
  "select_projects": "",
  "select_tag": "",
+  "select_user": "",
  "selected": "",
  "send": "",
  "send_first_message": "",
@@ -789,6 +807,7 @@
  "you_are_on_x_plan_as_a_confirmed_member_of_institution_y": "",
  "you_can_now_log_in_sso": "",
  "you_dont_have_any_repositories": "",
+  "you_have_added_x_of_group_size_y": "",
  "your_affiliation_is_confirmed": "",
  "your_browser_does_not_support_this_feature": "",
  "your_message_to_collaborators": "",
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+
+export type APIError = {
+  message?: string
+}
+
+type ErrorAlertProps = {
+  error?: APIError
+}
+
+export default function ErrorAlert({ error }: ErrorAlertProps) {
+  const { t } = useTranslation()
+
+  if (!error) {
+    return null
+  }
+
+  if (error.message) {
+    return (
+      <div className="alert alert-danger">
+        {t('error')}: {error.message}
+      </div>
+    )
+  }
+
+  return (
+    <div className="alert alert-danger">
+      {t('generic_something_went_wrong')}
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import getMeta from '../../../utils/meta'
+import { ManagersTable } from './managers-table'
+
+export default function GroupManagers() {
+  const { isReady } = useWaitForI18n()
+  const { t } = useTranslation()
+
+  const groupId: string = getMeta('ol-groupId')
+  const groupName: string = getMeta('ol-groupName')
+
+  const paths = useMemo(
+    () => ({
+      addMember: `/manage/groups/${groupId}/managers`,
+      removeMember: `/manage/groups/${groupId}/managers`,
+    }),
+    [groupId]
+  )
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ManagersTable
+      groupName={groupName}
+      translations={{
+        title: t('group_subscription'),
+        subtitle: t('managers_management'),
+        remove: t('remove_manager'),
+      }}
+      paths={paths}
+    />
+  )
+}
@@ -0,0 +1,81 @@
+import moment from 'moment'
+import { useCallback } from 'react'
+import { Col, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { User } from '../../../../../types/group-management/user'
+
+type GroupMemberRowProps = {
+  user: User
+  selectUser: (user: User) => void
+  unselectUser: (user: User) => void
+  selected: boolean
+}
+
+export default function GroupMemberRow({
+  user,
+  selectUser,
+  unselectUser,
+  selected,
+}: GroupMemberRowProps) {
+  const { t } = useTranslation()
+
+  const handleSelectUser = useCallback(
+    (event, user) => {
+      if (event.target.checked) {
+        selectUser(user)
+      } else {
+        unselectUser(user)
+      }
+    },
+    [selectUser, unselectUser]
+  )
+
+  return (
+    <li key={`user-${user.email}`}>
+      <Row>
+        <Col xs={4}>
+          <label htmlFor={`select-user-${user.email}`} className="sr-only">
+            {t('select_user')}
+          </label>
+          <input
+            className="select-item"
+            id={`select-user-${user.email}`}
+            type="checkbox"
+            checked={selected}
+            onChange={e => handleSelectUser(e, user)}
+          />
+          <span>{user.email}</span>
+        </Col>
+        <Col xs={4}>
+          {user.first_name} {user.last_name}
+        </Col>
+        <Col xs={2}>
+          {user.last_active_at
+            ? moment(user.last_active_at).format('Do MMM YYYY')
+            : 'N/A'}
+        </Col>
+        <Col xs={2}>
+          {user.invite ? (
+            <>
+              <i
+                className="fa fa-times"
+                aria-hidden="true"
+                aria-label={t('invite_not_accepted')}
+              />
+              <span className="sr-only">t('invite_not_accepted')</span>
+            </>
+          ) : (
+            <>
+              <i
+                className="fa fa-check text-success"
+                aria-hidden="true"
+                aria-label={t('accepted_invite')}
+              />
+              <span className="sr-only">t('accepted_invite')</span>
+            </>
+          )}
+        </Col>
+      </Row>
+    </li>
+  )
+}
@@ -0,0 +1,293 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Button, Col, Form, FormControl, Row } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { User } from '../../../../../types/group-management/user'
+import {
+  deleteJSON,
+  FetchError,
+  postJSON,
+} from '../../../infrastructure/fetch-json'
+import Tooltip from '../../../shared/components/tooltip'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import getMeta from '../../../utils/meta'
+import { parseEmails } from '../utils/emails'
+import ErrorAlert, { APIError } from './error-alert'
+import GroupMemberRow from './group-member-row'
+import useUserSelection from '../hooks/use-user-selection'
+
+export default function GroupMembers() {
+  const { isReady } = useWaitForI18n()
+  const { t } = useTranslation()
+
+  const {
+    users,
+    setUsers,
+    selectedUsers,
+    selectAllUsers,
+    unselectAllUsers,
+    selectUser,
+    unselectUser,
+  } = useUserSelection(getMeta('ol-users', []))
+
+  const [emailString, setEmailString] = useState<string>('')
+  const [inviteUserInflightCount, setInviteUserInflightCount] = useState(0)
+  const [inviteError, setInviteError] = useState<APIError>()
+  const [removeMemberInflightCount, setRemoveMemberInflightCount] = useState(0)
+  const [removeMemberError, setRemoveMemberError] = useState<APIError>()
+
+  const groupId: string = getMeta('ol-groupId')
+  const groupName: string = getMeta('ol-groupName')
+  const groupSize: number = getMeta('ol-groupSize')
+
+  const paths = useMemo(
+    () => ({
+      addMember: `/manage/groups/${groupId}/invites`,
+      removeMember: `/manage/groups/${groupId}/user`,
+      removeInvite: `/manage/groups/${groupId}/invites`,
+      exportMembers: `/manage/groups/${groupId}/members/export`,
+    }),
+    [groupId]
+  )
+
+  const addMembers = useCallback(
+    e => {
+      e.preventDefault()
+      setInviteError(undefined)
+      const emails = parseEmails(emailString)
+      ;(async () => {
+        for (const email of emails) {
+          setInviteUserInflightCount(count => count + 1)
+          try {
+            const data = await postJSON<{ user: User }>(paths.addMember, {
+              body: {
+                email,
+              },
+            })
+            if (data.user) {
+              const alreadyListed = users.find(
+                user => user.email === data.user.email
+              )
+              if (!alreadyListed) {
+                setUsers(users => [...users, data.user])
+              }
+            }
+            setEmailString('')
+          } catch (error: unknown) {
+            console.error(error)
+            setInviteError((error as FetchError)?.data?.error || {})
+          }
+          setInviteUserInflightCount(count => count - 1)
+        }
+      })()
+    },
+    [emailString, paths.addMember, users, setUsers]
+  )
+
+  const removeMembers = useCallback(
+    e => {
+      e.preventDefault()
+      setRemoveMemberError(undefined)
+      ;(async () => {
+        for (const user of selectedUsers) {
+          let url
+          if (paths.removeInvite && user.invite && user._id == null) {
+            url = `${paths.removeInvite}/${encodeURIComponent(user.email)}`
+          } else if (paths.removeMember && user._id) {
+            url = `${paths.removeMember}/${user._id}`
+          } else {
+            return
+          }
+          setRemoveMemberInflightCount(count => count + 1)
+          try {
+            await deleteJSON(url, {})
+            setUsers(users => users.filter(u => u !== user))
+            unselectUser(user)
+          } catch (error: unknown) {
+            console.error(error)
+            setRemoveMemberError((error as FetchError)?.data?.error || {})
+          }
+          setRemoveMemberInflightCount(count => count - 1)
+        }
+      })()
+    },
+    [
+      selectedUsers,
+      unselectUser,
+      setUsers,
+      paths.removeInvite,
+      paths.removeMember,
+    ]
+  )
+
+  const handleSelectAllClick = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        selectAllUsers()
+      } else {
+        unselectAllUsers()
+      }
+    },
+    [selectAllUsers, unselectAllUsers]
+  )
+
+  const handleEmailsChange = useCallback(
+    e => {
+      setEmailString(e.target.value)
+    },
+    [setEmailString]
+  )
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <div className="container">
+      <Row>
+        <Col md={10} mdOffset={1}>
+          <h1>{groupName || t('group_subscription')}</h1>
+          <div className="card">
+            <div className="page-header">
+              <div className="pull-right">
+                {selectedUsers.length === 0 && (
+                  <small>
+                    <Trans
+                      i18nKey="you_have_added_x_of_group_size_y"
+                      components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
+                      values={{ addedUsersSize: users.length, groupSize }}
+                    />
+                  </small>
+                )}
+                {removeMemberInflightCount > 0 ? (
+                  <Button bsStyle="danger" disabled>
+                    {t('removing')}&hellip;
+                  </Button>
+                ) : (
+                  <>
+                    {selectedUsers.length > 0 && (
+                      <Button bsStyle="danger" onClick={removeMembers}>
+                        {t('remove_from_group')}
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
+              <h3>{t('members_management')}</h3>
+            </div>
+            <div className="row-spaced-small">
+              <ErrorAlert error={removeMemberError} />
+              <ul className="list-unstyled structured-list">
+                <li className="container-fluid">
+                  <Row>
+                    <Col xs={4}>
+                      <label htmlFor="select-all" className="sr-only">
+                        {t('select_all')}
+                      </label>
+                      <input
+                        className="select-all"
+                        id="select-all"
+                        type="checkbox"
+                        onChange={handleSelectAllClick}
+                        checked={selectedUsers.length === users.length}
+                      />
+                      <span className="header">{t('email')}</span>
+                    </Col>
+                    <Col xs={4}>
+                      <span className="header">{t('name')}</span>
+                    </Col>
+                    <Col xs={2}>
+                      <Tooltip
+                        id="last-active-tooltip"
+                        description={t('last_active_description')}
+                        overlayProps={{
+                          placement: 'left',
+                        }}
+                      >
+                        <span className="header">
+                          {t('last_active')}
+                          <sup>(?)</sup>
+                        </span>
+                      </Tooltip>
+                    </Col>
+                    <Col xs={2}>
+                      <span className="header">{t('accepted_invite')}</span>
+                    </Col>
+                  </Row>
+                </li>
+                {users.length === 0 && (
+                  <li>
+                    <Row>
+                      <Col md={12} className="text-centered">
+                        <small>{t('no_members')}</small>
+                      </Col>
+                    </Row>
+                  </li>
+                )}
+                {users.map((user: any) => (
+                  <GroupMemberRow
+                    key={user.email}
+                    user={user}
+                    selectUser={selectUser}
+                    unselectUser={unselectUser}
+                    selected={selectedUsers.includes(user)}
+                  />
+                ))}
+              </ul>
+            </div>
+            <hr />
+            {users.length < groupSize && (
+              <div>
+                <p className="small">{t('add_more_members')}</p>
+                <ErrorAlert error={inviteError} />
+                <Form horizontal onSubmit={addMembers} className="form">
+                  <Row>
+                    <Col xs={6}>
+                      <FormControl
+                        type="input"
+                        placeholder="jane@example.com, joe@example.com"
+                        aria-describedby="add-members-description"
+                        value={emailString}
+                        onChange={handleEmailsChange}
+                      />
+                    </Col>
+                    <Col xs={4}>
+                      {inviteUserInflightCount > 0 ? (
+                        <Button bsStyle="primary" disabled>
+                          {t('adding')}&hellip;
+                        </Button>
+                      ) : (
+                        <Button bsStyle="primary" onClick={addMembers}>
+                          {t('add')}
+                        </Button>
+                      )}
+                    </Col>
+                    <Col xs={2}>
+                      <a href={paths.exportMembers}>{t('export_csv')}</a>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col xs={8}>
+                      <span className="help-block">
+                        {t('add_comma_separated_emails_help')}
+                      </span>
+                    </Col>
+                  </Row>
+                </Form>
+              </div>
+            )}
+            {users.length >= groupSize && users.length > 0 && (
+              <>
+                <ErrorAlert error={inviteError} />
+                <Row>
+                  <Col xs={2} xsOffset={10}>
+                    <a href={paths.exportMembers}>{t('export_csv')}</a>
+                  </Col>
+                </Row>
+              </>
+            )}
+          </div>
+        </Col>
+      </Row>
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import getMeta from '../../../utils/meta'
+import { ManagersTable } from './managers-table'
+
+export default function InstitutionManagers() {
+  const { isReady } = useWaitForI18n()
+  const { t } = useTranslation()
+
+  const groupId: string = getMeta('ol-groupId')
+  const groupName: string = getMeta('ol-groupName')
+
+  const paths = useMemo(
+    () => ({
+      addMember: `/manage/institutions/${groupId}/managers`,
+      removeMember: `/manage/institutions/${groupId}/managers`,
+    }),
+    [groupId]
+  )
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ManagersTable
+      groupName={groupName}
+      translations={{
+        title: t('institution_account'),
+        subtitle: t('managers_management'),
+        remove: t('remove_manager'),
+      }}
+      paths={paths}
+    />
+  )
+}
@@ -0,0 +1,260 @@
+import { useCallback, useState } from 'react'
+import { Button, Col, Form, FormControl, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import {
+  deleteJSON,
+  FetchError,
+  postJSON,
+} from '../../../infrastructure/fetch-json'
+import Tooltip from '../../../shared/components/tooltip'
+import getMeta from '../../../utils/meta'
+import { parseEmails } from '../utils/emails'
+import ErrorAlert, { APIError } from './error-alert'
+import GroupMemberRow from './group-member-row'
+import useUserSelection from '../hooks/use-user-selection'
+import { User } from '../../../../../types/group-management/user'
+
+type ManagersPaths = {
+  addMember: string
+  removeMember: string
+}
+
+type UsersTableProps = {
+  groupName: string
+  paths: ManagersPaths
+  translations: {
+    title: string
+    subtitle: string
+    remove: string
+  }
+}
+
+export function ManagersTable({
+  groupName,
+  translations,
+  paths,
+}: UsersTableProps) {
+  const { t } = useTranslation()
+
+  const {
+    users,
+    setUsers,
+    selectedUsers,
+    selectAllUsers,
+    unselectAllUsers,
+    selectUser,
+    unselectUser,
+  } = useUserSelection(getMeta('ol-users', []))
+
+  const [emailString, setEmailString] = useState<string>('')
+  const [inviteUserInflightCount, setInviteUserInflightCount] = useState(0)
+  const [inviteError, setInviteError] = useState<APIError>()
+  const [removeMemberInflightCount, setRemoveMemberInflightCount] = useState(0)
+  const [removeMemberError, setRemoveMemberError] = useState<APIError>()
+
+  const addManagers = useCallback(
+    e => {
+      e.preventDefault()
+      setInviteError(undefined)
+      const emails = parseEmails(emailString)
+      ;(async () => {
+        for (const email of emails) {
+          setInviteUserInflightCount(count => count + 1)
+          try {
+            const data = await postJSON<{ user: User }>(paths.addMember, {
+              body: {
+                email,
+              },
+            })
+            if (data.user) {
+              const alreadyListed = users.find(
+                user => user.email === data.user.email
+              )
+              if (!alreadyListed) {
+                setUsers(users => [...users, data.user])
+              }
+            }
+            setEmailString('')
+          } catch (error: unknown) {
+            console.error(error)
+            setInviteError((error as FetchError)?.data?.error || {})
+          }
+          setInviteUserInflightCount(count => count - 1)
+        }
+      })()
+    },
+    [emailString, paths.addMember, users, setUsers]
+  )
+
+  const removeManagers = useCallback(
+    e => {
+      e.preventDefault()
+      setRemoveMemberError(undefined)
+      ;(async () => {
+        for (const user of selectedUsers) {
+          let url
+          if (paths.removeMember && user._id) {
+            url = `${paths.removeMember}/${user._id}`
+          } else {
+            return
+          }
+          setRemoveMemberInflightCount(count => count + 1)
+          try {
+            await deleteJSON(url, {})
+            setUsers(users => users.filter(u => u !== user))
+            unselectUser(user)
+          } catch (error: unknown) {
+            console.error(error)
+            setRemoveMemberError((error as FetchError)?.data?.error || {})
+          }
+          setRemoveMemberInflightCount(count => count - 1)
+        }
+      })()
+    },
+    [selectedUsers, unselectUser, setUsers, paths.removeMember]
+  )
+
+  const handleSelectAllClick = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        selectAllUsers()
+      } else {
+        unselectAllUsers()
+      }
+    },
+    [selectAllUsers, unselectAllUsers]
+  )
+
+  const handleEmailsChange = useCallback(
+    e => {
+      setEmailString(e.target.value)
+    },
+    [setEmailString]
+  )
+
+  return (
+    <div className="container">
+      <Row>
+        <Col md={10} mdOffset={1}>
+          <h1>{groupName || translations.title}</h1>
+          <div className="card">
+            <div className="page-header">
+              <div className="pull-right">
+                {removeMemberInflightCount > 0 ? (
+                  <Button bsStyle="danger" disabled>
+                    {t('removing')}&hellip;
+                  </Button>
+                ) : (
+                  <>
+                    {selectedUsers.length > 0 && (
+                      <Button bsStyle="danger" onClick={removeManagers}>
+                        {translations.remove}
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
+              <h3>{translations.subtitle}</h3>
+            </div>
+            <div className="row-spaced-small">
+              <ErrorAlert error={removeMemberError} />
+              <ul className="list-unstyled structured-list">
+                <li className="container-fluid">
+                  <Row>
+                    <Col xs={4}>
+                      <label htmlFor="select-all" className="sr-only">
+                        {t('select_all')}
+                      </label>
+                      <input
+                        className="select-all"
+                        id="select-all"
+                        type="checkbox"
+                        onChange={handleSelectAllClick}
+                        checked={selectedUsers.length === users.length}
+                      />
+                      <span className="header">{t('email')}</span>
+                    </Col>
+                    <Col xs={4}>
+                      <span className="header">{t('name')}</span>
+                    </Col>
+                    <Col xs={2}>
+                      <Tooltip
+                        id="last-active-tooltip"
+                        description={t('last_active_description')}
+                        overlayProps={{
+                          placement: 'left',
+                        }}
+                      >
+                        <span className="header">
+                          {t('last_active')}
+                          <sup>(?)</sup>
+                        </span>
+                      </Tooltip>
+                    </Col>
+                    <Col xs={2}>
+                      <span className="header">{t('accepted_invite')}</span>
+                    </Col>
+                  </Row>
+                </li>
+                {users.length === 0 && (
+                  <li>
+                    <Row>
+                      <Col md={12} className="text-centered">
+                        <small>{t('no_members')}</small>
+                      </Col>
+                    </Row>
+                  </li>
+                )}
+                {users.map(user => (
+                  <GroupMemberRow
+                    key={user.email}
+                    user={user}
+                    selectUser={selectUser}
+                    unselectUser={unselectUser}
+                    selected={selectedUsers.includes(user)}
+                  />
+                ))}
+              </ul>
+            </div>
+            <hr />
+            <div>
+              <p className="small">{t('add_more_members')}</p>
+              <ErrorAlert error={inviteError} />
+              <Form horizontal onSubmit={addManagers} className="form">
+                <Row>
+                  <Col xs={6}>
+                    <FormControl
+                      type="input"
+                      placeholder="jane@example.com, joe@example.com"
+                      aria-describedby="add-members-description"
+                      value={emailString}
+                      onChange={handleEmailsChange}
+                    />
+                  </Col>
+                  <Col xs={4}>
+                    {inviteUserInflightCount > 0 ? (
+                      <Button bsStyle="primary" disabled>
+                        {t('adding')}&hellip;
+                      </Button>
+                    ) : (
+                      <Button bsStyle="primary" onClick={addManagers}>
+                        {t('add')}
+                      </Button>
+                    )}
+                  </Col>
+                </Row>
+                <Row>
+                  <Col xs={8}>
+                    <span className="help-block">
+                      {t('add_comma_separated_emails_help')}
+                    </span>
+                  </Col>
+                </Row>
+              </Form>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import getMeta from '../../../utils/meta'
+import { ManagersTable } from './managers-table'
+
+export default function PublisherManagers() {
+  const { isReady } = useWaitForI18n()
+  const { t } = useTranslation()
+
+  const groupId: string = getMeta('ol-groupId')
+  const groupName: string = getMeta('ol-groupName')
+
+  const paths = useMemo(
+    () => ({
+      addMember: `/manage/publishers/${groupId}/managers`,
+      removeMember: `/manage/publishers/${groupId}/managers`,
+    }),
+    [groupId]
+  )
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <ManagersTable
+      groupName={groupName}
+      translations={{
+        title: t('publisher_account'),
+        subtitle: t('managers_management'),
+        remove: t('remove_manager'),
+      }}
+      paths={paths}
+    />
+  )
+}
@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react'
+import { User } from '../../../../../types/group-management/user'
+
+export default function useUserSelection(initialUsers: User[]) {
+  const [users, setUsers] = useState<User[]>(initialUsers)
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([])
+
+  const selectAllUsers = () => setSelectedUsers(users)
+
+  const unselectAllUsers = () => setSelectedUsers([])
+
+  const selectUser = useCallback((user: User) => {
+    setSelectedUsers(users => [...users, user])
+  }, [])
+
+  const unselectUser = useCallback((user: User) => {
+    setSelectedUsers(users => users.filter(u => u.email !== user.email))
+  }, [])
+
+  return {
+    users,
+    setUsers,
+    selectedUsers,
+    selectUser,
+    unselectUser,
+    selectAllUsers,
+    unselectAllUsers,
+  }
+}
@@ -0,0 +1,9 @@
+import _ from 'lodash'
+
+export function parseEmails(emailsString: string) {
+  const regexBySpaceOrComma = /[\s,]+/
+  let emails = emailsString.split(regexBySpaceOrComma)
+  emails = _.map(emails, email => email.trim())
+  emails = _.filter(emails, email => email.indexOf('@') !== -1)
+  return emails
+}
@@ -1,5 +0,0 @@
-function Root() {
-  return <h2>React Manage Group Subscription</h2>
-}
-
-export default Root
@@ -1,7 +1,8 @@
+import '../base'
 import ReactDOM from 'react-dom'
-import Root from '../../../features/membership/components/groups-root'
+import Root from '../../../../features/group-management/components/group-managers'

-const element = document.getElementById('subscription-manage-groups-root')
+const element = document.getElementById('subscription-manage-group-root')
 if (element) {
  ReactDOM.render(<Root />, element)
 }
@@ -0,0 +1,8 @@
+import '../base'
+import ReactDOM from 'react-dom'
+import Members from '../../../../features/group-management/components/group-members'
+
+const element = document.getElementById('subscription-manage-group-root')
+if (element) {
+  ReactDOM.render(<Members />, element)
+}
@@ -0,0 +1,8 @@
+import '../base'
+import ReactDOM from 'react-dom'
+import Root from '../../../../features/group-management/components/institution-managers'
+
+const element = document.getElementById('subscription-manage-group-root')
+if (element) {
+  ReactDOM.render(<Root />, element)
+}
@@ -0,0 +1,8 @@
+import '../base'
+import ReactDOM from 'react-dom'
+import Root from '../../../../features/group-management/components/publisher-managers'
+
+const element = document.getElementById('subscription-manage-group-root')
+if (element) {
+  ReactDOM.render(<Root />, element)
+}