fix(dashboard): Fix healthcheck view when api endpoint is auto (#3919)

Co-authored-by: David Höck <david@vendure.io>

packages/dashboard/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { Page, PageActionBar, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { getApiBaseUrl } from '@/vdb/utils/config-utils.js';
 import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { formatRelative } from 'date-fns';
 import { CheckCircle2Icon, CircleXIcon } from 'lucide-react';
-import { uiConfig } from 'virtual:vendure-ui-config';
 
 export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
     component: HealthchecksPage,
@@ -28,8 +28,7 @@ function HealthchecksPage() {
     const { data, refetch, dataUpdatedAt } = useQuery({
         queryKey: ['healthchecks'],
         queryFn: async () => {
-            const schemeAndHost =
-                uiConfig.api.host + (uiConfig.api.port !== 'auto' ? `:${uiConfig.api.port}` : '');
+            const schemeAndHost = getApiBaseUrl();
 
             const res = await fetch(`${schemeAndHost}/health`);
             return res.json() as Promise<HealthcheckResponse>;

packages/dashboard/src/lib/graphql/api.ts

@@ -8,14 +8,9 @@ import { AwesomeGraphQLClient } from 'awesome-graphql-client';
 import { DocumentNode, print } from 'graphql';
 import { uiConfig } from 'virtual:vendure-ui-config';
 
-const host =
-    uiConfig.api.host !== 'auto'
-        ? uiConfig.api.host
-        : `${window.location.protocol}//${window.location.hostname}`;
-const API_URL =
-    host +
-    `:${uiConfig.api.port !== 'auto' ? uiConfig.api.port : window.location.port}` +
-    `/${uiConfig.api.adminApiPath}`;
+import { getApiBaseUrl } from '../utils/config-utils.js';
+
+const API_URL = getApiBaseUrl() + `/${uiConfig.api.adminApiPath}`;
 
 export type Variables = object;
 export type RequestDocument = string | DocumentNode;

packages/dashboard/src/lib/utils/config-utils.ts

@@ -0,0 +1,11 @@
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+export function getApiBaseUrl(): string {
+    const schemeAndHost =
+        uiConfig.api.host !== 'auto'
+            ? uiConfig.api.host
+            : `${window.location.protocol}//${window.location.hostname}`;
+    const portPart = uiConfig.api.port !== 'auto' ? `:${uiConfig.api.port}` : '';
+
+    return schemeAndHost + portPart;
+}