[OBX-UX-MGTM] Fix inconsistent flyout/full-page rule creation/edit flow (#224905)

## Summary

It fixes #217792 by having a consistent experience with the rule flyout.
### Resizable flyout:
- ✅ From the Apps on Create and Edit
- ✅ From the Rules page on Edit 

### Full-page
- ✅ From the Rules page on Create
- ✅ From the Rule details page on Edit

x-pack/solutions/observability/plugins/observability/public/pages/rules/rules_tab.tsx

@@ -7,14 +7,15 @@
 import React, { useState } from 'react';
 
 import { useHistory } from 'react-router-dom';
+
 import { createKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
 import { RuleStatus } from '@kbn/triggers-actions-ui-plugin/public';
 import { AlertConsumers } from '@kbn/rule-data-utils';
+import { RuleFormFlyout } from '@kbn/response-ops-rule-form/flyout';
 import { OBSERVABILITY_RULE_TYPE_IDS_WITH_SUPPORTED_STACK_RULE_TYPES } from '../../../common/constants';
 import { observabilityAlertFeatureIds } from '../../../common';
 import { useKibana } from '../../utils/kibana_react';
 import { useGetFilteredRuleTypes } from '../../hooks/use_get_filtered_rule_types';
-import { relativePaths, RULES_PATH } from '../../../common/locators/paths';
 
 interface RulesTabProps {
   setRefresh: React.Dispatch<React.SetStateAction<Date>>;
@@ -22,8 +23,10 @@ interface RulesTabProps {
 }
 
 export function RulesTab({ setRefresh, stateRefresh }: RulesTabProps) {
+  const { services } = useKibana();
   const {
-    application: { navigateToApp },
+    ruleTypeRegistry,
+    actionTypeRegistry,
     triggersActionsUi: { getRulesList: RuleList },
   } = useKibana().services;
   const history = useHistory();
@@ -49,6 +52,8 @@ export function RulesTab({ setRefresh, stateRefresh }: RulesTabProps) {
   const [stateSearch, setSearch] = useState<string>(search);
   const [stateStatus, setStatus] = useState<RuleStatus[]>(status);
   const [stateType, setType] = useState<string[]>(type);
+  const [ruleConditionsFlyoutOpen, setRuleConditionsFlyoutOpen] = useState<boolean>(false);
+  const [ruleIdToEdit, setRuleIdToEdit] = useState<string | null>();
 
   const handleStatusFilterChange = (newStatus: RuleStatus[]) => {
     setStatus(newStatus);
@@ -77,43 +82,55 @@ export function RulesTab({ setRefresh, stateRefresh }: RulesTabProps) {
   };
 
   const navigateToEditRuleForm = (ruleId: string) => {
-    navigateToApp('observability', {
-      path: relativePaths.observability.editRule(ruleId),
-      state: {
-        returnApp: 'observability',
-        returnPath: RULES_PATH,
-      },
-    });
+    setRuleIdToEdit(ruleId);
+    setRuleConditionsFlyoutOpen(true);
   };
 
   return (
-    <RuleList
-      ruleTypeIds={OBSERVABILITY_RULE_TYPE_IDS_WITH_SUPPORTED_STACK_RULE_TYPES}
-      consumers={observabilityAlertFeatureIds}
-      filteredRuleTypes={filteredRuleTypes}
-      lastRunOutcomeFilter={stateLastResponse}
-      refresh={stateRefresh}
-      ruleDetailsRoute="alerts/rules/:ruleId"
-      rulesListKey="observability_rulesListColumns"
-      ruleParamFilter={stateParams}
-      showActionFilter={false}
-      statusFilter={stateStatus}
-      searchFilter={stateSearch}
-      typeFilter={stateType}
-      navigateToEditRuleForm={navigateToEditRuleForm}
-      visibleColumns={[
-        'ruleName',
-        'ruleExecutionStatusLastDate',
-        'ruleSnoozeNotify',
-        'ruleExecutionStatus',
-        'ruleExecutionState',
-      ]}
-      onLastRunOutcomeFilterChange={handleLastRunOutcomeFilterChange}
-      onRuleParamFilterChange={handleRuleParamFilterChange}
-      onSearchFilterChange={handleSearchFilterChange}
-      onStatusFilterChange={handleStatusFilterChange}
-      onTypeFilterChange={handleTypeFilterChange}
-      initialSelectedConsumer={AlertConsumers.LOGS}
-    />
+    <>
+      <RuleList
+        ruleTypeIds={OBSERVABILITY_RULE_TYPE_IDS_WITH_SUPPORTED_STACK_RULE_TYPES}
+        consumers={observabilityAlertFeatureIds}
+        filteredRuleTypes={filteredRuleTypes}
+        lastRunOutcomeFilter={stateLastResponse}
+        refresh={stateRefresh}
+        ruleDetailsRoute="alerts/rules/:ruleId"
+        rulesListKey="observability_rulesListColumns"
+        ruleParamFilter={stateParams}
+        showActionFilter={false}
+        statusFilter={stateStatus}
+        searchFilter={stateSearch}
+        typeFilter={stateType}
+        navigateToEditRuleForm={navigateToEditRuleForm}
+        visibleColumns={[
+          'ruleName',
+          'ruleExecutionStatusLastDate',
+          'ruleSnoozeNotify',
+          'ruleExecutionStatus',
+          'ruleExecutionState',
+        ]}
+        onLastRunOutcomeFilterChange={handleLastRunOutcomeFilterChange}
+        onRuleParamFilterChange={handleRuleParamFilterChange}
+        onSearchFilterChange={handleSearchFilterChange}
+        onStatusFilterChange={handleStatusFilterChange}
+        onTypeFilterChange={handleTypeFilterChange}
+        initialSelectedConsumer={AlertConsumers.LOGS}
+      />
+
+      {ruleIdToEdit && ruleConditionsFlyoutOpen ? (
+        <RuleFormFlyout
+          plugins={{ ...services, ruleTypeRegistry, actionTypeRegistry }}
+          id={ruleIdToEdit}
+          onCancel={() => {
+            setRuleConditionsFlyoutOpen(false);
+            setRuleIdToEdit(null);
+          }}
+          onSubmit={() => {
+            setRuleConditionsFlyoutOpen(false);
+            setRuleIdToEdit(null);
+          }}
+        />
+      ) : null}
+    </>
   );
 }