From 1e10632f7e01c1400e677ac062b367dd4929cf9e Mon Sep 17 00:00:00 2001
From: Tiago Paiva <tiago@tiagopaiva.me>
Date: Wed, 5 Mar 2025 12:29:21 -0300
Subject: [PATCH] fix: Adds permission groups to invite (#5173)

---
 frontend/common/stores/organisation-store.js  |   1 +
 frontend/web/components/GroupSelect.tsx       |   4 +-
 frontend/web/components/modals/InviteUsers.js | 210 ------------
 .../web/components/modals/InviteUsers.tsx     | 306 ++++++++++++++++++
 4 files changed, 309 insertions(+), 212 deletions(-)
 delete mode 100644 frontend/web/components/modals/InviteUsers.js
 create mode 100644 frontend/web/components/modals/InviteUsers.tsx

diff --git a/frontend/common/stores/organisation-store.js b/frontend/common/stores/organisation-store.js
index 0d2262e65a9e..3d3761521d86 100644
--- a/frontend/common/stores/organisation-store.js
+++ b/frontend/common/stores/organisation-store.js
@@ -263,6 +263,7 @@ const controller = {
           API.trackEvent(Constants.events.INVITE)
           return {
             email: invite.emailAddress,
+            permission_groups: invite.groups,
             role: invite.role.value,
           }
         }),
diff --git a/frontend/web/components/GroupSelect.tsx b/frontend/web/components/GroupSelect.tsx
index ec04ef7e1446..13611b2f9f5d 100644
--- a/frontend/web/components/GroupSelect.tsx
+++ b/frontend/web/components/GroupSelect.tsx
@@ -11,7 +11,7 @@ export type GroupSelectType = {
   value: number[] | undefined
   isOpen: boolean
   size: string
-  onAdd: (id: number, isUser: boolean) => void
+  onAdd: (id: number, isUser: boolean, name?: string) => void
   onRemove: (id: number, isUser: boolean) => void
   onToggle: () => void
 }
@@ -58,7 +58,7 @@ const GroupSelect: FC<GroupSelectType> = ({
                 if (isRemove && onRemove) {
                   onRemove(v.id, false)
                 } else if (!isRemove && onAdd) {
-                  onAdd(v.id, false)
+                  onAdd(v.id, false, v.name)
                 }
               }}
               className='assignees-list-item clickable'
diff --git a/frontend/web/components/modals/InviteUsers.js b/frontend/web/components/modals/InviteUsers.js
deleted file mode 100644
index 19b7aa258d9a..000000000000
--- a/frontend/web/components/modals/InviteUsers.js
+++ /dev/null
@@ -1,210 +0,0 @@
-import React, { Component } from 'react'
-import Button from 'components/base/forms/Button'
-import ConfigProvider from 'common/providers/ConfigProvider'
-import Constants from 'common/constants'
-import Icon from 'components/Icon'
-import { add } from 'ionicons/icons'
-import { IonIcon } from '@ionic/react'
-import { getPlanBasedOption } from 'components/PlanBasedAccess'
-
-const InviteUsers = class extends Component {
-  static displayName = 'InviteUsers'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      invites: [{}],
-      name: props.name,
-      tab: 0,
-    }
-  }
-
-  close(invites) {
-    AppActions.inviteUsers(invites)
-    closeModal()
-  }
-
-  componentDidMount = () => {
-    this.focusTimeout = setTimeout(() => {
-      this.input.focus()
-      this.focusTimeout = null
-    }, 500)
-  }
-
-  componentWillUnmount() {
-    if (this.focusTimeout) {
-      clearTimeout(this.focusTimeout)
-    }
-  }
-
-  isValid = () =>
-    _.every(
-      this.state.invites,
-      (invite) => Utils.isValidEmail(invite.emailAddress) && invite.role,
-    )
-
-  onChange = (index, key, value) => {
-    const invites = this.state.invites
-    invites[index][key] = value
-    this.setState({ invites })
-  }
-
-  deleteInvite = (index) => {
-    const invites = this.state.invites
-    invites.splice(index, 1)
-    this.setState({ invites })
-  }
-
-  changeTab = (tab) => {
-    this.setState({
-      invites: [{}],
-      tab,
-    })
-  }
-
-  render() {
-    const { invites } = this.state
-
-    return (
-      <OrganisationProvider>
-        {({ error, isSaving }) => (
-          <div>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-                AppActions.inviteUsers(invites)
-              }}
-            >
-              <div className='modal-body px-4 pt-4'>
-                <Row>
-                  <Flex>
-                    <label>Email Address</label>
-                  </Flex>
-                  <Flex>
-                    <label>Select Role</label>
-                  </Flex>
-                </Row>
-                {_.map(invites, (invite, index) => (
-                  <Row className='mb-2' key={index}>
-                    <Flex>
-                      <InputGroup
-                        className='mb-2'
-                        ref={(e) => (this.input = e)}
-                        inputProps={{
-                          className: 'full-width',
-                          name: 'inviteEmail',
-                        }}
-                        onChange={(e) =>
-                          this.onChange(
-                            index,
-                            'emailAddress',
-                            Utils.safeParseEventValue(e),
-                          )
-                        }
-                        value={invite.emailAddress}
-                        isValid={this.isValid}
-                        type='text'
-                        placeholder='E-mail address'
-                      />
-                    </Flex>
-                    <Flex className='mb-2' style={{ position: 'relative' }}>
-                      <Select
-                        data-test='select-role'
-                        placeholder='Select a role'
-                        value={invite.role}
-                        onChange={(role) => this.onChange(index, 'role', role)}
-                        className='pl-2 react-select'
-                        options={_.map(Constants.roles, (label, value) =>
-                          value === 'ADMIN'
-                            ? {
-                                label,
-                                value,
-                              }
-                            : getPlanBasedOption(
-                                {
-                                  label,
-                                  value,
-                                },
-                                'RBAC',
-                              ),
-                        )}
-                      />
-                    </Flex>
-                    {invites.length > 1 ? (
-                      <div className='ml-2'>
-                        <Button
-                          id='delete-invite'
-                          type='button'
-                          onClick={() => this.deleteInvite(index)}
-                          className='btn btn-with-icon mb-2'
-                        >
-                          <Icon name='trash-2' width={20} fill='#656D7B' />
-                        </Button>
-                      </div>
-                    ) : (
-                      <div />
-                    )}
-                  </Row>
-                ))}
-
-                <div className='text-right mt-4'>
-                  <Button
-                    theme='outline'
-                    size='small'
-                    id='btn-add-invite'
-                    disabled={isSaving || !this.isValid()}
-                    type='button'
-                    onClick={() =>
-                      this.setState({
-                        invites: this.state.invites.concat([{}]),
-                      })
-                    }
-                  >
-                    <Row>
-                      <span className='pl-2 icon'>
-                        <IonIcon icon={add} style={{ fontSize: '13px' }} />
-                      </span>
-                      <span>
-                        {isSaving ? 'Sending' : 'Invite additional member'}
-                      </span>
-                    </Row>
-                  </Button>
-                </div>
-
-                <div className='mt-5'>
-                  Users without administrator privileges will need to be invited
-                  to individual projects.
-                  <div>
-                    <Button
-                      theme='text'
-                      target='_blank'
-                      href='https://docs.flagsmith.com/system-administration/rbac'
-                      className='fw-normal'
-                    >
-                      Learn about User Roles.
-                    </Button>
-                  </div>
-                </div>
-                {error && <Error error={error} />}
-              </div>
-              <div className='modal-footer pt-5'>
-                <Button
-                  id='btn-send-invite'
-                  disabled={isSaving || !this.isValid()}
-                  onClick={() => this.close(invites)}
-                  type='submit'
-                >
-                  {isSaving ? 'Sending' : 'Send Invitation'}
-                </Button>
-              </div>
-            </form>
-          </div>
-        )}
-      </OrganisationProvider>
-    )
-  }
-}
-
-InviteUsers.propTypes = {}
-
-export default ConfigProvider(InviteUsers)
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx
new file mode 100644
index 000000000000..2f89f012d0cc
--- /dev/null
+++ b/frontend/web/components/modals/InviteUsers.tsx
@@ -0,0 +1,306 @@
+import React, { useState, useEffect, useRef, FC } from 'react'
+import Button from 'components/base/forms/Button'
+import ConfigProvider from 'common/providers/ConfigProvider'
+import Constants from 'common/constants'
+import Icon from 'components/Icon'
+import { add } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
+import { getPlanBasedOption } from 'components/PlanBasedAccess'
+import InputGroup from 'components/base/forms/InputGroup'
+import OrganisationProvider from 'common/providers/OrganisationProvider'
+import Utils from 'common/utils/utils'
+import _ from 'lodash'
+import AppActions from 'common/dispatcher/app-actions'
+import ErrorMessage from 'components/ErrorMessage'
+import AccountStore from 'common/stores/account-store'
+import { close as closeIcon } from 'ionicons/icons'
+import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { useGetGroupsQuery } from 'common/services/useGroup'
+
+interface Invite {
+  temporaryId: string
+  emailAddress?: string
+  role?: string
+  groups?: number[]
+}
+
+const CustomMultiValue = (props: MultiValueProps<GroupOption>) => {
+  const { data, removeProps } = props
+
+  if (!data?.label || !data?.value) {
+    return null
+  }
+
+  return (
+    <Row className='chip p-1'>
+      <span className='font-weight-bold'>{data.label}</span>
+      {
+        <span className='chip-icon ion'>
+          <IonIcon
+            icon={closeIcon}
+            onClick={() => removeProps?.onClick?.(data)}
+          />
+        </span>
+      }
+    </Row>
+  )
+}
+
+type GroupOption = { label: string; value: number }
+
+const InviteUsers: FC = () => {
+  const [invites, setInvites] = useState<Invite[]>([
+    { temporaryId: Utils.GUID() },
+  ])
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const { id: orgId } = AccountStore.getOrganisation()
+
+  const { data: groupData } = useGetGroupsQuery({ orgId: orgId, page: 1 })
+
+  const groupOptions = groupData?.results.map((group) => ({
+    label: group.name,
+    value: group.id,
+  }))
+
+  useEffect(() => {
+    const focusTimeout = setTimeout(() => {
+      inputRef.current?.focus()
+    }, 500)
+
+    return () => {
+      clearTimeout(focusTimeout)
+    }
+  }, [])
+
+  const isValid = (): boolean => {
+    return _.every(
+      invites,
+      (invite) => Utils.isValidEmail(invite.emailAddress) && invite.role,
+    )
+  }
+
+  const onChange = (
+    id: string,
+    key: keyof Invite,
+    value: string | number[],
+  ): void => {
+    setInvites((prev) =>
+      prev.map((invite) => {
+        if (invite.temporaryId === id) {
+          return {
+            ...invite,
+            [key]: value,
+          }
+        }
+        return invite
+      }),
+    )
+  }
+
+  const deleteInvite = (id: string): void => {
+    setInvites(invites.filter((invite) => invite.temporaryId !== id))
+  }
+
+  const close = (invites: Omit<Invite, 'temporaryId'>[]): void => {
+    AppActions.inviteUsers(invites)
+    closeModal()
+  }
+
+  return (
+    <OrganisationProvider>
+      {({ error, isSaving }: { error: string | null; isSaving: boolean }) => (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              AppActions.inviteUsers(invites)
+            }}
+          >
+            <div
+              className='modal-body px-4 pt-4'
+              style={{ overflowY: 'unset' }}
+            >
+              <Row>
+                <Flex>
+                  <label>Email Address</label>
+                </Flex>
+                <Flex>
+                  <label className='ml-3'>Select Role</label>
+                </Flex>
+                <Flex>
+                  <label className='ml-3'>Select Group</label>
+                </Flex>
+              </Row>
+              {invites.map((invite, index) => (
+                <Row
+                  className='mb-2 align-items-start '
+                  key={invite.temporaryId}
+                >
+                  <Flex>
+                    <InputGroup
+                      className='mb-2'
+                      inputProps={{
+                        className: 'full-width',
+                        name: 'inviteEmail',
+                        ref: index === 0 ? inputRef : undefined,
+                      }}
+                      onChange={(e) =>
+                        onChange(
+                          invite.temporaryId,
+                          'emailAddress',
+                          Utils.safeParseEventValue(e),
+                        )
+                      }
+                      value={invite.emailAddress}
+                      isValid={isValid}
+                      type='text'
+                      placeholder='E-mail address'
+                    />
+                  </Flex>
+                  <Flex className='mb-2'>
+                    <Select
+                      data-test='select-role'
+                      placeholder='Select a role'
+                      value={invite.role}
+                      onChange={(role) =>
+                        onChange(invite.temporaryId, 'role', role)
+                      }
+                      className='pl-2 react-select'
+                      options={_.map(Constants.roles, (label, value) =>
+                        value === 'ADMIN'
+                          ? {
+                              label,
+                              value,
+                            }
+                          : getPlanBasedOption(
+                              {
+                                label,
+                                value,
+                              },
+                              'RBAC',
+                            ),
+                      )}
+                    />
+                  </Flex>
+                  <Flex className='mb-2' style={{ position: 'relative' }}>
+                    <Select
+                      data-test='select-group'
+                      placeholder='Select a group'
+                      value={invite?.groups?.map((inviteGroup) => {
+                        return groupOptions?.find(
+                          (g) => g.value === inviteGroup,
+                        )
+                      })}
+                      options={groupOptions}
+                      className='pl-2 react-select'
+                      isMulti={true}
+                      cropWithEllipsis={true}
+                      components={{
+                        ClearIndicator: () => null,
+                        MultiValue: CustomMultiValue,
+                        MultiValueContainer: () => null,
+                      }}
+                      onChange={(options: GroupOption[]) =>
+                        onChange(
+                          invite.temporaryId,
+                          'groups',
+                          options.map((o) => o.value),
+                        )
+                      }
+                      styles={{
+                        control: (base: any) => ({
+                          ...base,
+                          height: 'auto !important',
+                          minHeight: '44px',
+                        }),
+                        multiValue: (base: any) => ({
+                          ...base,
+                        }),
+                        valueContainer: (base: any) => ({
+                          ...base,
+                          gap: '4px',
+                          lineHeight: '22px',
+                          paddingBottom: '6px !important',
+                          paddingTop: '6px  !important',
+                        }),
+                      }}
+                    />
+                  </Flex>
+                  {invites.length > 1 ? (
+                    <div className='ml-2'>
+                      <Button
+                        id='delete-invite'
+                        type='button'
+                        onClick={() => deleteInvite(invite.temporaryId)}
+                        className='btn btn-with-icon mb-2'
+                      >
+                        <Icon name='trash-2' width={20} fill='#656D7B' />
+                      </Button>
+                    </div>
+                  ) : (
+                    <div />
+                  )}
+                </Row>
+              ))}
+
+              <div className='text-right mt-4'>
+                <Button
+                  theme='outline'
+                  size='small'
+                  id='btn-add-invite'
+                  disabled={isSaving || !isValid()}
+                  type='button'
+                  onClick={() =>
+                    setInvites([...invites, { temporaryId: Utils.GUID() }])
+                  }
+                >
+                  <Row>
+                    <span className='pl-2 icon'>
+                      <IonIcon icon={add} style={{ fontSize: '13px' }} />
+                    </span>
+                    <span>
+                      {isSaving ? 'Sending' : 'Invite additional member'}
+                    </span>
+                  </Row>
+                </Button>
+              </div>
+
+              <div className='mt-5'>
+                Users without administrator privileges will need to be invited
+                to individual projects.
+                <div>
+                  <Button
+                    theme='text'
+                    target='_blank'
+                    href='https://docs.flagsmith.com/system-administration/rbac'
+                    className='fw-normal'
+                  >
+                    Learn about User Roles.
+                  </Button>
+                </div>
+              </div>
+              {error && <ErrorMessage error={error} />}
+            </div>
+            <div className='modal-footer pt-5'>
+              <Button
+                id='btn-send-invite'
+                disabled={isSaving || !isValid()}
+                onClick={() =>
+                  close(
+                    invites.map(({ temporaryId, ...rest }) => ({ ...rest })),
+                  )
+                }
+                type='submit'
+              >
+                {isSaving ? 'Sending' : 'Send Invitation'}
+              </Button>
+            </div>
+          </form>
+        </div>
+      )}
+    </OrganisationProvider>
+  )
+}
+
+export default ConfigProvider(InviteUsers)