feat: Extend useNavigate hook to allow opening urls in a new tab

[camielvs]

Description

This adds a custom hook useNavigate that extends the existing React Router useNavigate to allow navigation to open in new tabs.

Specifically, it adds:

1. a newTab prop to the navigate function. If true the url will open in a new tab. If false current behaviour is maintained.
2. the hook tracks whether cmd/meta is held down when the navigate function executes and will open in a new tab as expected by usual link-clicking behaviour.

The PR then propagates this to all the places where I judged this additionally functionality would be desired. Implementation of the hook is as simple as replacing the import path for useNavigate, since the hook extends the React Router base hook (and thus the behaviour is unchanged when not opening in a new tab).

Related Issue and Pull requests

Closes https://github.com/Shopify/oasis-frontend/issues/423

Type of Change

• New feature
• Improvement

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

No visible change to ui

Test Instructions

For the areas where this hook has been implemented check that:

• clicking as usual opens the url in the same tab (current behaviour)
• you can now cmd + click to open in a new tab

Additional Comments

[camielvs]

• feat: Extend useNavigate hook to allow opening urls in a new tab #1627 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[maxy-shpfy]

It seems to be highly risky overkill.

According to the doc, <Link> component supports this cmd+click behavior out of the box.

So one simple change (dont look at the div - inlinestack for some reason failed in this case - need to investigate) will get exactly same behavior:

   <TableRow className="cursor-pointer text-gray-500 text-xs">
      <TableCell className="text-sm flex items-center gap-2">
        <Link to={clickThroughUrl}>
          <div className="flex items-center gap-2">
            <StatusIcon status={overallStatus} />
            <Paragraph className="truncate max-w-[400px]" title={name}>
              {name}
            </Paragraph>
            <span>{`#${runId}`}</span>
          </div>
        </Link>
      </TableCell>
      <TableCell>
        <div className="w-2/3">
          <StatusBar executionStatusStats={run.execution_status_stats} />
        </div>
      </TableCell>
      <TableCell>
        {run.created_at
          ? `${formatDate(convertUTCToLocalTime(run.created_at).toISOString())}`
          : "Data not found..."}
      </TableCell>
      <TableCell>
        {isTruncated ? createdByButtonWithTooltip : createdByButton}
      </TableCell>
    </TableRow>

[camielvs]

^ In some cases, such as RunRow the Link component will work, yes. But in others, such as OasisSubmitter & ClonePipeline it will not.

I made this because there are places where we need to programatically navigate to a url; not via a UI element.
For example:

1. click a button (clone pipeline),
2. it does some stuff (clones the pipeline)
3. navigate to a new page (the new clone)

I'm currently not aware how that would be possible with the Link component (otherwise we would have already used it like we have elsewhere).

[camielvs]

Closing this, as discussed. We will go with #1645 for now.