feat: Add opening list items in a new tab with middle mouse button fo…

…r Manifests and RequestEventTable (SBOMER-250)
project-ncl · Feb 6, 2025 · c8d335d · c8d335d
1 parent 7808d97
commit c8d335d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/ui/src/app/components/ManifestsTableTable/ManifestsTable.tsx b/ui/src/app/components/ManifestsTableTable/ManifestsTable.tsx
@@ -14,6 +14,7 @@ import { 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,7 +71,12 @@ 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>
               </Td>

diff --git a/ui/src/app/components/RequestEventTable/RequestEventTable.tsx b/ui/src/app/components/RequestEventTable/RequestEventTable.tsx
@@ -17,6 +17,7 @@ import { 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,17 @@ 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>
               </Td>
               <Td dataLabel={columnNames.eventStatus}>
-                  <Tooltip
+                <Tooltip
                   isContentLeftAligned={true}
                   content={
                     <div>