+
);
};
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/index.ts b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/index.ts
new file mode 100644
index 0000000000000..1804a351dcd40
--- /dev/null
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export * from './rule_form_screen_context';
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/rule_form_screen_context.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/rule_form_screen_context.tsx
new file mode 100644
index 0000000000000..15c346266c922
--- /dev/null
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_screen_context/rule_form_screen_context.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { createContext, useState } from 'react';
+
+/*
+ * A generic wrapper for keeping track of which screens to show on top of the Rule Form
+ * This provides logic that works on both the Rule Page, which displays these screens in a modal,
+ * and the Rule Flyout, which displays these screens by replacing the entire content of the flyout.
+ */
+const initialRuleFormScreenContextState = {
+ isConnectorsScreenVisible: false,
+ isShowRequestScreenVisible: false,
+ setIsConnectorsScreenVisible: (show: boolean) => {},
+ setIsShowRequestScreenVisible: (show: boolean) => {},
+};
+
+export const RuleFormScreenContext = createContext(initialRuleFormScreenContextState);
+
+export const RuleFormScreenContextProvider: React.FC = ({ children }) => {
+ const [isConnectorsScreenVisible, setIsConnectorsScreenVisible] = useState(false);
+ const [isShowRequestScreenVisible, setIsShowRequestScreenVisible] = useState(false);
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
index 52c25ee79a5d8..5479d552f2b1a 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
@@ -20,7 +20,7 @@ import {
} from '@elastic/eui';
import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared';
import React, { useCallback, useMemo, useState } from 'react';
-import { useRuleFormState, useRuleFormSteps } from '../hooks';
+import { useRuleFormScreenContext, useRuleFormState, useRuleFormSteps } from '../hooks';
import {
DISABLED_ACTIONS_WARNING_TITLE,
RULE_FORM_CANCEL_MODAL_CANCEL,
@@ -32,6 +32,8 @@ import {
import type { RuleFormData } from '../types';
import { RulePageFooter } from './rule_page_footer';
import { RulePageNameInput } from './rule_page_name_input';
+import { RuleActionsConnectorsModal } from '../rule_actions/rule_actions_connectors_modal';
+import { RulePageShowRequestModal } from './rule_page_show_request_modal';
export interface RulePageProps {
isEdit?: boolean;
@@ -68,6 +70,8 @@ export const RulePage = (props: RulePageProps) => {
}
}, [touched, onCancel]);
+ const { isConnectorsScreenVisible, isShowRequestScreenVisible } = useRuleFormScreenContext();
+
const hasActionsDisabled = useMemo(() => {
const preconfiguredConnectors = connectors.filter((connector) => connector.isPreconfigured);
return actions.some((action) => {
@@ -149,6 +153,8 @@ export const RulePage = (props: RulePageProps) => {