fix(SettingsView): Fix back button after modifying the max nodes setting (#234)

Author: grafakus

src/pages/ProfilesExplorerView/components/SceneProfilesExplorer/components/domain/useHeader.ts

@@ -3,7 +3,7 @@ import { SceneObject, SceneVariable } from '@grafana/scenes';
 import { displaySuccess } from '@shared/domain/displayStatus';
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import { PLUGIN_BASE_URL } from 'src/constants';
+import { PLUGIN_BASE_URL, ROUTES } from 'src/constants';
 
 import { ProfilesDataSourceVariable } from '../../../../domain/variables/ProfilesDataSourceVariable';
 import { ExplorationType } from '../../SceneProfilesExplorer';
@@ -62,7 +62,8 @@ export function useHeader({ explorationType, controls, body, $variables, onChang
  onClickShareLink,
  onClickUserSettings: useCallback(() => {
  reportInteraction('g_pyroscope_app_user_settings_clicked');
- history.push(`${PLUGIN_BASE_URL}/settings`);
+
+ history.push(`${PLUGIN_BASE_URL}${ROUTES.SETTINGS}`, { referrer: window.location.href });
  }, [history]),
  },
  };

src/pages/SettingsView/domain/__tests__/useSettingsView.spec.ts

@@ -32,6 +32,18 @@ jest.mock('@shared/domain/url-params/useMaxNodesFromUrl', () => ({
  useMaxNodesFromUrl: () => [, setMaxNodes],
 }));
 
+// useHistory dependency
+jest.mock('react-router-dom', () => ({
+ useHistory: () => ({
+ push: jest.fn(),
+ location: {
+ state: {
+ referrer: 'http://unit.test/pass',
+ },
+ },
+ }),
+}));
+
 // tests
 describe('useSettingsView(plugin)', () => {
  it('returns an object with "data" and "actions" fields', () => {

src/pages/SettingsView/domain/useSettingsView.ts

@@ -2,14 +2,19 @@ import { displayError, displaySuccess } from '@shared/domain/displayStatus';
 import { useMaxNodesFromUrl } from '@shared/domain/url-params/useMaxNodesFromUrl';
 import { DEFAULT_SETTINGS, PluginSettings } from '@shared/infrastructure/settings/PluginSettings';
 import { useFetchPluginSettings } from '@shared/infrastructure/settings/useFetchPluginSettings';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { PLUGIN_BASE_URL, ROUTES } from '../../../constants';
 
 export function useSettingsView() {
  const { settings, error: fetchError, mutate } = useFetchPluginSettings();
- const [, setMaxNodes] = useMaxNodesFromUrl();
-
+ const [maxNodesFromUrl, setMaxNodes] = useMaxNodesFromUrl();
  const [currentSettings, setCurrentSettings] = useState<PluginSettings>(settings ?? DEFAULT_SETTINGS);
 
+ const history = useHistory();
+ const referrerRef = useRef(history.location.state?.referrer);
+
  useEffect(() => {
  if (settings) {
  setCurrentSettings(settings);
@@ -61,7 +66,19 @@ export function useSettingsView() {
  }
  },
  goBack() {
- history.back();
+ if (!referrerRef.current) {
+ history.push(`${PLUGIN_BASE_URL}${ROUTES.PROFILES_EXPLORER_VIEW}`);
+ return;
+ }
+
+ const backUrl = new URL(referrerRef.current);
+
+ // when calling saveSettings() above, the new maxNodes value is set and the URL search parameter is updated (see useMaxNodesFromUrl.ts)
+ if (maxNodesFromUrl) {
+ backUrl.searchParams.set('maxNodes', String(maxNodesFromUrl));
+ }
+
+ history.push(`${backUrl.pathname}${backUrl.search}`);
  },
  },
  };