From 2ed7eecf2dbd9ba0bdd6bc1157f218d9d90baba1 Mon Sep 17 00:00:00 2001
From: Darren Janeczek <38694490+darrenjaneczek@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:40:40 -0400
Subject: [PATCH] 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      | 5 ++++-
 public/app/features/trails/ShareTrailButton.tsx | 7 ++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/app/features/trails/MetricScene.tsx b/public/app/features/trails/MetricScene.tsx
index ac4566f7f94..fb6cb6a1d79 100644
--- a/public/app/features/trails/MetricScene.tsx
+++ b/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');
     });
   };
 
diff --git a/public/app/features/trails/ShareTrailButton.tsx b/public/app/features/trails/ShareTrailButton.tsx
index 3ce02094f45..4f6ed25a429 100644
--- a/public/app/features/trails/ShareTrailButton.tsx
+++ b/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');