Show toast when cloning SLO was successful

elastic · Apr 26, 2023 · 0a5049c · 0a5049c
1 parent 309494b
commit 0a5049c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/header_control.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/header_control.tsx
@@ -35,6 +35,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const {
     application: { navigateToUrl },
     http: { basePath },
+    notifications: { toasts },
     triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout },
   } = useKibana<ObservabilityAppServices>().services;
   const { hasWriteCapabilities } = useCapabilities();
@@ -43,7 +44,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const [isRuleFlyoutVisible, setRuleFlyoutVisibility] = useState<boolean>(false);
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
 
-  const { mutate: cloneSlo } = useCloneSlo();
+  const { mutateAsync: cloneSlo } = useCloneSlo();
   const isDeleting = Boolean(useIsMutating(['deleteSlo', slo?.id]));
 
   const handleActionsClick = () => setIsPopoverOpen((value) => !value);
@@ -97,14 +98,24 @@ export function HeaderControl({ isLoading, slo }: Props) {
     }
   };
 
-  const handleClone = () => {
+  const handleClone = async () => {
     if (slo) {
+      setIsPopoverOpen(false);
+
       const newSlo = transformValuesToCreateSLOInput(
         transformSloResponseToCreateSloInput({ ...slo, name: `[Copy] ${slo.name}` })!
       );
 
-      cloneSlo({ slo: newSlo, idToCopyFrom: slo.id });
-      setIsPopoverOpen(false);
+      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));
     }
   };
 

diff --git a/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx b/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx
@@ -45,7 +45,7 @@ export function SloDetailsPage() {
 
   const { isLoading, slo } = useFetchSloDetails({ sloId, shouldRefetch: isAutoRefreshing });
 
-  const isDeleting = Boolean(useIsMutating(['deleteSlo', slo?.id]));
+  const isCloningOrDeleting = Boolean(useIsMutating());
 
   useBreadcrumbs(getBreadcrumbs(basePath, slo));
 
@@ -58,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 || isDeleting}
+            disabled={isPerformingAction}
             isAutoRefreshing={isAutoRefreshing}
             onClick={handleToggleAutoRefresh}
           />,
-          <FeedbackButton disabled={isLoading || isDeleting} />,
+          <FeedbackButton disabled={isPerformingAction} />,
         ],
         bottomBorder: false,
       }}