From 96d296d79b44f197517eba8ed21aa35dc43a2d62 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 3 Jan 2024 14:53:40 +0700 Subject: [PATCH] Add validations whenever using new URL (#20124) * Add validations whenever using new URL * Update based on feedback --- .../Database/Hooks/HTTPRequestFields.tsx | 2 +- .../Database/Hooks/HooksList/HookList.tsx | 2 +- .../Functions/EdgeFunctionsListItem.tsx | 3 +- .../Functions/TerminalInstructions.tsx | 2 +- .../FunctionInvocationSelectionRender.tsx | 13 ++++---- .../storageExplorer/StorageExplorerStore.ts | 30 +++++++++++-------- 6 files changed, 28 insertions(+), 24 deletions(-) diff --git a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx index c860d8f08f1..8b9041ec3d3 100644 --- a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx +++ b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx @@ -104,7 +104,7 @@ const HTTPRequestFields = ({ {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 ( diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx index 5d1436ec0cd..5f6fc8520da 100644 --- a/apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx +++ b/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) => diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx index 5b7987fef16..0628894be4e 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx +++ b/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 = diff --git a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx b/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx index 6cf03080411..0249d62f150 100644 --- a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx +++ b/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[] = [ { diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx index 6f5feab61a3..da1521fdfb6 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx +++ b/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 }) => - + {requestUrl !== undefined && ( + + )}

Request Metadata

diff --git a/apps/studio/localStores/storageExplorer/StorageExplorerStore.ts b/apps/studio/localStores/storageExplorer/StorageExplorerStore.ts index 7cf42cc137e..b9900136b62 100644 --- a/apps/studio/localStores/storageExplorer/StorageExplorerStore.ts +++ b/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 => { const includeBucket = false const pathToFile = this.getPathAlongOpenedFolders(includeBucket) const formattedPathToFile = pathToFile.length > 0 ? `${pathToFile}/${fileName}` : fileName