Skip to content

ROX-33089: Improve language on scope step of wizard #19903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bradr5 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ROX-33089: Improve language on scope step of wizard #19903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea
<>
{scope?.length !== 0 && (
<>
<Title headingLevel="h3">Scope inclusions</Title>
<Title headingLevel="h3">Included resources</Title>
<Grid hasGutter md={12} xl={6}>
{scope.map((restriction, index) => (
// eslint-disable-next-line react/no-array-index-key
Expand All @@ -41,7 +41,7 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea
)}
{excludedDeploymentScopes?.length !== 0 && (
<>
<Title headingLevel="h3">Scope exclusions</Title>
<Title headingLevel="h3">Excluded resources</Title>
<Grid hasGutter md={12} xl={6}>
{excludedDeploymentScopes.map((excludedDeployment, index) => (
// eslint-disable-next-line react/no-array-index-key
Expand Down
8 changes: 4 additions & 4 deletions ui/apps/platform/src/Containers/Policies/Wizard/PolicyWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import type { ExtendedPageAction } from 'utils/queryStringUtils';
import {
POLICY_BEHAVIOR_ACTIONS_ID,
POLICY_BEHAVIOR_ID,
POLICY_BEHAVIOR_SCOPE_ID,
POLICY_BEHAVIOR_RESOURCES_ID,
POLICY_DEFINITION_DETAILS_ID,
POLICY_DEFINITION_ID,
POLICY_DEFINITION_LIFECYCLE_ID,
Expand Down Expand Up @@ -227,9 +227,9 @@ function PolicyWizard({ pageAction, policy }: PolicyWizardProps): ReactElement {
isExpandable
steps={[
<WizardStep
name="Scope"
id={POLICY_BEHAVIOR_SCOPE_ID}
key={POLICY_BEHAVIOR_SCOPE_ID}
name="Resources"
id={POLICY_BEHAVIOR_RESOURCES_ID}
key={POLICY_BEHAVIOR_RESOURCES_ID}
body={{ hasNoPadding: true }}
footer={{ isNextDisabled: !isValidOnClient }}
>
Expand Down
2 changes: 1 addition & 1 deletion ui/apps/platform/src/Containers/Policies/Wizard/Step4/ExclusionScopeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function ExclusionScopeCard({
}));

return (
<PolicyScopeCardBase title="Exclusion scope" onDelete={onDelete}>
<PolicyScopeCardBase title="Excluded resource" onDelete={onDelete}>
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rename to Exclusion (since it is not a singular resource per rule, but will most likely be a set of resources - put differently - it is a single rule, not a single resource). Also this is the card that pops up when the user clicks on "Add exclusion".

Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(not sure if this shows up in the UI - I think this is the card title which does)

<Form>
<FormGroup label="Cluster">
<Flex direction={{ default: 'column' }}>
Expand Down
2 changes: 1 addition & 1 deletion ui/apps/platform/src/Containers/Policies/Wizard/Step4/InclusionScopeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function InclusionScopeCard({
}

return (
<PolicyScopeCardBase title="Inclusion scope" onDelete={onDelete}>
<PolicyScopeCardBase title="Included resource" onDelete={onDelete}>
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar suggestion: Inclusion

<Form>
<FormGroup label="Cluster" role="radiogroup">
<Flex direction={{ default: 'column' }}>
Expand Down
10 changes: 8 additions & 2 deletions ui/apps/platform/src/Containers/Policies/Wizard/Step4/PolicyScopeCardLegacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,11 @@ function PolicyScopeCardLegacy({
variant="plain"
className="pf-v6-u-mr-md"
onClick={onDelete}
title={`Delete ${type} scope`}
title={
type === 'inclusion'
? 'Delete included resource'
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete inclusion/exclusion

: 'Delete excluded resource'
}
/>
</>
),
Expand All @@ -120,7 +124,9 @@ function PolicyScopeCardLegacy({
}}
className="pf-v6-u-p-0"
>
<CardTitle className="pf-v6-u-pl-lg">{type} scope</CardTitle>
<CardTitle className="pf-v6-u-pl-lg">
{type === 'inclusion' ? 'Included resource' : 'Excluded resource'}
</CardTitle>
</CardHeader>
<Divider component="div" />
<CardBody>
Expand Down
61 changes: 42 additions & 19 deletions ui/apps/platform/src/Containers/Policies/Wizard/Step4/PolicyScopeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,31 @@ import type { ClientPolicy } from 'types/policy.proto';
import type { ListImage } from 'types/image.proto';
import { getImages } from 'services/imageService';

import ExternalLink from 'Components/PatternFly/IconText/ExternalLink';

import { initialExcludedDeployment, initialScope } from '../../policies.utils';
import PolicyScopeCardLegacy from './PolicyScopeCardLegacy';
import InclusionScopeCard from './InclusionScopeCard';
import ExclusionScopeCard from './ExclusionScopeCard';

function PolicyScopeRE2Description(): ReactElement {
return (
<div>
Every field except Cluster can use RE2 matching. Empty fields apply to all values (no
filter).{' '}
<ExternalLink>
<a
href="https://github.com/google/re2/wiki/syntax"
target="_blank"
rel="noopener noreferrer"
>
Learn how to use regex here
</a>
</ExternalLink>
</div>
);
}

function PolicyScopeForm(): ReactElement {
const [isExcludeImagesOpen, setIsExcludeImagesOpen] = useState(false);
const [filterValue, setFilterValue] = useState('');
Expand Down Expand Up @@ -119,10 +139,9 @@ function PolicyScopeForm(): ReactElement {
return (
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
<FlexItem flex={{ default: 'flex_1' }} className="pf-v6-u-p-lg">
<Title headingLevel="h2">Scope</Title>
<Title headingLevel="h2">Resources</Title>
<div className="pf-v6-u-mt-sm">
Create scopes to restrict or exclude your policy from entities within your
environment.
Configure the resources to be applied to, or excluded from this policy.
</div>
</FlexItem>
<Divider component="div" />
Expand All @@ -131,27 +150,29 @@ function PolicyScopeForm(): ReactElement {
className="pf-v6-u-mt-lg pf-v6-u-mx-lg"
isInline
variant="info"
title="The selected event source does not support scoping."
title="The selected event source does not support resource targeting."
component="p"
/>
)}
<Flex direction={{ default: 'column' }} className="pf-v6-u-p-lg">
<Flex>
<FlexItem flex={{ default: 'flex_1' }}>
<Title headingLevel="h3">Restrict by scope</Title>
<div className="pf-v6-u-mt-sm">
Use Restrict by scope to enable this policy only for a specific cluster,
namespace, or deployment label. You can add multiple scopes and also use
regular expressions (RE2 syntax) for namespaces and deployment labels.
</div>
<Flex direction={{ default: 'column' }}>
<Title headingLevel="h3">Included resources</Title>
<div>
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apply this policy to one or more clusters, namespaces or workloads (if applicable).
OR
Define one or more clusters, namespaces of workloads (if applicable) to apply this policy to.

followed by:

If no inclusions are configured, the policy will apply to all resources in your environment, except those excluded.

(Because of the "except those excluded" , it shortens the exclusion description and succinctly conveys "They narrow the result of your inclusions (or all resources, if you added
none)."

Define which clusters, namespaces, and deployments this policy
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know my demo said deployments but given RFEs to exclude other workload types like Jobs and CronJobs coming soon, would be nice to use workloads as the verbiage instead of deployments. I believe we are encouraging that terminology in other parts of the UI as well cc: @mansursyed

evaluates. If no inclusions are added, all resources are included.
</div>
<PolicyScopeRE2Description />
</Flex>
</FlexItem>
<FlexItem className="pf-v6-u-pr-md" alignSelf={{ default: 'alignSelfCenter' }}>
<Button
variant="secondary"
onClick={addNewInclusionScope}
isDisabled={isAllScopingDisabled}
>
Add inclusion scope
Add inclusion
</Button>
</FlexItem>
</Flex>
Expand Down Expand Up @@ -187,21 +208,23 @@ function PolicyScopeForm(): ReactElement {
<Flex direction={{ default: 'column' }} className="pf-v6-u-p-lg">
<Flex>
<FlexItem flex={{ default: 'flex_1' }}>
<Title headingLevel="h3">Exclude by scope</Title>
<div className="pf-v6-u-mt-sm">
Use Exclude by scope to exclude entities from your policy. This function
is only available for Deploy and Runtime lifecycle stages. You can add
multiple scopes and also use regular expressions (RE2 syntax) for
namespaces and deployment labels.
</div>
<Flex direction={{ default: 'column' }}>
<Title headingLevel="h3">Excluded resources</Title>
<div>
Excluded resources define what this policy will not evaluate. They
Copy link
Copy Markdown
Contributor

@clickboo clickboo Apr 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exclude one or more clusters, namespaces, or workloads (if applicable) from this policy.
OR
Define one or more clusters, namespaces or workloads (if applicable) to be excluded from this policy.

narrow the result of your inclusions (or all resources, if you added
none).
</div>
<PolicyScopeRE2Description />
</Flex>
</FlexItem>
<FlexItem className="pf-v6-u-pr-md" alignSelf={{ default: 'alignSelfCenter' }}>
<Button
variant="secondary"
isDisabled={!hasDeployOrRuntimeLifecycle || isAllScopingDisabled}
onClick={addNewExclusionDeploymentScope}
>
Add exclusion scope
Add exclusion
</Button>
</FlexItem>
</Flex>
Expand Down
8 changes: 4 additions & 4 deletions ui/apps/platform/src/Containers/Policies/Wizard/policyValidationSchemas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ClientPolicy } from 'types/policy.proto';

import {
POLICY_BEHAVIOR_ACTIONS_ID,
POLICY_BEHAVIOR_SCOPE_ID,
POLICY_BEHAVIOR_RESOURCES_ID,
POLICY_DEFINITION_DETAILS_ID,
POLICY_DEFINITION_LIFECYCLE_ID,
POLICY_DEFINITION_RULES_ID,
Expand Down Expand Up @@ -198,7 +198,7 @@ export const validationSchemaStep4: yup.ObjectSchema<WizardPolicyStep4> = yup.ob
})
.test(
'scope-has-at-least-one-property',
'Scope must have at least one property',
'Each included resource must have at least one field populated',
(scope) =>
Boolean(
scope?.cluster.trim() ||
Expand Down Expand Up @@ -231,7 +231,7 @@ export const validationSchemaStep4: yup.ObjectSchema<WizardPolicyStep4> = yup.ob
})
.test(
'excluded-scope-has-at-least-one-property',
'Excluded scope must have at least one property',
'Each excluded resource must have at least one field populated',
(value) =>
Boolean(
value?.name.trim() ||
Expand Down Expand Up @@ -273,7 +273,7 @@ export function getValidationSchema(stepId: number | string): yup.Schema {
return validationSchemaStep2;
case POLICY_DEFINITION_RULES_ID:
return validationSchemaStep3;
case POLICY_BEHAVIOR_SCOPE_ID:
case POLICY_BEHAVIOR_RESOURCES_ID:
return validationSchemaStep4;
case POLICY_BEHAVIOR_ACTIONS_ID:
return validationSchemaStep5;
Expand Down
2 changes: 1 addition & 1 deletion ui/apps/platform/src/Containers/Policies/policies.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ export const POLICY_DEFINITION_DETAILS_ID = 'policy-definition-details';
export const POLICY_DEFINITION_LIFECYCLE_ID = 'policy-definition-lifecycle';
export const POLICY_DEFINITION_RULES_ID = 'policy-definition-rules';
export const POLICY_BEHAVIOR_ID = 'policy-behavior';
export const POLICY_BEHAVIOR_SCOPE_ID = 'policy-behavior-scope';
export const POLICY_BEHAVIOR_RESOURCES_ID = 'policy-behavior-resources';
export const POLICY_BEHAVIOR_ACTIONS_ID = 'policy-behavior-actions';
export const POLICY_REVIEW_ID = 'policy-review';
Loading