Social groups UI

locale/en.json

@@ -24,6 +24,9 @@
   "ANNOTATION_CLASS": "Annotation class",
   "INDIVIDUAL_METADATA": "Individual profile",
   "COMMIT": "Commit",
+  "UNNAMED_SOCIAL_GROUP": "Unnamed social group",
+  "SOCIAL_GROUP_NOT_FOUND": "Social group not found",
+  "SOCIAL_GROUP_NOT_FOUND_DESCRIPTION": "Social group lookup failed. There may be a problem with the URL or the social group may no longer exist.",
   "SOCIAL_GROUP_DELETE_CONFIRMATION": "Are you sure you want to delete this social group? This action cannot be undone.",
   "REGION_MATCHING_SET_DESCRIPTION": "Select the region you would like to match against. Sub-regions will be included in the matching set. If no region is selected, all regions will be matched against.",
   "CREATED": "Created",
@@ -193,7 +196,7 @@
   "FIRST_NAME": "First name",
   "ADOPTION_NAME": "Adoption name",
   "ALIAS": "Alias",
-  "SETTINGS_AND_PRIVACY": "Settings & privacy",
+  "PREFERENCES": "Preferences",
   "SEARCH_ITIS_SPECIES": "Search ITIS species",
   "SEARCH_INDIVIDUALS_INSTRUCTION": "Search for an individual by name or guid",
   "SEARCH_SIGHTINGS_INSTRUCTION": "Search for a sighting by location, owner or guid",
@@ -1073,7 +1076,8 @@
   "SELECT_RELATIONSHIP_TYPE": "Select relationship type",
   "SELECT_RELATIONSHIP_ROLE": "Select role from {ind}'s perspective",
   "NO_RELATIONSHIPS": "This individual does not have any relationships.",
-  "NO_SOCIAL_GROUPS": "This individual is not part of any social groups.",
+  "NO_SOCIAL_GROUPS_ON_INDIVIDUAL": "This individual is not part of any social groups.",
+  "NO_SOCIAL_GROUPS_ON_SITE": "There are no social groups on this site.",
   "NO_PERMISSIONS_ERROR_SUBTITLE": "Permissions error",
   "NOT_AUTHENTICATED_ERROR_SUBTITLE": "Authentication error",
   "NO_PERMISSIONS_ERROR_DETAILS": "You do not have permissions to access the requested resource.",

src/AuthenticatedSwitch.jsx

@@ -41,7 +41,7 @@ import AuditLog from './pages/devTools/AuditLog';
 import Welcome from './pages/auth/Welcome';
 import EmailVerified from './pages/auth/EmailVerified';
 import Home from './pages/home/Home';
-import Settings from './pages/settings/Settings';
+import Preferences from './pages/preferences/Preferences';
 import ResendVerificationEmail from './pages/auth/ResendVerificationEmail';
 import Footer from './components/Footer';
 import { defaultCrossfadeDuration } from './constants/defaults';
@@ -123,8 +123,8 @@ export default function AuthenticatedSwitch({
                       <Route path="/settings/social-groups">
                         <SocialGroups />
                       </Route>
-                      <Route path="/settings/user-preferences">
-                        <Settings />
+                      <Route path="/settings/preferences">
+                        <Preferences />
                       </Route>
                       <Route path="/settings">
                         <ControlPanel />

src/components/cards/CollaborationsCard.jsx

@@ -15,22 +15,18 @@ export default function CollaborationsCard({
   htmlId = null,
 }) {
   const intl = useIntl();
-  const [activeCollaboration, setActiveCollaboration] = useState(
-    null,
-  );
+  const [activeCollaboration, setActiveCollaboration] =
+    useState(null);
   const [
     collabDialogButtonClickLoading,
     setCollabDialogButtonClickLoading,
   ] = useState(false);
 
   const { data, loading } = useGetMe();
 
-  useEffect(
-    () => {
-      setCollabDialogButtonClickLoading(false);
-    },
-    [data],
-  );
+  useEffect(() => {
+    setCollabDialogButtonClickLoading(false);
+  }, [data]);
 
   const collaborations = get(data, ['collaborations'], []);
   const tableData = collaborations.map(collaboration => {

src/components/cards/EncountersCard.jsx

@@ -34,23 +34,20 @@ export default function EncountersCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const encountersWithLocationData = useMemo(
-    () => {
-      // hotfix //
-      if (!encounters) return [];
-      // hotfix //
+  const encountersWithLocationData = useMemo(() => {
+    // hotfix //
+    if (!encounters) return [];
+    // hotfix //
 
-      return encounters.map(encounter => ({
-        ...encounter,
-        formattedLocation: formatLocationFromSighting(
-          encounter,
-          regionOptions,
-          intl,
-        ),
-      }));
-    },
-    [get(encounters, 'length')],
-  );
+    return encounters.map(encounter => ({
+      ...encounter,
+      formattedLocation: formatLocationFromSighting(
+        encounter,
+        regionOptions,
+        intl,
+      ),
+    }));
+  }, [get(encounters, 'length')]);
 
   const tooFewEncounters = encounters.length <= 1;
 

src/components/cards/RelationshipsCard.jsx

@@ -98,7 +98,7 @@ export default function RelationshipsCard({
   relationships = [],
   individualGuid,
   loading,
-  noDataMessage = 'NO_RELATIONSHIPS',
+  noDataMessageId = 'NO_RELATIONSHIPS',
   title,
   titleId,
 }) {
@@ -359,7 +359,7 @@ export default function RelationshipsCard({
       {noRelationships && (
         <Text
           variant="body2"
-          id={noDataMessage}
+          id={noDataMessageId}
           style={{ marginTop: 12 }}
         />
       )}

src/components/cards/SightingsCard.jsx

@@ -33,23 +33,20 @@ export default function SightingsCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const sightingsWithLocationData = useMemo(
-    () => {
-      // hotfix //
-      if (!sightings) return [];
-      // hotfix //
+  const sightingsWithLocationData = useMemo(() => {
+    // hotfix //
+    if (!sightings) return [];
+    // hotfix //
 
-      return sightings.map(sighting => ({
-        ...sighting,
-        formattedLocation: formatLocationFromSighting(
-          sighting,
-          regionOptions,
-          intl,
-        ),
-      }));
-    },
-    [get(sightings, 'length')],
-  );
+    return sightings.map(sighting => ({
+      ...sighting,
+      formattedLocation: formatLocationFromSighting(
+        sighting,
+        regionOptions,
+        intl,
+      ),
+    }));
+  }, [get(sightings, 'length')]);
 
   const allColumns = [
     {

src/components/cards/SocialGroupsCard.jsx

@@ -13,7 +13,7 @@ export default function SocialGroupsCard({
   socialGroups = [],
   individualGuid,
   loading,
-  noDataMessage = 'NO_SOCIAL_GROUPS',
+  noDataMessageId = 'NO_SOCIAL_GROUPS_ON_INDIVIDUAL',
   title,
   titleId,
 }) {
@@ -44,11 +44,11 @@ export default function SocialGroupsCard({
         onClose={() => setAddDialogOpen(false)}
         individualGuid={individualGuid}
       />
-      <Card title={title} titleId={titleId} maxHeight={600}>
+      <Card title={title} titleId={titleId}>
         {noSocialGroups ? (
           <Text
             variant="body2"
-            id={noDataMessage}
+            id={noDataMessageId}
             style={{ marginTop: 12 }}
           />
         ) : (
@@ -57,6 +57,7 @@ export default function SocialGroupsCard({
             data={socialGroups}
             loading={loading}
             onClickDelete={handleClickDelete}
+            tableContainerStyles={{ maxHeight: 600 }}
           />
         )}
 

src/components/dataDisplays/DataDisplay.jsx

@@ -81,9 +81,8 @@ export default function DataDisplay({
   );
   const [filter, setFilter] = useState('');
   const [internalSortColumn, setInternalSortColumn] = useState(null);
-  const [internalSortDirection, setInternalSortDirection] = useState(
-    null,
-  );
+  const [internalSortDirection, setInternalSortDirection] =
+    useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const filterPopperOpen = Boolean(anchorEl);
 

src/components/dataDisplays/cellRenderers/SocialGroupRoleRenderer.jsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import { get } from 'lodash-es';
 
 import useSiteSettings from '../../../models/site/useSiteSettings';
 import Text from '../../Text';
 import OverflowController from './OverflowController';
 
+function Core({ value, ...rest }, ref) {
+  return (
+    <Text variant="body2" ref={ref} {...rest}>
+      {value}
+    </Text>
+  );
+}
+
+const CoreForwardRef = forwardRef(Core);
+
 export default function SocialGroupRoleRenderer({
   value,
   noWrap = false,
@@ -16,18 +26,17 @@ export default function SocialGroupRoleRenderer({
   const { data } = useSiteSettings();
   const roles = get(data, ['social_group_roles', 'value'], []);
   const matchingRole = roles.find(role => role?.guid === value);
+  const knownRole = value && matchingRole?.label;
   const label =
-    matchingRole?.label || intl.formatMessage({ id: 'UNKNOWN_ROLE' });
+    knownRole || intl.formatMessage({ id: 'UNKNOWN_ROLE' });
+
+  const CoreComponent = <CoreForwardRef value={label} {...rest} />;
 
   return noWrap ? (
     <OverflowController title={label}>
-      <Text variant="body2" {...rest}>
-        {label}
-      </Text>
+      {CoreComponent}
     </OverflowController>
   ) : (
-    <Text variant="body2" {...rest}>
-      {label}
-    </Text>
+    CoreComponent
   );
 }

src/components/dialogs/AddToSocialGroupDialog.jsx

@@ -146,7 +146,7 @@ export default function AddToSocialGroupDialog({
                 members: newMembers,
                 affectedIndividualGuids: [individualGuid],
               });
-              if (result.status === 200) handleClose();
+              if (result?.status === 200) handleClose();
             }}
             id="ADD"
           />

src/components/dialogs/RemoveFromSocialGroupDialog.jsx

@@ -24,14 +24,14 @@ export default function RemoveFromSocialGroupDialog({
 
   const removeIndividualFromSocialGroup = useCallback(async () => {
     const safeMembers = get(socialGroup, 'members', {});
-    const newMembers = omit(safeMembers, individualGuid);
+    const nextMembers = omit(safeMembers, individualGuid);
     const result = await patchSocialGroup({
       guid: socialGroup?.guid,
-      members: newMembers,
+      members: nextMembers,
       affectedIndividualGuids: [individualGuid],
     });
-    if (result.status === 200) onClose();
-  }, [individualGuid, socialGroup, onClose]);
+    if (result?.status === 200) handleClose();
+  }, [individualGuid, socialGroup, handleClose]);
 
   return (
     <ConfirmDelete

src/constants/queryKeys.js

@@ -1,3 +1,7 @@
+function sortIfArray(value) {
+  return Array.isArray(value) ? value.sort() : value;
+}
+
 export default {
   me: 'me',
   settingsConfig: 'settingsConfig',
@@ -73,8 +77,8 @@ export function getIndividualTermQueryKey(searchTerm) {
   return ['individualQuickSearch', searchTerm];
 }
 
-export function getIndividualGuidQueryKey(individualGuids) {
-  return ['individualQuickSearch', individualGuids];
+export function getIndividualGuidSearchQueryKey(individualGuids) {
+  return ['individualQuickSearch', sortIfArray(individualGuids)];
 }
 
 export function getSightingTermQueryKey(searchTerm) {

src/models/individual/useQueryIndividualsByGuid.js

@@ -1,20 +1,17 @@
 import useFetch from '../../hooks/useFetch';
-import { getIndividualGuidQueryKey } from '../../constants/queryKeys';
+import { getIndividualGuidSearchQueryKey } from '../../constants/queryKeys';
 
 export default function useQueryIndividualsByGuid(
   individualGuids = [],
 ) {
   const query = {
-    bool: {
-      minimum_should_match: 1,
-      should: individualGuids.map(guid => ({ term: { guid } })),
-    },
+    terms: { guid: individualGuids },
   };
 
   return useFetch({
     method: 'post',
     url: '/individuals/search',
-    queryKey: getIndividualGuidQueryKey(individualGuids),
+    queryKey: getIndividualGuidSearchQueryKey(individualGuids),
     data: query,
     queryOptions: {
       enabled:

src/pages/controlPanel/ControlPanel.jsx

@@ -76,11 +76,15 @@ const adminPages = [
   },
   {
     icon: PreferencesIcon,
-    name: 'user-preferences',
-    labelId: 'SETTINGS_AND_PRIVACY',
-    href: '/settings/user-preferences',
+    name: 'preferences',
+    labelId: 'PREFERENCES',
+    href: '/settings/preferences',
     roles: [
       'is_admin',
+      'is_exporter',
+      'is_internal',
+      'is_staff',
+      'is_data_manager',
       'is_user_manager',
       'is_researcher',
       'is_contributor',

src/pages/fieldManagement/settings/CustomFieldTable.jsx

@@ -47,9 +47,8 @@ export default function CustomFieldTable({
   const intl = useIntl();
   const [deleteField, setDeleteField] = useState(null);
   const [previewField, setPreviewField] = useState(null);
-  const [previewInitialValue, setPreviewInitialValue] = useState(
-    null,
-  );
+  const [previewInitialValue, setPreviewInitialValue] =
+    useState(null);
   const {
     removeCustomField,
     needsForce,

src/pages/individual/components/SocialGroupsDisplay.jsx

@@ -38,17 +38,20 @@ export default function SocialGroupsDisplay({
       name: 'guid',
       labelId: 'ACTIONS',
       options: {
-        customBodyRender: (guid, socialGroup) => [
-          <ActionIcon
-            variant="view"
-            href={`/social-groups/${guid}`}
-            linkProps={{ newTab: true }}
-          />,
-          <ActionIcon
-            variant="delete"
-            onClick={() => onClickDelete(socialGroup)}
-          />,
-        ],
+        customBodyRender: (guid, socialGroup) => (
+          <>
+            <ActionIcon
+              variant="view"
+              href={`/social-groups/${guid}`}
+              linkProps={{ newTab: true }}
+            />
+            ,
+            <ActionIcon
+              variant="delete"
+              onClick={() => onClickDelete(socialGroup)}
+            />
+          </>
+        ),
       },
     },
   ];