[Index Management] Fix ILM policy link trigger an SPA friendly naviga…

…tion (elastic#199252) ## Summary Close elastic#87876 Use `core.application.navigateToUrl` navigate to given URL in a SPA friendly. https://github.com/user-attachments/assets/1918eb3d-fbec-46d9-8eae-b4a26ebd36a2
CAWilson94 · Dec 12, 2024 · ac0ddcd · ac0ddcd
1 parent 71b7367
commit ac0ddcd
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
                   )}