Merge pull request #1380 from nhost/changeset-release/main

chore: update versions

dashboard/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/dashboard
 
+## 0.7.11
+
+### Patch Changes
+
+- d6527122: fix(dashboard): use correct service URLs
+
 ## 0.7.10
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

dashboard/src/components/applications/HasuraData.tsx

@@ -1,12 +1,16 @@
 import { ConnectionDetail } from '@/components/applications/ConnectionDetail';
 import { LoadingScreen } from '@/components/common/LoadingScreen';
+import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Button from '@/ui/v2/Button';
 import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
 import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
+import generateAppServiceUrl, {
+  defaultLocalBackendSlugs,
+  defaultRemoteBackendSlugs,
+} from '@/utils/common/generateAppServiceUrl';
 import { LOCAL_HASURA_URL } from '@/utils/env';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -15,6 +19,7 @@ interface HasuraDataProps {
 
 export function HasuraData({ close }: HasuraDataProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const isPlatform = useIsPlatform();
 
   if (
     !currentApplication?.subdomain ||
@@ -24,13 +29,15 @@ export function HasuraData({ close }: HasuraDataProps) {
   }
 
   const hasuraUrl =
-    process.env.NEXT_PUBLIC_ENV === 'dev'
-      ? LOCAL_HASURA_URL
-      : `${generateAppServiceUrl(
+    process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
+      ? `${LOCAL_HASURA_URL}/console`
+      : generateAppServiceUrl(
           currentApplication?.subdomain,
           currentApplication?.region.awsName,
           'hasura',
-        )}/console`;
+          defaultLocalBackendSlugs,
+          { ...defaultRemoteBackendSlugs, hasura: '/console' },
+        );
 
   return (
     <div className="mx-auto w-full max-w-md px-6 py-4 text-left">

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import InlineCode from '@/components/common/InlineCode';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useAppClient } from '@/hooks/useAppClient';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
@@ -13,8 +14,12 @@ import Input from '@/ui/v2/Input';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import generateAppServiceUrl, {
+  defaultLocalBackendSlugs,
+  defaultRemoteBackendSlugs,
+} from '@/utils/common/generateAppServiceUrl';
 import { LOCAL_HASURA_URL } from '@/utils/env';
-import { generateAppServiceUrl, generateRemoteAppUrl } from '@/utils/helpers';
+import { generateRemoteAppUrl } from '@/utils/helpers';
 import { useGetAppInjectedVariablesQuery } from '@/utils/__generated__/graphql';
 import { Fragment, useState } from 'react';
 
@@ -27,6 +32,7 @@ export default function SystemEnvironmentVariableSettings() {
   const { data, loading, error } = useGetAppInjectedVariablesQuery({
     variables: { id: currentApplication?.id },
   });
+  const isPlatform = useIsPlatform();
 
   const appClient = useAppClient({ start: false });
 
@@ -81,13 +87,15 @@ export default function SystemEnvironmentVariableSettings() {
     {
       key: 'NHOST_HASURA_URL',
       value:
-        process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? LOCAL_HASURA_URL
-          : `${generateAppServiceUrl(
-              currentApplication.subdomain,
-              currentApplication.region.awsName,
+        process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
+          ? `${LOCAL_HASURA_URL}/console`
+          : generateAppServiceUrl(
+              currentApplication?.subdomain,
+              currentApplication?.region.awsName,
               'hasura',
-            )}/console`,
+              defaultLocalBackendSlugs,
+              { ...defaultRemoteBackendSlugs, hasura: '/console' },
+            ),
     },
     { key: 'NHOST_AUTH_URL', value: appClient.auth.url },
     { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.url },

dashboard/src/components/settings/signInMethods/AppleProviderSettings/AppleProviderSettings.tsx

@@ -10,8 +10,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -169,7 +169,7 @@ export default function AppleProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/apple/callback`}
+            )}/signin/provider/apple/callback`}
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
@@ -188,7 +188,7 @@ export default function AppleProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/apple/callback`,
+                      )}/signin/provider/apple/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/DiscordProviderSettings/DiscordProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function DiscordProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/discord/callback`}
+            )}/signin/provider/discord/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function DiscordProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/discord/callback`,
+                      )}/signin/provider/discord/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/FacebookProviderSettings/FacebookProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function FacebookProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/facebook/callback`}
+            )}/signin/provider/facebook/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function FacebookProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/facebook/callback`,
+                      )}/signin/provider/facebook/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/GitHubProviderSettings/GitHubProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function GitHubProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/github/callback`}
+            )}/signin/provider/github/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function GitHubProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/github/callback`,
+                      )}/signin/provider/github/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function GoogleProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/google/callback`}
+            )}/signin/provider/google/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function GoogleProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/google/callback`,
+                      )}/signin/provider/google/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/LinkedInProviderSettings/LinkedInProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function LinkedInProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/linkedin/callback`}
+            )}/signin/provider/linkedin/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function LinkedInProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/linkedin/callback`,
+                      )}/signin/provider/linkedin/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/SpotifyProviderSettings/SpotifyProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function SpotifyProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/spotify/callback`}
+            )}/signin/provider/spotify/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function SpotifyProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/spotify/callback`,
+                      )}/signin/provider/spotify/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/TwitchProviderSettings/TwitchProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -116,7 +116,7 @@ export default function TwitchProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/twitch/callback`}
+            )}/signin/provider/twitch/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -131,7 +131,7 @@ export default function TwitchProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/twitch/callback`,
+                      )}/signin/provider/twitch/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -10,8 +10,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -129,7 +129,7 @@ export default function TwitterProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/twitter/callback`}
+            )}/signin/provider/twitter/callback`}
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
@@ -148,7 +148,7 @@ export default function TwitterProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/twitter/callback`,
+                      )}/signin/provider/twitter/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx

@@ -12,8 +12,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -115,7 +115,7 @@ export default function WindowsLiveProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/windowslive/callback`}
+            )}/signin/provider/windowslive/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -130,7 +130,7 @@ export default function WindowsLiveProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/windowslive/callback`,
+                      )}/signin/provider/windowslive/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -10,8 +10,8 @@ import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -167,7 +167,7 @@ export default function WorkOsProviderSettings() {
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'auth',
-            )}/v1/signin/provider/workos/callback`}
+            )}/signin/provider/workos/callback`}
             className="col-span-6"
             fullWidth
             hideEmptyHelperText
@@ -186,7 +186,7 @@ export default function WorkOsProviderSettings() {
                         currentApplication.subdomain,
                         currentApplication.region.awsName,
                         'auth',
-                      )}/v1/signin/provider/workos/callback`,
+                      )}/signin/provider/workos/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/users/AddUser.tsx

@@ -4,7 +4,7 @@ import { Modal } from '@/ui/Modal';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import Text from '@/ui/v2/Text';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { triggerToast } from '@/utils/toast';
 import { useApolloClient } from '@apollo/client';
 import axios from 'axios';
@@ -47,7 +47,7 @@ export function AddUserModal({ modalIsOpen, setModalIsOpen }: any) {
       currentApplication?.subdomain,
       currentApplication?.region.awsName,
       'auth',
-    )}/v1/signup/email-password`;
+    )}/signup/email-password`;
 
     try {
       await axios.post(signUpUrl, {

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/useCreateColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -51,7 +51,9 @@ export default function useCreateColumnMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useCreateRecordMutation/useCreateRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useCreateRecordMutation<TData extends object = {}>({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useCreateTableMutation/useCreateTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +49,9 @@ export default function useCreateTableMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
       }),

dashboard/src/hooks/dataBrowser/useDatabaseQuery/useDatabaseQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -50,7 +50,9 @@ export default function useDatabaseQuery(
       fetchDatabase({
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
       }),
     {

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/useDeleteColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useDeleteColumnMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteRecordMutation/useDeleteRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +48,9 @@ export default function useDeleteRecordMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/useDeleteTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -47,7 +47,9 @@ export default function useDeleteTableMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
       }),
     mutationOptions,

dashboard/src/hooks/dataBrowser/useMetadataQuery/useMetadataQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useMetadataQuery(
         ...options,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
       }),
     {

dashboard/src/hooks/dataBrowser/useTableQuery/useTableQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useTableQuery(
         ...options,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/useTrackForeignKeyRelationsMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +49,9 @@ export default function useTrackForeignKeyRelationMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
       }),
     mutationOptions,

dashboard/src/hooks/dataBrowser/useTrackTableMutation/useTrackTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +48,9 @@ export default function useTrackTableMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
       }),

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/useUpdateColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useUpdateColumnMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateRecordMutation/useUpdateRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +52,9 @@ export default function useUpdateRecordMutation<TData extends object = {}>({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
         table: customTable || (tableSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/useUpdateTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +48,9 @@ export default function useUpdateTableMutation({
         ...variables,
         appUrl: customAppUrl || appUrl,
         adminSecret:
-          customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : customAdminSecret || currentApplication?.hasuraGraphqlAdminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),
         schema: customSchema || (schemaSlug as string),
       }),

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/fetchProjectDatabaseSize.ts

@@ -1,6 +1,6 @@
 import type { QueryError, QueryResult } from '@/types/data-browser';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { generateAppServiceUrl } from '@/utils/helpers';
 
 export interface FetchProjectDatabaseSizeOptions {
   /**

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/useDatabaseSizeOfApplication.ts

@@ -21,9 +21,15 @@ export default function useDatabaseSizeOfApplication(
     queryKey,
     () =>
       fetchProjectDatabaseSize({
-        subdomain: currentApplication?.subdomain,
-        region: currentApplication?.region.awsName,
-        adminSecret: currentApplication?.hasuraGraphqlAdminSecret,
+        subdomain:
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'localhost'
+            : currentApplication?.subdomain,
+        region: currentApplication?.region?.awsName,
+        adminSecret:
+          process.env.NEXT_PUBLIC_ENV === 'dev'
+            ? 'nhost-admin-secret'
+            : currentApplication?.hasuraGraphqlAdminSecret,
       }),
     {
       ...queryOptions,

dashboard/src/hooks/useAppClient.ts

@@ -19,7 +19,7 @@ export function useAppClient(
 ): UseAppClientReturn {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
-  if (process.env.NEXT_PUBLIC_ENV === 'dev') {
+  if (process.env.NEXT_PUBLIC_ENV === 'dev' || !currentApplication) {
     return new NhostClient({
       subdomain: LOCAL_SUBDOMAIN,
       start: false,

dashboard/src/hooks/useFiles.ts

@@ -1,4 +1,4 @@
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import type {
   Files_Order_By as FilesOrderBy,
   GetFilesQuery,
@@ -70,7 +70,7 @@ export default function useFiles({
                   currentApplication.subdomain,
                   currentApplication.region.awsName,
                   'storage',
-                )}/v1/files/${file.id}`;
+                )}/${file.id}`;
 
                 const fetchParams = new URLSearchParams();
 

dashboard/src/hooks/useRemoteApplicationGQLClient.tsx

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { useMemo } from 'react';
 
@@ -15,11 +15,11 @@ export function useRemoteApplicationGQLClient() {
       new ApolloClient({
         cache: new InMemoryCache(),
         link: new HttpLink({
-          uri: `${generateAppServiceUrl(
+          uri: generateAppServiceUrl(
             currentApplication?.subdomain,
             currentApplication?.region.awsName,
             'graphql',
-          )}/v1`,
+          ),
           headers: {
             'x-hasura-admin-secret':
               process.env.NEXT_PUBLIC_ENV === 'dev'

dashboard/src/pages/[workspaceSlug]/[appSlug]/functions.tsx

@@ -13,7 +13,7 @@ import DelayedLoading from '@/ui/DelayedLoading';
 import { Modal } from '@/ui/Modal';
 import Status, { StatusEnum } from '@/ui/Status';
 import { Text } from '@/ui/Text';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { useGetAppFunctionsMetadataQuery } from '@/utils/__generated__/graphql';
 import { ChevronRightIcon } from '@heroicons/react/solid';
 import clsx from 'clsx';
@@ -252,11 +252,11 @@ export default function FunctionsPage() {
         <div className="text-center">
           <Text size="tiny" color="greyscaleDark" className="font-medium">
             Base URL for function endpoints is{' '}
-            {`${generateAppServiceUrl(
+            {generateAppServiceUrl(
               currentApplication.subdomain,
               currentApplication.region.awsName,
               'functions',
-            )}/v1`}
+            )}
           </Text>
         </div>
       </div>

dashboard/src/pages/[workspaceSlug]/[appSlug]/functions/[functionId].tsx

@@ -8,7 +8,8 @@ import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWorkspacesAndApplications';
 import { Text } from '@/ui/Text';
-import { generateAppServiceUrl, yieldFunction } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { yieldFunction } from '@/utils/helpers';
 import { useGetAppFunctionsMetadataQuery } from '@/utils/__generated__/graphql';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -88,7 +89,7 @@ export default function FunctionDetailsPage() {
                   currentApplication.subdomain,
                   currentApplication.region.awsName,
                   'functions',
-                )}/v1${currentFunction?.route}`}
+                )}${currentFunction?.route}`}
                 target="_blank"
                 rel="noreferrer"
               >
@@ -96,7 +97,7 @@ export default function FunctionDetailsPage() {
                   currentApplication.subdomain,
                   currentApplication.region.awsName,
                   'functions',
-                )}/v1${currentFunction?.route}`}
+                )}${currentFunction?.route}`}
               </a>
             </div>
           </div>

dashboard/src/pages/[workspaceSlug]/[appSlug]/graphql.tsx

@@ -9,7 +9,7 @@ import PlayIcon from '@/ui/v2/icons/PlayIcon';
 import Option from '@/ui/v2/Option';
 import Select from '@/ui/v2/Select';
 import Tooltip from '@/ui/v2/Tooltip';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { triggerToast } from '@/utils/toast';
 import {
   DOC_EXPLORER_PLUGIN,
@@ -268,7 +268,7 @@ export default function GraphQLPage() {
 
   const subscriptionUrl = `${appUrl
     .replace('https', 'wss')
-    .replace('http', 'ws')}/v1`;
+    .replace('http', 'ws')}`;
 
   const headers = {
     'content-type': 'application/json',
@@ -277,7 +277,7 @@ export default function GraphQLPage() {
   };
 
   const fetcher = createGraphiQLFetcher({
-    url: `${appUrl}/v1`,
+    url: appUrl,
     headers,
     wsClient: createClient({
       url: subscriptionUrl,

dashboard/src/pages/[workspaceSlug]/[appSlug]/storage/index.tsx

@@ -3,7 +3,7 @@ import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import FilesDataGrid from '@/components/files/FilesDataGrid';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -16,11 +16,11 @@ export default function StoragePage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateAppServiceUrl(
+      graphqlUrl={generateAppServiceUrl(
         currentApplication.subdomain,
         currentApplication.region.awsName,
         'graphql',
-      )}/v1`}
+      )}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

dashboard/src/pages/[workspaceSlug]/[appSlug]/users/[userId].tsx

@@ -19,8 +19,8 @@ import Input from '@/ui/v2/Input';
 import Option from '@/ui/v2/Option';
 import Select from '@/ui/v2/Select';
 import Text from '@/ui/v2/Text';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { generateAppServiceUrl } from '@/utils/helpers';
 import { triggerToast } from '@/utils/toast';
 import type {
   GetRemoteAppUserAuthRolesFragment,
@@ -629,11 +629,11 @@ export default function UserDetailsByIdPage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateAppServiceUrl(
+      graphqlUrl={generateAppServiceUrl(
         currentApplication.subdomain,
         currentApplication.region.awsName,
         'graphql',
-      )}/v1`}
+      )}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

dashboard/src/pages/[workspaceSlug]/[appSlug]/users/index.tsx

@@ -3,7 +3,7 @@ import Container from '@/components/layout/Container';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import UsersList from '@/components/users/UsersList';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateAppServiceUrl } from '@/utils/helpers';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -16,11 +16,11 @@ export default function UsersPage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateAppServiceUrl(
+      graphqlUrl={generateAppServiceUrl(
         currentApplication.subdomain,
         currentApplication.region.awsName,
         'graphql',
-      )}/v1`}
+      )}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.test.ts

@@ -0,0 +1,161 @@
+import { test, vi } from 'vitest';
+import generateAppServiceUrl, {
+  defaultLocalBackendSlugs,
+  defaultRemoteBackendSlugs,
+} from './generateAppServiceUrl';
+
+const env = { ...(process.env || ({} as NodeJS.ProcessEnv)) };
+
+beforeEach(() => {
+  vi.resetModules();
+});
+
+beforeEach(() => {
+  process.env = {
+    NEXT_PUBLIC_NHOST_PLATFORM: 'false',
+    NEXT_PUBLIC_ENV: 'dev',
+    ...env,
+  };
+});
+
+afterEach(() => {
+  process.env = { ...env };
+});
+
+test('should generate a per service subdomain in remote mode', () => {
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
+  process.env.NEXT_PUBLIC_ENV = 'production';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    'https://test.auth.eu-west-1.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
+    'https://test.functions.eu-west-1.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
+    'https://test.graphql.eu-west-1.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
+    'https://test.storage.eu-west-1.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    'https://test.hasura.eu-west-1.nhost.run',
+  );
+});
+
+test('should generate staging subdomains in staging environment', () => {
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
+  process.env.NEXT_PUBLIC_ENV = 'staging';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    'https://test.auth.eu-west-1.staging.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
+    'https://test.functions.eu-west-1.staging.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
+    'https://test.graphql.eu-west-1.staging.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
+    'https://test.storage.eu-west-1.staging.nhost.run/v1',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    'https://test.hasura.eu-west-1.staging.nhost.run',
+  );
+});
+
+test('should generate a /v1/files as a slug for storage in local mode', () => {
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
+    'http://localhost:1337/v1/files',
+  );
+});
+
+test('should generate no slug for Hasura neither in local mode nor in remote mode', () => {
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    'http://localhost:1337',
+  );
+
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
+  process.env.NEXT_PUBLIC_ENV = 'staging';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    'https://test.hasura.eu-west-1.staging.nhost.run',
+  );
+
+  process.env.NEXT_PUBLIC_ENV = 'production';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    'https://test.hasura.eu-west-1.nhost.run',
+  );
+});
+
+test('should be able to override the default local backend slugs', () => {
+  expect(
+    generateAppServiceUrl('test', 'eu-west-1', 'storage', {
+      ...defaultLocalBackendSlugs,
+      storage: '/v1/storage',
+    }),
+  ).toBe('http://localhost:1337/v1/storage');
+});
+
+test('should be able to override the default remote backend slugs', () => {
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
+  process.env.NEXT_PUBLIC_ENV = 'production';
+
+  expect(
+    generateAppServiceUrl(
+      'test',
+      'eu-west-1',
+      'hasura',
+      defaultLocalBackendSlugs,
+      { ...defaultRemoteBackendSlugs, hasura: '/lorem-ipsum' },
+    ),
+  ).toBe('https://test.hasura.eu-west-1.nhost.run/lorem-ipsum');
+});
+
+test('should generate a basic subdomain without region in local mode', () => {
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    `http://localhost:1337/v1/auth`,
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
+    'http://localhost:1337/v1/files',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
+    'http://localhost:1337/v1/graphql',
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
+    'http://localhost:1337/v1/functions',
+  );
+});
+
+test('should generate a basic subdomain with a custom port if provided', () => {
+  const CUSTOM_BACKEND_PORT = '1338';
+  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT = CUSTOM_BACKEND_PORT;
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/auth`,
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
+    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/files`,
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
+    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/graphql`,
+  );
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
+    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/functions`,
+  );
+});

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -0,0 +1,70 @@
+export type NhostService =
+  | 'auth'
+  | 'graphql'
+  | 'functions'
+  | 'storage'
+  | 'hasura';
+
+/**
+ * The default slugs that are used when running the dashboard locally. These
+ * values are used both in local mode and when running the dashboard locally
+ * against the remote (either staging or production) backend.
+ */
+export const defaultLocalBackendSlugs: Record<NhostService, string> = {
+  auth: '/v1/auth',
+  graphql: '/v1/graphql',
+  functions: '/v1/functions',
+  storage: '/v1/files',
+  hasura: '',
+};
+
+/**
+ * The default slugs that are used when running the dashboard against the
+ * remote (either staging or production) backend in a cloud environment.
+ */
+export const defaultRemoteBackendSlugs: Record<NhostService, string> = {
+  auth: '/v1',
+  graphql: '/v1',
+  functions: '/v1',
+  storage: '/v1',
+  hasura: '',
+};
+
+/**
+ * Generates a service specific URL for a project.
+ *
+ * @param subdomain - The project's subdomain
+ * @param region - The project's region
+ * @param service - The service to generate the URL for
+ * @param localBackendSlugs - Custom slugs to be used when running the dashboard locally
+ * @param localBackendSlugs - Custom slugs to be used when running the dashboard in a cloud environment
+ * @returns The service specific URL for the project
+ */
+export default function generateAppServiceUrl(
+  subdomain: string,
+  region: string,
+  service: 'auth' | 'graphql' | 'functions' | 'storage' | 'hasura',
+  localBackendSlugs = defaultLocalBackendSlugs,
+  remoteBackendSlugs = defaultRemoteBackendSlugs,
+) {
+  if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
+    return `http://localhost:${
+      process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
+    }${localBackendSlugs[service]}`;
+  }
+
+  if (process.env.NEXT_PUBLIC_ENV === 'dev') {
+    return `${
+      process.env.NEXT_PUBLIC_NHOST_BACKEND_URL ||
+      `http://localhost:${
+        process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
+      }`
+    }${localBackendSlugs[service]}`;
+  }
+
+  if (process.env.NEXT_PUBLIC_ENV === 'staging') {
+    return `https://${subdomain}.${service}.${region}.staging.nhost.run${remoteBackendSlugs[service]}`;
+  }
+
+  return `https://${subdomain}.${service}.${region}.nhost.run${remoteBackendSlugs[service]}`;
+}

dashboard/src/utils/common/generateAppServiceUrl/index.ts

@@ -0,0 +1,2 @@
+export * from './generateAppServiceUrl';
+export { default } from './generateAppServiceUrl';

dashboard/src/utils/helpers.ts

@@ -72,26 +72,6 @@ export function generateRemoteAppUrl(subdomain: string): string {
   return `https://${subdomain}.nhost.run`;
 }
 
-export function generateAppServiceUrl(
-  subdomain: string,
-  region: string,
-  service: 'auth' | 'graphql' | 'functions' | 'storage' | 'hasura',
-) {
-  if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
-    return LOCAL_BACKEND_URL;
-  }
-
-  if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL || LOCAL_BACKEND_URL;
-  }
-
-  if (process.env.NEXT_PUBLIC_ENV === 'staging') {
-    return `https://${subdomain}.${service}.${region}.staging.nhost.run`;
-  }
-
-  return `https://${subdomain}.${service}.${region}.nhost.run`;
-}
-
 export function emptyWorkspace() {
   return {
     id: '',