[Actionable Observability] - Fix Alert tab goes blank in APM because of Alert Details page feature flag (#142188) (#142342)

* Add the o11y context to the alert table config

* Fix checks

* Make the feature flag optional

* optional config for the check

* Made option only for alertDetails

(cherry picked from commit c23579feb6)

Co-authored-by: Faisal Kanout <faisal.kanout@elastic.co>

x-pack/plugins/observability/public/config/register_alerts_table_configuration.tsx

@@ -16,9 +16,11 @@ import { addDisplayNames } from '../pages/alerts/containers/alerts_table_t_grid/
 import { columns as alertO11yColumns } from '../pages/alerts/containers/alerts_table_t_grid/alerts_table_t_grid';
 import { getRowActions } from '../pages/alerts/containers/alerts_table_t_grid/get_row_actions';
 import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
+import type { ConfigSchema } from '../plugin';
 
 const getO11yAlertsTableConfiguration = (
-  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+  config: ConfigSchema
 ) => ({
   id: observabilityFeatureId,
   casesFeatureId,
@@ -33,7 +35,7 @@ const getO11yAlertsTableConfiguration = (
       },
     },
   ],
-  useActionsColumn: getRowActions(observabilityRuleTypeRegistry),
+  useActionsColumn: getRowActions(observabilityRuleTypeRegistry, config),
   useBulkActions: useBulkAddToCaseActions,
   useInternalFlyout: () => {
     const { header, body, footer } = useToGetInternalFlyout(observabilityRuleTypeRegistry);

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

@@ -18,7 +18,7 @@ export default function AlertsFlyoutFooter({ alert, isInApp }: FlyoutProps & { i
   const { http } = services;
   const prepend = http?.basePath.prepend;
   const getAlertDetailsButton = () => {
-    if (!config.unsafe.alertDetails.enabled || !alert) return <></>;
+    if (!config?.unsafe?.alertDetails.enabled || !alert) return <></>;
     return (
       <EuiFlexItem grow={false}>
         <EuiButton

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

@@ -47,6 +47,7 @@ jest.spyOn(pluginContext, 'usePluginContext').mockImplementation(() => ({
 describe('ObservabilityActions component', () => {
   const setup = async (pageId: string) => {
     const props: ObservabilityActionsProps = {
+      config,
       eventId: '6d4c6d74-d51a-495c-897d-88ced3b95e30',
       ecsData: {
         _id: '6d4c6d74-d51a-495c-897d-88ced3b95e30',

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

@@ -19,7 +19,6 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { CaseAttachmentsWithoutOwner } from '@kbn/cases-plugin/public';
 import { CommentType } from '@kbn/cases-plugin/common';
 import type { ActionProps } from '@kbn/timelines-plugin/common';
-import { usePluginContext } from '../../../hooks/use_plugin_context';
 import { useKibana } from '../../../utils/kibana_react';
 import { useGetUserCasesPermissions } from '../../../hooks/use_get_user_cases_permissions';
 import { parseAlert } from './parse_alert';
@@ -33,6 +32,7 @@ import { RULE_DETAILS_PAGE_ID } from '../../rule_details/types';
 import type { TopAlert } from '../containers/alerts_page/types';
 import { ObservabilityRuleTypeRegistry } from '../../..';
 import { ALERT_DETAILS_PAGE_ID } from '../../alert_details/types';
+import { ConfigSchema } from '../../../plugin';
 
 export type ObservabilityActionsProps = Pick<
   ActionProps,
@@ -41,6 +41,7 @@ export type ObservabilityActionsProps = Pick<
   setFlyoutAlert: React.Dispatch<React.SetStateAction<TopAlert | undefined>>;
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
   id?: string;
+  config: ConfigSchema;
 };
 
 export function ObservabilityActions({
@@ -49,12 +50,12 @@ export function ObservabilityActions({
   ecsData,
   id: pageId,
   observabilityRuleTypeRegistry,
+  config,
   setFlyoutAlert,
 }: ObservabilityActionsProps) {
   const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
   const [openActionsPopoverId, setActionsPopover] = useState(null);
   const { cases, http } = useKibana<ObservabilityAppServices>().services;
-  const { config } = usePluginContext();
 
   const parseObservabilityAlert = useMemo(
     () => parseAlert(observabilityRuleTypeRegistry),
@@ -108,7 +109,6 @@ export function ObservabilityActions({
     selectCaseModal.open({ attachments: caseAttachments });
     closeActionsPopover();
   }, [caseAttachments, closeActionsPopover, selectCaseModal]);
-
   const actionsMenuItems = useMemo(() => {
     return [
       ...(userCasesPermissions.create && userCasesPermissions.read
@@ -143,7 +143,7 @@ export function ObservabilityActions({
         : []),
 
       ...[
-        config.unsafe.alertDetails.enabled && linkToAlert ? (
+        config?.unsafe?.alertDetails.enabled && linkToAlert ? (
           <EuiContextMenuItem
             key="viewAlertDetailsPage"
             data-test-subj="viewAlertDetailsPage"

x-pack/plugins/observability/public/pages/alerts/containers/alerts_table_t_grid/alerts_table_t_grid.tsx

@@ -153,7 +153,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     timelines,
     application: { capabilities },
   } = useKibana<ObservabilityAppServices>().services;
-  const { observabilityRuleTypeRegistry } = usePluginContext();
+  const { observabilityRuleTypeRegistry, config } = usePluginContext();
 
   const [flyoutAlert, setFlyoutAlert] = useState<TopAlert | undefined>(undefined);
   const [tGridState, setTGridState] = useState<Partial<TGridModel> | null>(
@@ -210,13 +210,14 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
                 setEventsDeleted={setEventsDeleted}
                 setFlyoutAlert={setFlyoutAlert}
                 observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+                config={config}
               />
             </EuiFlexGroup>
           );
         },
       },
     ];
-  }, [setEventsDeleted, observabilityRuleTypeRegistry]);
+  }, [setEventsDeleted, observabilityRuleTypeRegistry, config]);
 
   const onStateChange = useCallback(
     (state: TGridState) => {

x-pack/plugins/observability/public/pages/alerts/containers/alerts_table_t_grid/get_row_actions.tsx

@@ -9,6 +9,7 @@ import { EcsFieldsResponse } from '@kbn/rule-registry-plugin/common/search_strat
 import { ObservabilityRuleTypeRegistry } from '../../../../rules/create_observability_rule_type_registry';
 import { ObservabilityActions } from '../../components/observability_actions';
 import type { ObservabilityActionsProps } from '../../components/observability_actions';
+import type { ConfigSchema } from '../../../../plugin';
 
 const buildData = (alerts: EcsFieldsResponse): ObservabilityActionsProps['data'] => {
   return Object.entries(alerts).reduce<ObservabilityActionsProps['data']>(
@@ -17,7 +18,10 @@ const buildData = (alerts: EcsFieldsResponse): ObservabilityActionsProps['data']
   );
 };
 const fakeSetEventsDeleted = () => [];
-export const getRowActions = (observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry) => {
+export const getRowActions = (
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+  config: ConfigSchema
+) => {
   return () => ({
     renderCustomActionsRow: (
       alert: EcsFieldsResponse,
@@ -33,6 +37,7 @@ export const getRowActions = (observabilityRuleTypeRegistry: ObservabilityRuleTy
           observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
           setEventsDeleted={fakeSetEventsDeleted}
           setFlyoutAlert={setFlyoutAlert}
+          config={config}
         />
       );
     },

x-pack/plugins/observability/public/plugin.ts

@@ -294,7 +294,10 @@ export class Plugin
       const { getO11yAlertsTableConfiguration } = await import(
         './config/register_alerts_table_configuration'
       );
-      return getO11yAlertsTableConfiguration(this.observabilityRuleTypeRegistry);
+      return getO11yAlertsTableConfiguration(
+        this.observabilityRuleTypeRegistry,
+        this.initContext.config.get()
+      );
     };
 
     const { alertsTableConfigurationRegistry } = pluginsStart.triggersActionsUi;