dex-1329 - show collaboration type in table (#451)

* Return single component instead of array from UserManagersCollaborationEditTable

* Add formatUserMessage util, remove user customBodyRenders

* Change table title from 'Edit Collaborations' to 'Collaborations'

* Remove 'restore' action

* Change revoke collaboration icon from trash can to minus sign

* Move Actions column to customBodyComponent

* Replace revokeCollab options with multi-option API options

* Simplify COLLAB_REVOKE_ERROR_SUPPLEMENTAL internationalization

* Update columns

* Add edit collaboration dialog

* Update processRevoke to new collaboration API

* Cleanup

* rename labels to labelIds,
* move object definition outside of component
* add optional chaining operator

* Move collaboration model.js to collaborationUtils.js

* Change from switch to if for getPatchCollaborationOperations

* Cleanup: remove comment, simplify style declaration

* Move FormattedReporter to components and apply to bulk import and sighting headers

* Apply formatUserMessage to collaboration management form

* Add formatUserMessage to formatters and apply to UserProfile and EditCollaborationDialog

* Move CollaborationManagementForm into userManagement components directory

locale/en.json

@@ -1003,28 +1003,31 @@
   "GPS_TITLE": "Sighting Location",
   "INVALID_GPS": "Invalid GPS Coordinates",
   "UNNAMED_USER": "Unnamed User",
+  "UNNAMED_USER_WITH_EMAIL": "Unnamed User ({email})",
+  "UNNAMED_USER_WITH_UNKNOWN_EMAIL": "Unnamed User (unknown email)",
+  "USER_WITH_EMAIL": "{fullName} ({email})",
+  "USER_WITH_UNKNOWN_EMAIL": "{fullName} (unknown email)",
   "REGION_NAME_REMOVED": "Region Name Has Been Removed",
   "SELECT_COLLABORATOR_1": "Select Collaborator 1",
   "SELECT_COLLABORATOR_2": "Select Collaborator 2",
   "CREATE_COLLABORATIONS": "Create Collaborations",
   "CREATE_COLLABORATION": "Create Collaboration",
   "COLLABORATION_CREATED": "Collaboration Created",
-  "EDIT_COLLABORATIONS": "Edit Collaborations",
+  "USER_MANAGEMENT_COLLABORATIONS": "Collaborations",
   "USER_ONE": "User 1",
   "USER_TWO": "User 2",
+  "USER_X": "User {userNumber, number}",
+  "COLLABORATION_CURRENT_ACCESS": "Current access",
+  "COLLABORATION_REQUESTED_ACCESS": "Requested access",
   "COLLABORATION_STATUS": "Status",
-  "USER_ONE_VIEW_STATUS": "User 1 Status",
-  "USER_TWO_VIEW_STATUS": "User 2 Status",
-  "USER_ONE_EDIT_STATUS": "User 1 Edit",
-  "USER_TWO_EDIT_STATUS": "User 2 Edit",
   "COLLABORATION_ALREADY_EXISTS": "A collaboration between these two users has already been created",
   "SIGHTING_ON_MAP": "Sighting",
   "COLLABORATION_DATA_ERROR": "Error fetching collaboration data",
   "COLLABORATION_REVOKE_ERROR": "Error revoking the collaboration",
   "COLLABORATION_REVOKE_SUCCESS": "Successfully revoked the collaboration",
   "UNKNOWN_ERROR": "Unknown error",
   "REVOKED_COLLAB_EXISTS": "Could not create collaboration - a revoked collaboration between those users already exists",
-  "COLLAB_REVOKE_ERROR_SUPPLEMENTAL": "Note that collaborations cannot be revoked unless they are mutually approved.",
+  "COLLAB_REVOKE_ERROR_SUPPLEMENTAL": "{error}. Note that collaborations cannot be revoked unless they are mutually approved.",
   "PENDING_SIGHTINGS": "Pending Sightings",
   "UNKNOWN_DATE": "Unknown date",
   "UNKNOWN_ENCOUNTER_DATE": "unknown encounter date",
@@ -1109,11 +1112,7 @@
   "PASSWORD_RESET_ERROR": "Password reset error",
   "PASSWORD_RESET_SUCCESS": "Password reset success",
   "RETURN_TO_LOGIN_PAGE": "Return to login page",
-  "RESTORE": "Restore",
   "NO_INDIVIDUALS_IN_SOCIAL_GROUP": "This group contains no individuals.",
-  "COLLABORATION_RESTORE_SUCCESS": "Successfully restored the collaboration",
-  "COLLABORATION_RESTORE_ERROR": "Error restoring the collaboration",
-  "COLLAB_RESTORE_ERROR_SUPPLEMENTAL": "Collaboration was not successfully restored.",
   "PENDING": "pending",
   "UNKNOWN_ROLE": "Unknown role",
   "PENDING_CITIZEN_SCIENCE_SIGHTINGS": "Pending citizen science sightings",
@@ -1187,5 +1186,11 @@
   "INDIVIDUAL_GALLERY_IMAGE_ALT": "{annotationCount} {annotationCount, plural, one {annotation} other {annotations}} with {assetClassCount, plural, one {class} other {classes}} {assetClassesList}",
   "INDIVIDUAL_GALLERY_UNABLE_TO_DISPLAY_ANNOTATIONS": "We are currently unable to show annotations for uploaded images with either a width or a height of 4,096 pixels or more.",
   "INDIVIDUAL_BACK_TO_PROFILE": "Return to {name}'s profile",
-  "ERROR_FETCHING_IMAGE": "Error fetching image"
+  "ERROR_FETCHING_IMAGE": "Error fetching image",
+  "COLLABORATION_STATE_VIEW": "View",
+  "COLLABORATION_STATE_EDIT": "Edit",
+  "COLLABORATION_STATE_REVOKED": "Revoked",
+  "EDIT_COLLABORATION": "Edit collaboration",
+  "EDIT_COLLABORATION_CURRENT_STATE_LABEL": "Current state",
+  "EDIT_COLLABORATION_CURRENT_STATE_DESCRIPTION": "Changing the state will cancel any pending requests."
 }

src/components/ActionIcon.jsx

@@ -5,9 +5,9 @@ import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 import ViewIcon from '@material-ui/icons/Launch';
 import DeleteIcon from '@material-ui/icons/Delete';
+import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
 import DownloadIcon from '@material-ui/icons/GetApp';
 import CopyIcon from '@material-ui/icons/FileCopy';
-import RestoreIcon from '@material-ui/icons/Restore';
 
 import Link from './Link';
 
@@ -22,11 +22,7 @@ const variantMap = {
   },
   revoke: {
     labelId: 'MUTUAL_REVOKE',
-    component: DeleteIcon,
-  },
-  restore: {
-    labelId: 'RESTORE',
-    component: RestoreIcon,
+    component: RemoveCircleIcon,
   },
   delete: {
     labelId: 'DELETE',

src/components/UserProfile.jsx

@@ -6,7 +6,7 @@ import { getHighestRoleLabelId } from '../utils/roleUtils';
 import useUserMetadataSchemas from '../models/users/useUserMetadataSchemas';
 import useGetUserSightings from '../models/users/useGetUserSightings';
 import useGetUserUnprocessedAssetGroupSightings from '../models/users/useGetUserUnproccessedAssetGroupSightings';
-import { formatDate } from '../utils/formatters';
+import { formatDate, formatUserMessage } from '../utils/formatters';
 import EntityHeader from './EntityHeader';
 import BigAvatar from './profilePhotos/BigAvatar';
 import MainColumn from './MainColumn';
@@ -50,12 +50,10 @@ export default function UserProfile({
 
   const imageSrc = get(userData, ['profile_fileupload', 'src']);
   const imageGuid = get(userData, ['profile_fileupload', 'guid']);
-  let name = get(
-    userData,
-    'full_name',
-    intl.formatMessage({ id: 'UNNAMED_USER' }),
+  const name = formatUserMessage(
+    { fullName: userData?.full_name },
+    intl,
   );
-  if (name === '') name = intl.formatMessage({ id: 'UNNAMED_USER' });
   const dateCreated = formatDate(get(userData, 'created'), true);
 
   const highestRoleLabelId = getHighestRoleLabelId(userData);

src/components/dataDisplays/CollapsibleRow.jsx

@@ -55,7 +55,12 @@ export default function CollapsibleRow({
             c,
             'options.customBodyRender',
           );
+          const CustomBodyComponent = get(
+            c,
+            'options.customBodyComponent',
+          );
           const RequestedCellRenderer =
+            CustomBodyComponent ||
             cellRenderers[requestedCellRenderer];
           return (
             <TableCell

src/components/fields/edit/InputRow.jsx

@@ -32,7 +32,7 @@ export default function InputRow({
         padding: 12,
         marginTop: 20,
         width: '100%',
-        containerStyles,
+        ...containerStyles,
       }}
       {...containerProps}
     >

src/pages/individualGallery/components/FormattedReporter.jsx → src/components/formatters/FormattedReporter.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Link from '../../../components/Link';
-import Text from '../../../components/Text';
+import Link from '../Link';
+import Text from '../Text';
 
 export default function FormattedReporter({
   reporter,

src/pages/assetGroup/AssetGroup.jsx

@@ -16,8 +16,7 @@ import queryKeys from '../../constants/queryKeys';
 import MainColumn from '../../components/MainColumn';
 import LoadingScreen from '../../components/LoadingScreen';
 import SadScreen from '../../components/SadScreen';
-import Text from '../../components/Text';
-import Link from '../../components/Link';
+import FormattedReporter from '../../components/formatters/FormattedReporter';
 import MoreMenu from '../../components/MoreMenu';
 import ConfirmDelete from '../../components/ConfirmDelete';
 import EntityHeader from '../../components/EntityHeader';
@@ -106,10 +105,6 @@ export default function AssetGroup() {
   const dateCreated = get(data, 'created');
 
   const sightingCreator = data?.creator;
-  const creatorName =
-    sightingCreator?.full_name ||
-    intl.formatMessage({ id: 'UNNAMED_USER' });
-  const creatorUrl = `/users/${sightingCreator?.guid}`;
 
   const pipelineStatusPreparation = get(
     data,
@@ -167,10 +162,13 @@ export default function AssetGroup() {
         }
       >
         {sightingCreator && (
-          <Text variant="body2">
-            {intl.formatMessage({ id: 'REPORTED_BY' })}
-            <Link to={creatorUrl}>{creatorName}</Link>
-          </Text>
+          <FormattedReporter
+            variant="body2"
+            reporter={{
+              guid: sightingCreator.guid,
+              fullName: sightingCreator.full_name,
+            }}
+          />
         )}
       </EntityHeader>
       {isPreparationFailed && (

src/pages/individualGallery/components/GalleryItem.jsx

@@ -4,7 +4,7 @@ import { get, omit } from 'lodash-es';
 import DerivedAnnotatedPhotograph from './DerivedAnnotatedPhotograph';
 import FormattedComplexDateTime from './FormattedComplexDateTime';
 import FormattedLocationWithDialog from './FormattedLocationWithDialog';
-import FormattedReporter from './FormattedReporter';
+import FormattedReporter from '../../../components/formatters/FormattedReporter';
 import Text from '../../../components/Text';
 
 export default function GalleryItem({

src/pages/sighting/SightingEntityHeader.jsx

@@ -7,9 +7,8 @@ import DoneIcon from '@material-ui/icons/Done';
 import Skeleton from '@material-ui/lab/Skeleton';
 
 import ReviewSightingDialog from '../../components/dialogs/ReviewSightingDialog';
-import Link from '../../components/Link';
+import FormattedReporter from '../../components/formatters/FormattedReporter';
 import Tabs from '../../components/Tabs';
-import Text from '../../components/Text';
 import MoreMenu from '../../components/MoreMenu';
 import EntityHeader from '../../components/EntityHeader';
 import FeaturedPhoto from '../../components/FeaturedPhoto';
@@ -80,10 +79,6 @@ export default function SightingEntityHeader({
   );
 
   const sightingCreator = data?.creator;
-  const creatorName =
-    sightingCreator?.full_name ||
-    intl.formatMessage({ id: 'UNNAMED_USER' });
-  const creatorUrl = `/users/${sightingCreator?.guid}`;
 
   return (
     <>
@@ -161,10 +156,13 @@ export default function SightingEntityHeader({
         }
       >
         {sightingCreator && (
-          <Text variant="body2">
-            {intl.formatMessage({ id: 'REPORTED_BY' })}
-            <Link to={creatorUrl}>{creatorName}</Link>
-          </Text>
+          <FormattedReporter
+            variant="body2"
+            reporter={{
+              guid: sightingCreator.guid,
+              fullName: sightingCreator.full_name,
+            }}
+          />
         )}
         {sightingIsReviewed && (
           <Chip

src/pages/userManagement/UserManagement.jsx

@@ -22,7 +22,7 @@ import usePostUser from '../../models/users/usePostUser';
 import useGetUsers from '../../models/users/useGetUsers';
 import UserEditTable from './UserEditTable';
 import roleSchema from './constants/roleSchema';
-import CollaborationManagementForm from '../collaborations/collaborationManagementForm';
+import CollaborationManagementForm from './components/CollaborationManagementForm';
 import useGetAllCollaborations from '../../models/collaboration/useGetAllCollaborations';
 import UserManagersCollaborationEditTable from './UserManagerCollaborationEditTable';
 
@@ -242,7 +242,7 @@ export default function UserManagement() {
           <Text
             variant="h6"
             style={{ marginTop: 20, marginLeft: 12 }}
-            id="EDIT_COLLABORATIONS"
+            id="USER_MANAGEMENT_COLLABORATIONS"
           />
           <Paper
             elevation={2}