devpush 0.0.0-stage → 1.0.0-beta.4

package/src/features/deployments/deployments-page.tsx

@@ -0,0 +1,376 @@
+import { navigateFilters } from '#devpush/lib/action-feedback'
+import { useParams, useRouter } from '@tanstack/react-router'
+import {
+  CircleCheckIcon,
+  CircleXIcon,
+  CircleAlertIcon,
+  Clock3Icon,
+  CloudUploadIcon,
+  LoaderIcon,
+} from 'lucide-react'
+
+import { Button } from '#devpush/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from '#devpush/components/ui/empty'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#devpush/components/ui/select'
+import { DeploymentList } from '#devpush/features/deployments/deployment-list'
+import { EnvironmentDot } from '#devpush/features/projects/environment-dot'
+import { ManualDeployDialog } from '#devpush/features/projects/manual-deploy-dialog'
+import {
+  getDeployBlockReason,
+  hasActiveDeployment,
+} from '#devpush/features/projects/deploy-readiness'
+import { ProjectHeading } from '#devpush/features/projects/project-heading'
+import type { ProjectContext } from '#devpush/server/projects/types'
+import { filterDeployments } from './deployment-filters'
+import type { DeploymentsSearch } from './deployment-filters'
+
+export function DeploymentsPage({
+  context,
+  filters,
+}: {
+  context: ProjectContext
+  filters: DeploymentsSearch
+}) {
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/deployments',
+  })
+  const deployBlockReason = getDeployBlockReason(context.environment)
+  const hasActiveDeploy = hasActiveDeployment(context.deployments)
+  const filteredDeployments = filterDeployments(context.deployments, filters)
+
+  return (
+    <>
+      <ProjectHeading
+        teamSlug={params.teamSlug}
+        project={context.project}
+        crumbs={[<span className="truncate">Deployments</span>]}
+        actions={
+          context.deployments.length > 0 ? (
+            <ManualDeployDialog
+              teamSlug={params.teamSlug}
+              projectName={params.projectName}
+              environments={context.environments}
+              hasActiveDeployment={hasActiveDeploy}
+              disabled={Boolean(deployBlockReason)}
+            >
+              <Button
+                disabled={Boolean(deployBlockReason)}
+                title={deployBlockReason ?? undefined}
+              >
+                <CloudUploadIcon data-icon="inline-start" />
+                Deploy
+              </Button>
+            </ManualDeployDialog>
+          ) : undefined
+        }
+      />
+      <section className="space-y-4">
+        <header>
+          <DeploymentFilters context={context} filters={filters} />
+        </header>
+        {filteredDeployments.length > 0 ? (
+          <DeploymentList
+            deployments={filteredDeployments}
+            teamSlug={context.team.slug}
+          />
+        ) : context.deployments.length > 0 ? (
+          <Empty className="min-h-60 border bg-card text-card-foreground">
+            <EmptyHeader>
+              <EmptyTitle>No matching deployments.</EmptyTitle>
+              <EmptyDescription>
+                Change or reset the filters to see other deployments.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <Empty className="min-h-60 border bg-card text-card-foreground">
+            <EmptyHeader>
+              <EmptyTitle>No deployments yet.</EmptyTitle>
+              <EmptyDescription>
+                Push code to your repository or trigger a deployment below.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <ManualDeployDialog
+                teamSlug={params.teamSlug}
+                projectName={params.projectName}
+                environments={context.environments}
+                hasActiveDeployment={hasActiveDeploy}
+                disabled={Boolean(deployBlockReason)}
+              >
+                <Button
+                  disabled={Boolean(deployBlockReason)}
+                  title={deployBlockReason ?? undefined}
+                >
+                  <CloudUploadIcon data-icon="inline-start" />
+                  Deploy
+                </Button>
+              </ManualDeployDialog>
+            </EmptyContent>
+          </Empty>
+        )}
+      </section>
+    </>
+  )
+}
+
+function DeploymentFilters({
+  context,
+  filters,
+}: {
+  context: ProjectContext
+  filters: DeploymentsSearch
+}) {
+  const router = useRouter()
+  const params = useParams({
+    from: '/$teamSlug/projects/$projectName/deployments',
+  })
+  const activeFilters = {
+    branch: filters.branch ?? 'all',
+    date: filters.date ?? 'all',
+    environment: filters.environment ?? 'all',
+    status: filters.status ?? 'all',
+  }
+  const environments = context.environments.map((environment) => ({
+    slug: environment.slug,
+    name: environment.name,
+    color: environment.color,
+  }))
+  const branches = Array.from(
+    new Set(
+      context.deployments
+        .map((deployment) => deployment.gitBranch)
+        .filter(Boolean),
+    ),
+  )
+  const hasFilters = Object.values(activeFilters).some(
+    (value) => value !== 'all',
+  )
+  const selectedEnvironmentLabel =
+    activeFilters.environment === 'all'
+      ? 'All environments'
+      : (environments.find(
+          (environment) => environment.slug === activeFilters.environment,
+        )?.name ?? 'All environments')
+  const selectedStatusLabel =
+    activeFilters.status === 'all'
+      ? 'All statuses'
+      : formatStatus(activeFilters.status)
+  const selectedDateLabel = formatDatePreset(activeFilters.date)
+  const selectedBranchLabel =
+    activeFilters.branch === 'all' ? 'All branches' : activeFilters.branch
+  const updateFilter = (name: keyof typeof activeFilters, value: string) => {
+    void navigateFilters(() =>
+      router.navigate({
+        to: '/$teamSlug/projects/$projectName/deployments',
+        params,
+        search: (current) => ({
+          ...current,
+          [name]: value === 'all' ? undefined : value,
+        }),
+      }),
+    )
+  }
+  const resetFilters = () => {
+    void navigateFilters(() =>
+      router.navigate({
+        to: '/$teamSlug/projects/$projectName/deployments',
+        params,
+        search: {},
+      }),
+    )
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Select
+        value={activeFilters.environment}
+        onValueChange={(value) => updateFilter('environment', value)}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            <EnvironmentFilterLabel
+              color={
+                environments.find(
+                  (environment) =>
+                    environment.slug === activeFilters.environment,
+                )?.color
+              }
+              label={selectedEnvironmentLabel}
+            />
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All environments</SelectItem>
+          {environments.map((environment) => (
+            <SelectItem value={environment.slug} key={environment.slug}>
+              <EnvironmentFilterLabel
+                color={environment.color}
+                label={environment.name}
+              />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Select
+        value={activeFilters.status}
+        onValueChange={(value) => updateFilter('status', value)}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            <StatusFilterLabel
+              status={activeFilters.status}
+              label={selectedStatusLabel}
+            />
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All statuses</SelectItem>
+          <SelectItem value="succeeded">
+            <StatusFilterLabel status="succeeded" label="Succeeded" />
+          </SelectItem>
+          <SelectItem value="failed">
+            <StatusFilterLabel status="failed" label="Failed" />
+          </SelectItem>
+          <SelectItem value="canceled">
+            <StatusFilterLabel status="canceled" label="Canceled" />
+          </SelectItem>
+          <SelectItem value="running">
+            <StatusFilterLabel status="running" label="Running" />
+          </SelectItem>
+          <SelectItem value="queued">
+            <StatusFilterLabel status="queued" label="Queued" />
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <Select
+        value={activeFilters.date}
+        onValueChange={(value) => updateFilter('date', value)}
+      >
+        <SelectTrigger>
+          <SelectValue>{selectedDateLabel}</SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All dates</SelectItem>
+          <SelectItem value="today">Today</SelectItem>
+          <SelectItem value="24h">Last 24 hours</SelectItem>
+          <SelectItem value="7d">Last 7 days</SelectItem>
+          <SelectItem value="30d">Last 30 days</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select
+        value={activeFilters.branch}
+        onValueChange={(value) => updateFilter('branch', value)}
+      >
+        <SelectTrigger>
+          <SelectValue>{selectedBranchLabel}</SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All branches</SelectItem>
+          {branches.map((branch) => (
+            <SelectItem value={branch} key={branch}>
+              {branch}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {hasFilters ? (
+        <Button variant="ghost" onClick={resetFilters}>
+          Reset filters
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+function EnvironmentFilterLabel({
+  color,
+  label,
+}: {
+  color?: string
+  label: string
+}) {
+  return (
+    <span className="flex items-center gap-2">
+      {color ? <EnvironmentDot color={color} /> : null}
+      {label}
+    </span>
+  )
+}
+
+function StatusFilterLabel({
+  label,
+  status,
+}: {
+  label: string
+  status: string
+}) {
+  return (
+    <span className="flex items-center gap-2">
+      <StatusFilterIcon status={status} />
+      {label}
+    </span>
+  )
+}
+
+function StatusFilterIcon({ status }: { status: string }) {
+  if (status === 'succeeded') {
+    return <CircleCheckIcon className="size-4 shrink-0 text-success" />
+  }
+
+  if (status === 'failed') {
+    return <CircleAlertIcon className="size-4 shrink-0 text-destructive" />
+  }
+
+  if (status === 'canceled') {
+    return <CircleXIcon className="size-4 shrink-0 text-muted-foreground" />
+  }
+
+  if (status === 'queued') {
+    return <Clock3Icon className="size-4 shrink-0 text-muted-foreground" />
+  }
+
+  if (status === 'running') {
+    return (
+      <LoaderIcon className="size-4 shrink-0 animate-spin text-muted-foreground" />
+    )
+  }
+
+  return null
+}
+
+function formatStatus(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+function formatDatePreset(value: string) {
+  if (value === 'today') {
+    return 'Today'
+  }
+
+  if (value === '24h') {
+    return 'Last 24 hours'
+  }
+
+  if (value === '7d') {
+    return 'Last 7 days'
+  }
+
+  if (value === '30d') {
+    return 'Last 30 days'
+  }
+
+  return 'All dates'
+}

package/src/features/logs/log-scroll-area.tsx

@@ -0,0 +1,69 @@
+import { useLayoutEffect, useRef } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+import { cn } from '#devpush/lib/utils'
+
+type LogScrollAreaProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode
+  followKey: string | number
+}
+
+const bottomThreshold = 8
+
+export function LogScrollArea({
+  children,
+  className,
+  followKey,
+  onScroll,
+  ...props
+}: LogScrollAreaProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const hasMountedRef = useRef(false)
+  const isAtBottomRef = useRef(true)
+
+  useLayoutEffect(() => {
+    const element = ref.current
+
+    if (!element) {
+      return
+    }
+
+    const shouldFollow = !hasMountedRef.current || isAtBottomRef.current
+    hasMountedRef.current = true
+
+    if (!shouldFollow) {
+      return
+    }
+
+    let frame = window.requestAnimationFrame(() => {
+      element.scrollTop = element.scrollHeight
+      frame = window.requestAnimationFrame(() => {
+        element.scrollTop = element.scrollHeight
+        isAtBottomRef.current = isScrolledToBottom(element)
+      })
+    })
+
+    return () => window.cancelAnimationFrame(frame)
+  }, [followKey])
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={cn('scrollbar overflow-y-auto', className)}
+      onScroll={(event) => {
+        isAtBottomRef.current = isScrolledToBottom(event.currentTarget)
+        onScroll?.(event)
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function isScrolledToBottom(element: HTMLDivElement) {
+  const distanceFromBottom =
+    element.scrollHeight - element.scrollTop - element.clientHeight
+
+  return distanceFromBottom <= bottomThreshold
+}

package/src/features/notifications/email-preferences.tsx

@@ -0,0 +1,232 @@
+import { useState, useRef } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { LoaderIcon } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '#devpush/components/ui/card'
+import {
+  Field,
+  FieldContent,
+  FieldLabel,
+  FieldDescription,
+  FieldGroup,
+} from '#devpush/components/ui/field'
+import { Switch } from '#devpush/components/ui/switch'
+import { Checkbox } from '#devpush/components/ui/checkbox'
+import { Button } from '#devpush/components/ui/button'
+import {
+  notificationCategories,
+  defaultNotificationPreferences,
+} from '#devpush/lib/notification-preferences'
+import type { NotificationScope } from '#devpush/lib/notification-preferences'
+import {
+  getNotificationPreferences,
+  updateNotificationPreferences,
+  getNotificationMute,
+  updateNotificationMute,
+} from '#devpush/server/notifications/functions'
+import { useEmailPreferenceContributions } from '#devpush/features/plugins/contributions'
+
+type Preferences = typeof defaultNotificationPreferences
+export function AccountEmailPreferences({ userId }: { userId: string }) {
+  const client = useQueryClient()
+  const key = ['notification-preferences', userId]
+  const query = useQuery({
+    queryKey: key,
+    queryFn: () => getNotificationPreferences(),
+  })
+  const [draft, setDraft] = useState<{
+    preferences: Preferences
+    version: number
+  } | null>(null)
+  const [pending, setPending] = useState(false)
+  const saving = useRef(false)
+  const extra = useEmailPreferenceContributions({ userId })
+  const value =
+    draft?.preferences ??
+    query.data?.preferences ??
+    defaultNotificationPreferences
+  const dirty = Boolean(
+    draft &&
+    JSON.stringify(draft.preferences) !==
+      JSON.stringify(query.data?.preferences),
+  )
+  const busy = pending || extra.pending
+  async function save() {
+    if (saving.current || busy || (!dirty && !extra.dirty)) return
+    saving.current = true
+    setPending(true)
+    try {
+      if (dirty && draft) {
+        const saved = await updateNotificationPreferences({ data: draft })
+        client.setQueryData(key, saved)
+        setDraft(null)
+      }
+      if (extra.dirty) await extra.save()
+      toast.success('Email preferences saved.')
+    } catch {
+      toast.error(
+        'Unable to save email preferences. Reload if they changed elsewhere.',
+      )
+    } finally {
+      saving.current = false
+      setPending(false)
+    }
+  }
+  return (
+    <Card id="email-preferences" className="scroll-mt-8">
+      <CardHeader className="border-b">
+        <CardTitle>Email preferences</CardTitle>
+        <CardDescription>
+          Choose which emails you receive. Workspace and project mutes apply to
+          operational alerts.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form
+          id="notification-preferences-form"
+          onSubmit={(event) => {
+            event.preventDefault()
+            void save()
+          }}
+        >
+          <FieldGroup>
+            {notificationCategories.map((category) => (
+              <Field key={category.id} orientation="horizontal">
+                <Checkbox
+                  id={`notification-${category.id}`}
+                  checked={value[category.id]}
+                  disabled={busy || !query.data}
+                  onCheckedChange={(checked) =>
+                    setDraft({
+                      preferences: {
+                        ...value,
+                        [category.id]: checked === true,
+                      },
+                      version: draft?.version ?? query.data!.version,
+                    })
+                  }
+                />
+                <FieldContent>
+                  <FieldLabel htmlFor={`notification-${category.id}`}>
+                    {category.label}
+                  </FieldLabel>
+                  <FieldDescription>{category.description}</FieldDescription>
+                </FieldContent>
+              </Field>
+            ))}
+            {extra.fields}
+          </FieldGroup>
+        </form>
+        {query.isError ? (
+          <p role="alert" className="mt-3 text-sm text-destructive">
+            Unable to load email preferences.{' '}
+            <button className="underline" onClick={() => void query.refetch()}>
+              Retry
+            </button>
+          </p>
+        ) : null}
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button
+          variant="ghost"
+          disabled={busy || (!dirty && !extra.dirty)}
+          onClick={() => {
+            setDraft(null)
+            extra.reset()
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          form="notification-preferences-form"
+          disabled={busy || (!dirty && !extra.dirty)}
+        >
+          {busy ? (
+            <LoaderIcon data-icon="inline-start" className="animate-spin" />
+          ) : null}
+          Save
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export function NotificationMute({ scope }: { scope: NotificationScope }) {
+  const saving = useRef(false)
+  const client = useQueryClient(),
+    key = ['notification-mute', scope.kind, scope.id]
+  const query = useQuery({
+    queryKey: key,
+    queryFn: () => getNotificationMute({ data: scope }),
+  })
+  const [draft, setDraft] = useState<boolean | null>(null),
+    [pending, setPending] = useState(false)
+  const value = draft ?? query.data?.muted ?? false
+  async function save(muted: boolean) {
+    if (saving.current || pending || !query.data) return
+    setDraft(muted)
+    saving.current = true
+    setPending(true)
+    try {
+      client.setQueryData(
+        key,
+        await updateNotificationMute({ data: { scope, muted } }),
+      )
+      setDraft(null)
+      toast.success('Notification preference saved.')
+    } catch {
+      setDraft(null)
+      toast.error('Unable to save notification preference.')
+    } finally {
+      saving.current = false
+      setPending(false)
+    }
+  }
+  const id = `mute-${scope.kind}`
+  return (
+    <Card id="notifications" className="scroll-mt-8">
+      <CardHeader className="border-b">
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>
+          Choose whether to receive email alerts for this {scope.kind}.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Field orientation="horizontal">
+          <Switch
+            id={id}
+            checked={value}
+            disabled={pending || !query.data}
+            onCheckedChange={(checked) => void save(checked)}
+          />
+          <FieldContent>
+            <FieldLabel htmlFor={id}>
+              Mute email notifications for this {scope.kind}
+            </FieldLabel>
+            <FieldDescription>
+              {scope.kind === 'project'
+                ? 'Stop emails about deployment failures, backup failures and domain issues for this project. A workspace mute also applies here.'
+                : 'Stop emails about deployment failures, backup failures, server alerts and other issues across this workspace and its projects.'}
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+        {query.isError ? (
+          <p role="alert" className="mt-3 text-sm text-destructive">
+            Unable to load preferences.{' '}
+            <button className="underline" onClick={() => void query.refetch()}>
+              Retry
+            </button>
+          </p>
+        ) : null}
+      </CardContent>
+    </Card>
+  )
+}