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

@@ -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"

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) {

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;
+}

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';