Skip to content

Commit 16a09b7

Browse files
aanttiaantti
authored
fix(self-hosted): improve UI copy, cards, and timestamp display for edfn (supabase#46175)
1 parent 6f694ca commit 16a09b7

5 files changed

Lines changed: 80 additions & 104 deletions

File tree

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -99,18 +99,26 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
9999
</div>
100100
</TableCell>
101101
<TableCell className="hidden 2xl:table-cell whitespace-nowrap">
102-
<TimestampInfo
103-
className="text-sm text-foreground-light whitespace-nowrap"
104-
utcTimestamp={item.created_at}
105-
label={dayjs(item.created_at).fromNow()}
106-
/>
102+
{item.created_at ? (
103+
<TimestampInfo
104+
className="text-sm text-foreground-light whitespace-nowrap"
105+
utcTimestamp={item.created_at}
106+
label={dayjs(item.created_at).fromNow()}
107+
/>
108+
) : (
109+
<span className="text-sm text-foreground-light">–</span>
110+
)}
107111
</TableCell>
108112
<TableCell className="lg:table-cell">
109-
<TimestampInfo
110-
className="text-sm text-foreground-light whitespace-nowrap"
111-
utcTimestamp={item.updated_at}
112-
label={dayjs(item.updated_at).fromNow()}
113-
/>
113+
{item.updated_at ? (
114+
<TimestampInfo
115+
className="text-sm text-foreground-light whitespace-nowrap"
116+
utcTimestamp={item.updated_at}
117+
label={dayjs(item.updated_at).fromNow()}
118+
/>
119+
) : (
120+
<span className="text-sm text-foreground-light">–</span>
121+
)}
114122
</TableCell>
115123
{showLastHourStats && (
116124
<>

‎apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx‎

Lines changed: 39 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useParams } from 'common'
2-
import { Code, Github, Play, Server, Terminal } from 'lucide-react'
2+
import { Code, Play, Terminal } from 'lucide-react'
33
import Link from 'next/link'
44
import { useRouter } from 'next/router'
55
import { parseAsString, useQueryState } from 'nuqs'
@@ -205,7 +205,7 @@ export const FunctionsInstructionsLocal = () => {
205205
<div className="flex flex-col gap-y-4">
206206
<Card>
207207
<CardHeader>
208-
<CardTitle>Developing Edge Functions locally</CardTitle>
208+
<CardTitle>Developing Edge Functions with the CLI</CardTitle>
209209
</CardHeader>
210210
<CardContent
211211
className={cn(
@@ -241,7 +241,7 @@ export const FunctionsInstructionsLocal = () => {
241241
<div className="p-8">
242242
<div className="flex items-center gap-2">
243243
<Play size={20} />
244-
<h4 className="text-base text-foreground">Run Edge Functions locally</h4>
244+
<h4 className="text-base text-foreground">Run Edge Functions</h4>
245245
</div>
246246
<p className="text-sm text-foreground-light mt-1 mb-4 prose [&>code]:text-xs text-sm max-w-full">
247247
You can run your Edge Function locally using <code>supabase functions serve</code>.
@@ -266,7 +266,7 @@ supabase functions serve # start the Functions watcher`.trim()}
266266
<div className="p-8">
267267
<div className="flex items-center gap-2">
268268
<Terminal strokeWidth={1.5} size={20} />
269-
<h4 className="text-base text-foreground">Invoke Edge Functions locally</h4>
269+
<h4 className="text-base text-foreground">Invoke Edge Functions</h4>
270270
</div>
271271
<p className="text-sm text-foreground-light mt-1 mb-4">
272272
While serving your local Edge Functions, you can invoke it using cURL or one of the
@@ -295,25 +295,20 @@ curl --request POST 'http://localhost:54321/functions/v1/hello-world' \\
295295

296296
<Card>
297297
<CardHeader>
298-
<CardTitle>Self-hosting Edge Functions</CardTitle>
298+
<CardTitle>Self-hosted Supabase</CardTitle>
299299
</CardHeader>
300300
<CardContent className="p-0 grid grid-cols-[repeat(auto-fit,minmax(240px,1fr))] divide-y md:divide-y-0 md:divide-x divide-default items-stretch">
301301
<div className="p-8">
302-
<div className="flex items-center gap-2">
303-
<Server size={20} />
304-
<h4 className="text-base text-foreground">Self-hosting Edge Functions</h4>
305-
</div>
306-
<p className="text-sm text-foreground-light mt-1 mb-4 max-w-3xl">
307-
Supabase Edge Runtime consists of a web server based on the Deno runtime, capable of
308-
running Javascript, Typescript, and WASM services. You may self-host edge functions
309-
on providers like Fly.io, Digital Ocean, or AWS.
302+
<p className="text-sm text-foreground-light mt-1 mb-4">
303+
Edge Functions are available in self-hosted Supabase via Supabase Edge Runtime.
304+
Unlike the platform, functions must be added manually — place each function at{' '}
305+
<code className="text-code-inline">
306+
volumes/functions/&lt;function-name&gt;/index.ts
307+
</code>{' '}
308+
and restart the <code className="text-code-inline">functions</code> service to pick
309+
up changes. See the guide to learn more about configuration, secrets, and routing.
310310
</p>
311-
<div className="flex items-center gap-x-2">
312-
<DocsButton href={`${DOCS_URL}/reference/self-hosting-functions/introduction`} />
313-
<Button asChild type="default" icon={<Github />}>
314-
<a href="https://github.com/supabase/edge-runtime/">GitHub</a>
315-
</Button>
316-
</div>
311+
<DocsButton href={`${DOCS_URL}/guides/self-hosting/self-hosted-functions`} />
317312
</div>
318313
</CardContent>
319314
</Card>
@@ -362,71 +357,44 @@ export const FunctionsSecretsEmptyStateLocal = () => {
362357
return (
363358
<>
364359
<Card>
365-
<CardHeader className="flex-row items-center justify-between">
366-
Local development & CLI
367-
<div className="flex items-center gap-x-2">
368-
<DocsButton href={`${DOCS_URL}/guides/functions/secrets#using-the-cli`} />
369-
</div>
360+
<CardHeader>
361+
<CardTitle>Local development & CLI</CardTitle>
370362
</CardHeader>
371363
<CardContent>
372-
<div className="text-sm text-foreground-light mt-1 mb-4 max-w-3xl">
373-
<p>
374-
Local secrets and environment variables can be loaded in either of the following two
375-
ways
376-
</p>
377-
<ul className="list-disc pl-6">
378-
<li className="prose [&>code]:text-xs text-sm max-w-full">
379-
Through an <code>.env</code> file placed at <code>supabase/functions/.env</code>,
380-
which is automatically loaded on <code>supabase start</code>
364+
<div className="text-sm text-foreground-light mb-4">
365+
<p className="mb-2">Secrets can be loaded in two ways:</p>
366+
<ul className="list-disc pl-6 space-y-1">
367+
<li>
368+
Place a <code className="text-code-inline">.env</code> file at{' '}
369+
<code className="text-code-inline">supabase/functions/.env</code> — picked up
370+
automatically on <code className="text-code-inline">supabase start</code>.
381371
</li>
382-
<li className="prose [&>code]:text-xs text-sm max-w-full">
383-
Through the <code>--env-file</code> option for <code>supabase functions serve</code>
384-
, for example: <code>supabase functions serve --env-file ./path/to/.env-file</code>
372+
<li>
373+
Pass <code className="text-code-inline">--env-file</code> to{' '}
374+
<code className="text-code-inline">supabase functions serve</code>, e.g.{' '}
375+
<code className="text-code-inline">
376+
supabase functions serve --env-file ./path/to/.env-file
377+
</code>
385378
</li>
386379
</ul>
387380
</div>
381+
<DocsButton href={`${DOCS_URL}/guides/functions/secrets#using-the-cli`} />
388382
</CardContent>
389383
</Card>
390384

391385
<Card>
392-
<CardHeader className="flex-row items-center justify-between">
393-
Self-Hosted Supabase
394-
<div className="flex items-center gap-x-2">
395-
<DocsButton href={`${DOCS_URL}/guides/self-hosting/docker#configuring-services`} />
396-
</div>
386+
<CardHeader>
387+
<CardTitle>Self-Hosted Supabase</CardTitle>
397388
</CardHeader>
398389
<CardContent>
399-
<p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
400-
<span>Change settings in</span>
401-
<a
402-
target="_blank"
403-
rel="noopener noreferrer"
404-
href="https://github.com/supabase/supabase/blob/master/docker/.env.example"
405-
>
406-
.env file
407-
</a>
408-
<span>and</span>
409-
<a
410-
target="_blank"
411-
rel="noopener noreferrer"
412-
href="https://github.com/supabase/supabase/blob/master/docker/docker-compose.yml"
413-
>
414-
docker-compose.yml
415-
</a>
416-
<span>at</span>
417-
<code>functions</code>
418-
<span>service</span>
419-
</p>
420-
<p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
421-
<span>Secrets can also be loaded at runtime by injecting them into</span>
422-
<a
423-
target="_blank"
424-
rel="noopener noreferrer"
425-
href="https://github.com/supabase/supabase/blob/8bb82bb3a5aee631e8e6e6e0c8a5f6e97fb8f898/docker/volumes/functions/main/index.ts#L74"
426-
>
427-
main/index.ts file
428-
</a>
390+
<p className="text-sm text-foreground-light mb-4">
391+
Configure secrets in your <code className="text-code-inline">.env</code> file and{' '}
392+
<code className="text-code-inline">docker-compose.yml</code> under the{' '}
393+
<code className="text-code-inline">functions</code> service.
429394
</p>
395+
<DocsButton
396+
href={`${DOCS_URL}/guides/self-hosting/self-hosted-functions#custom-environment-variables`}
397+
/>
430398
</CardContent>
431399
</Card>
432400
</>

‎apps/studio/components/interfaces/Settings/Database/SettingsDatabaseEmptyStateLocal.tsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, CardContent, CardHeader } from 'ui'
1+
import { Card, CardContent, CardHeader, CardTitle } from 'ui'
22

33
import { DocsButton } from '@/components/ui/DocsButton'
44
import { DOCS_URL } from '@/lib/constants'
@@ -7,48 +7,46 @@ export function SettingsDatabaseEmptyStateLocal() {
77
return (
88
<>
99
<Card>
10-
<CardHeader className="flex-row items-center justify-between">
11-
Local development & CLI
12-
<div className="flex items-center gap-x-2">
13-
<DocsButton href={`${DOCS_URL}/guides/local-development/cli/config#database-config`} />
14-
</div>
10+
<CardHeader>
11+
<CardTitle>Local development & CLI</CardTitle>
1512
</CardHeader>
1613
<CardContent>
17-
<p className="prose [&>code]:text-xs text-sm max-w-full">
18-
Change settings in <code>supabase/config.toml</code> file, which is automatically loaded
19-
on <code>supabase start</code>
14+
<p className="text-sm text-foreground-light mb-4">
15+
Configure database settings in{' '}
16+
<code className="text-code-inline">supabase/config.toml</code> — applied automatically
17+
on <code className="text-code-inline">supabase start</code>.
2018
</p>
19+
<DocsButton href={`${DOCS_URL}/guides/local-development/cli/config#database-config`} />
2120
</CardContent>
2221
</Card>
2322

2423
<Card>
25-
<CardHeader className="flex-row items-center justify-between">
26-
Self-Hosted Supabase
27-
<div className="flex items-center gap-x-2">
28-
<DocsButton
29-
href={`${DOCS_URL}/guides/self-hosting/docker#configuring-and-securing-supabase`}
30-
/>
31-
</div>
24+
<CardHeader>
25+
<CardTitle>Self-Hosted Supabase</CardTitle>
3226
</CardHeader>
3327
<CardContent>
34-
<p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
35-
<span>Change settings in</span>
28+
<p className="text-sm text-foreground-light mb-4">
29+
Change settings in{' '}
3630
<a
3731
target="_blank"
3832
rel="noopener noreferrer"
3933
href="https://github.com/supabase/supabase/blob/master/docker/.env.example"
4034
>
4135
.env file
42-
</a>
43-
<span>and</span>
36+
</a>{' '}
37+
and{' '}
4438
<a
4539
target="_blank"
4640
rel="noopener noreferrer"
4741
href="https://github.com/supabase/supabase/blob/master/docker/docker-compose.yml"
4842
>
4943
docker-compose.yml
5044
</a>
45+
.
5146
</p>
47+
<DocsButton
48+
href={`${DOCS_URL}/guides/self-hosting/docker#configuring-and-securing-supabase`}
49+
/>
5250
</CardContent>
5351
</Card>
5452
</>

‎apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IS_PLATFORM, useFlag } from 'common'
1+
import { useFlag } from 'common'
22
import { BookOpen, Check, ChevronDown, ChevronsUpDown, Copy, ExternalLink, X } from 'lucide-react'
33
import Link from 'next/link'
44
import { ReactNode, useEffect, useState } from 'react'
@@ -129,7 +129,7 @@ const LogsQueryPanel = ({
129129
</DropdownMenuContent>
130130
</DropdownMenu>
131131

132-
{IS_PLATFORM && logsTemplates && (
132+
{logsTemplates && (
133133
<DropdownMenu>
134134
<DropdownMenuTrigger asChild>
135135
<Button type="default" iconRight={<ChevronDown />}>

‎apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,9 @@ export function LogsSidebarMenuV2() {
339339
<InnerSideBarEmptyPanel
340340
className="mx-4"
341341
title="No queries created yet"
342-
description="Create and save your queries to use them in the explorer"
342+
description={
343+
IS_PLATFORM ? 'Create and save your queries to use them in the explorer' : undefined
344+
}
343345
actions={
344346
<Button asChild type="default">
345347
<Link href={`/project/${ref}/logs/explorer`}>Create query</Link>

0 commit comments

Comments
 (0)