[SLOs] Hide view in app in slo alerts table in slo details page (#175441

)

## Summary

Fixes #155731

Since we are already on SLO details page, it doesn't make sense to show
view in app button in flyout or in columns actions.

<img width="1727" alt="image"
src="https://github.com/elastic/kibana/assets/3505601/ddcdf83d-00e0-4579-834b-db4f26e52a2e">

x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx

@@ -8,6 +8,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { AlertsTableFlyoutBaseProps } from '@kbn/triggers-actions-ui-plugin/public';
 
+import { useRouteMatch } from 'react-router-dom';
+import { SLO_ALERTS_TABLE_ID } from '../../pages/slo_details/components/slo_detail_alerts';
+import { SLO_DETAIL_PATH } from '../../../common/locators/paths';
 import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
@@ -19,6 +22,7 @@ export { AlertsFlyout } from './alerts_flyout';
 export const useGetAlertFlyoutComponents = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry
 ) => {
+  const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);
   const body = useCallback(
     (props: AlertsTableFlyoutBaseProps) => {
       const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
@@ -37,10 +41,11 @@ export const useGetAlertFlyoutComponents = (
 
   const footer = useCallback(
     (props: AlertsTableFlyoutBaseProps) => {
+      const isInApp = Boolean(SLO_ALERTS_TABLE_ID === props.id && isSLODetailsPage);
       const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
-      return <AlertsFlyoutFooter isInApp={false} alert={alert} />;
+      return <AlertsFlyoutFooter isInApp={isInApp} alert={alert} />;
     },
-    [observabilityRuleTypeRegistry]
+    [isSLODetailsPage, observabilityRuleTypeRegistry]
   );
 
   return useMemo(

x-pack/plugins/observability/public/pages/alerts/components/alert_actions.test.tsx

@@ -23,6 +23,8 @@ import { noop } from 'lodash';
 import { EuiDataGridCellValueElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
 import { waitFor } from '@testing-library/react';
 import { AlertsTableQueryContext } from '@kbn/triggers-actions-ui-plugin/public/application/sections/alerts_table/contexts/alerts_table_context';
+import { Router } from '@kbn/shared-ux-router';
+import { createMemoryHistory } from 'history';
 
 const refresh = jest.fn();
 const caseHooksReturnedValue = {
@@ -114,9 +116,11 @@ describe('ObservabilityActions component', () => {
     };
 
     const wrapper = mountWithIntl(
-      <QueryClientProvider client={queryClient} context={AlertsTableQueryContext}>
-        <AlertActions {...props} />
-      </QueryClientProvider>
+      <Router history={createMemoryHistory()}>
+        <QueryClientProvider client={queryClient} context={AlertsTableQueryContext}>
+          <AlertActions {...props} />
+        </QueryClientProvider>
+      </Router>
     );
     await act(async () => {
       await nextTick();

x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx

@@ -21,8 +21,10 @@ import { AttachmentType } from '@kbn/cases-plugin/common';
 import { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { TimelineNonEcsData } from '@kbn/timelines-plugin/common';
 import type { AlertActionsProps } from '@kbn/triggers-actions-ui-plugin/public/types';
+import { useRouteMatch } from 'react-router-dom';
+import { SLO_ALERTS_TABLE_ID } from '../../slo_details/components/slo_detail_alerts';
 import { RULE_DETAILS_PAGE_ID } from '../../rule_details/constants';
-import { paths } from '../../../../common/locators/paths';
+import { paths, SLO_DETAIL_PATH } from '../../../../common/locators/paths';
 import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled';
 import { useKibana } from '../../../utils/kibana_react';
 import { parseAlert } from '../helpers/parse_alert';
@@ -40,7 +42,10 @@ export function AlertActions({
   observabilityRuleTypeRegistry,
   ...customActionsProps
 }: ObservabilityAlertActionsProps) {
-  const { alert, refresh } = customActionsProps;
+  const { alert, refresh, id } = customActionsProps;
+  const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);
+
+  const isInApp = Boolean(id === SLO_ALERTS_TABLE_ID && isSLODetailsPage);
   const {
     cases: {
       helpers: { getRuleIdFromEvent, canUseCases },
@@ -183,7 +188,7 @@ export function AlertActions({
 
   return (
     <>
-      {viewInAppUrl ? (
+      {viewInAppUrl && !isInApp ? (
         <EuiFlexItem>
           <EuiToolTip
             content={i18n.translate('xpack.observability.alertsTable.viewInAppTextLabel', {
@@ -202,11 +207,13 @@ export function AlertActions({
             />
           </EuiToolTip>
         </EuiFlexItem>
-      ) : (
-        <EuiFlexItem style={{ width: 32 }} />
-      )}
+      ) : null}
 
-      <EuiFlexItem>
+      <EuiFlexItem
+        css={{
+          textAlign: 'center',
+        }}
+      >
         <EuiPopover
           anchorPosition="downLeft"
           button={

x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx

@@ -11,7 +11,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
 import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../../utils/kibana_react';
 
-const ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
+export const SLO_ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
 
 export interface Props {
   slo: SLOWithSummaryResponse;
@@ -30,7 +30,7 @@ export function SloDetailsAlerts({ slo }: Props) {
           <AlertsStateTable
             alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
             configurationId={AlertConsumers.OBSERVABILITY}
-            id={ALERTS_TABLE_ID}
+            id={SLO_ALERTS_TABLE_ID}
             data-test-subj="alertTable"
             featureIds={[AlertConsumers.SLO, AlertConsumers.OBSERVABILITY]}
             query={{