[SLO] Fix SLO plugin context (elastic#183966)

Fixes elastic#183967

This PR reverts the changes introduced in this
[PR](elastic#182195) regarding SLO Plugin
context.

---------

Co-authored-by: shahzad31 <shahzad31comp@gmail.com>

x-pack/plugins/observability_solution/slo/public/context/plugin_context.tsx

@@ -20,10 +20,4 @@ export interface PluginContextValue {
   experimentalFeatures?: ExperimentalFeatures;
 }
 
-export interface OverviewEmbeddableContextValue {
-  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
-}
-
-export const OverviewEmbeddableContext = createContext<OverviewEmbeddableContextValue | null>(null);
-
 export const PluginContext = createContext<PluginContextValue | null>(null);

x-pack/plugins/observability_solution/slo/public/embeddable/slo/common/slo_embeddable_context.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { Router } from '@kbn/shared-ux-router';
+import { createBrowserHistory } from 'history';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { PluginContext } from '../../../context/plugin_context';
+import { SloEmbeddableDeps } from '../overview/types';
+
+const queryClient = new QueryClient();
+
+export interface SloEmbeddableContextProps {
+  deps: SloEmbeddableDeps;
+  children: React.ReactNode;
+}
+
+export function SloEmbeddableContext({ deps, children }: SloEmbeddableContextProps) {
+  const { observabilityRuleTypeRegistry } = deps.observability;
+  const { navigation } = deps.observabilityShared;
+
+  return (
+    <Router history={createBrowserHistory()}>
+      <EuiThemeProvider darkMode={true}>
+        <KibanaContextProvider services={deps}>
+          <PluginContext.Provider
+            value={{
+              observabilityRuleTypeRegistry,
+              ObservabilityPageTemplate: navigation.PageTemplate,
+            }}
+          >
+            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+          </PluginContext.Provider>
+        </KibanaContextProvider>
+      </EuiThemeProvider>
+    </Router>
+  );
+}

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx

@@ -9,18 +9,13 @@ import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { EuiFlexItem, EuiLink, EuiFlexGroup } from '@elastic/eui';
-import { Router } from '@kbn/shared-ux-router';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import {
   initializeTitles,
   useBatchedPublishingSubjects,
   fetch$,
 } from '@kbn/presentation-publishing';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import { createBrowserHistory } from 'history';
 import { CONTEXT_MENU_TRIGGER } from '@kbn/embeddable-plugin/public';
 import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import { SLO_OVERVIEW_EMBEDDABLE_ID } from './constants';
@@ -34,9 +29,8 @@ import {
   GroupSloCustomInput,
 } from './types';
 import { EDIT_SLO_OVERVIEW_ACTION } from '../../../ui_actions/edit_slo_overview_panel';
-import { OverviewEmbeddableContext } from '../../../context/plugin_context';
+import { SloEmbeddableContext } from '../common/slo_embeddable_context';
 
-const queryClient = new QueryClient();
 export const getOverviewPanelTitle = () =>
   i18n.translate('xpack.slo.sloEmbeddable.displayName', {
     defaultMessage: 'SLO Overview',
@@ -123,7 +117,6 @@ export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
             groupFilters$,
             remoteName$
           );
-          const { observabilityRuleTypeRegistry } = deps.observability;
 
           useEffect(() => {
             return () => {
@@ -188,21 +181,9 @@ export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
             }
           };
           return (
-            <Router history={createBrowserHistory()}>
-              <EuiThemeProvider darkMode={true}>
-                <KibanaContextProvider services={deps}>
-                  <OverviewEmbeddableContext.Provider value={{ observabilityRuleTypeRegistry }}>
-                    <QueryClientProvider client={queryClient}>
-                      {showAllGroupByInstances ? (
-                        <SloCardChartList sloId={sloId!} />
-                      ) : (
-                        renderOverview()
-                      )}
-                    </QueryClientProvider>
-                  </OverviewEmbeddableContext.Provider>
-                </KibanaContextProvider>
-              </EuiThemeProvider>
-            </Router>
+            <SloEmbeddableContext deps={deps}>
+              {showAllGroupByInstances ? <SloCardChartList sloId={sloId!} /> : renderOverview()}
+            </SloEmbeddableContext>
           );
         },
       };

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/types.ts

@@ -20,6 +20,7 @@ import {
 } from '@kbn/core/public';
 import { ObservabilityPublicStart } from '@kbn/observability-plugin/public';
 import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
 
 export type OverviewMode = 'single' | 'groups';
 export type GroupBy = 'slo.tags' | 'status' | 'slo.indicator.type';
@@ -77,6 +78,7 @@ export interface SloEmbeddableDeps {
   application: ApplicationStart;
   notifications: NotificationsStart;
   observability: ObservabilityPublicStart;
+  observabilityShared: ObservabilitySharedPluginStart;
   uiActions: UiActionsStart;
 }