fix(member-settings): sidenav button not redirecting to correct invite members modal

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -9,6 +9,7 @@ import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { parseAsBoolean, useQueryState } from 'nuqs';
 import { toISOString } from 'utils/app';
 
 import { FilterMode, MemberStatus, toMemberStatus } from './utils';
@@ -26,7 +27,10 @@ function MembersSettings(): JSX.Element {
 	// TODO(nuqs): Replace with nuqs once the nuqs setup and integration is done - for search
 	const [searchQuery, setSearchQuery] = useState('');
 	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
-	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+	const [isInviteModalOpen, setIsInviteModalOpen] = useQueryState(
+		'invite',
+		parseAsBoolean.withDefault(false),
+	);
 	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
 
 	const { data: usersData, isLoading, refetch: refetchUsers } = useListUsers();
@@ -201,7 +205,7 @@ function MembersSettings(): JSX.Element {
 					<Button
 						variant="solid"
 						color="primary"
-						onClick={(): void => setIsInviteModalOpen(true)}
+						onClick={(): void => void setIsInviteModalOpen(true)}
 					>
 						<Plus size={12} />
 						Invite member
@@ -221,7 +225,7 @@ function MembersSettings(): JSX.Element {
 
 			<InviteMembersModal
 				open={isInviteModalOpen}
-				onClose={(): void => setIsInviteModalOpen(false)}
+				onClose={(): void => void setIsInviteModalOpen(null)}
 				onComplete={handleInviteComplete}
 			/>
 

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -130,4 +130,14 @@ describe('MembersSettings (integration)', () => {
 			screen.findAllByPlaceholderText('john@signoz.io'),
 		).resolves.toHaveLength(3);
 	});
+
+	it('opens InviteMembersModal when invite=true query param is present', async () => {
+		render(<MembersSettings />, undefined, {
+			initialRoute: '/settings/members?invite=true',
+		});
+
+		await expect(
+			screen.findAllByPlaceholderText('john@signoz.io'),
+		).resolves.toHaveLength(3);
+	});
 });

frontend/src/container/SideNav/SideNav.tsx

@@ -885,9 +885,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					break;
 				case 'invite-collaborators':
 					if (event && isModifierKeyPressed(event)) {
-						openInNewTab(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+						openInNewTab(`${ROUTES.MEMBERS_SETTINGS}?invite=true`);
 					} else {
-						history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+						history.push(`${ROUTES.MEMBERS_SETTINGS}?invite=true`);
 					}
 					break;
 				case 'chat-support':

frontend/src/container/SideNav/menuItems.tsx

@@ -66,7 +66,7 @@ export const homeMenuItem = {
 };
 
 export const inviteMemberMenuItem = {
-	key: `${ROUTES.ORG_SETTINGS}#invite-team-members`,
+	key: `${ROUTES.MEMBERS_SETTINGS}?invite=true`,
 	label: 'Invite Team Member',
 	icon: <UserPlus size={16} />,
 };