From e06480637735365a6d7083a21bcabd496559a6fb Mon Sep 17 00:00:00 2001
From: "Van J. Wilson" <vwilson@redhat.com>
Date: Wed, 19 Jan 2022 15:27:52 -0500
Subject: [PATCH 1/2] Move ImpactedEntities component to subfolder

---
 .../RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx | 2 +-
 .../ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx      | 2 +-
 .../RiskAcceptance/{ => ImpactedEntities}/ImpactedEntities.tsx  | 0
 .../RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx   | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/{ => ImpactedEntities}/ImpactedEntities.tsx (100%)

diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
index 2ea9310eb015a..4d28c3a04e593 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
@@ -24,7 +24,7 @@ import VulnerabilityRequestScope from '../PendingApprovals/VulnerabilityRequestS
 import UndoVulnRequestModal from '../UndoVulnRequestModal';
 import UpdateDeferralModal from './UpdateDeferralModal';
 import ApprovedDeferralActionsColumn from './ApprovedDeferralActionsColumn';
-import ImpactedEntities from '../ImpactedEntities';
+import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
 import VulnRequestedAction from '../VulnRequestedAction';
 import DeferralExpirationDate from '../DeferralExpirationDate';
 import ApprovedDeferralsSearchFilter from './ApprovedDeferralsSearchFilter';
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
index a98abc59b259a..e5b0fa6ae3e49 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
@@ -23,7 +23,7 @@ import useRiskAcceptance from '../useRiskAcceptance';
 import VulnerabilityRequestScope from '../PendingApprovals/VulnerabilityRequestScope';
 import UndoVulnRequestModal from '../UndoVulnRequestModal';
 import ApprovedFalsePositiveActionsColumn from './ApprovedFalsePositiveActionsColumn';
-import ImpactedEntities from '../ImpactedEntities';
+import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
 import VulnRequestedAction from '../VulnRequestedAction';
 import ApprovedFalsePositivesSearchFilter from './ApprovedFalsePositivesSearchFilter';
 import SearchFilterResults from '../SearchFilterResults';
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
similarity index 100%
rename from ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities.tsx
rename to ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
index e76f2accac1df..3f54617b05e9e 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
@@ -30,7 +30,7 @@ import DenyDeferralModal from './DenyDeferralModal';
 import DenyFalsePositiveModal from './DenyFalsePositiveModal';
 import CancelVulnRequestModal from './CancelVulnRequestModal';
 import DeferralExpirationDate from '../DeferralExpirationDate';
-import ImpactedEntities from '../ImpactedEntities';
+import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
 import PendingApprovalsSearchFilter from './PendingApprovalsSearchFilter';
 import SearchFilterResults from '../SearchFilterResults';
 

From 5c282fb368238111bd292f65a60010c0e4580cc7 Mon Sep 17 00:00:00 2001
From: "Van J. Wilson" <vwilson@redhat.com>
Date: Wed, 19 Jan 2022 17:54:15 -0500
Subject: [PATCH 2/2] Add ImpactedEntitiesModal for entities in requests

---
 .../ApprovedDeferralsTable.tsx                |  2 +
 .../ApprovedFalsePositivesTable.tsx           |  2 +
 .../ImpactedEntities/ImpactedEntities.tsx     | 78 +++++++++++++++----
 .../ImpactedEntitiesModal.tsx                 | 72 +++++++++++++++++
 .../PendingApprovalsTable.tsx                 |  2 +
 .../vulnerabilityRequests.graphql.ts          | 24 ++++++
 6 files changed, 164 insertions(+), 16 deletions(-)
 create mode 100644 ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntitiesModal.tsx

diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
index 4d28c3a04e593..9ff1882dc8fe1 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
@@ -228,7 +228,9 @@ function ApprovedDeferralsTable({
                                     </Td>
                                     <Td dataLabel="Impacted entities">
                                         <ImpactedEntities
+                                            deployments={row.deployments}
                                             deploymentCount={row.deploymentCount}
+                                            images={row.images}
                                             imageCount={row.imageCount}
                                         />
                                     </Td>
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
index e5b0fa6ae3e49..9b07e24ba20f5 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
@@ -198,7 +198,9 @@ function ApprovedFalsePositivesTable({
                                     </Td>
                                     <Td dataLabel="Impacted entities">
                                         <ImpactedEntities
+                                            deployments={row.deployments}
                                             deploymentCount={row.deploymentCount}
+                                            images={row.images}
                                             imageCount={row.imageCount}
                                         />
                                     </Td>
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
index cf079166bcd48..8dcd9911c5d9d 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
@@ -1,29 +1,75 @@
-import { Flex, FlexItem, Label } from '@patternfly/react-core';
+import React, { useState, ReactElement } from 'react';
 import pluralize from 'pluralize';
-import React, { ReactElement } from 'react';
+import { Button, ButtonVariant, Flex, FlexItem, Label } from '@patternfly/react-core';
 
-export type DeferralExpirationDateProps = {
+import entityTypes from 'constants/entityTypes';
+import ImpactedEntitiesModal from './ImpactedEntitiesModal';
+
+export type ImpactedEntitiesProps = {
+    deployments: any;
     deploymentCount: number;
+    images: any;
     imageCount: number;
 };
 
 function ImpactedEntities({
+    deployments,
     deploymentCount,
+    images,
     imageCount,
-}: DeferralExpirationDateProps): ReactElement {
+}: ImpactedEntitiesProps): ReactElement {
+    const [modalTypeOpen, setModalTypeOpen] = useState('');
+
+    function openModal(entityType) {
+        setModalTypeOpen(entityType);
+    }
+
+    function closeModal() {
+        setModalTypeOpen('');
+    }
     return (
-        <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-            <FlexItem>
-                <Label color="blue">
-                    {deploymentCount} {pluralize('deployment', deploymentCount)}
-                </Label>
-            </FlexItem>
-            <FlexItem>
-                <Label color="blue">
-                    {imageCount} {pluralize('image', imageCount)}
-                </Label>
-            </FlexItem>
-        </Flex>
+        <>
+            <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                <FlexItem>
+                    <Button
+                        variant={ButtonVariant.link}
+                        isInline
+                        onClick={() => {
+                            openModal(entityTypes.DEPLOYMENT);
+                        }}
+                    >
+                        <Label color="blue">
+                            {deploymentCount} {pluralize('deployment', deploymentCount)}
+                        </Label>
+                    </Button>
+                </FlexItem>
+                <FlexItem>
+                    <Button
+                        variant={ButtonVariant.link}
+                        isInline
+                        onClick={() => {
+                            openModal(entityTypes.IMAGE);
+                        }}
+                    >
+                        <Label color="blue">
+                            {imageCount} {pluralize('image', imageCount)}
+                        </Label>
+                    </Button>
+                </FlexItem>
+            </Flex>
+            <ImpactedEntitiesModal
+                entityType={modalTypeOpen}
+                isOpen={modalTypeOpen === entityTypes.DEPLOYMENT}
+                entities={deployments}
+                onClose={closeModal}
+            />
+            <ImpactedEntitiesModal
+                entityType={modalTypeOpen}
+                isOpen={modalTypeOpen === entityTypes.IMAGE}
+                entities={images}
+                onClose={closeModal}
+            />
+        </>
     );
 }
 
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntitiesModal.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntitiesModal.tsx
new file mode 100644
index 0000000000000..33c7e3370fcc8
--- /dev/null
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntitiesModal.tsx
@@ -0,0 +1,72 @@
+import React, { ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import { Flex, FlexItem, Modal, ModalVariant, Title } from '@patternfly/react-core';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import pluralize from 'pluralize';
+
+import entityTypes from 'constants/entityTypes';
+import { resourceLabels } from 'messages/common';
+import { vulnManagementPath } from 'routePaths';
+
+function EntityName({ entity, entityType }) {
+    return entityType === entityTypes.IMAGE ? (
+        <Link to={`${vulnManagementPath}/image/${entity.id as string}`}>
+            {entity?.name?.fullName}
+        </Link>
+    ) : (
+        <Flex direction={{ default: 'column' }}>
+            <FlexItem className="pf-u-mb-0">
+                <Link to={`${vulnManagementPath}/deployment/${entity.id as string}`}>
+                    {entity.name}
+                </Link>
+            </FlexItem>
+            <FlexItem className="pf-u-color-400 pf-u-font-size-xs">
+                {`in "${entity.clusterName as string}/${entity.namespace as string}"`}
+            </FlexItem>
+        </Flex>
+    );
+}
+export type ImpactedEntitiesModalProps = {
+    isOpen: boolean;
+    entityType: string;
+    entities: Record<string, any>[];
+    onClose: () => void;
+};
+
+function ImpactedEntitiesModal({
+    isOpen,
+    entityType,
+    entities,
+    onClose,
+}: ImpactedEntitiesModalProps): ReactElement {
+    const entityTypeName = pluralize(resourceLabels[entityType] ?? '', entities?.length);
+    const header = (
+        <Title headingLevel="h2">
+            <span style={{ textTransform: 'capitalize' }}>{entityTypeName}</span> impacted by this
+            request
+        </Title>
+    );
+
+    return (
+        <Modal variant={ModalVariant.small} header={header} isOpen={isOpen} onClose={onClose}>
+            <TableComposable aria-label="Simple table" variant="compact">
+                <Thead>
+                    <Tr>
+                        <Th>Name</Th>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                    {entities.map((entity) => (
+                        <Tr key={entity?.name ?? entity?.name?.fullName}>
+                            <Td dataLabel="Name">
+                                <EntityName entity={entity} entityType={entityType} />
+                            </Td>
+                        </Tr>
+                    ))}
+                </Tbody>
+            </TableComposable>
+        </Modal>
+    );
+}
+
+export default ImpactedEntitiesModal;
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
index 3f54617b05e9e..123576b17bfda 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
@@ -296,7 +296,9 @@ function PendingApprovalsTable({
                                     </Td>
                                     <Td dataLabel="Impacted entities">
                                         <ImpactedEntities
+                                            deployments={row.deployments}
                                             deploymentCount={row.deploymentCount}
+                                            images={row.images}
                                             imageCount={row.imageCount}
                                         />
                                     </Td>
diff --git a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/vulnerabilityRequests.graphql.ts b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/vulnerabilityRequests.graphql.ts
index 57d538ce77e73..bfcb17ab57713 100644
--- a/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/vulnerabilityRequests.graphql.ts
+++ b/ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/vulnerabilityRequests.graphql.ts
@@ -16,7 +16,19 @@ export type VulnerabilityRequest = {
     cves: {
         ids: string[];
     };
+    deployments: {
+        id: string;
+        name: string;
+        namespace: string;
+        clusterName: string;
+    };
     deploymentCount: number;
+    images: {
+        id: string;
+        name: {
+            fullName: string;
+        };
+    };
     imageCount: number;
 };
 
@@ -84,7 +96,19 @@ export const GET_VULNERABILITY_REQUESTS = gql`
             cves {
                 ids
             }
+            deployments(query: $query) {
+                id
+                name
+                namespace
+                clusterName
+            }
             deploymentCount(query: $query)
+            images(query: $query) {
+                id
+                name {
+                    fullName
+                }
+            }
             imageCount(query: $query)
         }
         vulnerabilityRequestsCount(query: $query)