Add "View lock details" link in the unavailable accounts due to locking tooltip

[dmtrjsg]

Context

Core issue is in this ticket:

• https://github.com/Joystream/pioneer/issues/3238

Scope

• Add anchors to account lock details page so that user can be directed to an expanded lock + screen focus.
• Add "View lock details>" to the tooltip used for unavailable accounts due to locks:

Below the copy and above "Learn more about locks>"

[traumschule]

Stories

• I want to link to link to /profile/alice or /profile/5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY to open profile page and scroll to and expand alice' account.
• I want to link to and expand a specific lock detail via route
  • /profile/alice/lock-{index} or
  • /profile/5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY/{lock.type}

Hint

3238: Adding a follow up issue to include an anchor to the locks page and make them hyperlinkable: #3333

2440 :warning: there's already an anchor system in place.

Example:

• Elections link to={generatePath(ElectionRoutes.pastElection, { id: election.id })} defined in ElectionRoutes
• ElectionTabs via useElectionStatusChanged

common/components: NavigationLinkProps, RouterLink, selectFocusReducer

packages/ui/src/common/components/buttons/LinkButtons.tsx:type ExternalLinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
packages/ui/src/common/components/page/Sidebar/NavigationLink.tsx:  const Component = (isExternal ? NavigationItemAnchor : NavigationItemLink) as React.ElementType
packages/ui/src/common/components/page/Sidebar/NavigationLink.tsx:const NavigationItemAnchor = styled.a<DisabledNavigationLinkProps>`
packages/ui/src/common/components/Link.tsx:import React, { AnchorHTMLAttributes } from 'react'
packages/ui/src/common/components/Link.tsx:interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, StyledLinkProps {}
packages/ui/src/common/components/CKEditor/CKEditor.tsx:        <div className="ckeditor-anchor" ref={elementRef} />
packages/ui/src/common/components/CKEditor/CKEditorStylesOverrides.tsx:  .ckeditor-anchor:not(.ck-content) {
packages/ui/src/common/components/RouterLink.tsx:interface Props extends StyledLinkProps, LinkProps, React.RefAttributes<HTMLAnchorElement> {}

Unlike HTML#anchors React Router abstracts and allows targeting specific elements matching page- or component-based route patterns.

recap: React Router v5->v6

// option 1 (useElectionStatusChanged)
import { useRouteMatch } from 'react-router-dom'
const isCurrentElectionTab = !!useRouteMatch(ElectionRoutes.currentElection)

// option 2  (NavigationLink, v6)
import { useLocation } from 'react-router'
import { NavLink, useRouteMatch } from 'react-router-dom'
const location = useLocation()
const match = useRouteMatch(to ?? location.pathname)

// option 3 (jsstats class components with monolithic top-level BrowserRouter, v5)
import { Switch, Route } from "react-router-dom"
<Switch>
  <Route path="/settings" render={(routeprops) => <Settings {...routeprops} {...props} />} />
...
</Switch>

class Setings extends React.Component<IProps, IState> {
  componentDidMount() {
    const { match } = this.props;
    if (match?.params.thread) this.selectThread(parseInt(match.params.thread));

Conclusion: Use v6 location-patterns like defined in (note constants vs constant)

packages/ui/src/overview/constants/routes.ts
packages/ui/src/forum/constant/routes.ts
packages/ui/src/working-groups/constants/routes.ts
packages/ui/src/proposals/constants/routes.ts
packages/ui/src/council/constants/routes.ts
packages/ui/src/app/constants/routes.ts
packages/ui/src/bounty/constants/routes.ts

and routes in

packages/ui/src/app/pages/Proposals/ProposalsModule.tsx
packages/ui/src/proposals/modals/VoteForProposal/components/ProposalPreview/renderers/ProposalLink.tsx

import { ProposalsRoutes } from '@/proposals/constants/routes'                                                                         
<RouterLink to={generatePath(ProposalsRoutes.preview, { id: value.id })} target="_blank">

packages/ui/src/app/pages/Forum/components/ForumTabs.tsx
packages/ui/src/app/pages/Forum/ForumModule.tsx

Under the hood: popstate and hashchange

The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history stack, that history entry is used instead. The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).

Related:

• 3095 Add URL to the tab component itself by refactoring the current component

• 3163: Once thread is posted, screen anchors to the newly posted thread