[Alert Details] Add investigation guide empty state

src/platform/packages/shared/response-ops/rule_form/src/edit_rule_form.tsx

@@ -26,7 +26,7 @@ import {
 } from './rule_form_errors';
 import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';
 import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';
-import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';
+import { DEFAULT_VALID_CONSUMERS, RuleFormStepId, getDefaultFormData } from './constants';
 
 export interface EditRuleFormProps {
   id: string;
@@ -38,6 +38,7 @@ export interface EditRuleFormProps {
   onSubmit?: (ruleId: string) => void;
   onChangeMetaData?: (metadata?: RuleTypeMetaData) => void;
   initialMetadata?: RuleTypeMetaData;
+  initialEditStep?: RuleFormStepId;
 }
 
 export const EditRuleForm = (props: EditRuleFormProps) => {
@@ -51,6 +52,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
     isFlyout,
     onChangeMetaData,
     initialMetadata,
+    initialEditStep,
   } = props;
   const { http, notifications, docLinks, ruleTypeRegistry, application, fieldsMetadata, ...deps } =
     plugins;
@@ -229,6 +231,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
         onSave={onSave}
         onCancel={onCancel}
         onChangeMetaData={onChangeMetaData}
+        initialEditStep={initialEditStep}
       />
     </RuleFormStateProvider>
   );

src/platform/packages/shared/response-ops/rule_form/src/rule_flyout/rule_flyout.test.tsx

@@ -16,6 +16,7 @@ import {
   RULE_FORM_PAGE_RULE_DETAILS_TITLE_SHORT,
 } from '../translations';
 import { RuleFormData } from '../types';
+import { RuleFormStepId } from '../constants';
 
 jest.mock('../rule_definition', () => ({
   RuleDefinition: () => <div />,
@@ -118,6 +119,44 @@ describe('ruleFlyout', () => {
     expect(await screen.findByTestId('ruleFlyoutFooterNextStepButton')).toBeInTheDocument();
   });
 
+  test('omitting `initialStep` causes default behavior with step 1 selected', () => {
+    const { getByText } = render(<RuleFlyout onCancel={onCancel} onSave={onSave} />);
+
+    expect(getByText('Current step is 1'));
+    expect(getByText('Step 2 is incomplete'));
+    expect(getByText('Step 3 is incomplete'));
+  });
+
+  test('setting `initialStep` to `RuleFormStepId.DEFINITION` will make step 1 the current step', () => {
+    const { getByText } = render(
+      <RuleFlyout onCancel={onCancel} onSave={onSave} initialEditStep={RuleFormStepId.DEFINITION} />
+    );
+
+    expect(getByText('Current step is 1'));
+    expect(getByText('Step 2 is incomplete'));
+    expect(getByText('Step 3 is incomplete'));
+  });
+
+  test('setting `initialStep` to `RuleFormStepId.ACTION` will make step 1 the current step', () => {
+    const { getByText } = render(
+      <RuleFlyout onCancel={onCancel} onSave={onSave} initialEditStep={RuleFormStepId.ACTIONS} />
+    );
+
+    expect(getByText('Step 1 is complete'));
+    expect(getByText('Current step is 2'));
+    expect(getByText('Step 3 is incomplete'));
+  });
+
+  test('setting `initialStep` to `RuleFormStepId.DETAILS` will make step 1 the current step', () => {
+    const { getByText } = render(
+      <RuleFlyout onCancel={onCancel} onSave={onSave} initialEditStep={RuleFormStepId.DETAILS} />
+    );
+
+    expect(getByText('Step 1 is complete'));
+    expect(getByText('Step 2 is incomplete'));
+    expect(getByText('Current step is 3'));
+  });
+
   test('should call onSave when save button is pressed', async () => {
     render(<RuleFlyout onCancel={onCancel} onSave={onSave} />);
 

src/platform/packages/shared/response-ops/rule_form/src/rule_flyout/rule_flyout.tsx

@@ -23,6 +23,7 @@ interface RuleFlyoutProps {
   onCancel?: () => void;
   onSave: (formData: RuleFormData) => void;
   onChangeMetaData?: (metadata?: RuleTypeMetaData) => void;
+  initialEditStep?: RuleFormStepId;
 }
 
 // This component is only responsible for the CONTENT of the EuiFlyout. See `flyout/rule_form_flyout.tsx` for the
@@ -38,8 +39,9 @@ export const RuleFlyout = ({
   // we're displaying the confirmation modal for closing the flyout.
   onCancel: onClose = () => {},
   onChangeMetaData = () => {},
+  initialEditStep,
 }: RuleFlyoutProps) => {
-  const [initialStep, setInitialStep] = useState<RuleFormStepId | undefined>(undefined);
+  const [initialStep, setInitialStep] = useState<RuleFormStepId | undefined>(initialEditStep);
   const [isConfirmCloseModalVisible, setIsConfirmCloseModalVisible] = useState(false);
 
   const {

src/platform/packages/shared/response-ops/rule_form/src/rule_form.tsx

@@ -19,6 +19,7 @@ import {
   RULE_FORM_ROUTE_PARAMS_ERROR_TITLE,
 } from './translations';
 import { RuleFormData, RuleFormPlugins, RuleTypeMetaData } from './types';
+import { RuleFormStepId } from './constants';
 
 const queryClient = new QueryClient();
 
@@ -41,6 +42,7 @@ export interface RuleFormProps<MetaData extends RuleTypeMetaData = RuleTypeMetaD
   showMustacheAutocompleteSwitch?: boolean;
   initialValues?: Partial<Omit<RuleFormData, 'ruleTypeId'>>;
   initialMetadata?: MetaData;
+  initialEditStep?: RuleFormStepId;
 }
 
 export const RuleForm = <MetaData extends RuleTypeMetaData = RuleTypeMetaData>(
@@ -65,6 +67,7 @@ export const RuleForm = <MetaData extends RuleTypeMetaData = RuleTypeMetaData>(
     showMustacheAutocompleteSwitch,
     initialValues,
     initialMetadata,
+    initialEditStep,
   } = props;
 
   const {
@@ -122,6 +125,7 @@ export const RuleForm = <MetaData extends RuleTypeMetaData = RuleTypeMetaData>(
           showMustacheAutocompleteSwitch={showMustacheAutocompleteSwitch}
           connectorFeatureId={connectorFeatureId}
           initialMetadata={initialMetadata}
+          initialEditStep={initialEditStep}
         />
       );
     }
@@ -175,25 +179,26 @@ export const RuleForm = <MetaData extends RuleTypeMetaData = RuleTypeMetaData>(
     docLinks,
     ruleTypeRegistry,
     actionTypeRegistry,
+    fieldsMetadata,
     contentManagement,
+    onChangeMetaData,
     id,
     ruleTypeId,
-    validConsumers,
-    multiConsumerSelection,
     onCancel,
     onSubmit,
-    onChangeMetaData,
     isFlyout,
     showMustacheAutocompleteSwitch,
     connectorFeatureId,
     initialMetadata,
+    initialEditStep,
     consumer,
+    multiConsumerSelection,
     hideInterval,
+    validConsumers,
     filteredRuleTypes,
     shouldUseRuleProducer,
     canShowConsumerSelection,
     initialValues,
-    fieldsMetadata,
   ]);
 
   return (

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx

@@ -18,8 +18,8 @@ import {
   EuiTabbedContentTab,
   useEuiTheme,
   EuiFlexGroup,
-  EuiMarkdownFormat,
   EuiNotificationBadge,
+  EuiIcon,
 } from '@elastic/eui';
 import {
   AlertStatus,
@@ -39,6 +39,7 @@ import { usePageReady } from '@kbn/ebt-tools';
 import { RelatedAlerts } from './components/related_alerts/related_alerts';
 import { AlertDetailsSource } from './types';
 import { SourceBar } from './components';
+import { InvestigationGuide } from './components/investigation_guide';
 import { StatusBar } from './components/status_bar';
 import { observabilityFeatureId } from '../../../common';
 import { useKibana } from '../../utils/kibana_react';
@@ -119,7 +120,7 @@ export function AlertDetails() {
   const userCasesPermissions = canUseCases([observabilityFeatureId]);
   const ruleId = alertDetail?.formatted.fields[ALERT_RULE_UUID];
   const { rule, refetch } = useFetchRule({
-    ruleId,
+    ruleId: ruleId || '',
   });
 
   const onSuccessAddSuggestedDashboard = useCallback(async () => {
@@ -323,24 +324,26 @@ export function AlertDetails() {
     {
       id: 'investigation_guide',
       name: (
-        <FormattedMessage
-          id="xpack.observability.alertDetails.tab.investigationGuideLabel"
-          defaultMessage="Investigation guide"
-        />
+        <>
+          <FormattedMessage
+            id="xpack.observability.alertDetails.tab.investigationGuideLabel"
+            defaultMessage="Investigation guide"
+          />
+          {rule?.artifacts?.investigation_guide?.blob && (
+            <EuiNotificationBadge color="success" css={{ marginLeft: '5px' }}>
+              <EuiIcon type="dot" size="s" />
+            </EuiNotificationBadge>
+          )}
+        </>
       ),
       'data-test-subj': 'investigationGuideTab',
-      disabled: !rule?.artifacts?.investigation_guide?.blob,
       content: (
-        <>
-          <EuiSpacer size="m" />
-          <EuiMarkdownFormat
-            css={css`
-              word-wrap: break-word;
-            `}
-          >
-            {rule?.artifacts?.investigation_guide?.blob ?? ''}
-          </EuiMarkdownFormat>
-        </>
+        <InvestigationGuide
+          blob={rule?.artifacts?.investigation_guide?.blob}
+          onUpdate={onUpdate}
+          refetch={refetch}
+          rule={rule}
+        />
       ),
     },
     {
@@ -402,6 +405,8 @@ export function AlertDetails() {
               alertStatus={alertStatus}
               onUntrackAlert={onUntrackAlert}
               onUpdate={onUpdate}
+              rule={rule}
+              refetch={refetch}
             />
           </CasesContext>,
         ],

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/components/AlertDetailsRuleFormFlyout.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { RuleFormFlyout } from '@kbn/response-ops-rule-form/flyout';
+import { RuleFormStepId } from '@kbn/response-ops-rule-form/src/constants';
+import type { Rule } from '@kbn/triggers-actions-ui-plugin/public';
+import { useKibana } from '../../../utils/kibana_react';
+
+export interface AlertDetailsRuleFormFlyoutBaseProps {
+  onUpdate?: () => void;
+  refetch: () => void;
+  rule?: Rule;
+}
+
+interface Props extends AlertDetailsRuleFormFlyoutBaseProps {
+  initialEditStep?: RuleFormStepId;
+  isRuleFormFlyoutOpen: boolean;
+  setIsRuleFormFlyoutOpen: React.Dispatch<boolean>;
+  rule: Rule;
+}
+
+export function AlertDetailsRuleFormFlyout({
+  initialEditStep,
+  onUpdate,
+  refetch,
+  isRuleFormFlyoutOpen,
+  setIsRuleFormFlyoutOpen,
+  rule,
+}: Props) {
+  const { services } = useKibana();
+  if (!isRuleFormFlyoutOpen) return null;
+  const {
+    triggersActionsUi: { ruleTypeRegistry, actionTypeRegistry },
+  } = services;
+  return (
+    <RuleFormFlyout
+      plugins={{ ...services, ruleTypeRegistry, actionTypeRegistry }}
+      id={rule.id}
+      onCancel={() => {
+        setIsRuleFormFlyoutOpen(false);
+      }}
+      onSubmit={() => {
+        onUpdate?.();
+        refetch();
+        setIsRuleFormFlyoutOpen(false);
+      }}
+      initialEditStep={initialEditStep}
+    />
+  );
+}