feat: use the new userselect component for pi

apps/backend/db_patches/0200_Update_email_search_description.sql

@@ -0,0 +1,13 @@
+DO
+$$
+BEGIN
+    IF register_patch('Update_email_search_description.sql', 'jekabskarklins', 'Updates email search description to make it more clear.', '2025-09-09') THEN
+      BEGIN
+        UPDATE features
+        SET description = 'By setting this feature ON, users can be searched *only* by their exact email addresses.'
+        WHERE feature_id = 'EMAIL_SEARCH';
+      END;
+    END IF;
+END;
+$$
+LANGUAGE plpgsql;

apps/frontend/src/components/common/UserManagementTable.tsx

@@ -1,7 +1,7 @@
 import { ScheduleSend } from '@mui/icons-material';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import SendIcon from '@mui/icons-material/Send';
-import { Chip } from '@mui/material';
+import { Chip, Tooltip } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import FormControl from '@mui/material/FormControl';
@@ -15,20 +15,21 @@ import { FeatureContext } from 'context/FeatureContextProvider';
 import { UserContext } from 'context/UserContextProvider';
 import { BasicUserDetails, FeatureId, Invite, UserRole } from 'generated/sdk';
 
-import InviteUser from '../proposal/InviteUser';
 import ParticipantModal from '../proposal/ParticipantModal';
+import ParticipantSelector from '../proposal/ParticipantSelector';
 
 export type UserManagementTableProps = {
   /** Basic user details array to be shown in the table. */
   users: BasicUserDetails[];
   /** Function for setting up the users. */
   setUsers: (users: BasicUserDetails[]) => void;
-  invites: Invite[];
-  setInvites: (invites: Invite[]) => void;
+  invites?: Invite[];
+  setInvites?: (invites: Invite[]) => void;
   sx?: SxProps<Theme>;
   title: string;
   preserveSelf?: boolean;
   addButtonLabel?: string;
+  addButtonTooltip?: string;
   /** Disable the add button */
   disabled?: boolean;
   /** Custom actions to be passed to PeopleTable */
@@ -41,12 +42,13 @@ export type UserManagementTableProps = {
 const UserManagementTable = ({
   users,
   setUsers,
-  invites,
+  invites = [],
   setInvites,
   sx,
   title,
   preserveSelf,
   addButtonLabel = 'Add',
+  addButtonTooltip = 'Add a participant',
   disabled = false,
   onUserAction,
   excludeUserIds = [],
@@ -73,7 +75,7 @@ const UserManagementTable = ({
     invites: Invite[];
   }) => {
     setUsers([...users, ...props.users]);
-    setInvites([...invites, ...props.invites]);
+    setInvites?.([...invites, ...props.invites]);
     setOpen(false);
   };
 
@@ -85,12 +87,13 @@ const UserManagementTable = ({
   };
 
   const handleDeleteInvite = (invite: Invite) => {
-    setInvites(invites.filter((i) => i.email !== invite.email));
+    setInvites?.(invites.filter((i) => i.email !== invite.email));
   };
 
   const InviteComponent = (
-    <InviteUser
+    <ParticipantSelector
       modalOpen={modalOpen}
+      title="Add co-proposers"
       onClose={() => setOpen(false)}
       onAddParticipants={handleAddParticipants}
       excludeUserIds={[...users.map((user) => user.id), ...excludeUserIds]}
@@ -197,16 +200,18 @@ const UserManagementTable = ({
               marginTop: theme.spacing(1),
             })}
           >
-            <Button
-              variant="outlined"
-              onClick={openModal}
-              data-cy="add-participant-button"
-              size="small"
-              startIcon={<PersonAddIcon />}
-              disabled={disabled}
-            >
-              {addButtonLabel}
-            </Button>
+            <Tooltip title={addButtonTooltip}>
+              <Button
+                variant="outlined"
+                onClick={openModal}
+                data-cy="add-participant-button"
+                size="small"
+                startIcon={<PersonAddIcon />}
+                disabled={disabled}
+              >
+                {addButtonLabel}
+              </Button>
+            </Tooltip>
           </ActionButtonContainer>
         </div>
       </FormControl>

apps/frontend/src/components/proposal/CoProposers.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+
+import UserManagementTable, {
+  UserManagementTableProps,
+} from 'components/common/UserManagementTable';
+import {
+  createMissingContextErrorMessage,
+  QuestionaryContext,
+} from 'components/questionary/QuestionaryContext';
+import { BasicUserDetails } from 'generated/sdk';
+
+import { ProposalContextType } from './ProposalContainer';
+
+type CoProposersProps = Pick<
+  UserManagementTableProps,
+  'setInvites' | 'setUsers' | 'disabled'
+> & {
+  setPrincipalInvestigator?: (user: BasicUserDetails) => void;
+};
+
+const CoProposers = ({
+  setPrincipalInvestigator,
+  ...props
+}: CoProposersProps) => {
+  const handleUserAction = (action: string, user: BasicUserDetails) => {
+    if (action === 'setPrincipalInvestigator' && setPrincipalInvestigator) {
+      setPrincipalInvestigator(user);
+    }
+  };
+
+  const { state } = useContext(QuestionaryContext) as ProposalContextType;
+  if (!state) {
+    throw new Error(createMissingContextErrorMessage());
+  }
+  const { proposer, users, coProposerInvites } = state.proposal;
+
+  return (
+    <UserManagementTable
+      {...props}
+      title="Co-Proposers"
+      addButtonTooltip="Add a co-proposer"
+      onUserAction={handleUserAction}
+      excludeUserIds={proposer ? [proposer.id] : []}
+      // QuickFix for material table changing immutable state
+      // https://github.com/mbrn/material-table/issues/666
+      users={JSON.parse(JSON.stringify(users))}
+      invites={coProposerInvites}
+      allowInviteByEmail={true}
+    />
+  );
+};
+
+export default CoProposers;

apps/frontend/src/components/proposal/NoOptionsText.tsx

@@ -1,7 +1,8 @@
 import { MenuItem, Typography } from '@mui/material';
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { BasicUserDetails } from 'generated/sdk';
+import { FeatureContext } from 'context/FeatureContextProvider';
+import { BasicUserDetails, FeatureId } from 'generated/sdk';
 import { isValidEmail } from 'utils/net';
 import { getFullUserNameWithInstitution } from 'utils/user';
 
@@ -12,6 +13,9 @@ interface NoOptionsTextProps {
   exactEmailMatch?: BasicUserDetails;
   excludeEmails?: string[];
   minSearchLength?: number;
+  /* If true, if no user with email is found show invite option */
+  allowEmailInvites?: boolean;
+  /* If true, only allow searching users by entering their email */
   isEmailSearchOnly: boolean;
   allowInviteByEmail?: boolean;
 }
@@ -26,7 +30,14 @@ function NoOptionsText({
   isEmailSearchOnly,
   allowInviteByEmail = false,
 }: NoOptionsTextProps) {
-  const isEmailInviteEnabled = allowInviteByEmail;
+  const featureContext = useContext(FeatureContext);
+  const isEmailInviteFeatureEnabled = !!featureContext.featuresMap.get(
+    FeatureId.EMAIL_INVITE
+  )?.isEnabled;
+
+  // email invite will be enabled if both the prop and the feature flag are true
+  const isEmailInviteEnabled =
+    allowInviteByEmail && isEmailInviteFeatureEnabled;
 
   if (exactEmailMatch) {
     return (