[8.x] [Index Management] Fix ILM policy link trigger an SPA friendly …

…navigation (#199252) (#201271) # Backport This will backport the following commits from `main` to `8.x`: - [[Index Management] Fix ILM policy link trigger an SPA friendly navigation (#199252)](#199252)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jusheng Huang <[email protected]>
elastic · Nov 21, 2024 · 8df5ece · 8df5ece
1 parent a36d790
commit 8df5ece
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -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 () => {

diff --git a/...tion/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx b/...tion/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
@@ -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"

diff --git a/...on/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx b/...on/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx
@@ -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>
             ),

diff --git a/...ment/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx b/...ment/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx
@@ -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
                   )}