fix: datatrail link to "open in explore" prefix with config.appSubUrl (#86375)

* fix: datatrail link to explore needs appSubUrl
* fix: use `appUrl` when creating URL for sharing

public/app/features/trails/MetricScene.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import {
   SceneObjectState,
   SceneObjectBase,
@@ -151,9 +152,11 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
   public openExploreLink = async () => {
     reportExploreMetrics('selected_metric_action_clicked', { action: 'open_in_explore' });
     this.getLinkToExplore().then((link) => {
+      // We need to ensure we prefix with the appSubUrl for environments that don't host grafana at the root.
+      const url = `${config.appSubUrl}${link}`;
       // We use window.open instead of a Link or <a> because we want to compute the explore link when clicking,
       // if we precompute it we have to keep track of a lot of dependencies
-      window.open(link, '_blank');
+      window.open(url, '_blank');
     });
   };
 

public/app/features/trails/ShareTrailButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { useLocation } from 'react-use';
 
+import { config } from '@grafana/runtime';
 import { ToolbarButton } from '@grafana/ui';
 
 import { DataTrail } from './DataTrail';
@@ -12,13 +12,14 @@ interface ShareTrailButtonState {
 }
 
 export const ShareTrailButton = ({ trail }: ShareTrailButtonState) => {
-  const { origin } = useLocation();
   const [tooltip, setTooltip] = useState('Copy url');
 
   const onShare = () => {
     if (navigator.clipboard) {
-      navigator.clipboard.writeText(origin + getUrlForTrail(trail));
       reportExploreMetrics('selected_metric_action_clicked', { action: 'share_url' });
+      const appUrl = config.appUrl.endsWith('/') ? config.appUrl.slice(0, -1) : config.appUrl;
+      const url = appUrl + getUrlForTrail(trail);
+      navigator.clipboard.writeText(url);
       setTooltip('Copied!');
       setTimeout(() => {
         setTooltip('Copy url');