The race conditions and hanging tab (which was due to a strange bug i…

…f you use a html form tag without a submit in React).

Uses viewerAccessRights to determine admin like rights.
There is a new "Create Account for Someone Else" button for users with admin like rights, that allows them to create
a person, but not verify their emails.  When that new user logs in with the credentials that they were sent, they will have to verify their email at that time.
There might be some edge cases, but it is ready to go.

src/js/components/Person/AddPersonDrawerMainContent.jsx

@@ -7,8 +7,9 @@ import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import { getTeamMembersListByTeamId } from '../../models/TeamModel';
 import makeRequestParams from '../../react-query/makeRequestParams';
 import { useAddPersonToTeamMutation } from '../../react-query/mutations';
+import { alphabetizePeoplesObject } from '../../utils/utilities';
 import { SpanWithLinkStyle } from '../Style/linkStyles';
-import { SearchBarWrapper, MatchingPerson } from '../Style/sharedStyles';
+import { MatchingPerson, SearchBarWrapper } from '../Style/sharedStyles';
 import AddPersonForm from './AddPersonForm';
 
 
@@ -70,7 +71,8 @@ const AddPersonDrawerMainContent = () => {
     // TODO: Need to deal with preferred name searching and display, very possible but it will get more complicated
     let addToTeamListTemp = searchResultsList || remainingPeopleToAdd || [];
     addToTeamListTemp = addToTeamListTemp.filter((person) => person.firstName.length || person.lastName.length);
-    setAddToTeamList(addToTeamListTemp);
+    const sorted = alphabetizePeoplesObject(addToTeamListTemp);
+    setAddToTeamList(sorted);
   }, [searchResultsList, remainingPeopleToAdd]);
 
   useEffect(() => {
@@ -174,6 +176,7 @@ const AddPersonDrawerMainContent = () => {
 };
 
 const AddPersonDrawerMainContentWrapper = styled('div')`
+  min-width: 30px;
 `;
 
 const AddPersonWrapper = styled('div')`

src/js/components/Style/sharedStyles.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 
 export const SearchBarWrapper = styled('div')`
+  display:inline-block;
+  vertical-align:top;
   margin-bottom: 16px;
-  display: flex;
 `;
 
 export const MatchingPerson = styled('div')`

src/js/pages/SystemSettings/PermissionsAdministration.jsx

@@ -10,6 +10,7 @@ import { viewerCanSeeOrDo } from '../../models/AuthModel';
 import { getFullNamePreferredPerson } from '../../models/PersonModel';
 import makeRequestParams from '../../react-query/makeRequestParams';
 import { usePersonSaveMutation } from '../../react-query/mutations';
+import { alphabetizePeoplesObject } from '../../utils/utilities';
 
 /* global $  */
 
@@ -32,12 +33,6 @@ const PermissionsAdministration = ({ classes }) => {
     setCanEditPermissionsAnyone(viewerCanSeeOrDo('canEditPermissionsAnyone', viewerAccessRights));
   }, [viewerAccessRights]);
 
-  function alphabetizePeoplesObject (obj) {
-    const arrayOfObjects = Object.keys(obj).map((key) => ({ ...obj[key], id: key }));
-    arrayOfObjects.sort((a, b) => (a.lastName + a.firstName).localeCompare(b.lastName + b.firstName));
-    return arrayOfObjects;
-  }
-
   useEffect(() => {
     const allPeopleCacheCopy2 = JSON.parse(JSON.stringify(allPeopleCache));
     const sorted = alphabetizePeoplesObject(allPeopleCacheCopy2);

src/js/react-query/mutations.jsx

@@ -90,7 +90,7 @@ const usePersonAwaySaveMutation = () => {
   });
 };
 
-// Moved to /models/PersonModel.jsx with a non-conflicting function name
+// Copied to /models/PersonModel.jsx with a non-conflicting function name
 const usePersonSaveMutation = () => {
   const queryClient = useQueryClient();