From abb8a5374590f7b500d58690e1fc699f5dbf23ee Mon Sep 17 00:00:00 2001
From: Dan Yishai <danyi1212@users.noreply.github.com>
Date: Sun, 19 Nov 2023 03:26:49 +0200
Subject: [PATCH] Changed API links to external

---
 .../components/settings/ServerInfoPanel.tsx   | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/settings/ServerInfoPanel.tsx b/frontend/src/components/settings/ServerInfoPanel.tsx
index 46996fc..bdb218b 100644
--- a/frontend/src/components/settings/ServerInfoPanel.tsx
+++ b/frontend/src/components/settings/ServerInfoPanel.tsx
@@ -14,6 +14,25 @@ import { formatBytes } from "@utils/FormatBytes"
 import { formatSecondsDurationLong } from "@utils/FormatSecondsDurationLong"
 import React, { useCallback, useEffect, useState } from "react"
 
+interface LinkButtonProps {
+    href: string
+    children?: React.ReactNode
+}
+
+const LinkButton: React.FC<LinkButtonProps> = ({ href, children }) => (
+    <Button
+        component="a"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        variant="outlined"
+        color="secondary"
+        disabled={Boolean(import.meta.env.VITE_DEMO_MODE)}
+    >
+        {children}
+    </Button>
+)
+
 export const ServerInfoPanel: React.FC = () => {
     const client = useClient()
     const getServerInfo = useCallback(() => client.settings.getServerInfo(), [client])
@@ -135,12 +154,8 @@ export const ServerInfoPanel: React.FC = () => {
                 </Grid>
                 <Grid item xs={12}>
                     <Stack direction="row" justifyContent="space-around">
-                        <Button component="a" href="/docs" variant="outlined" color="secondary">
-                            API Explorer
-                        </Button>
-                        <Button component="a" href="/redoc" variant="outlined" color="secondary">
-                            API Docs
-                        </Button>
+                        <LinkButton href="/docs">API Explorer</LinkButton>
+                        <LinkButton href="/redoc">API Docs</LinkButton>
                     </Stack>
                 </Grid>
             </Grid>