Add validations whenever using new URL (#20124)

* Add validations whenever using new URL

* Update based on feedback

apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx

@@ -104,7 +104,7 @@ const HTTPRequestFields = ({
             <Listbox id="http_url" name="http_url" label="Select which edge function to trigger">
               {edgeFunctions.map((fn) => {
                 const restUrl = selectedProject?.restUrl
-                const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
+                const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : 'co'
                 const functionUrl = `https://${ref}.supabase.${restUrlTld}/functions/v1/${fn.slug}`
 
                 return (

apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx

@@ -38,7 +38,7 @@ const HookList = ({ schema, filterString, editHook = noop, deleteHook = noop }:
   })
 
   const restUrl = project?.restUrl
-  const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
+  const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : 'co'
 
   const filteredHooks = (hooks ?? []).filter(
     (x: any) =>

apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -24,8 +24,7 @@ const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) =
 
   // get the .co or .net TLD from the restUrl
   const restUrl = project?.restUrl
-  const restUrlTld =
-    restUrl !== undefined ? new URL(restUrl as string).hostname.split('.').pop() : 'co'
+  const restUrlTld = restUrl !== undefined ? new URL(restUrl).hostname.split('.').pop() : 'co'
   const functionUrl = `https://${ref}.supabase.${restUrlTld}/functions/v1/${item.slug}`
 
   const endpoint =

apps/studio/components/interfaces/Functions/TerminalInstructions.tsx

@@ -40,7 +40,7 @@ const TerminalInstructions = ({
 
   // get the .co or .net TLD from the restUrl
   const restUrl = settings?.autoApiService.restUrl
-  const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : ''
+  const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : 'co'
 
   const commands: Commands[] = [
     {

apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx

@@ -1,4 +1,3 @@
-import dayjs from 'dayjs'
 import { filterFunctionsRequestResponse } from 'lib/logs'
 import { PreviewLogData } from '..'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
@@ -15,7 +14,7 @@ const FunctionInvocationSelectionRender = ({ log }: { log: PreviewLogData }) =>
   const response = metadata?.response?.[0]
   const method = request?.method
   const status = response?.status_code
-  const requestUrl = new URL(request?.url)
+  const requestUrl = request?.url !== undefined ? new URL(request?.url) : undefined
   const executionTimeMs = metadata.execution_time_ms
   const deploymentId = metadata.deployment_id
 
@@ -32,10 +31,12 @@ const FunctionInvocationSelectionRender = ({ log }: { log: PreviewLogData }) =>
         <SelectionDetailedRow label="Execution Time" value={`${executionTimeMs}ms`} />
         <SelectionDetailedRow label="Deployment ID" value={deploymentId} />
         <SelectionDetailedRow label="Log ID" value={log.id} />
-        <SelectionDetailedRow
-          label="Request Path"
-          value={requestUrl.pathname + requestUrl.search}
-        />
+        {requestUrl !== undefined && (
+          <SelectionDetailedRow
+            label="Request Path"
+            value={requestUrl.pathname + requestUrl.search}
+          />
+        )}
       </div>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-foreground mb-4">Request Metadata</h3>

apps/studio/localStores/storageExplorer/StorageExplorerStore.ts

@@ -389,20 +389,24 @@ class StorageExplorerStore {
       return filePreview.url
     } else {
       const signedUrl = await this.fetchFilePreview(file.name, expiresIn)
-      const formattedUrl = new URL(signedUrl)
-      formattedUrl.searchParams.set('t', new Date().toISOString())
-      const fileUrl = formattedUrl.toString()
+      try {
+        const formattedUrl = new URL(signedUrl)
+        formattedUrl.searchParams.set('t', new Date().toISOString())
+        const fileUrl = formattedUrl.toString()
 
-      // Also save it to cache
-      const fileCache = {
-        id: file.id,
-        url: fileUrl,
-        expiresIn: DEFAULT_EXPIRY,
-        fetchedAt: Date.now(),
+        // Also save it to cache
+        const fileCache = {
+          id: file.id,
+          url: fileUrl,
+          expiresIn: DEFAULT_EXPIRY,
+          fetchedAt: Date.now(),
+        }
+        this.addFileToPreviewCache(fileCache)
+        return fileUrl
+      } catch (error) {
+        console.error('Failed to get file URL', error)
+        return ''
       }
-      this.addFileToPreviewCache(fileCache)
-
-      return fileUrl
     }
   }
 
@@ -721,7 +725,7 @@ class StorageExplorerStore {
     this.clearSelectedItemsToMove()
   }
 
-  fetchFilePreview = async (fileName, expiresIn = 0) => {
+  fetchFilePreview = async (fileName, expiresIn = 0): Promise<string | null> => {
     const includeBucket = false
     const pathToFile = this.getPathAlongOpenedFolders(includeBucket)
     const formattedPathToFile = pathToFile.length > 0 ? `${pathToFile}/${fileName}` : fileName