[Index Management] Fix ILM policy link trigger an SPA friendly navigation (#199252)

## Summary

Close #87876 

Use `core.application.navigateToUrl` navigate to given URL in a SPA
friendly.


https://github.com/user-attachments/assets/1918eb3d-fbec-46d9-8eae-b4a26ebd36a2
This commit is contained in:
Jusheng Huang 2024-11-22 02:35:59 +08:00 committed by GitHub
parent 5d4282e916
commit fa100b4819
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 23 additions and 8 deletions

View file

@ -812,7 +812,7 @@ describe('Data Streams tab', () => {
const { actions, findDetailPanelIlmPolicyLink } = testBed;
await actions.clickNameAt(0);
expect(findDetailPanelIlmPolicyLink().prop('href')).toBe('/test/my_ilm_policy');
expect(findDetailPanelIlmPolicyLink().prop('data-href')).toBe('/test/my_ilm_policy');
});
test('with an ILM url locator and no ILM policy', async () => {

View file

@ -131,7 +131,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
const { error, data: dataStream, isLoading } = useLoadDataStream(dataStreamName);
const ilmPolicyLink = useIlmLocator(ILM_PAGES_POLICY_EDIT, dataStream?.ilmPolicyName);
const { history, config } = useAppContext();
const { history, config, core } = useAppContext();
let indicesLink;
let content;
@ -193,7 +193,11 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
>
<>
{ilmPolicyLink ? (
<EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
<EuiLink
data-test-subj={'ilmPolicyLink'}
data-href={ilmPolicyLink}
onClick={() => core.application.navigateToUrl(ilmPolicyLink)}
>
<EuiTextColor color="subdued">{ilmPolicyName}</EuiTextColor>
</EuiLink>
) : (
@ -204,7 +208,11 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
) : (
<>
{ilmPolicyLink ? (
<EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
<EuiLink
data-test-subj={'ilmPolicyLink'}
data-href={ilmPolicyLink}
onClick={() => core.application.navigateToUrl(ilmPolicyLink)}
>
{ilmPolicyName}
</EuiLink>
) : (
@ -429,7 +437,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
defaultMessage="To edit data retention for this data stream, you must edit its associated {link}."
values={{
link: (
<EuiLink href={ilmPolicyLink}>
<EuiLink onClick={() => core.application.navigateToUrl(ilmPolicyLink)}>
<FormattedMessage
id="xpack.idxMgmt.dataStreamsDetailsPanel.editDataRetentionModal.fullyManagedByILMButtonLabel"
defaultMessage="ILM policy"

View file

@ -161,6 +161,8 @@ const MixedIndicesCallout = ({
dataStreamName,
history,
}: MixedIndicesCalloutProps) => {
const { core } = useAppContext();
return (
<EuiCallOut
title={i18n.translate(
@ -177,7 +179,10 @@ const MixedIndicesCallout = ({
defaultMessage="One or more indices are managed by an ILM policy ({viewAllIndicesLink}). Updating data retention for this data stream won't affect these indices. Instead you will have to update the {ilmPolicyLink} policy."
values={{
ilmPolicyLink: (
<EuiLink data-test-subj="viewIlmPolicyLink" href={ilmPolicyLink}>
<EuiLink
data-test-subj="viewIlmPolicyLink"
onClick={() => core.application.navigateToUrl(ilmPolicyLink)}
>
{ilmPolicyName}
</EuiLink>
),

View file

@ -63,7 +63,7 @@ export const TabSummary: React.FunctionComponent<Props> = ({ templateDetails })
const numIndexPatterns = indexPatterns.length;
const { history } = useAppContext();
const { history, core } = useAppContext();
const ilmPolicyLink = useIlmLocator(ILM_PAGES_POLICY_EDIT, ilmPolicy?.name);
return (
@ -171,7 +171,9 @@ export const TabSummary: React.FunctionComponent<Props> = ({ templateDetails })
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{ilmPolicy?.name && ilmPolicyLink ? (
<EuiLink href={ilmPolicyLink}>{ilmPolicy!.name}</EuiLink>
<EuiLink onClick={() => core.application.navigateToUrl(ilmPolicyLink)}>
{ilmPolicy!.name}
</EuiLink>
) : (
ilmPolicy?.name || i18nTexts.none
)}