Skip to content

[Streams] Add suggested name #253652

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

Merged
SoniaSanzV merged 7 commits into from
Feb 18, 2026
Merged

[Streams] Add suggested name #253652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7cf598
Add suggested name
SoniaSanzV Feb 18, 2026
b46d150
Integrate with the consumer
SoniaSanzV Feb 18, 2026
7d59ef2
Address suggestions
SoniaSanzV Feb 18, 2026
a7fd1ab
Change test name
SoniaSanzV Feb 18, 2026
4f60825
remove useEffect
SoniaSanzV Feb 18, 2026
240c9e1
Merge branch 'main' into downsampling/create_new_policy_modal_suggest…
SoniaSanzV Feb 18, 2026
ca03acd
Merge branch 'main' into downsampling/create_new_policy_modal_suggest…
SoniaSanzV Feb 18, 2026
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
26 changes: 26 additions & 0 deletions ...detail_lifecycle/downsampling/create_new_policy_modal/create_new_policy_modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ type Story = StoryObj<typeof CreatePolicyModal>;
export const Default: Story = {
args: {
policyNames: ['logs-default', 'metrics-prod', 'my-policy'],
originalPolicyName: 'my-policy',
},
render: (args) => {
const Story = ({ policyNames }: { policyNames: string[] }) => {
Expand All @@ -34,6 +35,31 @@ export const Default: Story = {
policyNames={policyNames}
onBack={action('onBack')}
onSave={action('onSave')}
originalPolicyName={args.originalPolicyName}
/>
</EuiOverlayMask>
);
};
return <Story policyNames={args.policyNames ?? []} />;
},
};
export const WithExistingPolicyName: Story = {
args: {
policyNames: ['logs-default', 'metrics-prod', 'my-policy-2', 'my-policy-3'],
originalPolicyName: 'my-policy',
},
render: (args) => {
const Story = ({ policyNames }: { policyNames: string[] }) => {
useEffect(() => {
action('policyNames')(policyNames);
}, [policyNames]);
return (
<EuiOverlayMask>
<CreatePolicyModal
policyNames={policyNames}
onBack={action('onBack')}
onSave={action('onSave')}
originalPolicyName={args.originalPolicyName}
/>
</EuiOverlayMask>
);
Expand Down
117 changes: 109 additions & 8 deletions ...am_detail_lifecycle/downsampling/create_new_policy_modal/create_new_policy_modal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ describe('CreatePolicyModal', () => {

it('renders title and policy name input', () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

expect(screen.getByTestId('createPolicyModalTitle')).toHaveTextContent(
Expand All @@ -27,7 +32,12 @@ describe('CreatePolicyModal', () => {
it('calls onBack when back button is clicked', () => {
const onBack = jest.fn();
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={onBack} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={onBack}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

fireEvent.click(screen.getByTestId('createPolicyModal-backButton'));
Expand All @@ -37,7 +47,12 @@ describe('CreatePolicyModal', () => {
it('submits a valid policy name', async () => {
const onSave = jest.fn();
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={onSave} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={onSave}
originalPolicyName="my-policy"
/>
);

fireEvent.change(screen.getByTestId('createPolicyModal-policyNameInput'), {
Expand All @@ -51,6 +66,67 @@ describe('CreatePolicyModal', () => {
await waitFor(() => expect(onSave).toHaveBeenCalledWith('new-policy'));
});

it('pre-populates with the default copy name', () => {
renderWithI18n(
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);
expect(screen.getByTestId('createPolicyModal-policyNameInput')).toHaveValue('my-policy-2');
});

it('pre-populates with the first available copy name when the default already exists', () => {
renderWithI18n(
<CreatePolicyModal
policyNames={[...policyNames, 'my-policy-2']}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

expect(screen.getByTestId('createPolicyModal-policyNameInput')).toHaveValue('my-policy-3');
});

it('does not suggest a copy name after 9 attempts', () => {
renderWithI18n(
<CreatePolicyModal
policyNames={[
...policyNames,
'my-policy-2',
'my-policy-3',
'my-policy-4',
'my-policy-5',
'my-policy-6',
'my-policy-7',
'my-policy-8',
'my-policy-9',
]}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

expect(screen.getByTestId('createPolicyModal-policyNameInput')).toHaveValue('');
});

it('does not suggest a copy name when the shortest suffix is too long', () => {
renderWithI18n(
<CreatePolicyModal
policyNames={[]}
onBack={() => {}}
onSave={() => {}}
originalPolicyName={'a'.repeat(255)}
/>
);

expect(screen.getByTestId('createPolicyModal-policyNameInput')).toHaveValue('');
});

describe('policy name validation', () => {
const validationDebounceMs = 500;
const advanceValidation = async () => {
Expand All @@ -70,7 +146,12 @@ describe('CreatePolicyModal', () => {

it('shows an error for duplicate policy names', async () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

const input = screen.getByTestId('createPolicyModal-policyNameInput');
Expand All @@ -85,7 +166,12 @@ describe('CreatePolicyModal', () => {

it('shows an error for empty policy name', async () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

const input = screen.getByTestId('createPolicyModal-policyNameInput');
Expand All @@ -99,7 +185,12 @@ describe('CreatePolicyModal', () => {

it('shows an error for policy names that start with an underscore', async () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

const input = screen.getByTestId('createPolicyModal-policyNameInput');
Expand All @@ -114,7 +205,12 @@ describe('CreatePolicyModal', () => {

it('shows an error for policy names that contain spaces or commas', async () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

const input = screen.getByTestId('createPolicyModal-policyNameInput');
Expand All @@ -137,7 +233,12 @@ describe('CreatePolicyModal', () => {

it('shows an error for policy names that are too long', async () => {
renderWithI18n(
<CreatePolicyModal policyNames={policyNames} onBack={() => {}} onSave={() => {}} />
<CreatePolicyModal
policyNames={policyNames}
onBack={() => {}}
onSave={() => {}}
originalPolicyName="my-policy"
/>
);

const input = screen.getByTestId('createPolicyModal-policyNameInput');
Expand Down
40 changes: 37 additions & 3 deletions .../stream_detail_lifecycle/downsampling/create_new_policy_modal/create_new_policy_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,38 @@ import { Form, UseField, useForm } from '@kbn/es-ui-shared-plugin/static/forms/h

const { emptyField, startsWithField, containsCharsField } = fieldValidators;

const MAX_POLICY_NAME_BYTES = 255;

const getPolicyNameIsBeyondMaxBytes = (policyName: string) => {
return (
window.TextEncoder && new window.TextEncoder().encode(policyName).length > MAX_POLICY_NAME_BYTES
);
};

const getFirstAvailableCopyName = ({
originalPolicyName,
policyNames,
}: {
originalPolicyName: string;
policyNames: string[];
}) => {
const existing = new Set(policyNames);

// If the shortest candidate is already too long, any other single-digit suffix will be too.
if (getPolicyNameIsBeyondMaxBytes(`${originalPolicyName}-2`)) {
return '';
}

for (let i = 2; i <= 9; i++) {
const candidate = `${originalPolicyName}-${i}`;
Comment thread
SoniaSanzV marked this conversation as resolved.
if (!existing.has(candidate) && !getPolicyNameIsBeyondMaxBytes(candidate)) {
return candidate;
}
}
Comment on lines +46 to +56
Copy link
Copy Markdown
Contributor

@damian-polewski damian-polewski Feb 18, 2026

Choose a reason for hiding this comment

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

Do we need to check both before and inside the loop?

Copy link
Copy Markdown
Contributor Author

@SoniaSanzV SoniaSanzV Feb 18, 2026

Choose a reason for hiding this comment

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

I don't think that's needed. {name}-2 and {name}-9 (max number) would have the same UTF‑8 byte length, so checking inside the loop is redundan


return '';
};

const i18nTexts = {
errors: {
policyNameRequiredMessage: i18n.translate('xpack.streams.createPolicyModal.emptyNameError', {
Expand Down Expand Up @@ -83,7 +115,7 @@ export const createPolicyNameValidations = ({
{
validator: (arg) => {
const policyName = arg.value;
if (window.TextEncoder && new window.TextEncoder().encode(policyName).length > 255) {
if (getPolicyNameIsBeyondMaxBytes(policyName)) {
return {
message: i18nTexts.errors.policyNameTooLongErrorMessage,
};
Expand All @@ -108,18 +140,20 @@ export interface CreatePolicyModalProps {
onBack: () => void;
onSave: (policyName: string) => void;
isLoading?: boolean;
originalPolicyName: string;
}

export function CreatePolicyModal({
policyNames,
onBack,
onSave,
isLoading = false,
originalPolicyName,
}: CreatePolicyModalProps) {
const modalTitleId = useGeneratedHtmlId();
const { form } = useForm({
defaultValue: {
policyName: '',
policyName: getFirstAvailableCopyName({ originalPolicyName, policyNames }),
},
});

Expand Down Expand Up @@ -191,7 +225,7 @@ export function CreatePolicyModal({
data-test-subj="createPolicyModal-saveButton"
fill
onClick={handleSave}
disabled={!form.isValid || isLoading}
disabled={form.isValid === false || isLoading}
isLoading={isLoading}
>
{i18n.translate('xpack.streams.createPolicyModal.saveButton', {
Expand Down
1 change: 1 addition & 0 deletions ...ic/components/data_management/stream_detail_lifecycle/hooks/use_ilm_lifecycle_summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,7 @@ export const useIlmLifecycleSummary = ({
onBack={handleBackFromCreatePolicy}
onSave={handleCreatePolicy}
isLoading={isProcessing}
originalPolicyName={policyName}
/>
)}
</>
Expand Down
Loading