[SLO] use generic edit actions in the SLO embeddables

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_embeddable_factory.tsx

@@ -21,8 +21,10 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createBrowserHistory } from 'history';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
+import type { StartServicesAccessor } from '@kbn/core-lifecycle-browser';
 import { SLO_ALERTS_EMBEDDABLE_ID } from './constants';
-import { SloEmbeddableDeps, SloAlertsEmbeddableState, SloAlertsApi } from './types';
+import { SloAlertsEmbeddableState, SloAlertsApi } from './types';
+import { SloPublicPluginsStart, SloPublicStart } from '../../../types';
 import { SloAlertsWrapper } from './slo_alerts_wrapper';
 const history = createBrowserHistory();
 const queryClient = new QueryClient();
@@ -32,7 +34,10 @@ export const getAlertsPanelTitle = () =>
     defaultMessage: 'SLO Alerts',
   });
 
-export function getAlertsEmbeddableFactory(deps: SloEmbeddableDeps, kibanaVersion: string) {
+export function getAlertsEmbeddableFactory(
+  getStartServices: StartServicesAccessor<SloPublicPluginsStart, SloPublicStart>,
+  kibanaVersion: string
+) {
   const factory: ReactEmbeddableFactory<
     SloAlertsEmbeddableState,
     SloAlertsEmbeddableState,
@@ -43,6 +48,23 @@ export function getAlertsEmbeddableFactory(deps: SloEmbeddableDeps, kibanaVersio
       return state.rawState as SloAlertsEmbeddableState;
     },
     buildEmbeddable: async (state, buildApi, uuid, parentApi) => {
+      const [coreStart, pluginStart] = await getStartServices();
+      const deps = { ...coreStart, ...pluginStart };
+      async function onEdit() {
+        try {
+          const { openSloConfiguration } = await import('./slo_alerts_open_configuration');
+
+          const result = await openSloConfiguration(
+            coreStart,
+            pluginStart,
+            api.getSloAlertsConfig()
+          );
+          api.updateSloAlertsConfig(result);
+        } catch (e) {
+          return Promise.reject();
+        }
+      }
+
       const { titlesApi, titleComparators, serializeTitles } = initializeTitles(state);
       const defaultTitle$ = new BehaviorSubject<string | undefined>(getAlertsPanelTitle());
       const slos$ = new BehaviorSubject(state.slos);
@@ -52,6 +74,14 @@ export function getAlertsEmbeddableFactory(deps: SloEmbeddableDeps, kibanaVersio
         {
           ...titlesApi,
           defaultPanelTitle: defaultTitle$,
+          getTypeDisplayName: () =>
+            i18n.translate('xpack.slo.editSloAlertswEmbeddable.typeDisplayName', {
+              defaultMessage: 'configuration',
+            }),
+          isEditingEnabled: () => true,
+          onEdit: async () => {
+            onEdit();
+          },
           serializeState: () => {
             return {
               rawState: {
@@ -116,7 +146,7 @@ export function getAlertsEmbeddableFactory(deps: SloEmbeddableDeps, kibanaVersio
                 <Router history={history}>
                   <QueryClientProvider client={queryClient}>
                     <SloAlertsWrapper
-                      embeddable={api}
+                      onEdit={onEdit}
                       deps={deps}
                       slos={slos}
                       timeRange={fetchContext.timeRange ?? { from: 'now-15m/m', to: 'now' }}

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx

@@ -9,8 +9,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import type { TimeRange } from '@kbn/es-query';
-import { CONTEXT_MENU_TRIGGER } from '@kbn/embeddable-plugin/public';
-import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import { Subject } from 'rxjs';
 import styled from 'styled-components';
 import { observabilityPaths } from '@kbn/observability-plugin/common';
@@ -19,26 +17,25 @@ import { SloIncludedCount } from './components/slo_included_count';
 import { SloAlertsSummary } from './components/slo_alerts_summary';
 import { SloAlertsTable } from './components/slo_alerts_table';
 import type { SloItem, SloEmbeddableDeps } from './types';
-import { EDIT_SLO_ALERTS_ACTION } from '../../../ui_actions/edit_slo_alerts_panel';
 
 interface Props {
   deps: SloEmbeddableDeps;
   slos: SloItem[];
   timeRange: TimeRange;
-  embeddable: any;
   onRenderComplete?: () => void;
   reloadSubject: Subject<FetchContext>;
   showAllGroupByInstances?: boolean;
+  onEdit: () => void;
 }
 
 export function SloAlertsWrapper({
-  embeddable,
   slos,
   deps,
   timeRange: initialTimeRange,
   onRenderComplete,
   reloadSubject,
   showAllGroupByInstances,
+  onEdit,
 }: Props) {
   const {
     application: { navigateToUrl },
@@ -102,11 +99,7 @@ export function SloAlertsWrapper({
         <EuiFlexItem grow={false}>
           <EuiLink
             onClick={() => {
-              const trigger = deps.uiActions.getTrigger(CONTEXT_MENU_TRIGGER);
-              deps.uiActions.getAction(EDIT_SLO_ALERTS_ACTION).execute({
-                trigger,
-                embeddable,
-              } as ActionExecutionContext);
+              onEdit();
             }}
             data-test-subj="o11ySloAlertsWrapperSlOsIncludedLink"
           >

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

@@ -24,6 +24,7 @@ import {
   PublishesWritablePanelTitle,
   PublishesPanelTitle,
   EmbeddableApiContext,
+  HasEditCapabilities,
 } from '@kbn/presentation-publishing';
 
 export interface SloItem {
@@ -45,7 +46,8 @@ export type SloAlertsEmbeddableState = SerializedTitles & EmbeddableSloProps;
 export type SloAlertsApi = DefaultEmbeddableApi<SloAlertsEmbeddableState> &
   PublishesWritablePanelTitle &
   PublishesPanelTitle &
-  HasSloAlertsConfig;
+  HasSloAlertsConfig &
+  HasEditCapabilities;
 
 export interface HasSloAlertsConfig {
   getSloAlertsConfig: () => EmbeddableSloProps;

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

@@ -8,34 +8,30 @@
 import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { EuiFlexItem, EuiLink, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import {
   initializeTitles,
   useBatchedPublishingSubjects,
   fetch$,
 } from '@kbn/presentation-publishing';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { CONTEXT_MENU_TRIGGER } from '@kbn/embeddable-plugin/public';
-import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
+import type { StartServicesAccessor } from '@kbn/core-lifecycle-browser';
 import { SLO_OVERVIEW_EMBEDDABLE_ID } from './constants';
 import { SloCardChartList } from './slo_overview_grid';
 import { SloOverview } from './slo_overview';
 import { GroupSloView } from './group_view/group_view';
-import {
-  SloOverviewEmbeddableState,
-  SloEmbeddableDeps,
-  SloOverviewApi,
-  GroupSloCustomInput,
-} from './types';
-import { EDIT_SLO_OVERVIEW_ACTION } from '../../../ui_actions/edit_slo_overview_panel';
+import { SloOverviewEmbeddableState, SloOverviewApi, GroupSloCustomInput } from './types';
+import { SloPublicPluginsStart, SloPublicStart } from '../../../types';
 import { SloEmbeddableContext } from '../common/slo_embeddable_context';
 
 export const getOverviewPanelTitle = () =>
   i18n.translate('xpack.slo.sloEmbeddable.displayName', {
     defaultMessage: 'SLO Overview',
   });
-export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
+export const getOverviewEmbeddableFactory = (
+  getStartServices: StartServicesAccessor<SloPublicPluginsStart, SloPublicStart>
+) => {
   const factory: ReactEmbeddableFactory<
     SloOverviewEmbeddableState,
     SloOverviewEmbeddableState,
@@ -46,6 +42,22 @@ export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
       return state.rawState as SloOverviewEmbeddableState;
     },
     buildEmbeddable: async (state, buildApi, uuid, parentApi) => {
+      const [coreStart, pluginStart] = await getStartServices();
+      const deps = { ...coreStart, ...pluginStart };
+      async function onEdit() {
+        try {
+          const { openSloConfiguration } = await import('./slo_overview_open_configuration');
+
+          const result = await openSloConfiguration(
+            coreStart,
+            pluginStart,
+            api.getSloGroupOverviewConfig()
+          );
+          api.updateSloGroupOverviewConfig(result as GroupSloCustomInput);
+        } catch (e) {
+          return Promise.reject();
+        }
+      }
       const { titlesApi, titleComparators, serializeTitles } = initializeTitles(state);
       const defaultTitle$ = new BehaviorSubject<string | undefined>(getOverviewPanelTitle());
       const sloId$ = new BehaviorSubject(state.sloId);
@@ -60,6 +72,14 @@ export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
         {
           ...titlesApi,
           defaultPanelTitle: defaultTitle$,
+          getTypeDisplayName: () =>
+            i18n.translate('xpack.slo.editSloOverviewEmbeddableTitle.typeDisplayName', {
+              defaultMessage: 'criteria',
+            }),
+          isEditingEnabled: () => api.getSloGroupOverviewConfig().overviewMode === 'groups',
+          onEdit: async () => {
+            onEdit();
+          },
           serializeState: () => {
             return {
               rawState: {
@@ -134,33 +154,12 @@ export const getOverviewEmbeddableFactory = (deps: SloEmbeddableDeps) => {
               const groups = groupFilters?.groups ?? [];
               return (
                 <Wrapper>
-                  <EuiFlexGroup
-                    data-test-subj="sloGroupOverviewPanel"
-                    data-shared-item=""
-                    justifyContent="flexEnd"
-                    wrap
+                  <EuiFlexItem
+                    grow={false}
                     css={`
-                      margin-bottom: 20px;
+                      margin-top: 20px;
                     `}
                   >
-                    <EuiFlexItem grow={false}>
-                      <EuiLink
-                        onClick={() => {
-                          const trigger = deps.uiActions.getTrigger(CONTEXT_MENU_TRIGGER);
-                          deps.uiActions.getAction(EDIT_SLO_OVERVIEW_ACTION).execute({
-                            trigger,
-                            embeddable: api,
-                          } as ActionExecutionContext);
-                        }}
-                        data-test-subj="o11ySloOverviewEditCriteriaLink"
-                      >
-                        {i18n.translate('xpack.slo.overviewEmbeddable.editCriteriaLabel', {
-                          defaultMessage: 'Edit criteria',
-                        })}
-                      </EuiLink>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                  <EuiFlexItem grow={false}>
                     <GroupSloView
                       sloView="cardView"
                       groupBy={groupBy}

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

@@ -8,6 +8,7 @@ import {
   SerializedTitles,
   PublishesWritablePanelTitle,
   PublishesPanelTitle,
+  HasEditCapabilities,
 } from '@kbn/presentation-publishing';
 import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
 import { DefaultEmbeddableApi } from '@kbn/embeddable-plugin/public';
@@ -53,7 +54,8 @@ export type SloOverviewEmbeddableState = SerializedTitles &
 export type SloOverviewApi = DefaultEmbeddableApi<SloOverviewEmbeddableState> &
   PublishesWritablePanelTitle &
   PublishesPanelTitle &
-  HasSloGroupOverviewConfig;
+  HasSloGroupOverviewConfig &
+  HasEditCapabilities;
 
 export interface HasSloGroupOverviewConfig {
   getSloGroupOverviewConfig: () => GroupSloCustomInput;

x-pack/plugins/observability_solution/slo/public/plugin.ts

@@ -108,24 +108,21 @@ export class SloPlugin
         pluginsSetup.embeddable.registerReactEmbeddableFactory(
           SLO_OVERVIEW_EMBEDDABLE_ID,
           async () => {
-            const deps = { ...coreStart, ...pluginsStart };
             const { getOverviewEmbeddableFactory } = await import(
               './embeddable/slo/overview/slo_embeddable_factory'
             );
-            return getOverviewEmbeddableFactory(deps);
+            return getOverviewEmbeddableFactory(coreSetup.getStartServices);
           }
         );
 
         pluginsSetup.embeddable.registerReactEmbeddableFactory(
           SLO_ALERTS_EMBEDDABLE_ID,
           async () => {
-            const deps = { ...coreStart, ...pluginsStart };
-
             const { getAlertsEmbeddableFactory } = await import(
               './embeddable/slo/alerts/slo_alerts_embeddable_factory'
             );
 
-            return getAlertsEmbeddableFactory(deps, kibanaVersion);
+            return getAlertsEmbeddableFactory(coreSetup.getStartServices, kibanaVersion);
           }
         );