ROX-34171: Make sure resources display in policy review step

ui/apps/platform/src/Containers/Policies/Detail/ExcludedDeployment.tsx

@@ -17,14 +17,32 @@ function ExcludedDeployment({
     excludedDeployment,
 }: ExcludedDeploymentProps): ReactElement {
     const { name: deploymentName, scope } = excludedDeployment;
-    const { cluster: clusterId, namespace: namespaceName, label } = scope ?? {};
+    const {
+        cluster: clusterId,
+        clusterLabel,
+        namespace: namespaceName,
+        namespaceLabel,
+        label,
+    } = scope ?? {};
 
     return (
-        <DescriptionList isCompact isHorizontal>
+        <DescriptionList isCompact isHorizontal horizontalTermWidthModifier={{ default: '16ch' }}>
             {clusterId && (
                 <DescriptionListItem term="Cluster" desc={getClusterName(clusters, clusterId)} />
             )}
+            {clusterLabel && (
+                <DescriptionListItem
+                    term="Cluster label"
+                    desc={`${clusterLabel.key}=${clusterLabel.value}`}
+                />
+            )}
             {namespaceName && <DescriptionListItem term="Namespace" desc={namespaceName} />}
+            {namespaceLabel && (
+                <DescriptionListItem
+                    term="Namespace label"
+                    desc={`${namespaceLabel.key}=${namespaceLabel.value}`}
+                />
+            )}
             {deploymentName && <DescriptionListItem term="Deployment" desc={deploymentName} />}
             {label && (
                 <DescriptionListItem term="Deployment label" desc={`${label.key}=${label.value}`} />

ui/apps/platform/src/Containers/Policies/Detail/PolicyDetailContent.tsx

@@ -5,11 +5,12 @@ import { Flex, Grid, Stack, Title } from '@patternfly/react-core';
 
 import { fetchNotifierIntegrations } from 'services/NotifierIntegrationsService';
 import type { NotifierIntegration } from 'types/notifier.proto';
-import type { BasePolicy } from 'types/policy.proto';
+import type { BasePolicy, ClientPolicy } from 'types/policy.proto';
 import PolicyOverview from './PolicyOverview';
 import BooleanPolicyLogicSection from '../Wizard/Step3/BooleanPolicyLogicSection';
 import PolicyScopeSection from './PolicyScopeSection';
 import PolicyBehaviorSection from './PolicyBehaviorSection';
+import { getExcludedDeployments, getExcludedImageNames } from '../policies.utils';
 
 type PolicyDetailContentProps = {
     policy: BasePolicy;
@@ -30,6 +31,18 @@ function PolicyDetailContent({ policy, isReview = false }: PolicyDetailContentPr
     }, []);
 
     const { enforcementActions, eventSource, exclusions, scope, lifecycleStages } = policy;
+    const clientPolicy = policy as ClientPolicy;
+    const hasWizardDeploymentScopes = (clientPolicy.excludedDeploymentScopes ?? []).some(
+        (d) => d.name || d.scope
+    );
+    const hasWizardImageNames = (clientPolicy.excludedImageNames ?? []).some((name) => name !== '');
+    const showPolicyScopeSection =
+        (scope?.length ?? 0) > 0 ||
+        getExcludedDeployments(exclusions).length > 0 ||
+        getExcludedImageNames(exclusions).length > 0 ||
+        hasWizardDeploymentScopes ||
+        hasWizardImageNames;
+
     return (
         <div data-testid="policy-details">
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
@@ -58,10 +71,15 @@ function PolicyDetailContent({ policy, isReview = false }: PolicyDetailContentPr
                         )}
                     </Formik>
                 </Stack>
-                {(scope?.length > 0 || exclusions?.length > 0) && (
+                {showPolicyScopeSection && (
                     <Stack hasGutter>
                         <Title headingLevel="h2">Policy scope</Title>
-                        <PolicyScopeSection scope={scope} exclusions={exclusions} />
+                        <PolicyScopeSection
+                            scope={scope}
+                            exclusions={exclusions}
+                            excludedDeploymentScopes={clientPolicy.excludedDeploymentScopes}
+                            excludedImageNames={clientPolicy.excludedImageNames}
+                        />
                     </Stack>
                 )}
             </Flex>

ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx

@@ -2,21 +2,38 @@ import type { ReactElement } from 'react';
 import { Card, CardBody, Grid, GridItem, List, ListItem, Title } from '@patternfly/react-core';
 
 import useFetchClustersForPermissions from 'hooks/useFetchClustersForPermissions';
-import type { PolicyExclusion, PolicyScope } from 'types/policy.proto';
+import type { PolicyExcludedDeployment, PolicyExclusion, PolicyScope } from 'types/policy.proto';
 import Restriction from './Restriction';
 import ExcludedDeployment from './ExcludedDeployment';
 import { getExcludedDeployments, getExcludedImageNames } from '../policies.utils';
 
 type PolicyScopeSectionProps = {
     scope: PolicyScope[];
     exclusions: PolicyExclusion[];
+    excludedDeploymentScopes?: PolicyExcludedDeployment[];
+    excludedImageNames?: string[];
 };
 
-function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): ReactElement {
+function PolicyScopeSection({
+    scope,
+    exclusions,
+    excludedDeploymentScopes = [],
+    excludedImageNames = [],
+}: PolicyScopeSectionProps): ReactElement {
     const { clusters } = useFetchClustersForPermissions(['Deployment']);
 
-    const excludedDeploymentScopes = getExcludedDeployments(exclusions);
-    const excludedImageNames = getExcludedImageNames(exclusions);
+    const fromExclusionsDeployments = getExcludedDeployments(exclusions);
+    const excludedDeployments =
+        fromExclusionsDeployments.length !== 0
+            ? fromExclusionsDeployments
+            : excludedDeploymentScopes.filter((d) => d.name || d.scope);
+
+    const fromExclusionsImageNames = getExcludedImageNames(exclusions);
+    const imageExclusionNames =
+        fromExclusionsImageNames.length !== 0
+            ? fromExclusionsImageNames
+            : excludedImageNames.filter((name) => name !== '');
+
     return (
         <>
             {scope?.length !== 0 && (
@@ -39,11 +56,11 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea
                     </Grid>
                 </>
             )}
-            {excludedDeploymentScopes?.length !== 0 && (
+            {excludedDeployments?.length !== 0 && (
                 <>
                     <Title headingLevel="h3">Excluded resources</Title>
                     <Grid hasGutter md={12} xl={6}>
-                        {excludedDeploymentScopes.map((excludedDeployment, index) => (
+                        {excludedDeployments.map((excludedDeployment, index) => (
                             // eslint-disable-next-line react/no-array-index-key
                             <GridItem key={index}>
                                 <Card>
@@ -59,11 +76,11 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea
                     </Grid>
                 </>
             )}
-            {excludedImageNames?.length !== 0 && (
+            {imageExclusionNames?.length !== 0 && (
                 <>
                     <Title headingLevel="h3">Image exclusions</Title>
                     <List isPlain>
-                        {excludedImageNames.map((name) => (
+                        {imageExclusionNames.map((name) => (
                             <ListItem key={name}>{name}</ListItem>
                         ))}
                     </List>

ui/apps/platform/src/Containers/Policies/Detail/Restriction.tsx

@@ -13,14 +13,26 @@ type RestrictionProps = {
 };
 
 function Restriction({ clusters, restriction }: RestrictionProps): ReactElement {
-    const { cluster: clusterId, namespace, label } = restriction;
+    const { cluster: clusterId, clusterLabel, namespace, namespaceLabel, label } = restriction;
 
     return (
-        <DescriptionList isCompact isHorizontal>
+        <DescriptionList isCompact isHorizontal horizontalTermWidthModifier={{ default: '16ch' }}>
             {clusterId && (
                 <DescriptionListItem term="Cluster" desc={getClusterName(clusters, clusterId)} />
             )}
+            {clusterLabel && (
+                <DescriptionListItem
+                    term="Cluster label"
+                    desc={`${clusterLabel.key}=${clusterLabel.value}`}
+                />
+            )}
             {namespace && <DescriptionListItem term="Namespace" desc={namespace} />}
+            {namespaceLabel && (
+                <DescriptionListItem
+                    term="Namespace label"
+                    desc={`${namespaceLabel.key}=${namespaceLabel.value}`}
+                />
+            )}
             {label && (
                 <DescriptionListItem term="Deployment label" desc={`${label.key}=${label.value}`} />
             )}