From 88f6e9d560228c02953c246f4adb2feed99467a1 Mon Sep 17 00:00:00 2001 From: Tomas Havlicek Date: Wed, 5 Feb 2025 16:50:02 +0100 Subject: [PATCH 1/4] feat: Add new tab with middle button for table (SBOMER-250) Mouse middle click works for the table Generations. --- .../GenerationRequestTable.tsx | 8 ++++++- ui/src/app/utils/openInNewTab.ts | 21 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 ui/src/app/utils/openInNewTab.ts diff --git a/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx b/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx index c5702e4fd..f961d7c0d 100644 --- a/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx +++ b/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx @@ -14,6 +14,7 @@ import { 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,7 +71,12 @@ export const GenerationRequestTable = () => { {value.map((generation) => ( - navigate('/generations/' + generation.id)}> + navigate('/generations/' + generation.id)} + onAuxClick={() => openInNewTab('/generations/' + generation.id)} + > 
{generation.id}
diff --git a/ui/src/app/utils/openInNewTab.ts b/ui/src/app/utils/openInNewTab.ts new file mode 100644 index 000000000..2e9a918ad --- /dev/null +++ b/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'); +} From 364ca8cc2d474948bf75695d91040464e5e6fc24 Mon Sep 17 00:00:00 2001 From: Tomas Havlicek Date: Wed, 5 Feb 2025 17:00:44 +0100 Subject: [PATCH 2/4] feat: Add new tab opening for all tables (SBOMER-250) Middle mouse button click now works for tables Manifests and RequestEventTable. --- .../components/ManifestsTableTable/ManifestsTable.tsx | 8 +++++++- .../components/RequestEventTable/RequestEventTable.tsx | 10 ++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/ui/src/app/components/ManifestsTableTable/ManifestsTable.tsx b/ui/src/app/components/ManifestsTableTable/ManifestsTable.tsx index d56eb5af4..7ad4179ae 100644 --- 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 = () => { {value.map((manifest) => ( - navigate('/manifests/' + manifest.id)}> + navigate('/manifests/' + manifest.id)} + onAuxClick={() => openInNewTab('/manifests/' + manifest.id)} + > 
{manifest.id}
diff --git a/ui/src/app/components/RequestEventTable/RequestEventTable.tsx b/ui/src/app/components/RequestEventTable/RequestEventTable.tsx index 9e2aff356..8b27cfdbe 100644 --- 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 = () => { {value.map((requestEvent) => ( - navigate('/requestevents/' + requestEvent.id)}> + navigate('/requestevents/' + requestEvent.id)} + onAuxClick={() => openInNewTab('/requestevents/' + requestEvent.id)} + > 
{requestEvent.id}
- From d1c1935c12fb2a73e4d166ea763c0ee482908444 Mon Sep 17 00:00:00 2001 From: Tomas Havlicek Date: Thu, 6 Feb 2025 12:30:05 +0100 Subject: [PATCH 3/4] feat: Add Link to id in tables (SBOMER-250) --- .../GenerationRequestTable/GenerationRequestTable.tsx | 6 ++++-- .../app/components/ManifestsTableTable/ManifestsTable.tsx | 6 ++++-- .../app/components/RequestEventTable/RequestEventTable.tsx | 6 ++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx b/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx index f961d7c0d..700d86f31 100644 --- a/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx +++ b/ui/src/app/components/GenerationRequestTable/GenerationRequestTable.tsx @@ -10,7 +10,7 @@ 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'; @@ -78,7 +78,9 @@ export const GenerationRequestTable = () => { onAuxClick={() => openInNewTab('/generations/' + generation.id)} > - 
{generation.id}
+ + 
{generation.id}
+ { onAuxClick={() => openInNewTab('/manifests/' + manifest.id)} > - 
{manifest.id}
+ + 
{manifest.id}
+