From fffb37ba6a28045305dcd0a90352acc611fe1344 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:48:26 +0100
Subject: [PATCH] Edit survey user extra properties from survey users list
 (#3630)

* edit survey user extra props from list

* code cleanup

* fixed user update

* layout adjustments

* layout adjustments

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 core/i18n/resources/en/common.js              |  1 +
 .../UserAuthGroupExtraPropsEditor.js          | 18 +++---
 .../App/views/Users/UserEdit/UserEdit.js      | 24 +++++---
 .../App/views/Users/UserEdit/UserEdit.scss    | 15 ++++-
 .../UserExtraPropEditor.js                    |  2 +-
 .../UserExtraPropsEditor.js                   | 42 +++++++-------
 .../Users/UserEdit/store/actions/useOnSave.js | 12 ++--
 .../views/Users/UserEdit/store/useEditUser.js | 29 ++++++----
 .../views/Users/UsersListSurvey/Row/Row.js    | 17 +++++-
 .../SurveyUserExtraPropsEditor.js             | 55 +++++++++++++++++++
 .../SurveyUserExtraPropsEditor/index.js       |  1 +
 .../Users/UsersListSurvey/UsersList.scss      |  9 +++
 .../Users/UsersListSurvey/UsersListSurvey.js  | 42 ++++++++++----
 13 files changed, 193 insertions(+), 74 deletions(-)
 create mode 100644 webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/SurveyUserExtraPropsEditor.js
 create mode 100644 webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/index.js

diff --git a/core/i18n/resources/en/common.js b/core/i18n/resources/en/common.js
index ede3fe7107..0427538e88 100644
--- a/core/i18n/resources/en/common.js
+++ b/core/i18n/resources/en/common.js
@@ -898,6 +898,7 @@ Copy the invitation link to the clipboard?`,
     },
     surveysDraft: 'Surveys (draft)',
     surveysPublished: 'Surveys (published)',
+    editSurveyUserExtraPropsForUser: 'Edit survey user extra properties for user "{{userName}}"',
   },
 
   usersAccessRequestView: {
diff --git a/webapp/views/App/views/Users/UserEdit/UserAuthGroupExtraPropsEditor/UserAuthGroupExtraPropsEditor.js b/webapp/views/App/views/Users/UserEdit/UserAuthGroupExtraPropsEditor/UserAuthGroupExtraPropsEditor.js
index a5e20af328..7cbe47d575 100644
--- a/webapp/views/App/views/Users/UserEdit/UserAuthGroupExtraPropsEditor/UserAuthGroupExtraPropsEditor.js
+++ b/webapp/views/App/views/Users/UserEdit/UserAuthGroupExtraPropsEditor/UserAuthGroupExtraPropsEditor.js
@@ -7,14 +7,14 @@ import * as Survey from '@core/survey/survey'
 import { ExtraPropDef } from '@core/survey/extraPropDef'
 import * as User from '@core/user/user'
 
-import { ExpansionPanel } from '@webapp/components'
 import { FormItem, Input, NumberFormats } from '@webapp/components/form/Input'
 
 import { useSurveyInfo } from '@webapp/store/survey'
 import { useAuthCanEditSurvey } from '@webapp/store/user'
+import { ButtonSave } from '@webapp/components'
 
 export const UserAuthGroupExtraPropsEditor = (props) => {
-  const { onChange, userToUpdate } = props
+  const { onChange, onSave, userToUpdate } = props
 
   const canEditSurvey = useAuthCanEditSurvey()
   const surveyInfo = useSurveyInfo()
@@ -41,26 +41,24 @@ export const UserAuthGroupExtraPropsEditor = (props) => {
   const readOnly = !canEditSurvey
 
   return (
-    <ExpansionPanel
-      buttonLabel="usersView.surveyExtraProp.label_other"
-      className="extra-props"
-      startClosed={Objects.isEmpty(extraOld)}
-    >
+    <div className="form">
       {extraDefsArray.map(({ name, dataType }) => (
         <FormItem label={name} key={name}>
           <Input
-            value={User.getAuthGroupExtraProp(name)(userToUpdate)}
             numberFormat={dataType === ExtraPropDef.dataTypes.number ? NumberFormats.decimal() : null}
-            readOnly={readOnly}
             onChange={onInputFieldChange(name)}
+            readOnly={readOnly}
+            value={User.getAuthGroupExtraProp(name)(userToUpdate)}
           />
         </FormItem>
       ))}
-    </ExpansionPanel>
+      {onSave && <ButtonSave onClick={onSave} />}
+    </div>
   )
 }
 
 UserAuthGroupExtraPropsEditor.propTypes = {
   onChange: PropTypes.func.isRequired,
+  onSave: PropTypes.func,
   userToUpdate: PropTypes.object.isRequired,
 }
diff --git a/webapp/views/App/views/Users/UserEdit/UserEdit.js b/webapp/views/App/views/Users/UserEdit/UserEdit.js
index 1bb4d65288..381554dfca 100644
--- a/webapp/views/App/views/Users/UserEdit/UserEdit.js
+++ b/webapp/views/App/views/Users/UserEdit/UserEdit.js
@@ -3,28 +3,30 @@ import './UserEdit.scss'
 import React from 'react'
 import { useNavigate, useParams } from 'react-router'
 
+import { Objects } from '@openforis/arena-core'
+
+import * as AuthGroup from '@core/auth/authGroup'
+import * as ProcessUtils from '@core/processUtils'
 import * as Survey from '@core/survey/survey'
 import * as User from '@core/user/user'
 import * as Validation from '@core/validation/validation'
-import * as AuthGroup from '@core/auth/authGroup'
-import * as ProcessUtils from '@core/processUtils'
 
-import ProfilePicture from '@webapp/components/profilePicture'
-import { FormItem, Input, NumberFormats } from '@webapp/components/form/Input'
+import { Button, ButtonDelete, ButtonInvite, ButtonSave, ExpansionPanel } from '@webapp/components'
 import Checkbox from '@webapp/components/form/checkbox'
 import DropdownUserTitle from '@webapp/components/form/DropdownUserTitle'
-import { ButtonSave, ButtonDelete, ButtonInvite, Button } from '@webapp/components'
+import { FormItem, Input, NumberFormats } from '@webapp/components/form/Input'
+import ProfilePicture from '@webapp/components/profilePicture'
 
 import { appModuleUri, userModules } from '@webapp/app/appModules'
 import { useSurveyInfo } from '@webapp/store/survey'
 import { useI18n } from '@webapp/store/system'
 import { useAuthCanUseMap } from '@webapp/store/user/hooks'
 
-import { useEditUser } from './store'
 import DropdownUserGroup from '../DropdownUserGroup'
 import ProfilePictureEditor from './ProfilePictureEditor'
-import { UserExtraPropsEditor } from './UserExtraPropsEditor'
+import { useEditUser } from './store'
 import { UserAuthGroupExtraPropsEditor } from './UserAuthGroupExtraPropsEditor/UserAuthGroupExtraPropsEditor'
+import { UserExtraPropsEditor } from './UserExtraPropsEditor'
 
 const UserEdit = () => {
   const { userUuid } = useParams()
@@ -167,7 +169,13 @@ const UserEdit = () => {
             </FormItem>
           )}
           {ProcessUtils.ENV.experimentalFeatures && (
-            <UserAuthGroupExtraPropsEditor onChange={onSurveyExtraPropsChange} userToUpdate={userToUpdate} />
+            <ExpansionPanel
+              buttonLabel="usersView.surveyExtraProp.label_other"
+              className="extra-props"
+              startClosed={Objects.isEmpty(User.getAuthGroupExtraProps(userToUpdate))}
+            >
+              <UserAuthGroupExtraPropsEditor onChange={onSurveyExtraPropsChange} userToUpdate={userToUpdate} />
+            </ExpansionPanel>
           )}
         </>
       )}
diff --git a/webapp/views/App/views/Users/UserEdit/UserEdit.scss b/webapp/views/App/views/Users/UserEdit/UserEdit.scss
index cabecc84f6..e38c5644e8 100644
--- a/webapp/views/App/views/Users/UserEdit/UserEdit.scss
+++ b/webapp/views/App/views/Users/UserEdit/UserEdit.scss
@@ -32,9 +32,18 @@
   }
 
   .extra-props {
-    .form-item {
-      display: flex;
-      white-space: nowrap;
+    .form {
+      height: auto;
+      grid-row-gap: 0;
+
+      .form-item {
+        width: 20rem;
+        white-space: nowrap;
+
+        .form-input-container {
+          width: 12rem;
+        }
+      }
     }
     .btn-add {
       justify-self: center;
diff --git a/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropEditor.js b/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropEditor.js
index 0999da5e3d..34d34479e4 100644
--- a/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropEditor.js
+++ b/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropEditor.js
@@ -101,7 +101,7 @@ export const UserExtraPropEditor = (props) => {
   }, [initialItem, newItem, onDelete, onEditChange])
 
   return (
-    <div className="extra-props display-flex">
+    <div className="extra-prop display-flex">
       <FormItem label="extraProp.name" labelParams={{ position: index + 1 }}>
         <Input
           disabled={!editing}
diff --git a/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropsEditor.js b/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropsEditor.js
index a4a6938646..7f5bfe1523 100644
--- a/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropsEditor.js
+++ b/webapp/views/App/views/Users/UserEdit/UserExtraPropsEditor/UserExtraPropsEditor.js
@@ -68,27 +68,29 @@ export const UserExtraPropsEditor = (props) => {
 
   return (
     <ExpansionPanel buttonLabel="extraProp.label_plural" className="extra-props" startClosed={items.length === 0}>
-      {items.map(({ name, newItem, uuid, value }, index) => (
-        <UserExtraPropEditor
-          key={uuid}
-          editingItems={editing}
-          index={index}
-          items={items}
-          name={name}
-          newItem={newItem}
-          onDelete={onItemDelete}
-          onEditChange={onItemEditChange}
-          onSave={onItemSave}
-          uuid={uuid}
-          value={value}
+      <div className="form">
+        {items.map(({ name, newItem, uuid, value }, index) => (
+          <UserExtraPropEditor
+            key={uuid}
+            editingItems={editing}
+            index={index}
+            items={items}
+            name={name}
+            newItem={newItem}
+            onDelete={onItemDelete}
+            onEditChange={onItemEditChange}
+            onSave={onItemSave}
+            uuid={uuid}
+            value={value}
+          />
+        ))}
+        <ButtonAdd
+          className="btn-add"
+          disabled={editing || items.some((item) => item.newItem)}
+          label="extraProp.addExtraProp"
+          onClick={onAdd}
         />
-      ))}
-      <ButtonAdd
-        className="btn-add"
-        disabled={editing || items.some((item) => item.newItem)}
-        label="extraProp.addExtraProp"
-        onClick={onAdd}
-      />
+      </div>
     </ExpansionPanel>
   )
 }
diff --git a/webapp/views/App/views/Users/UserEdit/store/actions/useOnSave.js b/webapp/views/App/views/Users/UserEdit/store/actions/useOnSave.js
index 2de42234cc..55340b40ce 100644
--- a/webapp/views/App/views/Users/UserEdit/store/actions/useOnSave.js
+++ b/webapp/views/App/views/Users/UserEdit/store/actions/useOnSave.js
@@ -14,13 +14,13 @@ import { useSurveyId } from '@webapp/store/survey'
 
 import { validateUserEdit } from './validate'
 
-export const useOnSave = ({ userToUpdate, userToUpdateOriginal, setUserToUpdateOriginal }) => {
+export const useOnSave = ({ userToUpdate, userToUpdateOriginal = null, setUserToUpdateOriginal = null }) => {
   const dispatch = useDispatch()
   const { hideSurveyGroup } = useQuery()
   const user = useUser()
   const surveyId = useSurveyId()
 
-  const saveUser = async () => {
+  const saveUser = useCallback(async () => {
     const editingSelf = User.isEqual(user)(userToUpdate)
     const userToUpdateUuid = User.getUuid(userToUpdate)
     const profilePicture = User.getProfilePicture(userToUpdate)
@@ -61,17 +61,17 @@ export const useOnSave = ({ userToUpdate, userToUpdateOriginal, setUserToUpdateO
           params: { name: User.getName(userToUpdate) },
         })
       )
-      setUserToUpdateOriginal(userToUpdate)
+      setUserToUpdateOriginal?.(userToUpdate)
     } finally {
       dispatch(LoaderActions.hideLoader())
     }
-  }
+  }, [dispatch, hideSurveyGroup, setUserToUpdateOriginal, surveyId, user, userToUpdate])
 
   return useCallback(async () => {
     const userUpdatedValidated = await validateUserEdit(userToUpdate)
 
     if (Validation.isObjValid(userUpdatedValidated)) {
-      if (User.isSystemAdmin(userToUpdate) && !User.isSystemAdmin(userToUpdateOriginal)) {
+      if (userToUpdateOriginal && User.isSystemAdmin(userToUpdate) && !User.isSystemAdmin(userToUpdateOriginal)) {
         dispatch(
           DialogConfirmActions.showDialogConfirm({
             key: 'usersView.confirmUserWillBeSystemAdmin',
@@ -82,5 +82,5 @@ export const useOnSave = ({ userToUpdate, userToUpdateOriginal, setUserToUpdateO
         await saveUser()
       }
     }
-  }, [userToUpdate, userToUpdateOriginal])
+  }, [dispatch, saveUser, userToUpdate, userToUpdateOriginal])
 }
diff --git a/webapp/views/App/views/Users/UserEdit/store/useEditUser.js b/webapp/views/App/views/Users/UserEdit/store/useEditUser.js
index 5cc3405700..fd6222a5b4 100644
--- a/webapp/views/App/views/Users/UserEdit/store/useEditUser.js
+++ b/webapp/views/App/views/Users/UserEdit/store/useEditUser.js
@@ -87,14 +87,17 @@ export const useEditUser = ({ userUuid }) => {
     onUpdate(userUpdated)
   }
 
-  const onMapApiKeyTest = useCallback(async ({ provider, apiKey }) => {
-    const success = await API.testMapApiKey({ provider, apiKey })
-    if (success) {
-      dispatch(NotificationActions.notifyInfo({ key: 'user.mapApiKeys.keyIsCorrect' }))
-    } else {
-      dispatch(NotificationActions.notifyError({ key: 'user.mapApiKeys.keyIsNotCorrect' }))
-    }
-  }, [])
+  const onMapApiKeyTest = useCallback(
+    async ({ provider, apiKey }) => {
+      const success = await API.testMapApiKey({ provider, apiKey })
+      if (success) {
+        dispatch(NotificationActions.notifyInfo({ key: 'user.mapApiKeys.keyIsCorrect' }))
+      } else {
+        dispatch(NotificationActions.notifyError({ key: 'user.mapApiKeys.keyIsNotCorrect' }))
+      }
+    },
+    [dispatch]
+  )
 
   const onExtraChange = useCallback(
     (extra) => {
@@ -103,10 +106,12 @@ export const useEditUser = ({ userUuid }) => {
     [onUpdate, userToUpdate]
   )
 
-  const onSurveyExtraPropsChange = (extraPropsNew) => {
-    const userUpdated = User.assocAuthGroupExtraProps(extraPropsNew)(userToUpdate)
-    onUpdate(userUpdated)
-  }
+  const onSurveyExtraPropsChange = useCallback(
+    (extraPropsNew) => {
+      onUpdate(User.assocAuthGroupExtraProps(extraPropsNew)(userToUpdate))
+    },
+    [onUpdate, userToUpdate]
+  )
 
   return {
     hideSurveyGroup,
diff --git a/webapp/views/App/views/Users/UsersListSurvey/Row/Row.js b/webapp/views/App/views/Users/UsersListSurvey/Row/Row.js
index 2287739978..63a80652dc 100644
--- a/webapp/views/App/views/Users/UsersListSurvey/Row/Row.js
+++ b/webapp/views/App/views/Users/UsersListSurvey/Row/Row.js
@@ -5,6 +5,7 @@ import * as AuthGroup from '@core/auth/authGroup'
 import * as Survey from '@core/survey/survey'
 import * as User from '@core/user/user'
 import * as DateUtils from '@core/dateUtils'
+import * as ProcessUtils from '@core/processUtils'
 
 import { TestId } from '@webapp/utils/testId'
 import { useI18n } from '@webapp/store/system'
@@ -17,13 +18,15 @@ import ProfilePicture from '@webapp/components/profilePicture'
 import { CopyInvitationLinkButton } from './CopyInvitationLinkButton'
 
 const Row = (props) => {
-  const { row: userListItem } = props
+  const { onEditSurveyUserExtraProps, row: userListItem } = props
   const surveyInfo = useSurveyInfo()
   const surveyUuid = Survey.getUuid(surveyInfo)
   const i18n = useI18n()
   const canEditUser = useAuthCanEditUser(userListItem)
   const emailVisible = useAuthCanViewOtherUsersEmail()
 
+  const handleResendInvitation = useOnInviteRepeat({ userToInvite: userListItem, hasToNavigate: false })
+
   const authGroup = User.getAuthGroupBySurveyUuid({ surveyUuid, defaultToMainGroup: true })(userListItem)
   const authGroupName = AuthGroup.getName(authGroup)
   const userUuid = User.getUuid(userListItem)
@@ -34,8 +37,6 @@ const Row = (props) => {
   const lastLoginTime = User.getLastLoginTime(userListItem)
   const lastLoginTimeFormatted = DateUtils.convertDateTimeFromISOToDisplay(lastLoginTime) ?? ''
 
-  const handleResendInvitation = useOnInviteRepeat({ userToInvite: userListItem, hasToNavigate: false })
-
   return (
     <>
       <div data-testid={TestId.userList.profilePicture} className="users-list__cell-profile-picture">
@@ -86,11 +87,21 @@ const Row = (props) => {
       <div data-testid={TestId.userList.edit}>
         <span className={`icon icon-12px icon-action ${canEditUser ? 'icon-pencil2' : 'icon-eye'}`} />
       </div>
+      {canEditUser && ProcessUtils.ENV.experimentalFeatures && (
+        <Button
+          iconClassName="icon-cog"
+          title="usersView.editSurveyUserExtraPropsForUser"
+          titleParams={{ userName: User.getName(userListItem) ?? User.getEmail(userListItem) }}
+          onClick={(event) => onEditSurveyUserExtraProps({ event, userListItem })}
+          variant="text"
+        />
+      )}
     </>
   )
 }
 
 Row.propTypes = {
+  onEditSurveyUserExtraProps: PropTypes.func.isRequired,
   row: PropTypes.object.isRequired,
 }
 
diff --git a/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/SurveyUserExtraPropsEditor.js b/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/SurveyUserExtraPropsEditor.js
new file mode 100644
index 0000000000..5a5494e3be
--- /dev/null
+++ b/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/SurveyUserExtraPropsEditor.js
@@ -0,0 +1,55 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import * as User from '@core/user/user'
+
+import { PanelRight } from '@webapp/components'
+
+import { useSurveyUuid } from '@webapp/store/survey/hooks'
+
+import { UserAuthGroupExtraPropsEditor } from '../../UserEdit/UserAuthGroupExtraPropsEditor'
+import { useOnSave } from '../../UserEdit/store/actions/useOnSave'
+
+export const SurveyUserExtraPropsEditor = (props) => {
+  const { onClose, onUserUpdate, userToUpdate } = props
+
+  const surveyUuid = useSurveyUuid()
+  const [userUpdated, setUserUpdated] = useState(userToUpdate)
+  const saveUser = useOnSave({ userToUpdate: userUpdated })
+
+  useEffect(() => {
+    const groupInCurrentSurvey = User.getAuthGroupBySurveyUuid({ surveyUuid })(userToUpdate)
+    const groupExtraProps = groupInCurrentSurvey?.props?.extra
+    setUserUpdated(User.assocAuthGroupExtraProps(groupExtraProps)(userToUpdate))
+  }, [surveyUuid, userToUpdate])
+
+  const onSurveyExtraPropsChange = useCallback(
+    (extraPropsNew) => {
+      setUserUpdated(User.assocAuthGroupExtraProps(extraPropsNew)(userUpdated))
+    },
+    [userUpdated]
+  )
+
+  const onSave = useCallback(async () => {
+    await saveUser()
+    onUserUpdate(userUpdated)
+  }, [onUserUpdate, saveUser, userUpdated])
+
+  return (
+    <PanelRight
+      className="survey-user-extra-props"
+      header="usersView.editSurveyUserExtraPropsForUser"
+      headerParams={{ userName: User.getName(userToUpdate) ?? User.getEmail(userToUpdate) }}
+      onClose={onClose}
+      width="55rem"
+    >
+      <UserAuthGroupExtraPropsEditor onChange={onSurveyExtraPropsChange} onSave={onSave} userToUpdate={userUpdated} />
+    </PanelRight>
+  )
+}
+
+SurveyUserExtraPropsEditor.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onUserUpdate: PropTypes.func.isRequired,
+  userToUpdate: PropTypes.object.isRequired,
+}
diff --git a/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/index.js b/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/index.js
new file mode 100644
index 0000000000..e304f0ec7b
--- /dev/null
+++ b/webapp/views/App/views/Users/UsersListSurvey/SurveyUserExtraPropsEditor/index.js
@@ -0,0 +1 @@
+export { SurveyUserExtraPropsEditor } from './SurveyUserExtraPropsEditor'
diff --git a/webapp/views/App/views/Users/UsersListSurvey/UsersList.scss b/webapp/views/App/views/Users/UsersListSurvey/UsersList.scss
index 35335b2568..7d74dabedc 100644
--- a/webapp/views/App/views/Users/UsersListSurvey/UsersList.scss
+++ b/webapp/views/App/views/Users/UsersListSurvey/UsersList.scss
@@ -17,3 +17,12 @@
     color: $red;
   }
 }
+
+.panel-right.survey-user-extra-props {
+  .form {
+    row-gap: 1rem;
+  }
+  .btn-save {
+    justify-self: center;
+  }
+}
diff --git a/webapp/views/App/views/Users/UsersListSurvey/UsersListSurvey.js b/webapp/views/App/views/Users/UsersListSurvey/UsersListSurvey.js
index ada95fedc3..1f3ab8dd5f 100644
--- a/webapp/views/App/views/Users/UsersListSurvey/UsersListSurvey.js
+++ b/webapp/views/App/views/Users/UsersListSurvey/UsersListSurvey.js
@@ -1,6 +1,6 @@
 import './UsersList.scss'
 
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import * as User from '@core/user/user'
@@ -12,28 +12,48 @@ import Table from '@webapp/components/Table/Table'
 import HeaderLeft from './HeaderLeft'
 import RowHeader from './RowHeader'
 import Row from './Row'
+import { SurveyUserExtraPropsEditor } from './SurveyUserExtraPropsEditor'
 
 const UsersListSurvey = () => {
   const navigate = useNavigate()
   const surveyId = useSurveyId()
   const emailVisible = useAuthCanViewOtherUsersEmail()
+  const [requestedAt, setRequestedAt] = useState(Date.now())
+  const [surveyExtraPropsEditorUser, setSurveyExtraPropsEditorUser] = useState(null)
 
   const onRowClick = useCallback(
     (user) => navigate(`${appModuleUri(userModules.user)}${User.getUuid(user)}`),
     [navigate]
   )
 
+  const onEditSurveyUserExtraProps = useCallback(({ event, userListItem }) => {
+    event.stopPropagation()
+    event.preventDefault()
+    setSurveyExtraPropsEditorUser(userListItem)
+  }, [])
+
   return (
-    <Table
-      module="users-survey"
-      moduleApiUri={`/api/survey/${surveyId}/users`}
-      className="users-list"
-      gridTemplateColumns={`35px repeat(${emailVisible ? 5 : 4}, 1fr) 10rem 10rem 50px`}
-      headerLeftComponent={HeaderLeft}
-      rowHeaderComponent={RowHeader}
-      rowComponent={Row}
-      onRowClick={onRowClick}
-    />
+    <>
+      <Table
+        module="users-survey"
+        moduleApiUri={`/api/survey/${surveyId}/users`}
+        restParams={{ requestedAt }}
+        className="users-list"
+        gridTemplateColumns={`35px repeat(${emailVisible ? 5 : 4}, 1fr) 10rem 10rem 50px 40px`}
+        headerLeftComponent={HeaderLeft}
+        rowHeaderComponent={RowHeader}
+        rowComponent={Row}
+        rowProps={{ onEditSurveyUserExtraProps }}
+        onRowClick={onRowClick}
+      />
+      {surveyExtraPropsEditorUser && (
+        <SurveyUserExtraPropsEditor
+          onClose={() => setSurveyExtraPropsEditorUser(null)}
+          onUserUpdate={() => setRequestedAt(Date.now())}
+          userToUpdate={surveyExtraPropsEditorUser}
+        />
+      )}
+    </>
   )
 }