feat: auto-build, GitHub Release, and in-app updater (#14)
* ci: auto-release workflow on merge to main Rewrite .github/workflows/release.yml to trigger on every push to main instead of manual tag pushes. The workflow now: - Computes version as 0.YYYYMMDD.GITHUB_RUN_NUMBER - Builds aarch64-apple-darwin and x86_64-apple-darwin in parallel - Merges them into a universal binary using lipo - Creates a universal .dmg and signed updater tarball - Generates latest.json with per-arch and universal platform entries - Publishes a GitHub Release with auto-generated release notes - Updates a GitHub Pages release history site (gh-pages branch) Product decisions: - Universal binary approach: copy arm64 .app as base, lipo the main executable, keep everything else from arm64 (shared frameworks are architecture-independent). This is the standard Tauri pattern. - Per-arch updater tarballs are also uploaded so the Tauri updater can download the correct arch-specific build (smaller download). - Release notes are auto-generated from git log since last tag. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * ci: github pages with release history Use peaceiris/actions-gh-pages@v4 to deploy a release history site. The page fetches releases.json (also deployed) and renders each release with date, notes, and download links for .dmg files. This handles the gh-pages branch creation automatically on first run. The page is available at https://refactoringhq.github.io/laputa-app/ Product decision: used fetch() to load releases.json at runtime instead of inlining it, which is cleaner and avoids shell escaping issues with release note content. The releases.json is deployed alongside index.html. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: in-app update notification UI Replace the old window.confirm updater with a proper React-based update notification system: - useUpdater hook now exposes state machine (idle → available → downloading → ready) and actions (startDownload, openReleaseNotes, dismiss) - UpdateBanner component renders at the top of the app shell: - "Available" state: shows version, Release Notes link, Update Now button, dismiss X - "Downloading" state: animated spinner, progress bar with percentage - "Ready" state: Restart Now button to apply the update - Silently checks on startup after 3s delay; fails silently on network errors or 404 - Release Notes link opens the GitHub Pages release history site Product decisions: - Banner at top of app (not a modal) — non-intrusive, visible but not blocking. User can dismiss and continue working. - Progress bar shows during download so user knows it's working. - Separate "Restart Now" state after download so user controls when the app restarts (they may have unsaved work). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: updater component tests Rewrite useUpdater hook tests and add UpdateBanner component tests: Hook tests (10 cases): - Starts in idle state - Does nothing when not in Tauri - Checks for updates after 3s delay - Stays idle when no update available - Transitions to available when update found - Handles missing release body gracefully - Stays idle on network error (fails silently) - Dismiss returns to idle - openReleaseNotes opens correct URL - startDownload transitions through downloading to ready Component tests (10 cases): - Renders nothing when idle - Renders nothing on error - Shows version and buttons when available - Update Now calls startDownload - Release Notes calls openReleaseNotes - Dismiss button works - Shows progress bar during download - Shows 0% at start of download - Shows restart button when ready - Restart button calls restartApp All 457 tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * design: auto-build-release wireframes Copy ui-design.pen as base. Frames to be added for: 1. Update notification banner (visible state) — horizontal bar at top of app shell with version text, Release Notes link, Update Now button, and dismiss X 2. Update download progress state — spinner icon, progress bar with percentage, downloading text 3. "Restart to apply" state — green accent, version text, Restart Now button Note: Pencil editor was not available during this session. The base design file is committed; frames will be added when the editor is accessible. The implemented component (UpdateBanner.tsx) serves as the source of truth for the design. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: update ARCHITECTURE.md with release/update system Add comprehensive documentation for: - Release pipeline (4-phase workflow: version → build → release → pages) - Versioning scheme (0.YYYYMMDD.RUN_NUMBER) - Universal binary strategy (lipo merge) - Updater endpoint and latest.json manifest - In-app update UI state machine - GitHub Pages release history site Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: rustfmt formatting * fix: rustfmt build.rs --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Rossi
114
src/components/UpdateBanner.test.tsx
Normal file
114
src/components/UpdateBanner.test.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { UpdateBanner } from './UpdateBanner'
|
||||
import type { UpdateStatus, UpdateActions } from '../hooks/useUpdater'
|
||||
|
||||
// Mock restartApp to prevent dynamic import issues in tests
|
||||
vi.mock('../hooks/useUpdater', async () => {
|
||||
const actual = await vi.importActual('../hooks/useUpdater')
|
||||
return {
|
||||
...actual,
|
||||
restartApp: vi.fn(),
|
||||
}
|
||||
})
|
||||
|
||||
function makeActions(overrides?: Partial<UpdateActions>): UpdateActions {
|
||||
return {
|
||||
startDownload: vi.fn(),
|
||||
openReleaseNotes: vi.fn(),
|
||||
dismiss: vi.fn(),
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('UpdateBanner', () => {
|
||||
it('renders nothing when idle', () => {
|
||||
const status: UpdateStatus = { state: 'idle' }
|
||||
const { container } = render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
expect(container.innerHTML).toBe('')
|
||||
})
|
||||
|
||||
it('renders nothing on error state', () => {
|
||||
const status: UpdateStatus = { state: 'error' }
|
||||
const { container } = render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
expect(container.innerHTML).toBe('')
|
||||
})
|
||||
|
||||
it('shows version and action buttons when update is available', () => {
|
||||
const status: UpdateStatus = { state: 'available', version: '1.5.0', notes: 'Bug fixes' }
|
||||
const actions = makeActions()
|
||||
render(<UpdateBanner status={status} actions={actions} />)
|
||||
|
||||
expect(screen.getByTestId('update-banner')).toBeTruthy()
|
||||
expect(screen.getByText(/Laputa 1\.5\.0/)).toBeTruthy()
|
||||
expect(screen.getByText('is available')).toBeTruthy()
|
||||
expect(screen.getByTestId('update-now-btn')).toBeTruthy()
|
||||
expect(screen.getByTestId('update-release-notes')).toBeTruthy()
|
||||
expect(screen.getByTestId('update-dismiss')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('"Update Now" calls startDownload', () => {
|
||||
const status: UpdateStatus = { state: 'available', version: '1.5.0', notes: undefined }
|
||||
const actions = makeActions()
|
||||
render(<UpdateBanner status={status} actions={actions} />)
|
||||
|
||||
fireEvent.click(screen.getByTestId('update-now-btn'))
|
||||
expect(actions.startDownload).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('"Release Notes" link calls openReleaseNotes', () => {
|
||||
const status: UpdateStatus = { state: 'available', version: '1.5.0', notes: undefined }
|
||||
const actions = makeActions()
|
||||
render(<UpdateBanner status={status} actions={actions} />)
|
||||
|
||||
fireEvent.click(screen.getByTestId('update-release-notes'))
|
||||
expect(actions.openReleaseNotes).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('dismiss button calls dismiss action', () => {
|
||||
const status: UpdateStatus = { state: 'available', version: '1.5.0', notes: undefined }
|
||||
const actions = makeActions()
|
||||
render(<UpdateBanner status={status} actions={actions} />)
|
||||
|
||||
fireEvent.click(screen.getByTestId('update-dismiss'))
|
||||
expect(actions.dismiss).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('shows progress bar during download', () => {
|
||||
const status: UpdateStatus = { state: 'downloading', version: '1.5.0', progress: 0.65 }
|
||||
render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
|
||||
expect(screen.getByText(/Downloading Laputa 1\.5\.0/)).toBeTruthy()
|
||||
expect(screen.getByText('65%')).toBeTruthy()
|
||||
|
||||
const progressBar = screen.getByTestId('update-progress')
|
||||
expect(progressBar.style.width).toBe('65%')
|
||||
})
|
||||
|
||||
it('shows 0% at start of download', () => {
|
||||
const status: UpdateStatus = { state: 'downloading', version: '2.0.0', progress: 0 }
|
||||
render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
|
||||
expect(screen.getByText('0%')).toBeTruthy()
|
||||
const progressBar = screen.getByTestId('update-progress')
|
||||
expect(progressBar.style.width).toBe('0%')
|
||||
})
|
||||
|
||||
it('shows restart button when update is ready', () => {
|
||||
const status: UpdateStatus = { state: 'ready', version: '1.5.0' }
|
||||
render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
|
||||
expect(screen.getByText(/Laputa 1\.5\.0/)).toBeTruthy()
|
||||
expect(screen.getByText(/restart to apply/)).toBeTruthy()
|
||||
expect(screen.getByTestId('update-restart-btn')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('restart button calls restartApp', async () => {
|
||||
const { restartApp } = await import('../hooks/useUpdater')
|
||||
const status: UpdateStatus = { state: 'ready', version: '1.5.0' }
|
||||
render(<UpdateBanner status={status} actions={makeActions()} />)
|
||||
|
||||
fireEvent.click(screen.getByTestId('update-restart-btn'))
|
||||
expect(restartApp).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
145
src/components/UpdateBanner.tsx
Normal file
145
src/components/UpdateBanner.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Download, ExternalLink, RefreshCw, X } from 'lucide-react'
|
||||
import type { UpdateStatus, UpdateActions } from '../hooks/useUpdater'
|
||||
import { restartApp } from '../hooks/useUpdater'
|
||||
|
||||
interface UpdateBannerProps {
|
||||
status: UpdateStatus
|
||||
actions: UpdateActions
|
||||
}
|
||||
|
||||
export function UpdateBanner({ status, actions }: UpdateBannerProps) {
|
||||
if (status.state === 'idle' || status.state === 'error') return null
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="update-banner"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: '6px 12px',
|
||||
background: 'var(--accent-blue, #E8F0FE)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
fontSize: 13,
|
||||
color: 'var(--foreground)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{status.state === 'available' && (
|
||||
<>
|
||||
<Download size={14} style={{ color: 'var(--primary)', flexShrink: 0 }} />
|
||||
<span>
|
||||
<strong>Laputa {status.version}</strong> is available
|
||||
</span>
|
||||
<button
|
||||
data-testid="update-release-notes"
|
||||
onClick={actions.openReleaseNotes}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 3,
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'var(--primary)',
|
||||
cursor: 'pointer',
|
||||
fontSize: 13,
|
||||
padding: 0,
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
>
|
||||
Release Notes <ExternalLink size={11} />
|
||||
</button>
|
||||
<button
|
||||
data-testid="update-now-btn"
|
||||
onClick={actions.startDownload}
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
padding: '3px 10px',
|
||||
background: 'var(--primary)',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 5,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Update Now
|
||||
</button>
|
||||
<button
|
||||
data-testid="update-dismiss"
|
||||
onClick={actions.dismiss}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--muted-foreground)',
|
||||
display: 'flex',
|
||||
padding: 2,
|
||||
}}
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status.state === 'downloading' && (
|
||||
<>
|
||||
<RefreshCw size={14} style={{ color: 'var(--primary)', flexShrink: 0, animation: 'spin 1s linear infinite' }} />
|
||||
<span>Downloading Laputa {status.version}...</span>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: 200,
|
||||
height: 4,
|
||||
background: 'var(--border)',
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
data-testid="update-progress"
|
||||
style={{
|
||||
width: `${Math.round(status.progress * 100)}%`,
|
||||
height: '100%',
|
||||
background: 'var(--primary)',
|
||||
borderRadius: 2,
|
||||
transition: 'width 0.2s ease',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--muted-foreground)' }}>
|
||||
{Math.round(status.progress * 100)}%
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{status.state === 'ready' && (
|
||||
<>
|
||||
<RefreshCw size={14} style={{ color: 'var(--accent-green, #0F7B0F)', flexShrink: 0 }} />
|
||||
<span>
|
||||
<strong>Laputa {status.version}</strong> is ready — restart to apply
|
||||
</span>
|
||||
<button
|
||||
data-testid="update-restart-btn"
|
||||
onClick={restartApp}
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
padding: '3px 10px',
|
||||
background: 'var(--accent-green, #0F7B0F)',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 5,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Restart Now
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user