Improve TabbedContent component to work when content component has props
General
Escalation
General
Escalation
Description
Details:
Our current solution to work with tabs (TabbedContent component) doesn't work properly when the content component has props. The reason is the way we update the active tab: we update the page location and then update the active tab based on the new location. The problem is that in the meantime (while the active tab variable is not set but the location is already the new one) the content of the new tab gets rendered with old props due to the navigation.
Suggested implementation:
Keep the active tab key as component state and don't rely on location change to update the tab. This was part of previous solution and it worked. We should also find the tab component by it's key on every render since the tabs might change as well as it's content. Use the location only for the initial value.
The problem here is that we still need to update the URL, so we need to update it without actually navigating to it (update without reload). Although with that the breadcrumb won't update because it relies on navigation. One solution for this is to listen to the hashchange event and change the breadcrumb when the URL hash changes, but for this we would have to use URL hashes (e.g. /dbaas#dbclusters) instead of the URL path (e.g /dbaas/dbclusters).
This is just a suggested implementation for the current case. A better implementation could be to rethink how we are using the breadcrumb and navigation inside the page. Routing should be used to change pages and not to navigate inside the page with the tabs (and the same is true for the breadcrumb).
Details:
Our current solution to work with tabs (TabbedContent component) doesn't work properly when the content component has props. The reason is the way we update the active tab: we update the page location and then update the active tab based on the new location. The problem is that in the meantime (while the active tab variable is not set but the location is already the new one) the content of the new tab gets rendered with old props due to the navigation.
Suggested implementation:
Keep the active tab key as component state and don't rely on location change to update the tab. This was part of previous solution and it worked. We should also find the tab component by it's key on every render since the tabs might change as well as it's content. Use the location only for the initial value.
The problem here is that we still need to update the URL, so we need to update it without actually navigating to it (update without reload). Although with that the breadcrumb won't update because it relies on navigation. One solution for this is to listen to the hashchange event and change the breadcrumb when the URL hash changes, but for this we would have to use URL hashes (e.g. /dbaas#dbclusters) instead of the URL path (e.g /dbaas/dbclusters).
This is just a suggested implementation for the current case. A better implementation could be to rethink how we are using the breadcrumb and navigation inside the page. Routing should be used to change pages and not to navigate inside the page with the tabs (and the same is true for the breadcrumb).