From 93ca49b785b2be8daae0eedba0af23e001f0e2e2 Mon Sep 17 00:00:00 2001
From: Andre Pereira <adrapereira@gmail.com>
Date: Fri, 22 Mar 2024 13:33:50 +0000
Subject: [PATCH] Explore Metrics: Show toast when bookmarking  (#84987)

* Show toast notification when bookmarking a trail

* Copy change

* Move to LinkButton

* Secondary solid button
---
 public/app/features/trails/DataTrailsApp.tsx  |  5 +++--
 .../features/trails/TrailStore/TrailStore.ts  |  7 +++++-
 .../app/features/trails/TrailStore/utils.tsx  | 22 +++++++++++++++++++
 public/app/features/trails/shared.ts          |  1 +
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 public/app/features/trails/TrailStore/utils.tsx

diff --git a/public/app/features/trails/DataTrailsApp.tsx b/public/app/features/trails/DataTrailsApp.tsx
index f8fe2d33b5b..2ed5c334e93 100644
--- a/public/app/features/trails/DataTrailsApp.tsx
+++ b/public/app/features/trails/DataTrailsApp.tsx
@@ -11,6 +11,7 @@ import { Page } from 'app/core/components/Page/Page';
 import { DataTrail } from './DataTrail';
 import { DataTrailsHome } from './DataTrailsHome';
 import { getTrailStore } from './TrailStore/TrailStore';
+import { HOME_ROUTE, TRAILS_ROUTE } from './shared';
 import { getMetricName, getUrlForTrail, newMetricsTrail } from './utils';
 
 export interface DataTrailsAppState extends SceneObjectState {
@@ -36,7 +37,7 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
       <Switch>
         <Route
           exact={true}
-          path="/explore/metrics"
+          path={HOME_ROUTE}
           render={() => (
             <Page navId="explore/metrics" layout={PageLayoutType.Custom}>
               <div className={styles.customPage}>
@@ -47,7 +48,7 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
         />
         <Route
           exact={true}
-          path="/explore/metrics/trail"
+          path={TRAILS_ROUTE}
           render={() => (
             <Page
               navId="explore/metrics"
diff --git a/public/app/features/trails/TrailStore/TrailStore.ts b/public/app/features/trails/TrailStore/TrailStore.ts
index e11a786c353..4b503c0bfc1 100644
--- a/public/app/features/trails/TrailStore/TrailStore.ts
+++ b/public/app/features/trails/TrailStore/TrailStore.ts
@@ -1,11 +1,15 @@
 import { debounce, isEqual } from 'lodash';
 
-import { SceneObject, SceneObjectRef, SceneObjectUrlValues, getUrlSyncManager, sceneUtils } from '@grafana/scenes';
+import { getUrlSyncManager, SceneObject, SceneObjectRef, SceneObjectUrlValues, sceneUtils } from '@grafana/scenes';
+import { dispatch } from 'app/store/store';
 
+import { notifyApp } from '../../../core/reducers/appNotification';
 import { DataTrail } from '../DataTrail';
 import { TrailStepType } from '../DataTrailsHistory';
 import { BOOKMARKED_TRAILS_KEY, RECENT_TRAILS_KEY } from '../shared';
 
+import { createBookmarkSavedNotification } from './utils';
+
 const MAX_RECENT_TRAILS = 20;
 
 export interface SerializedTrail {
@@ -128,6 +132,7 @@ export class TrailStore {
     this._bookmarks.unshift(trail.getRef());
     this._refreshBookmarkIndexMap();
     this._save();
+    dispatch(notifyApp(createBookmarkSavedNotification()));
   }
 
   removeBookmark(index: number) {
diff --git a/public/app/features/trails/TrailStore/utils.tsx b/public/app/features/trails/TrailStore/utils.tsx
new file mode 100644
index 00000000000..f56d6a47993
--- /dev/null
+++ b/public/app/features/trails/TrailStore/utils.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { LinkButton, Stack } from '@grafana/ui';
+
+import { createSuccessNotification } from '../../../core/copy/appNotification';
+import { HOME_ROUTE } from '../shared';
+
+export function createBookmarkSavedNotification() {
+  const notification = createSuccessNotification('Bookmark created');
+
+  notification.component = (
+    <Stack gap={2} direction={'row'}>
+      <div>
+        You can view bookmarks under <i>Explore &gt; Metrics</i>
+      </div>
+      <LinkButton fill={'solid'} variant={'secondary'} href={HOME_ROUTE}>
+        View bookmarks
+      </LinkButton>
+    </Stack>
+  );
+  return notification;
+}
diff --git a/public/app/features/trails/shared.ts b/public/app/features/trails/shared.ts
index f77d83bbe30..691360a53c4 100644
--- a/public/app/features/trails/shared.ts
+++ b/public/app/features/trails/shared.ts
@@ -11,6 +11,7 @@ export interface ActionViewDefinition {
 }
 
 export const TRAILS_ROUTE = '/explore/metrics/trail';
+export const HOME_ROUTE = '/explore/metrics';
 
 export const VAR_METRIC_NAMES = 'metricNames';
 export const VAR_FILTERS = 'filters';