devpush 0.0.0-stage → 1.0.0-beta.3

package/src/features/onboarding/profile-onboarding.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react'
+import { useProfileContributions } from '#devpush/features/plugins/contributions'
+import { Button } from '#devpush/components/ui/button'
+import { Input } from '#devpush/components/ui/input'
+import { Field, FieldLabel } from '#devpush/components/ui/field'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '#devpush/components/ui/card'
+import { ArrowRightIcon, LoaderCircleIcon } from 'lucide-react'
+import { ProfilePicture } from '#devpush/features/users/profile-picture'
+import { useAvatarInput } from '#devpush/lib/use-avatar-input'
+import { getErrorMessage } from '#devpush/lib/error-message'
+import { onboardingDestination } from '#devpush/lib/onboarding'
+import { confirmProfile } from '#devpush/server/users/onboarding'
+import type { AuthUserContext } from '#devpush/server/auth/context'
+
+export function ProfileOnboarding({
+  context,
+  destination,
+}: {
+  context: NonNullable<AuthUserContext>
+  destination?: string
+}) {
+  const { user, defaultTeam } = context
+  const [name, setName] = useState(user.name)
+  const [version, setVersion] = useState(user.settingsVersion)
+  const [removed, setRemoved] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const avatar = useAvatarInput()
+  const extra = useProfileContributions({ userId: user.id })
+  const image = removed ? null : (avatar.dataUrl ?? user.image)
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    if (busy || avatar.pending) return
+    setBusy(true)
+    setError('')
+    try {
+      const saved = await confirmProfile({
+        data: {
+          settingsVersion: version,
+          name,
+          username: user.username,
+          avatarDataUrl: avatar.dataUrl,
+          deleteAvatar: removed,
+        },
+      })
+      setVersion(saved.settingsVersion)
+      await extra.complete()
+      const next = onboardingDestination(destination, defaultTeam.slug)
+      window.location.assign(next)
+    } catch (cause) {
+      setError(getErrorMessage(cause, 'Unable to save your profile.'))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <main className="flex min-h-dvh items-center justify-center p-4 md:p-6">
+      <form
+        className="w-full max-w-sm"
+        aria-label="Confirm your details"
+        onSubmit={(event) => void submit(event)}
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h1>Confirm your details</h1>
+            </CardTitle>
+            <CardDescription>
+              Check your name and picture before you continue.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <Field orientation="horizontal" className={fieldClassName}>
+              <FieldLabel htmlFor="profile-picture">Picture</FieldLabel>
+              <ProfilePicture
+                image={image}
+                name={name}
+                email={user.email}
+                disabled={busy}
+                processing={avatar.pending}
+                onChange={(value) => {
+                  setRemoved(value === null)
+                  avatar.setDataUrl(value === user.image ? null : value)
+                }}
+                onFile={async (file) => {
+                  setError('')
+                  if (
+                    !['image/png', 'image/jpeg', 'image/webp'].includes(
+                      file.type,
+                    )
+                  ) {
+                    setError('Upload a PNG, JPEG, or WebP image.')
+                    return
+                  }
+                  if (file.size > 2 * 1024 * 1024) {
+                    setError('Avatars must be 2 MB or smaller.')
+                    return
+                  }
+                  try {
+                    await avatar.read(file)
+                    setRemoved(false)
+                  } catch (cause) {
+                    setError(getErrorMessage(cause, 'Unable to read picture.'))
+                  }
+                }}
+              />
+            </Field>
+            <Field orientation="horizontal" className={fieldClassName}>
+              <FieldLabel htmlFor="profile-name">Display name</FieldLabel>
+              <Input
+                id="profile-name"
+                autoComplete="name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                required
+                maxLength={256}
+                disabled={busy}
+              />
+            </Field>
+            <Field orientation="horizontal" className={fieldClassName}>
+              <FieldLabel htmlFor="profile-email">Email</FieldLabel>
+              <Input
+                id="profile-email"
+                className="text-muted-foreground"
+                value={user.email}
+                readOnly
+                type="email"
+              />
+            </Field>
+            {extra.fields}
+            {error ? (
+              <p role="alert" className="text-sm text-destructive">
+                {error}
+              </p>
+            ) : null}
+          </CardContent>
+          <CardFooter className="justify-end">
+            <Button disabled={busy || avatar.pending || !name.trim()}>
+              Continue
+              {busy ? (
+                <LoaderCircleIcon
+                  className="animate-spin"
+                  data-icon="inline-end"
+                />
+              ) : (
+                <ArrowRightIcon data-icon="inline-end" />
+              )}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </main>
+  )
+}
+const fieldClassName = 'grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-3'

package/src/features/plugins/contributions.tsx

@@ -0,0 +1,118 @@
+import registered from '#devpush/plugins/registered-client'
+import { pluginApiVersion } from '#devpush/plugins/version'
+import type {
+  ClientPlugin,
+  ClientPluginEntry,
+  WorkspacePluginProps,
+} from '#devpush/plugins/client'
+
+const plugins: readonly ClientPluginEntry[] = registered
+const ids = new Set<string>()
+for (const { id, implementation } of plugins) {
+  if (ids.has(id)) throw new Error(`Duplicate client plugin: ${id}`)
+  ids.add(id)
+  if ((implementation.apiVersion as number) !== pluginApiVersion)
+    throw new Error(`Incompatible client plugin: ${id}`)
+}
+function exclusive<TKey extends 'profile' | 'emailPreferences'>(
+  key: TKey,
+): ClientPlugin[TKey] {
+  const matches = plugins.filter(({ implementation }) => implementation[key])
+  if (matches.length > 1)
+    throw new Error(
+      `Conflicting ${key} contributions: ${matches.map(({ id }) => id).join(', ')}`,
+    )
+  return matches[0]?.implementation[key]
+}
+const useProfileFields =
+  exclusive('profile')?.useFields ??
+  (() => ({ fields: null, complete: async () => {} }))
+
+export function useProfileContributions(input: { userId: string }) {
+  return useProfileFields(input)
+}
+export function WorkspacePluginContributions({
+  place,
+  ...scope
+}: WorkspacePluginProps & { place: 'header' | 'notice' }) {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.workspace?.[place]
+    return Component ? <Component key={id} {...scope} /> : null
+  })
+}
+const setupProviders = plugins.filter(
+  ({ implementation }) => implementation.workspace?.useServerSetup,
+)
+if (setupProviders.length > 1)
+  throw new Error('Conflicting server setup contributions.')
+const useServerSetup =
+  setupProviders[0]?.implementation.workspace?.useServerSetup ??
+  (() => ({ fields: null, ready: true }))
+export function useWorkspaceServerSetup(input: { teamSlug: string }) {
+  return useServerSetup(input)
+}
+export const workspaceSettingsNavigation = plugins.flatMap(
+  ({ implementation }) => implementation.workspace?.settings?.navigation ?? [],
+)
+export const accountSettingsNavigation = plugins.flatMap(
+  ({ implementation }) => implementation.account?.navigation ?? [],
+)
+export function WorkspaceSettingsContributions(props: WorkspacePluginProps) {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.workspace?.settings?.Content
+    return Component ? <Component key={id} {...props} /> : null
+  })
+}
+export function WorkspaceSettingsPending() {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.workspace?.settings?.Pending
+    return Component ? <Component key={id} /> : null
+  })
+}
+export function AccountSettingsContributions(props: { userId: string }) {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.account?.Content
+    return Component ? <Component key={id} {...props} /> : null
+  })
+}
+export function AccountSettingsPending() {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.account?.Pending
+    return Component ? <Component key={id} /> : null
+  })
+}
+export function requestWorkspaceAction(input: {
+  teamSlug: string
+  error: unknown
+}) {
+  return plugins.some(
+    ({ implementation }) =>
+      implementation.workspace?.requestAction?.(input) ?? false,
+  )
+}
+export function hasWorkspaceOnboarding() {
+  return plugins.some(
+    ({ implementation }) => implementation.workspace?.onboarding,
+  )
+}
+export function WorkspaceOnboarding(
+  props: WorkspacePluginProps & { onContinue: () => void },
+) {
+  return plugins.map(({ id, implementation }) => {
+    const Component = implementation.workspace?.onboarding
+    return Component ? <Component key={id} {...props} /> : null
+  })
+}
+
+const useEmailPreferenceFields =
+  exclusive('emailPreferences')?.useFields ??
+  (() => ({
+    fields: null,
+    dirty: false,
+    pending: false,
+    save: async () => {},
+    reset: () => {},
+  }))
+export function useEmailPreferenceContributions(input: { userId: string }) {
+  return useEmailPreferenceFields(input)
+}

package/src/features/projects/backup-job-logs.tsx

@@ -0,0 +1,143 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { operationLogsQueryOptions } from '#devpush/lib/operation-logs-query'
+import { useEffect, useState, useMemo } from 'react'
+import { AlertCircleIcon, LoaderIcon } from 'lucide-react'
+import { Alert, AlertDescription } from '#devpush/components/ui/alert'
+import { Button } from '#devpush/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '#devpush/components/ui/dialog'
+import { LogScrollArea } from '#devpush/features/logs/log-scroll-area'
+
+export function BackupJobLogs({
+  operation,
+  teamSlug,
+  onClose,
+}: {
+  operation: {
+    type: 'backup' | 'restore'
+    id: string
+    errorMessage: string | null
+  } | null
+  teamSlug: string
+  onClose: () => void
+}) {
+  const [lastOperation, setLastOperation] = useState(operation)
+  if (operation && operation !== lastOperation) setLastOperation(operation)
+  const displayedOperation = operation ?? lastOperation
+  return (
+    <Dialog
+      open={operation !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+    >
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>
+            {displayedOperation?.type === 'restore'
+              ? 'Restore logs'
+              : 'Backup logs'}
+          </DialogTitle>
+          <DialogDescription>
+            Output from this{' '}
+            {displayedOperation?.type === 'restore' ? 'restore' : 'backup'}{' '}
+            operation. Logs are retained for up to 14 days.
+          </DialogDescription>
+        </DialogHeader>
+        {displayedOperation ? (
+          <JobLogViewer
+            key={`${displayedOperation.type}:${displayedOperation.id}`}
+            operation={displayedOperation}
+            teamSlug={teamSlug}
+            active={operation !== null}
+          />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  )
+}
+function JobLogViewer({
+  operation,
+  active,
+  teamSlug,
+}: {
+  operation: {
+    type: 'backup' | 'restore'
+    id: string
+    errorMessage: string | null
+  }
+  active: boolean
+  teamSlug: string
+}) {
+  const client = useQueryClient()
+  const options = useMemo(
+    () =>
+      operationLogsQueryOptions(
+        { teamSlug, type: operation.type, id: operation.id },
+        client,
+      ),
+    [teamSlug, operation.type, operation.id, client],
+  )
+  const query = useQuery({ ...options, enabled: active })
+  const content = query.data?.content ?? ''
+  const loading = query.isPending
+  const message = query.error instanceof Error ? query.error.message : null
+  useEffect(() => {
+    if (!active)
+      void client.cancelQueries({ queryKey: options.queryKey, exact: true })
+  }, [active, client, options.queryKey])
+  return (
+    <div className="space-y-3">
+      {operation.errorMessage ? (
+        <Alert variant="destructive">
+          <AlertCircleIcon />
+          <AlertDescription>{operation.errorMessage}</AlertDescription>
+        </Alert>
+      ) : null}
+      {message ? (
+        <Alert>
+          <AlertCircleIcon />
+          <AlertDescription>
+            {message}{' '}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void query.refetch()}
+            >
+              Retry
+            </Button>
+          </AlertDescription>
+        </Alert>
+      ) : null}
+      <LogScrollArea
+        className="h-96 rounded-lg border bg-background p-4"
+        followKey={content.length}
+      >
+        {content ? (
+          <pre className="whitespace-pre-wrap break-words font-mono text-xs">
+            {content}
+          </pre>
+        ) : (
+          <div
+            className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground"
+            role="status"
+          >
+            {loading ? (
+              <>
+                <LoaderIcon className="size-4 shrink-0 animate-spin" />
+                Loading logs
+              </>
+            ) : (
+              'No log output available.'
+            )}
+          </div>
+        )}
+      </LogScrollArea>
+    </div>
+  )
+}

package/src/features/projects/backup-policy-delete-dialog.tsx

@@ -0,0 +1,82 @@
+import { mutationErrorOptions } from '#devpush/lib/action-feedback'
+import { toast } from 'sonner'
+import { showSettingsConflict } from '#devpush/lib/settings-conflict'
+import { useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '#devpush/components/ui/alert-dialog'
+import { getPublicErrorMessage } from '#devpush/lib/public-error'
+
+export function BackupPolicyDeleteDialog({
+  name,
+  open,
+  onOpenChange,
+  onDelete,
+}: {
+  name: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onDelete: () => Promise<void>
+}) {
+  const [pending, setPending] = useState(false)
+  async function submit() {
+    if (pending) return
+    setPending(true)
+
+    try {
+      await onDelete()
+      onOpenChange(false)
+    } catch (cause) {
+      if (showSettingsConflict(cause)) return
+      toast.error(
+        getPublicErrorMessage(
+          cause,
+          'Unable to delete backup policy. Please try again.',
+        ),
+        ...mutationErrorOptions(cause),
+      )
+    } finally {
+      setPending(false)
+    }
+  }
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!pending) {
+          onOpenChange(next)
+        }
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete {name}?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This removes the backup policy and stops its scheduled backups.
+            Existing backup runs are kept.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            disabled={pending}
+            onClick={(event) => {
+              event.preventDefault()
+              void submit()
+            }}
+          >
+            Delete policy
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}