Add /user_details path to router and remove sub-menu items and adjust breadcrumbs

[MCatherine1994]

Describe the task

Action Button w/ Icon

For each row on the user table, under the Action column, add a button with "Rewind" icon, when a user clicks on the button, it navigates the users to the path described below.

Path

Add the /user-details/users/{userId}/applications/{applicationId} route to frontend with a placeholder View component. The path is named with consideration that the page will eventually display User roles and User history

## Sub-menu item removal Remove any sub menu items that shows up dynamically, such as Add application admin, if a user is under the add application admin page, the Manage permission menu item should be active (highlighted). We could considering changing the route path too, for example, at the moment we have https://fam.nrs.gov.bc.ca/grant-app-admin, there are 2 improvements we can make, 1) match the page name with /add-application-admin, 2) specify layers with manage-permissions/add-application-admin

Adjust breadcrumbs

Our current breadcrumbs display an inactive crumb for the current page, which is redundant and does not align with the FDS design system. Remove current page's "crumb" on all pages

Remove any sub-menu items and adjust breadcrumbs to now show the current page

Acceptance Criteria

• [x] Action button added for each row
• [x] Path added to route the new component
• [ ] All sub-menu items should be removed, the parent menu item will be active (highlighted) instead
• [x] Adjust breadcrumbs so the current page is not shown

Additional context

• Epic story 1 #1534
• Or here

[ianliuwk1019]

The change of the requirement from previous with "Path" to be /user-details/users/{userId}/applications/{applicationId} does introduce some complexity. To be fair, It is a good intention. I also had that thought in the past for frontend but didn't get to do frontend much so didn't discover issue facing below. However, currently our frontend does not have this kind of way of path for navigation.

When I tried to implement it as /user-details/users/{userId}/applications/{applicationId} for example, when clicking the history button to navigate to the page with browser address bar as: /user-details/users/9/applications/2, it works. But with this, we will need to deal with user manually enter different path or ids. Even when right in the history page and hit browser refresh, the whole "routing" is broken and page is lost.

I also tried to implement routing as query param (instead of path param) /user-details?userId={userId}&applications={applicationId}, this can be routed to the history page, but the query parameter disappear after routing. This seems to be a bug within Vue Router itself.

Both problem currently I didn't find a way to resolve them yet. I think maybe we like to discuss this tomorrow to see which way to go and can create issue ticket to separately deal with it if we think it is complicated. @craigyu @OlgaLiber2

[OlgaLiber2]

page title, user summary and history table with simplified data for the version with are working on @ianliuwk1019 @craigyu

[ianliuwk1019]

Bug issue #1588 created due to a bug seen from this ticket. @craigyu @OlgaLiber2

[ianliuwk1019]

As discussed with Craig, the highlight for SideNav on parent item when in the new user details page might need a bit of work and refactoring. Will leave this requirement out from this ticket and move into either building new history page ticket #1540 or separate itself into individual ticket to deal with.