Preserve selected tab when navigating between pages.

[braders]

Overview

https://lab.civicrm.org/dev/core/-/issues/3003#note_68315

Many CiviCRM pages, in particular the contact page, are structured around a series of tabs: Summary, Contributions, Membership etc. There are often times when you click through from a contact to a related entity (say a related contact from the relationships tab). Prior to this change, using the back button returned the user to the first tab each time. With this change the tab the users previous tab is remembered as part of the URL history.

This is a particular issue for users with the "Enable Popup Forms" option unticked, but all users are affected by this.

Before

If on the contact page you clicked through from e.g. the relationships tab to a different contact, and then used the browsers back button you would be returned to the summary tab enstead of going back to the relationships tab.

This also improves the behaviour of other tab areas in the same fashion. For example, on the message templates screen, on the "System Workflow Messages", previously clicking through to a message, and then using the back button to go back would have returned the user to the "User-driven Messages" tab.

After

When switching between tabs the selectedChild query argument is updated in the URL (selectedChild already existed in CiviCRM and is used for internal linking). Therefore, the browser history, including the back-forward history, now includes a reference to the tab the user was viewing.

Technical Details

The updateUrlParameter isn't as clean as some code examples you find online for acheiving this functionality. However, I couldn't find anything about what browsers CiviCRM officially supports so wanted to go for a solution that would support as many browsers as possible including Internet Explorer.

Comments

This turned out to be simpler than I expected! Originally I was going to add a new data attribute to each tab with the ID corresponding to the selectedChild value, but then I realised that each tab consistenly has an ID attribute of the format tab_contribution'. Removing the leading tabgives us the component we need to make the URL segment&selectedChild=contribution`

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[colemanw]

It's bit of a no-no in javascript to declare a var more than once. I would just declare it at the top and then assign values to it below.

Suggested change

	var href = window.location.href;
	var newUrl,
	href = window.location.href;

[colemanw]

@braders I'm curious to know if this is compatible with anchors (which are used by some js components). Like if a # exists in the URL will it be preserved?

[braders]

@braders I'm curious to know if this is compatible with anchors (which are used by some js components). Like if a # exists in the URL will it be preserved?

Hm, good catch. It looks like this case isn't supported at the moment. I'll have a think about the best way to handle this one.

[braders]

@braders I'm curious to know if this is compatible with anchors (which are used by some js components). Like if a # exists in the URL will it be preserved?

@colemanw I've done some refactoring and I think it should support a full range of URL formats now. There are a lot of tabs on a lot of different pages though, so it probably makes sense for a fresh site of eyes to test the PR too.