[SLO][SLO Detail] Make SLO Detail > Header Actions menu and SLO List > SLO List item > Actions menu more consistent

x-pack/plugins/observability/public/components/slo/feedback_button/feedback_button.tsx

@@ -5,16 +5,21 @@
  * 2.0.
  */
 
+import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
 
 const SLO_FEEDBACK_LINK = 'https://ela.st/slo-feedback';
 
-export function FeedbackButton() {
+interface Props {
+  disabled?: boolean;
+}
+
+export function FeedbackButton({ disabled }: Props) {
   return (
     <EuiButton
       data-test-subj="sloFeedbackButton"
+      isDisabled={disabled}
       href={SLO_FEEDBACK_LINK}
       target="_blank"
       color="warning"

x-pack/plugins/observability/public/pages/slo_details/components/header_control.tsx

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
+import { useIsMutating } from '@tanstack/react-query';
 import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 
 import { isApmIndicatorType } from '../../../utils/slo/indicator';
@@ -18,6 +19,12 @@ import { paths } from '../../../config/paths';
 import { useKibana } from '../../../utils/kibana_react';
 import { ObservabilityAppServices } from '../../../application/types';
 import { useCapabilities } from '../../../hooks/slo/use_capabilities';
+import { useCloneSlo } from '../../../hooks/slo/use_clone_slo';
+import {
+  transformSloResponseToCreateSloInput,
+  transformValuesToCreateSLOInput,
+} from '../../slo_edit/helpers/process_slo_form_values';
+import { SloDeleteConfirmationModal } from '../../slos/components/slo_delete_confirmation_modal';
 
 export interface Props {
   slo: SLOWithSummaryResponse | undefined;
@@ -28,11 +35,17 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const {
     application: { navigateToUrl },
     http: { basePath },
+    notifications: { toasts },
     triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout },
   } = useKibana<ObservabilityAppServices>().services;
   const { hasWriteCapabilities } = useCapabilities();
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isRuleFlyoutVisible, setRuleFlyoutVisibility] = useState<boolean>(false);
+  const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
+
+  const { mutateAsync: cloneSlo } = useCloneSlo();
+  const isDeleting = Boolean(useIsMutating(['deleteSlo', slo?.id]));
 
   const handleActionsClick = () => setIsPopoverOpen((value) => !value);
   const closePopover = () => setIsPopoverOpen(false);
@@ -85,6 +98,40 @@ export function HeaderControl({ isLoading, slo }: Props) {
     }
   };
 
+  const handleClone = async () => {
+    if (slo) {
+      setIsPopoverOpen(false);
+
+      const newSlo = transformValuesToCreateSLOInput(
+        transformSloResponseToCreateSloInput({ ...slo, name: `[Copy] ${slo.name}` })!
+      );
+
+      await cloneSlo({ slo: newSlo, idToCopyFrom: slo.id });
+
+      toasts.addSuccess(
+        i18n.translate('xpack.observability.slo.sloDetails.headerControl.cloneSuccess', {
+          defaultMessage: 'Successfully created {name}',
+          values: { name: newSlo.name },
+        })
+      );
+
+      navigateToUrl(basePath.prepend(paths.observability.slos));
+    }
+  };
+
+  const handleDelete = () => {
+    setDeleteConfirmationModalOpen(true);
+    setIsPopoverOpen(false);
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteConfirmationModalOpen(false);
+  };
+
+  const handleDeleteSuccess = () => {
+    navigateToUrl(basePath.prepend(paths.observability.slos));
+  };
+
   return (
     <>
       <EuiPopover
@@ -97,7 +144,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
             iconType="arrowDown"
             iconSize="s"
             onClick={handleActionsClick}
-            disabled={isLoading || !slo}
+            disabled={isLoading || isDeleting || !slo}
           >
             {i18n.translate('xpack.observability.slo.sloDetails.headerControl.actions', {
               defaultMessage: 'Actions',
@@ -108,11 +155,12 @@ export function HeaderControl({ isLoading, slo }: Props) {
         closePopover={closePopover}
       >
         <EuiContextMenuPanel
-          size="s"
+          size="m"
           items={[
             <EuiContextMenuItem
               key="edit"
               disabled={!hasWriteCapabilities}
+              icon="pencil"
               onClick={handleEdit}
               data-test-subj="sloDetailsHeaderControlPopoverEdit"
             >
@@ -123,6 +171,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
             <EuiContextMenuItem
               key="createBurnRateRule"
               disabled={!hasWriteCapabilities}
+              icon="bell"
               onClick={handleOpenRuleFlyout}
               data-test-subj="sloDetailsHeaderControlPopoverCreateRule"
             >
@@ -136,31 +185,58 @@ export function HeaderControl({ isLoading, slo }: Props) {
             <EuiContextMenuItem
               key="manageRules"
               disabled={!hasWriteCapabilities}
+              icon="gear"
               onClick={handleNavigateToRules}
               data-test-subj="sloDetailsHeaderControlPopoverManageRules"
             >
               {i18n.translate('xpack.observability.slo.sloDetails.headerControl.manageRules', {
                 defaultMessage: 'Manage rules',
               })}
             </EuiContextMenuItem>,
-          ].concat(
-            !!slo && isApmIndicatorType(slo.indicator.type)
-              ? [
-                  <EuiContextMenuItem
-                    key="exploreInApm"
-                    onClick={handleNavigateToApm}
-                    data-test-subj="sloDetailsHeaderControlPopoverExploreInApm"
-                  >
-                    {i18n.translate(
-                      'xpack.observability.slos.sloDetails.headerControl.exploreInApm',
-                      {
-                        defaultMessage: 'Explore in APM',
-                      }
-                    )}
-                  </EuiContextMenuItem>,
-                ]
-              : []
-          )}
+          ]
+            .concat(
+              !!slo && isApmIndicatorType(slo.indicator.type) ? (
+                <EuiContextMenuItem
+                  key="exploreInApm"
+                  icon="bullseye"
+                  onClick={handleNavigateToApm}
+                  data-test-subj="sloDetailsHeaderControlPopoverExploreInApm"
+                >
+                  {i18n.translate(
+                    'xpack.observability.slos.sloDetails.headerControl.exploreInApm',
+                    {
+                      defaultMessage: 'Service details',
+                    }
+                  )}
+                </EuiContextMenuItem>
+              ) : (
+                []
+              )
+            )
+            .concat(
+              <EuiContextMenuItem
+                key="clone"
+                disabled={!hasWriteCapabilities}
+                icon="copy"
+                onClick={handleClone}
+                data-test-subj="sloDetailsHeaderControlPopoverClone"
+              >
+                {i18n.translate('xpack.observability.slo.slo.item.actions.clone', {
+                  defaultMessage: 'Clone',
+                })}
+              </EuiContextMenuItem>,
+              <EuiContextMenuItem
+                key="delete"
+                icon="trash"
+                disabled={!hasWriteCapabilities}
+                onClick={handleDelete}
+                data-test-subj="sloDetailsHeaderControlPopoverDelete"
+              >
+                {i18n.translate('xpack.observability.slo.slo.item.actions.delete', {
+                  defaultMessage: 'Delete',
+                })}
+              </EuiContextMenuItem>
+            )}
         />
       </EuiPopover>
 
@@ -173,6 +249,14 @@ export function HeaderControl({ isLoading, slo }: Props) {
           initialValues={{ name: `${slo.name} burn rate`, params: { sloId: slo.id } }}
         />
       ) : null}
+
+      {slo && isDeleteConfirmationModalOpen ? (
+        <SloDeleteConfirmationModal
+          slo={slo}
+          onCancel={handleDeleteCancel}
+          onSuccess={handleDeleteSuccess}
+        />
+      ) : null}
     </>
   );
 }

x-pack/plugins/observability/public/pages/slo_details/slo_details.test.tsx

@@ -60,6 +60,12 @@ const mockKibana = () => {
           prepend: mockBasePathPrepend,
         },
       },
+      notifications: {
+        toasts: {
+          addSuccess: jest.fn(),
+          addError: jest.fn(),
+        },
+      },
       triggersActionsUi: {
         getAddRuleFlyout: jest.fn(() => (
           <div data-test-subj="add-rule-flyout">mocked component</div>
@@ -182,6 +188,42 @@ describe('SLO Details Page', () => {
     expect(screen.queryByTestId('sloDetailsHeaderControlPopoverCreateRule')).toBeTruthy();
   });
 
+  it("renders a 'Manage rules' button under actions menu", async () => {
+    const slo = buildSlo();
+    useParamsMock.mockReturnValue(slo.id);
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
+
+    render(<SloDetailsPage />);
+
+    fireEvent.click(screen.getByTestId('o11yHeaderControlActionsButton'));
+    expect(screen.queryByTestId('sloDetailsHeaderControlPopoverManageRules')).toBeTruthy();
+  });
+
+  it("renders a 'Clone' button under actions menu", async () => {
+    const slo = buildSlo();
+    useParamsMock.mockReturnValue(slo.id);
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
+
+    render(<SloDetailsPage />);
+
+    fireEvent.click(screen.getByTestId('o11yHeaderControlActionsButton'));
+    expect(screen.queryByTestId('sloDetailsHeaderControlPopoverClone')).toBeTruthy();
+  });
+
+  it("renders a 'Delete' button under actions menu", async () => {
+    const slo = buildSlo();
+    useParamsMock.mockReturnValue(slo.id);
+    useFetchSloDetailsMock.mockReturnValue({ isLoading: false, slo });
+    useLicenseMock.mockReturnValue({ hasAtLeast: () => true });
+
+    render(<SloDetailsPage />);
+
+    fireEvent.click(screen.getByTestId('o11yHeaderControlActionsButton'));
+    expect(screen.queryByTestId('sloDetailsHeaderControlPopoverDelete')).toBeTruthy();
+  });
+
   it('renders the Overview tab by default', async () => {
     const slo = buildSlo();
     useParamsMock.mockReturnValue(slo.id);

x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx

@@ -7,6 +7,7 @@
 
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useIsMutating } from '@tanstack/react-query';
 import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -44,6 +45,8 @@ export function SloDetailsPage() {
 
   const { isLoading, slo } = useFetchSloDetails({ sloId, shouldRefetch: isAutoRefreshing });
 
+  const isCloningOrDeleting = Boolean(useIsMutating());
+
   useBreadcrumbs(getBreadcrumbs(basePath, slo));
 
   const isSloNotFound = !isLoading && slo === undefined;
@@ -55,22 +58,24 @@ export function SloDetailsPage() {
     navigateToUrl(basePath.prepend(paths.observability.slos));
   }
 
+  const isPerformingAction = isLoading || isCloningOrDeleting;
+
   const handleToggleAutoRefresh = () => {
     setIsAutoRefreshing(!isAutoRefreshing);
   };
 
   return (
     <ObservabilityPageTemplate
       pageHeader={{
-        pageTitle: <HeaderTitle isLoading={isLoading} slo={slo} />,
+        pageTitle: <HeaderTitle isLoading={isPerformingAction} slo={slo} />,
         rightSideItems: [
-          <HeaderControl isLoading={isLoading} slo={slo} />,
+          <HeaderControl isLoading={isPerformingAction} slo={slo} />,
           <AutoRefreshButton
-            disabled={isLoading}
+            disabled={isPerformingAction}
             isAutoRefreshing={isAutoRefreshing}
             onClick={handleToggleAutoRefresh}
           />,
-          <FeedbackButton />,
+          <FeedbackButton disabled={isPerformingAction} />,
         ],
         bottomBorder: false,
       }}

x-pack/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.tsx

@@ -63,7 +63,7 @@ export function SloIndicatorTypeBadge({ slo }: Props) {
           <EuiToolTip
             position="top"
             content={i18n.translate('xpack.observability.slo.indicatorTypeBadge.exploreInApm', {
-              defaultMessage: 'Explore {service} in APM',
+              defaultMessage: 'View {service} details',
               values: { service: slo.indicator.params.service },
             })}
           >
@@ -73,7 +73,7 @@ export function SloIndicatorTypeBadge({ slo }: Props) {
               onClickAriaLabel={i18n.translate(
                 'xpack.observability.slo.indicatorTypeBadge.exploreInApm',
                 {
-                  defaultMessage: 'Explore {service} in APM',
+                  defaultMessage: 'View {service} details',
                   values: { service: slo.indicator.params.service },
                 }
               )}

x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.tsx

@@ -15,11 +15,13 @@ import { useDeleteSlo } from '../../../hooks/slo/use_delete_slo';
 export interface SloDeleteConfirmationModalProps {
   slo: SLOWithSummaryResponse;
   onCancel: () => void;
+  onSuccess?: () => void;
 }
 
 export function SloDeleteConfirmationModal({
   slo: { id, name },
   onCancel,
+  onSuccess,
 }: SloDeleteConfirmationModalProps) {
   const {
     notifications: { toasts },
@@ -31,6 +33,7 @@ export function SloDeleteConfirmationModal({
 
   if (isSuccess) {
     toasts.addSuccess(getDeleteSuccesfulMessage(name));
+    onSuccess?.();
   }
 
   if (isError) {