Adding opening new tab for table row middle mouse button click

ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx

@@ -10,10 +10,11 @@ import {
 } from '@patternfly/react-core';
 import { Caption, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { ErrorSection } from '../Sections/ErrorSection/ErrorSection';
 import { useGenerationRequests } from './useGenerationRequests';
+import { openInNewTab } from '@app/utils/openInNewTab';
 
 const columnNames = {
   id: 'ID',
@@ -70,9 +71,16 @@ export const GenerationRequestTable = () => {
         </Thead>
         <Tbody>
           {value.map((generation) => (
-            <Tr key={generation.id} isClickable onRowClick={() => navigate('/generations/' + generation.id)}>
+            <Tr
+              key={generation.id}
+              isClickable
+              onRowClick={() => navigate('/generations/' + generation.id)}
+              onAuxClick={() => openInNewTab('/generations/' + generation.id)}
+            >
               <Td dataLabel={columnNames.id}>
-                <pre>{generation.id}</pre>
+                <Link to={'/generations/' + generation.id}>
+                  <pre>{generation.id}</pre>
+                </Link>
               </Td>
               <Td dataLabel={columnNames.status}>
                 <Tooltip

ui/src/app/components/ManifestsTableTable/ManifestsTable.tsx

@@ -10,10 +10,11 @@ import {
 } from '@patternfly/react-core';
 import { Caption, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { ErrorSection } from '../Sections/ErrorSection/ErrorSection';
 import { useManifests } from './useSboms';
+import { openInNewTab } from '@app/utils/openInNewTab';
 
 const columnNames = {
   id: 'ID',
@@ -70,9 +71,16 @@ export const ManifestsTable = () => {
         </Thead>
         <Tbody>
           {value.map((manifest) => (
-            <Tr key={manifest.id} isClickable onRowClick={() => navigate('/manifests/' + manifest.id)}>
+            <Tr
+              key={manifest.id}
+              isClickable
+              onRowClick={() => navigate('/manifests/' + manifest.id)}
+              onAuxClick={() => openInNewTab('/manifests/' + manifest.id)}
+            >
               <Td dataLabel={columnNames.id}>
-                <pre>{manifest.id}</pre>
+                <Link to={'/manifests/' + manifest.id}>
+                  <pre>{manifest.id}</pre>
+                </Link>
               </Td>
               <Td dataLabel={columnNames.type}>
                 <Label style={{ cursor: 'pointer' }} color="purple">

ui/src/app/components/RequestEventTable/RequestEventTable.tsx

@@ -13,10 +13,11 @@ import {
 } from '@patternfly/react-core';
 import { Caption, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { ErrorSection } from '../Sections/ErrorSection/ErrorSection';
 import { useRequestEvents } from './useRequestEvents';
+import { openInNewTab } from '@app/utils/openInNewTab';
 
 const columnNames = {
   id: 'ID',
@@ -75,12 +76,19 @@ export const RequestEventTable = () => {
         </Thead>
         <Tbody>
           {value.map((requestEvent) => (
-            <Tr key={requestEvent.id} isClickable onRowClick={() => navigate('/requestevents/' + requestEvent.id)}>
+            <Tr
+              key={requestEvent.id}
+              isClickable
+              onRowClick={() => navigate('/requestevents/' + requestEvent.id)}
+              onAuxClick={() => openInNewTab('/requestevents/' + requestEvent.id)}
+            >
               <Td dataLabel={columnNames.id}>
-                <pre>{requestEvent.id}</pre>
+                <Link to={'/requestevents/' + requestEvent.id}>
+                  <pre>{requestEvent.id}</pre>
+                </Link>
               </Td>
               <Td dataLabel={columnNames.eventStatus}>
-                  <Tooltip
+                <Tooltip
                   isContentLeftAligned={true}
                   content={
                     <div>

ui/src/app/utils/openInNewTab.ts

@@ -0,0 +1,21 @@
+///
+/// JBoss, Home of Professional Open Source.
+/// Copyright 2023 Red Hat, Inc., and individual contributors
+/// as indicated by the @author tags.
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+/// http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+export function openInNewTab(url: string) {
+  window.open(url, '_blank');
+}