From 67bf27d4ed82b63b38ccd215706eeb1404034330 Mon Sep 17 00:00:00 2001
From: Ezequiel Victorero <ezequiel.victorero@grafana.com>
Date: Thu, 21 Sep 2023 15:39:32 -0300
Subject: [PATCH] Snapshots: Use appUrl on snapshot list page (#74944)

---
 .../components/SnapshotListTable.test.tsx        | 16 ++++------------
 .../components/SnapshotListTable.tsx             | 11 +++--------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/public/app/features/manage-dashboards/components/SnapshotListTable.test.tsx b/public/app/features/manage-dashboards/components/SnapshotListTable.test.tsx
index 4d7886238d8..7e3844de80a 100644
--- a/public/app/features/manage-dashboards/components/SnapshotListTable.test.tsx
+++ b/public/app/features/manage-dashboards/components/SnapshotListTable.test.tsx
@@ -1,4 +1,4 @@
-import { locationService } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 
 import { getSnapshots } from './SnapshotListTable';
 
@@ -24,15 +24,7 @@ jest.mock('@grafana/runtime', () => ({
 }));
 
 describe('getSnapshots', () => {
-  global.window = Object.create(window);
-  Object.defineProperty(window, 'location', {
-    value: {
-      href: 'http://localhost:3000/grafana/dashboard/snapshots',
-    },
-    writable: true,
-  });
-
-  locationService.push('/dashboard/snapshots');
+  config.appUrl = 'http://snapshots.grafana.com/';
 
   test('returns correct snapshot urls', async () => {
     const results = await getSnapshots();
@@ -44,7 +36,7 @@ describe('getSnapshots', () => {
           "externalUrl": "https://www.externalSnapshotUrl.com",
           "key": "JRXqfKihKZek70FM6Xaq502NxH7OyyEs",
           "name": "Snap 1",
-          "url": "/dashboard/snapshot/JRXqfKihKZek70FM6Xaq502NxH7OyyEs",
+          "url": "http://snapshots.grafana.com/dashboard/snapshot/JRXqfKihKZek70FM6Xaq502NxH7OyyEs",
         },
         {
           "external": false,
@@ -52,7 +44,7 @@ describe('getSnapshots', () => {
           "id": 3,
           "key": "RziRfhlBDTjwyYGoHAjnWyrMNQ1zUg3j",
           "name": "Snap 2",
-          "url": "/dashboard/snapshot/RziRfhlBDTjwyYGoHAjnWyrMNQ1zUg3j",
+          "url": "http://snapshots.grafana.com/dashboard/snapshot/RziRfhlBDTjwyYGoHAjnWyrMNQ1zUg3j",
         },
       ]
     `);
diff --git a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
index f06b8bde962..27f85957d62 100644
--- a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
+++ b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
-import { getBackendSrv, locationService } from '@grafana/runtime';
+import { getBackendSrv, config } from '@grafana/runtime';
 import { ConfirmModal, Button, LinkButton } from '@grafana/ui';
 
 import { Snapshot } from '../types';
@@ -12,17 +12,13 @@ export function getSnapshots() {
     .then((result: Snapshot[]) => {
       return result.map((snapshot) => ({
         ...snapshot,
-        url: `/dashboard/snapshot/${snapshot.key}`,
+        url: `${config.appUrl}dashboard/snapshot/${snapshot.key}`,
       }));
     });
 }
 export const SnapshotListTable = () => {
   const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
   const [removeSnapshot, setRemoveSnapshot] = useState<Snapshot | undefined>();
-  const currentPath = locationService.getLocation().pathname;
-  const fullUrl = window.location.href;
-  const baseUrl = fullUrl.substring(0, fullUrl.indexOf(currentPath));
-
   useAsync(async () => {
     const response = await getSnapshots();
     setSnapshots(response);
@@ -60,14 +56,13 @@ export const SnapshotListTable = () => {
         <tbody>
           {snapshots.map((snapshot) => {
             const url = snapshot.externalUrl || snapshot.url;
-            const fullUrl = snapshot.externalUrl || `${baseUrl}${snapshot.url}`;
             return (
               <tr key={snapshot.key}>
                 <td>
                   <a href={url}>{snapshot.name}</a>
                 </td>
                 <td>
-                  <a href={url}>{fullUrl}</a>
+                  <a href={url}>{url}</a>
                 </td>
                 <td>{snapshot.external && <span className="query-keyword">External</span>}</td>
                 <td className="text-center">