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

…tion
elastic · Nov 20, 2024 · 7b91cd3 · 7b91cd3
1 parent d697a67
commit 7b91cd3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
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,10 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
             >
               <>
                 {ilmPolicyLink ? (
-                  <EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
+                  <EuiLink
+                    data-test-subj={'ilmPolicyLink'}
+                    onClick={() => core.application.navigateToUrl(ilmPolicyLink)}
+                  >
                     <EuiTextColor color="subdued">{ilmPolicyName}</EuiTextColor>
                   </EuiLink>
                 ) : (
@@ -204,7 +207,10 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
           ) : (
             <>
               {ilmPolicyLink ? (
-                <EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
+                <EuiLink
+                  data-test-subj={'ilmPolicyLink'}
+                  onClick={() => core.application.navigateToUrl(ilmPolicyLink)}
+                >
                   {ilmPolicyName}
                 </EuiLink>
               ) : (
@@ -429,7 +435,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
                   )}