Skip to content

Feat: new onboarding card for API key visibility #2404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Feat: new onboarding card for API key visibility #2404

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
893e9b3
feat: add API key card
HarshMN2345 Sep 25, 2025
b81865e
improved layout of card
HarshMN2345 Sep 25, 2025
8f0376e
Add ApiEndpoint and API key components to key pages
HarshMN2345 Sep 26, 2025
6f8d3dd
Update src/routes/(console)/project-[region]-[project]/overview/api-k…
HarshMN2345 Sep 26, 2025
ea9de05
lint issue
HarshMN2345 Sep 26, 2025
ba5ab1a
improve onboarding mobile layout and add region tag to project header
HarshMN2345 Oct 2, 2025
3c716e4
Update src/routes/(console)/project-[region]-[project]/overview/heade…
HarshMN2345 Oct 2, 2025
910625d
changed copy
HarshMN2345 Oct 7, 2025
7b0cad0
Update regionEndpoint.svelte
HarshMN2345 Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/lib/components/apiEndpoint.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script lang="ts">
import { Copy } from '.';
import { Icon, Tag } from '@appwrite.io/pink-svelte';
import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import { getProjectEndpoint } from '$lib/helpers/project';
</script>

<Copy value={getProjectEndpoint()} copyText="Copy endpoint">
<Tag size="xs" variant="code">
<Icon icon={IconDuplicate} size="s" slot="start" />
<span style:white-space="nowrap" style:overflow="hidden" style:word-break="break-all">
API endpoint
</span>
</Tag>
</Copy>
1 change: 1 addition & 0 deletions src/lib/components/copy.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
disabled={tooltipDisabled}
portal={tooltipPortal}
delay={tooltipDelay}
maxWidth="500px"
placement={tooltipPlacement}>
<span
data-private
Expand Down
3 changes: 2 additions & 1 deletion src/lib/components/id.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,11 @@
export let tooltipPortal = false;
export let tooltipDelay: number = 0;
export let tooltipPlacement: TooltipPlacement = undefined;
export let copyText: string | undefined = undefined;
</script>

{#key value}
<Copy {value} {event} {tooltipPortal} {tooltipDelay} {tooltipPlacement}>
<Copy {value} {event} {tooltipPortal} {tooltipDelay} {tooltipPlacement} {copyText}>
<Tag size="xs" variant="code">
<Icon icon={IconDuplicate} size="s" slot="start" />
<span
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export { default as BottomSheet } from './bottom-sheet/index';
export { default as Confirm } from './confirm.svelte';
export { default as UsageCard } from './usageCard.svelte';
export { default as ViewToggle } from './viewToggle.svelte';
export { default as ApiEndpoint } from './apiEndpoint.svelte';
export { default as RegionEndpoint } from './regionEndpoint.svelte';
export { default as ExpirationInput } from './expirationInput.svelte';
export { default as EstimatedCard } from './estimatedCard.svelte';
Expand Down
48 changes: 24 additions & 24 deletions src/lib/components/regionEndpoint.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script lang="ts">
import { Copy } from '.';
import { sdk } from '$lib/stores/sdk';
import { Layout, Tag } from '@appwrite.io/pink-svelte';
import { Icon, Tag } from '@appwrite.io/pink-svelte';
import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import { Flag, type Models } from '@appwrite.io/console';
import { truncateText } from '$lib/components/id.svelte';
import { isValueOfStringEnum } from '$lib/helpers/types';
import { getProjectEndpoint } from '$lib/helpers/project';
Expand All @@ -21,28 +21,28 @@
</script>

{#if region}
<Copy value={getProjectEndpoint()} copyText="Copy endpoint">
<Tag size="xs" variant="default">
<Layout.Stack direction="row" gap="s" alignItems="center" inline>
{#if flagSrc}
<img
width={16}
height={12}
src={flagSrc}
alt={region?.name}
style:border-radius="2.5px" />
{/if}

<span
style:white-space="nowrap"
class="text u-line-height-1-5"
style:overflow="hidden"
style:word-break="break-all"
use:truncateText
style:font-family="unset">
{region?.name}
</span>
</Layout.Stack>
<Copy value={getProjectEndpoint()} copyText={`Copy API endpoint (${region.name})`}>
<Tag size="xs" variant="code">
<Icon icon={IconDuplicate} size="s" slot="start" />
<span class="endpoint-label"> API endpoint </span>
{#if flagSrc}
<img class="region-flag" src={flagSrc} alt={region?.name} />
{/if}
</Tag>
</Copy>
{/if}

<style>
.endpoint-label {
white-space: nowrap;
overflow: hidden;
word-break: break-all;
}
Comment on lines +35 to +40
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Fix CSS inconsistencies for better text overflow handling.

The .endpoint-label styles have two issues:

  1. word-break: break-all has no effect because white-space: nowrap prevents line breaking entirely.
  2. Missing text-overflow: ellipsis means truncated text will be cut off without visual indication (no "..." shown).

Apply this diff to improve text overflow handling:

 .endpoint-label {
     white-space: nowrap;
     overflow: hidden;
-    word-break: break-all;
+    text-overflow: ellipsis;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<style>
.endpoint-label {
white-space: nowrap;
overflow: hidden;
word-break: break-all;
}
<style>
.endpoint-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
🤖 Prompt for AI Agents 
In src/lib/components/regionEndpoint.svelte around lines 35–40, update the
.endpoint-label CSS so text truncation works correctly: remove the ineffective
word-break: break-all; keep white-space: nowrap and overflow: hidden, add
text-overflow: ellipsis, and ensure the element has a display that supports
ellipsis (e.g. display: block or display: inline-block). This will produce the
"..." when the text is truncated and avoid contradictory rules.

.region-flag {
width: 16px;
height: 12px;
border-radius: 2.5px;
margin-inline-start: 6px;
}
</style>
15 changes: 13 additions & 2 deletions src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

async function create() {
try {
const { $id } = await sdk.forConsole.projects.createKey({
const { $id, secret } = await sdk.forConsole.projects.createKey({
projectId,
name,
scopes,
Expand All @@ -45,7 +45,18 @@
);
addNotification({
message: `API key has been created`,
type: 'success'
type: 'success',
buttons: [
{
name: 'Copy API key',
method: () => navigator.clipboard.writeText(secret)
},
{
name: 'Copy endpoint',
method: () =>
navigator.clipboard.writeText(sdk.forConsole.client.config.endpoint)
}
]
});
} catch (error) {
addNotification({
Expand Down
22 changes: 22 additions & 0 deletions src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
import { page } from '$app/state';
import { Cover, CoverTitle } from '$lib/layout';
import { key } from './store';
import { RegionEndpoint, Copy } from '$lib/components';
import { Layout, Tag, Icon } from '@appwrite.io/pink-svelte';
import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import { projectRegion } from '../../../store';

const projectId = page.params.project;
</script>
Expand All @@ -12,5 +16,23 @@
<CoverTitle href={`${base}/project-${page.params.region}-${projectId}/overview/api-keys`}>
{$key?.name}
</CoverTitle>
<Layout.Stack direction="row" inline>
{#if $key?.secret}
<Copy value={$key.secret} copyText="Copy API secret">
<Tag size="xs" variant="code">
<Icon icon={IconDuplicate} size="s" slot="start" />
<span
style:white-space="nowrap"
style:overflow="hidden"
style:word-break="break-all">
API secret
</span>
</Tag>
</Copy>
{/if}
{#if $projectRegion}
<RegionEndpoint region={$projectRegion} />
{/if}
</Layout.Stack>
</svelte:fragment>
</Cover>
Binary file added ...utes/(console)/project-[region]-[project]/overview/assets/platform-sdk-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions src/routes/(console)/project-[region]-[project]/overview/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@
</span>
</Typography.Title>
<Layout.Stack direction="row" inline>
<Id value={$project.$id}>{$project.$id}</Id>
<RegionEndpoint region={$projectRegion} />
<Id value={$project.$id} copyText="Copy project ID">{$project.$id}</Id>
{#if $projectRegion}
<RegionEndpoint region={$projectRegion} />
{/if}
</Layout.Stack>
</Layout.Stack>
</svelte:fragment>
Expand Down
71 changes: 52 additions & 19 deletions src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@
import { app } from '$lib/stores/app';
import AuthPreview from './assets/auth-preview.svg';
import AuthPreviewDark from './assets/auth-preview-dark.svg';
import {
IconArrowRight,
IconNodeJs,
IconPhp,
IconPython
} from '@appwrite.io/pink-icons-svelte';
import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
import DatabaseImgSource from './assets/database.png';
import DatabaseImgSourceDark from './assets/database-dark.png';
import DiscordImgSource from './assets/discord.png';
Expand All @@ -31,9 +26,10 @@
import PlatformAndroidImgSourceDark from './assets/platform-android-dark.svg';
import PlatformFlutterImgSource from './assets/platform-flutter.svg';
import PlatformFlutterImgSourceDark from './assets/platform-flutter-dark.svg';
import PlatformSdkImgSource from './assets/platform-sdk.jpg';
import PlatformSdkImgSourceDark from './assets/platform-sdk-dark.png';
import { base } from '$app/paths';
import { isSmallViewport } from '$lib/stores/viewport';
import { AvatarGroup } from '$lib/components';
import type { Models } from '@appwrite.io/console';
import { getPlatformInfo } from '$lib/helpers/platform';
import { Click, trackEvent } from '$lib/actions/analytics';
Expand Down Expand Up @@ -103,7 +99,9 @@
</Layout.Stack>
</div>
<Layout.Stack gap="l">
<Layout.Stack gap="l" direction="row">
<Layout.Stack
gap="l"
direction={$isSmallViewport ? 'column' : 'row'}>
<Card.Button
on:click={() => {
openPlatformWizard(0, platformMap.get('Web'));
Expand Down Expand Up @@ -341,17 +339,34 @@
</Layout.Stack>
</Card.Button>
</Layout.Stack>
<Layout.Stack direction="row" gap="xxs" alignItems="center">
<Typography.Text>Or connect</Typography.Text>
<Link.Button variant="muted" on:click={createKey}
>server side</Link.Button>
<div style:padding-inline-start="8px">
<AvatarGroup
icons={[IconPython, IconNodeJs, IconPhp]}
total={7}
size="s" />
</div>
</Layout.Stack>
<span class="with-separators eyebrow-heading-3">or</span>

<Card.Button on:click={createKey} padding="none">
<Layout.Stack gap="xl">
<div
class="card-top-image api-key-card-image"
style:background-image={`url('${
$app.themeInUse === 'dark'
? PlatformSdkImgSourceDark
: PlatformSdkImgSource
}')`}>
<Layout.Stack
direction="row"
alignItems="center"
justifyContent="space-between">
<Layout.Stack gap="xxs">
<Typography.Title size="s"
>Create API key</Typography.Title>
<Typography.Text
>Connect your server or backend to Appwrite</Typography.Text>
</Layout.Stack>
<div class="arrow-icon">
<Icon icon={IconArrowRight} size="s" />
</div>
</Layout.Stack>
</div>
</Layout.Stack>
</Card.Button>
</Layout.Stack>
</Layout.Stack></Step.Item>
<Step.Item state="next"
Expand Down Expand Up @@ -684,6 +699,24 @@
background-position: bottom;
background-repeat: no-repeat;
}
.api-key-card-image {
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
margin: 0;
width: 100%;
height: 100%;
min-height: 160px;
border-radius: var(--border-radius-m);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: var(--base-16, 16px);
@media (min-width: 1200px) {
min-height: 187px;
}
}
.full-height-card {
height: 100%;
}
Expand Down