[Infra UI] Wrap infra content in RedirectAppLinks (elastic#177747)

Closes elastic#177056 ## Summary This PR adds `RedirectAppLinks` wrapper to the infra content and removes it from the links using it. The links that are changed: - Asset Details (page/flyout) - `Show all`: APM and Alerts links - Links to Alerts - Links to services (also empty content) / Services tooltip / Single service link - Logs links (Asset Details page/flyout and hosts view) `Open in Logs` - Anomaly Detection: `Start Trial` link ## Testing - Test for regressions: All links should navigate to different apps without page reload (**same behavior as before**) https://github.com/elastic/kibana/assets/14139027/d5d811f4-3fa6-4294-a307-6c547c8d3f9c https://github.com/elastic/kibana/assets/14139027/3cce71f9-dc0f-49fe-9749-b145c7bc36a1 * ⚠️ Ignore the logs error - my config with the cluster was wrong when I recorded that https://github.com/elastic/kibana/assets/14139027/fa2d4f48-e7a3-4b0f-a0ea-8a6d041f527e --------- Co-authored-by: kibanamachine <[email protected]>
paul-tavares · Mar 4, 2024 · 2e808ac · 2e808ac
1 parent d0c8504
commit 2e808ac
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 132 deletions.
diff --git a/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx b/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx
@@ -13,6 +13,7 @@ import type { ObservabilityAIAssistantPluginStart } from '@kbn/observability-ai-
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { NavigationWarningPromptProvider } from '@kbn/observability-shared-plugin/public';
 import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
+import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import {
   type KibanaEnvContext,
   useKibanaContextForPluginProvider,
@@ -79,13 +80,19 @@ export const CoreProviders: React.FC<CoreProvidersProps> = ({
   const KibanaEnvContextForPluginProvider = useKibanaEnvironmentContextProvider(kibanaEnvironment);
 
   return (
-    <KibanaContextProviderForPlugin services={{ ...core, ...plugins, ...pluginStart }}>
-      <KibanaEnvContextForPluginProvider kibanaEnv={kibanaEnvironment}>
-        <core.i18n.Context>
-          <KibanaThemeProvider theme$={theme$}>{children}</KibanaThemeProvider>
-        </core.i18n.Context>
-      </KibanaEnvContextForPluginProvider>
-    </KibanaContextProviderForPlugin>
+    <RedirectAppLinks
+      coreStart={{
+        application: core.application,
+      }}
+    >
+      <KibanaContextProviderForPlugin services={{ ...core, ...plugins, ...pluginStart }}>
+        <KibanaEnvContextForPluginProvider kibanaEnv={kibanaEnvironment}>
+          <core.i18n.Context>
+            <KibanaThemeProvider theme$={theme$}>{children}</KibanaThemeProvider>
+          </core.i18n.Context>
+        </KibanaEnvContextForPluginProvider>
+      </KibanaContextProviderForPlugin>
+    </RedirectAppLinks>
   );
 };
 

diff --git a/...ty_solution/infra/public/components/asset_details/components/services_tooltip_content.tsx b/...ty_solution/infra/public/components/asset_details/components/services_tooltip_content.tsx
@@ -7,13 +7,10 @@
 
 import React from 'react';
 import { EuiText, EuiLink } from '@elastic/eui';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useLinkProps } from '@kbn/observability-shared-plugin/public';
-import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
 export const ServicesTooltipContent = () => {
-  const { services } = useKibanaContextForPlugin();
   const linkProps = useLinkProps({
     app: 'home',
     hash: '/tutorial/apm',
@@ -25,14 +22,16 @@ export const ServicesTooltipContent = () => {
         defaultMessage="Showing {apmTutorialLink} services detected on this host."
         values={{
           apmTutorialLink: (
-            <RedirectAppLinks coreStart={services} style={{ display: 'inline-block' }}>
-              <EuiLink data-test-subj="assetDetailsTooltipApmTutorialLink" href={linkProps.href}>
-                <FormattedMessage
-                  id="xpack.infra.assetDetails.table.services.tooltip.tutorialLink"
-                  defaultMessage="APM-instrumented"
-                />
-              </EuiLink>
-            </RedirectAppLinks>
+            <EuiLink
+              style={{ display: 'inline-block' }}
+              data-test-subj="assetDetailsTooltipApmTutorialLink"
+              href={linkProps.href}
+            >
+              <FormattedMessage
+                id="xpack.infra.assetDetails.table.services.tooltip.tutorialLink"
+                defaultMessage="APM-instrumented"
+              />
+            </EuiLink>
           ),
         }}
       />

diff --git a/...bservability_solution/infra/public/components/asset_details/links/link_to_alerts_page.tsx b/...bservability_solution/infra/public/components/asset_details/links/link_to_alerts_page.tsx
@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import { encode } from '@kbn/rison';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiLink } from '@elastic/eui';
 import type { TimeRange } from '@kbn/es-query';
@@ -33,21 +32,19 @@ export const LinkToAlertsPage = ({ assetName, queryField, dateRange }: LinkToAle
   );
 
   return (
-    <RedirectAppLinks coreStart={services}>
-      <EuiButtonEmpty
-        data-test-subj="infraAssetDetailsAlertsShowAllButton"
-        size="xs"
-        iconSide="right"
-        iconType="sortRight"
-        flush="both"
-        href={linkToAlertsPage}
-      >
-        <FormattedMessage
-          id="xpack.infra.assetDetails.flyout.AlertsPageLinkLabel"
-          defaultMessage="Show all"
-        />
-      </EuiButtonEmpty>
-    </RedirectAppLinks>
+    <EuiButtonEmpty
+      data-test-subj="infraAssetDetailsAlertsShowAllButton"
+      size="xs"
+      iconSide="right"
+      iconType="sortRight"
+      flush="both"
+      href={linkToAlertsPage}
+    >
+      <FormattedMessage
+        id="xpack.infra.assetDetails.flyout.AlertsPageLinkLabel"
+        defaultMessage="Show all"
+      />
+    </EuiButtonEmpty>
   );
 };
 
@@ -58,13 +55,15 @@ export const LinkToAlertsHomePage = () => {
   const linkToAlertsPage = http.basePath.prepend(ALERTS_PATH);
 
   return (
-    <RedirectAppLinks coreStart={services} style={{ display: 'inline-block' }}>
-      <EuiLink data-test-subj="assetDetailsTooltipDocumentationLink" href={linkToAlertsPage}>
-        <FormattedMessage
-          id="xpack.infra.assetDetails.table.tooltip.alertsLink"
-          defaultMessage="alerts."
-        />
-      </EuiLink>
-    </RedirectAppLinks>
+    <EuiLink
+      style={{ display: 'inline-block' }}
+      data-test-subj="assetDetailsTooltipDocumentationLink"
+      href={linkToAlertsPage}
+    >
+      <FormattedMessage
+        id="xpack.infra.assetDetails.table.tooltip.alertsLink"
+        defaultMessage="alerts."
+      />
+    </EuiLink>
   );
 };
diff --git a/...bservability_solution/infra/public/components/asset_details/links/link_to_apm_service.tsx b/...bservability_solution/infra/public/components/asset_details/links/link_to_apm_service.tsx
@@ -5,13 +5,11 @@
  * 2.0.
  */
 import React from 'react';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiBadge, EuiText } from '@elastic/eui';
 import { AgentIcon } from '@kbn/custom-icons';
 import { AgentName } from '@kbn/elastic-agent-utils';
 import { i18n } from '@kbn/i18n';
 import { useLinkProps } from '@kbn/observability-shared-plugin/public';
-import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
 export interface LinkToApmServiceProps {
   serviceName: string;
@@ -20,8 +18,6 @@ export interface LinkToApmServiceProps {
 }
 
 export const LinkToApmService = ({ serviceName, agentName, dateRange }: LinkToApmServiceProps) => {
-  const { services } = useKibanaContextForPlugin();
-
   const linkProps = useLinkProps({
     app: 'apm',
     pathname: `/services/${serviceName}/overview`,
@@ -31,24 +27,22 @@ export const LinkToApmService = ({ serviceName, agentName, dateRange }: LinkToAp
     },
   });
   return (
-    <RedirectAppLinks coreStart={services}>
-      <EuiText>
-        <EuiBadge
-          data-test-subj="serviceLink"
-          color="hollow"
-          css={{ padding: '4px' }}
-          href={linkProps.href as string}
-          title={i18n.translate('xpack.infra.assetDetails.services.serviceButtonTitle', {
-            defaultMessage: '{serviceName} last reported by {agentName}',
-            values: { serviceName, agentName },
-          })}
-        >
-          {agentName ? (
-            <AgentIcon agentName={agentName as AgentName} size="m" css={{ marginRight: '4px' }} />
-          ) : null}
-          <span data-test-subj={`serviceNameText-${serviceName}`}>{serviceName}</span>
-        </EuiBadge>
-      </EuiText>
-    </RedirectAppLinks>
+    <EuiText>
+      <EuiBadge
+        data-test-subj="serviceLink"
+        color="hollow"
+        css={{ padding: '4px' }}
+        href={linkProps.href as string}
+        title={i18n.translate('xpack.infra.assetDetails.services.serviceButtonTitle', {
+          defaultMessage: '{serviceName} last reported by {agentName}',
+          values: { serviceName, agentName },
+        })}
+      >
+        {agentName ? (
+          <AgentIcon agentName={agentName as AgentName} size="m" css={{ marginRight: '4px' }} />
+        ) : null}
+        <span data-test-subj={`serviceNameText-${serviceName}`}>{serviceName}</span>
+      </EuiBadge>
+    </EuiText>
   );
 };
diff --git a/...servability_solution/infra/public/components/asset_details/links/link_to_apm_services.tsx b/...servability_solution/infra/public/components/asset_details/links/link_to_apm_services.tsx
@@ -7,7 +7,6 @@
 import React from 'react';
 import { stringify } from 'querystring';
 import { encode } from '@kbn/rison';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
@@ -32,20 +31,18 @@ export const LinkToApmServices = ({ assetName, apmField }: LinkToApmServicesProp
   const linkToApmServices = http.basePath.prepend(`/app/apm/services?${queryString}`);
 
   return (
-    <RedirectAppLinks coreStart={services}>
-      <EuiButtonEmpty
-        data-test-subj="infraAssetDetailsViewAPMShowAllServicesButton"
-        size="xs"
-        flush="both"
-        href={linkToApmServices}
-        iconSide="right"
-        iconType="sortRight"
-      >
-        <FormattedMessage
-          id="xpack.infra.hostsViewPage.flyout.viewApmServicesLinkLabel"
-          defaultMessage="Show all"
-        />
-      </EuiButtonEmpty>
-    </RedirectAppLinks>
+    <EuiButtonEmpty
+      data-test-subj="infraAssetDetailsViewAPMShowAllServicesButton"
+      size="xs"
+      flush="both"
+      href={linkToApmServices}
+      iconSide="right"
+      iconType="sortRight"
+    >
+      <FormattedMessage
+        id="xpack.infra.hostsViewPage.flyout.viewApmServicesLinkLabel"
+        defaultMessage="Show all"
+      />
+    </EuiButtonEmpty>
   );
 };
diff --git a/...k/plugins/observability_solution/infra/public/components/asset_details/tabs/logs/logs.tsx b/...k/plugins/observability_solution/infra/public/components/asset_details/tabs/logs/logs.tsx
@@ -10,7 +10,6 @@ import useDebounce from 'react-use/lib/useDebounce';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { LogStream } from '@kbn/logs-shared-plugin/public';
 import {
   DEFAULT_LOG_VIEW,
@@ -107,20 +106,18 @@ export const Logs = () => {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <RedirectAppLinks coreStart={services}>
-              <EuiButtonEmpty
-                data-test-subj="infraAssetDetailsLogsTabOpenInLogsButton"
-                size="xs"
-                flush="both"
-                iconType="popout"
-                href={logsUrl}
-              >
-                <FormattedMessage
-                  id="xpack.infra.nodeDetails.logs.openLogsLink"
-                  defaultMessage="Open in Logs"
-                />
-              </EuiButtonEmpty>
-            </RedirectAppLinks>
+            <EuiButtonEmpty
+              data-test-subj="infraAssetDetailsLogsTabOpenInLogsButton"
+              size="xs"
+              flush="both"
+              iconType="popout"
+              href={logsUrl}
+            >
+              <FormattedMessage
+                id="xpack.infra.nodeDetails.logs.openLogsLink"
+                defaultMessage="Open in Logs"
+              />
+            </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>

diff --git a/...ck/plugins/observability_solution/infra/public/components/subscription_splash_content.tsx b/...ck/plugins/observability_solution/infra/public/components/subscription_splash_content.tsx
@@ -10,12 +10,10 @@ import { i18n } from '@kbn/i18n';
 import { EuiText, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { useTrialStatus } from '../hooks/use_trial_status';
 import { LoadingPrompt } from './loading_page';
 import { PageTemplate } from './page_template';
 import { useLicenseUrl } from '../hooks/use_license';
-import { useKibanaContextForPlugin } from '../hooks/use_kibana';
 
 const loadingMessage = i18n.translate('xpack.infra.ml.splash.loadingMessage', {
   defaultMessage: 'Checking license...',
@@ -114,7 +112,6 @@ export const SubscriptionSplashPage: React.FC<LazyObservabilityPageTemplateProps
 
 export const SubscriptionSplashPrompt: React.FC = () => {
   const manageLicenseURL = useLicenseUrl();
-  const { services } = useKibanaContextForPlugin();
 
   return (
     <EuiEmptyPrompt
@@ -137,17 +134,15 @@ export const SubscriptionSplashPrompt: React.FC = () => {
         </p>
       }
       actions={[
-        <RedirectAppLinks coreStart={services}>
-          <EuiButton
-            data-test-subj="infraSubscriptionSplashPromptStartTrialButton"
-            href={manageLicenseURL}
-            fill
-          >
-            {i18n.translate('xpack.infra.ml.splash.startTrialCta', {
-              defaultMessage: 'Start trial',
-            })}
-          </EuiButton>
-        </RedirectAppLinks>,
+        <EuiButton
+          data-test-subj="infraSubscriptionSplashPromptStartTrialButton"
+          href={manageLicenseURL}
+          fill
+        >
+          {i18n.translate('xpack.infra.ml.splash.startTrialCta', {
+            defaultMessage: 'Start trial',
+          })}
+        </EuiButton>,
       ]}
     />
   );

diff --git a/...ty_solution/infra/public/pages/metrics/hosts/components/tabs/logs/logs_link_to_stream.tsx b/...ty_solution/infra/public/pages/metrics/hosts/components/tabs/logs/logs_link_to_stream.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 import React from 'react';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { getLogsLocatorsFromUrlService, LogViewReference } from '@kbn/logs-shared-plugin/common';
@@ -24,26 +23,24 @@ export const LogsLinkToStream = ({ startTime, endTime, query, logView }: LogsLin
   const { logsLocator } = getLogsLocatorsFromUrlService(share.url);
 
   return (
-    <RedirectAppLinks coreStart={services}>
-      <EuiButtonEmpty
-        href={logsLocator.getRedirectUrl({
-          time: endTime,
-          timeRange: {
-            startTime,
-            endTime,
-          },
-          filter: query,
-          logView,
-        })}
-        data-test-subj="hostsView-logs-link-to-stream-button"
-        iconType="popout"
-        flush="both"
-      >
-        <FormattedMessage
-          id="xpack.infra.hostsViewPage.tabs.logs.openInLogsUiLinkText"
-          defaultMessage="Open in Logs"
-        />
-      </EuiButtonEmpty>
-    </RedirectAppLinks>
+    <EuiButtonEmpty
+      href={logsLocator.getRedirectUrl({
+        time: endTime,
+        timeRange: {
+          startTime,
+          endTime,
+        },
+        filter: query,
+        logView,
+      })}
+      data-test-subj="hostsView-logs-link-to-stream-button"
+      iconType="popout"
+      flush="both"
+    >
+      <FormattedMessage
+        id="xpack.infra.hostsViewPage.tabs.logs.openInLogsUiLinkText"
+        defaultMessage="Open in Logs"
+      />
+    </EuiButtonEmpty>
   );
 };