devpush 0.0.0-stage → 1.0.0-beta.3

package/src/features/projects/backup-target-list.tsx

@@ -0,0 +1,222 @@
+import { BackupVolumePicker } from './backup-volume-picker'
+import { ProjectSettingsActionTooltip } from './project-settings-section'
+import { ComposeServiceInput } from './compose-service-input'
+import { PlusIcon, TrashIcon } from 'lucide-react'
+import { Button } from '#devpush/components/ui/button'
+import { Field, FieldLabel, FieldError } from '#devpush/components/ui/field'
+import { Input } from '#devpush/components/ui/input'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '#devpush/components/ui/select'
+import {
+  Empty,
+  EmptyHeader,
+  EmptyContent,
+  EmptyTitle,
+  EmptyDescription,
+} from '#devpush/components/ui/empty'
+import { backupDatabaseEngines } from '#devpush/lib/backup-database'
+import type { BackupDatabase } from '#devpush/lib/backup-database'
+import type { ProjectBackupConfig } from '#devpush/server/projects/types'
+import type { FormErrors } from '#devpush/lib/form-errors'
+
+type Volumes = ProjectBackupConfig['volumes']
+type Dumps = ProjectBackupConfig['databaseDumps']
+export function BackupTargetList({
+  kind,
+  volumes,
+  dumps,
+  volumeOptions,
+  serviceOptions,
+  onVolumesChange,
+  onDumpsChange,
+  errors,
+}: {
+  kind: 'volumes' | 'databases'
+  volumes: Volumes
+  dumps: Dumps
+  volumeOptions: string[]
+  serviceOptions: string[]
+  onVolumesChange: (value: Volumes) => void
+  onDumpsChange: (value: Dumps) => void
+  errors: FormErrors
+}) {
+  function addDump() {
+    onDumpsChange([...dumps, { service: '', engine: 'postgres', database: '' }])
+  }
+  const visibleDumps = kind === 'databases' ? dumps : []
+  const empty = visibleDumps.length === 0
+  const addAction = (
+    <Button type="button" variant="outline" onClick={addDump}>
+      <PlusIcon data-icon="inline-start" />
+      {kind === 'volumes' ? 'Add volume' : 'Add database'}
+    </Button>
+  )
+  if (kind === 'volumes')
+    return (
+      <div className="space-y-4">
+        <BackupVolumePicker
+          value={volumes}
+          options={volumeOptions}
+          onValueChange={onVolumesChange}
+        />
+        <FieldError>
+          {Object.entries(errors)
+            .filter(([key]) => key.startsWith('volumes.'))
+            .map(([, message]) => message)
+            .join(' ')}
+        </FieldError>
+      </div>
+    )
+  return (
+    <div className="space-y-4">
+      {empty ? (
+        <Empty className="border-0 p-0 py-6">
+          <EmptyHeader>
+            <EmptyTitle>No {kind}.</EmptyTitle>
+            <EmptyDescription>
+              Add a database backup to this policy.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>{addAction}</EmptyContent>
+        </Empty>
+      ) : (
+        <div>
+          <div
+            className={`grid gap-x-2 border-b pb-2 text-sm font-medium grid-cols-[minmax(0,1fr)_minmax(0,2fr)_2.5rem]`}
+          >
+            <span>Service</span>
+            <div className="grid grid-cols-2 gap-x-2">
+              <span>Engine</span>
+              <span>Database</span>
+            </div>
+            <span />
+          </div>
+          <ul>
+            {visibleDumps.map((dump, index) => (
+              <li
+                key={`dump-${index}`}
+                className="grid items-start gap-x-2 border-b py-2 grid-cols-[minmax(0,1fr)_minmax(0,2fr)_2.5rem]"
+              >
+                <Field>
+                  <FieldLabel className="sr-only">Service</FieldLabel>
+                  <ComposeServiceInput
+                    services={serviceOptions}
+                    value={dump.service}
+                    placeholder="Service name"
+                    aria-label="Database service"
+                    data-validation-field={`databaseDumps.${index}.service`}
+                    aria-invalid={Boolean(
+                      errors[`databaseDumps.${index}.service`],
+                    )}
+                    onValueChange={(service) =>
+                      onDumpsChange(
+                        dumps.map((d, i) =>
+                          i === index ? { ...d, service } : d,
+                        ),
+                      )
+                    }
+                  />
+                  <FieldError>
+                    {errors[`databaseDumps.${index}.service`]}
+                  </FieldError>
+                </Field>
+                <div className="space-y-3">
+                  <div className="grid gap-x-2 grid-cols-2">
+                    <Field>
+                      <FieldLabel className="sr-only">Engine</FieldLabel>
+                      <Select
+                        value={dump.engine}
+                        onValueChange={(engine) =>
+                          onDumpsChange(
+                            dumps.map((d, i) =>
+                              i === index
+                                ? {
+                                    service: d.service,
+                                    database: d.database,
+                                    engine: engine as BackupDatabase['engine'],
+                                  }
+                                : d,
+                            ),
+                          )
+                        }
+                      >
+                        <SelectTrigger
+                          aria-label="Database engine"
+                          data-validation-field={`databaseDumps.${index}.engine`}
+                          aria-invalid={Boolean(
+                            errors[`databaseDumps.${index}.engine`],
+                          )}
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {backupDatabaseEngines.map((engine) => (
+                            <SelectItem key={engine.value} value={engine.value}>
+                              {engine.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FieldError>
+                        {errors[`databaseDumps.${index}.engine`]}
+                      </FieldError>
+                    </Field>
+                    <Field>
+                      <FieldLabel
+                        className="sr-only"
+                        htmlFor={`backup-database-${index}`}
+                      >
+                        Database
+                      </FieldLabel>
+                      <Input
+                        id={`backup-database-${index}`}
+                        value={dump.database}
+                        placeholder="All databases"
+                        maxLength={128}
+                        data-validation-field={`databaseDumps.${index}.database`}
+                        aria-invalid={Boolean(
+                          errors[`databaseDumps.${index}.database`],
+                        )}
+                        onChange={(event) =>
+                          onDumpsChange(
+                            dumps.map((d, i) =>
+                              i === index
+                                ? { ...d, database: event.target.value }
+                                : d,
+                            ),
+                          )
+                        }
+                      />
+                      <FieldError>
+                        {errors[`databaseDumps.${index}.database`]}
+                      </FieldError>
+                    </Field>
+                  </div>
+                </div>
+                <ProjectSettingsActionTooltip label="Remove database">
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    size="icon"
+                    aria-label="Remove database dump"
+                    onClick={() =>
+                      onDumpsChange(dumps.filter((_, i) => i !== index))
+                    }
+                  >
+                    <TrashIcon />
+                  </Button>
+                </ProjectSettingsActionTooltip>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {!empty ? addAction : null}
+    </div>
+  )
+}

package/src/features/projects/backup-timestamp.tsx

@@ -0,0 +1,32 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#devpush/components/ui/tooltip'
+import { cn } from '#devpush/lib/utils'
+import { formatBackupAge, formatBackupUtc } from './project-backup-utils'
+
+export function BackupTimestamp({
+  value,
+  className,
+}: {
+  value: string
+  className?: string
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <time
+          dateTime={value}
+          className={cn(
+            'w-fit shrink-0 whitespace-nowrap text-muted-foreground',
+            className,
+          )}
+        >
+          {formatBackupAge(value)}
+        </time>
+      </TooltipTrigger>
+      <TooltipContent>{formatBackupUtc(value)}</TooltipContent>
+    </Tooltip>
+  )
+}

package/src/features/projects/backup-volume-picker.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react'
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+} from '#devpush/components/ui/field'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '#devpush/components/ui/select'
+import {
+  Combobox,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxValue,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxEmpty,
+  ComboboxItem,
+  useComboboxAnchor,
+} from '#devpush/components/ui/combobox'
+import { backupConfigSchema } from '#devpush/lib/backup-policy-schema'
+import type { ProjectBackupConfig } from '#devpush/server/projects/types'
+
+type Volumes = ProjectBackupConfig['volumes']
+const modeLabels: Record<Volumes['mode'], string> = {
+  none: 'No volumes',
+  allNamed: 'All named volumes',
+  selected: 'Selected volumes',
+}
+export function BackupVolumePicker({
+  value,
+  options,
+  onValueChange,
+  disabled = false,
+}: {
+  value: Volumes
+  options: string[]
+  onValueChange: (value: Volumes) => void
+  disabled?: boolean
+}) {
+  const [query, setQuery] = useState('')
+  const [open, setOpen] = useState(false)
+  const anchor = useComboboxAnchor()
+  const known = [...new Set([...options, ...value.names].filter(Boolean))]
+  const custom = query.trim()
+  const items = custom && !known.includes(custom) ? [...known, custom] : known
+  return (
+    <div className="space-y-4">
+      <Field>
+        <FieldLabel>Volumes to back up</FieldLabel>
+        <Select
+          disabled={disabled}
+          value={value.mode}
+          onValueChange={(mode: Volumes['mode']) => {
+            setQuery('')
+            onValueChange({
+              mode,
+              names: mode === 'selected' ? value.names : [],
+            })
+          }}
+        >
+          <SelectTrigger aria-label="Volumes to back up">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {backupConfigSchema.shape.volumes.shape.mode.options.map((mode) => (
+              <SelectItem key={mode} value={mode}>
+                {modeLabels[mode]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </Field>
+      {value.mode === 'selected' ? (
+        <Field>
+          <FieldLabel>Compose volumes</FieldLabel>
+          <Combobox
+            multiple
+            items={items}
+            value={value.names}
+            inputValue={query}
+            disabled={disabled}
+            autoHighlight
+            open={open}
+            onOpenChange={setOpen}
+            onInputValueChange={(next, details) => {
+              setQuery(next)
+              if (details.reason === 'input-change')
+                setOpen(Boolean(next.trim()) || known.length > 0)
+            }}
+            onValueChange={(names: string[]) => {
+              onValueChange({
+                mode: 'selected',
+                names: [
+                  ...new Set(names.map((name) => name.trim()).filter(Boolean)),
+                ],
+              })
+              setQuery('')
+              setOpen(false)
+            }}
+          >
+            <ComboboxChips ref={anchor}>
+              <ComboboxValue>
+                {(names: string[]) =>
+                  names.map((name) => (
+                    <ComboboxChip key={name} aria-label={`Volume ${name}`}>
+                      {name}
+                    </ComboboxChip>
+                  ))
+                }
+              </ComboboxValue>
+              <ComboboxChipsInput
+                aria-label="Compose volumes"
+                placeholder="Select or enter volume names"
+                onKeyDown={(event) => {
+                  if (
+                    event.key !== 'Enter' ||
+                    !custom ||
+                    event.currentTarget.getAttribute('aria-activedescendant')
+                  )
+                    return
+                  event.preventDefault()
+                  event.preventBaseUIHandler()
+                  onValueChange({
+                    mode: 'selected',
+                    names: [...new Set([...value.names, custom])],
+                  })
+                  setQuery('')
+                  setOpen(false)
+                }}
+              />
+            </ComboboxChips>
+            <ComboboxContent anchor={anchor}>
+              <ComboboxEmpty>
+                No volumes found. Type a volume name to add it.
+              </ComboboxEmpty>
+              <ComboboxList>
+                {(name: string) => (
+                  <ComboboxItem key={name} value={name}>
+                    {known.includes(name) ? name : `Use “${name}”`}
+                  </ComboboxItem>
+                )}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+          <FieldDescription>
+            Select known volumes or type a name and press Enter to add it.
+          </FieldDescription>
+        </Field>
+      ) : null}
+    </div>
+  )
+}

package/src/features/projects/compose-service-input.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import type { ComponentProps } from 'react'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxEmpty,
+  ComboboxItem,
+} from '#devpush/components/ui/combobox'
+
+export function ComposeServiceInput({
+  services,
+  suggestionLabel = 'Choose Compose service',
+  value,
+  onValueChange,
+  ...props
+}: Omit<ComponentProps<typeof ComboboxInput>, 'value' | 'onChange'> & {
+  suggestionLabel?: string
+  services: string[]
+  value: string
+  onValueChange: (service: string) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [editing, setEditing] = useState(false)
+  const known = [...new Set(services.filter(Boolean))]
+  const items = value && !known.includes(value) ? [...known, value] : known
+  return (
+    <Combobox
+      items={items}
+      open={open}
+      onOpenChange={setOpen}
+      value={editing ? null : value || null}
+      inputValue={value}
+      disabled={props.disabled}
+      onInputValueChange={(next, details) => {
+        if (details.reason === 'input-change') {
+          setEditing(true)
+          onValueChange(next)
+          setOpen(Boolean(next) || known.length > 0)
+        }
+      }}
+      onValueChange={(next) => {
+        setEditing(false)
+        if (next !== null) onValueChange(next)
+        setOpen(false)
+      }}
+    >
+      <ComboboxInput {...props} />
+      <ComboboxContent aria-label={suggestionLabel}>
+        <ComboboxEmpty>
+          No services found. Type a service name to use it.
+        </ComboboxEmpty>
+        <ComboboxList>
+          {(item: string) => (
+            <ComboboxItem key={item} value={item}>
+              {known.includes(item) ? item : `Use “${item}”`}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/src/features/projects/deploy-readiness.ts

@@ -0,0 +1,28 @@
+import type { ProjectContext } from '#devpush/server/projects/types'
+
+export function getDeployBlockReason(
+  environment: ProjectContext['environment'],
+) {
+  if (!environment.serverId) {
+    return 'Assign a server before deploying.'
+  }
+
+  if (environment.serverStatus !== 'connected') {
+    return 'Wait until the server is connected before deploying.'
+  }
+
+  if (environment.serverAgentUpdate?.status === 'required') {
+    return 'Update the server agent before deploying.'
+  }
+
+  return null
+}
+
+export function hasActiveDeployment(
+  deployments: ProjectContext['deployments'],
+) {
+  return deployments.some(
+    (deployment) =>
+      deployment.status === 'queued' || deployment.status === 'running',
+  )
+}

package/src/features/projects/environment-dot.tsx

@@ -0,0 +1,91 @@
+import { CheckIcon } from 'lucide-react'
+
+export const environmentColors = [
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+] as const
+
+const environmentColorClasses: Record<string, string> = {
+  amber: 'bg-amber-500',
+  blue: 'bg-blue-500',
+  cyan: 'bg-cyan-500',
+  emerald: 'bg-emerald-500',
+  fuchsia: 'bg-fuchsia-500',
+  green: 'bg-green-500',
+  indigo: 'bg-indigo-500',
+  lime: 'bg-lime-500',
+  orange: 'bg-orange-500',
+  pink: 'bg-pink-500',
+  purple: 'bg-purple-500',
+  red: 'bg-red-500',
+  rose: 'bg-rose-500',
+  sky: 'bg-sky-500',
+  teal: 'bg-teal-500',
+  violet: 'bg-violet-500',
+  yellow: 'bg-yellow-500',
+  zinc: 'bg-zinc-500',
+}
+
+const environmentColorForegroundClasses: Record<string, string> = {
+  amber: 'text-black',
+  cyan: 'text-black',
+  lime: 'text-black',
+  sky: 'text-black',
+  yellow: 'text-black',
+}
+
+export function getEnvironmentColor(index: number) {
+  return (
+    environmentColors[(3 * (index - 1)) % environmentColors.length] ??
+    environmentColors[0]
+  )
+}
+
+export function EnvironmentDot({
+  color,
+  size = 'sm',
+}: {
+  color?: string
+  size?: 'sm' | 'md'
+}) {
+  return (
+    <span
+      className={`${size === 'md' ? 'size-3' : 'size-2.5'} shrink-0 rounded-full ${environmentColorClasses[color ?? 'zinc'] ?? environmentColorClasses.zinc}`}
+    />
+  )
+}
+
+export function EnvironmentColorOption({
+  checked,
+  color,
+}: {
+  checked: boolean
+  color: string
+}) {
+  return (
+    <span
+      className={`flex size-5 items-center justify-center rounded-full ${environmentColorClasses[color] ?? environmentColorClasses.zinc}`}
+    >
+      {checked ? (
+        <CheckIcon
+          className={`size-3.5 shrink-0 ${environmentColorForegroundClasses[color] ?? 'text-white'}`}
+        />
+      ) : null}
+    </span>
+  )
+}

package/src/features/projects/log-keyword-filter.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { SearchIcon } from 'lucide-react'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '#devpush/components/ui/input-group'
+
+export function LogKeywordFilter({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (value: string | null) => void
+}) {
+  const [draft, setDraft] = useState(value)
+
+  useEffect(() => {
+    setDraft(value)
+  }, [value])
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      const next = draft.trim()
+
+      if (next !== value) {
+        onChange(next || null)
+      }
+    }, 300)
+
+    return () => window.clearTimeout(timeout)
+  }, [draft, onChange, value])
+
+  return (
+    <InputGroup className="w-48">
+      <InputGroupAddon>
+        <SearchIcon />
+      </InputGroupAddon>
+      <InputGroupInput
+        onChange={(event) => setDraft(event.target.value)}
+        aria-label="Find in logs"
+        placeholder="Find in logs"
+        type="text"
+        value={draft}
+      />
+    </InputGroup>
+  )
+}