feat: Step Library sync + service account for default tree ownership
* feat: maintenance flow UX redesign — batch status hub, context strip, detail page upgrades (#85) - Add BatchStatusPage (/flows/:id/batches/:batchId): per-target Start/Resume/View cards, progress bar, 5s polling while in-progress, completion outcome summary - Add BatchStatusCard: handles not-started/in-progress/complete states with step progress for in-progress targets - Add ActiveBatchBanner: amber banner on detail page when a batch is running, links to BatchStatusPage - Add MaintenanceContextStrip: amber strip in ProceduralNavigationPage for maintenance flows showing target name, batch progress (X/Y complete), and Back to Batch nav - Update MaintenanceFlowDetailPage: active batch banner, clickable run history rows with mini progress dots and outcome summaries, Run button loading state, post-launch navigates to BatchStatusPage - Update ProceduralNavigationPage: renders MaintenanceContextStrip between top bar and content when tree_type === 'maintenance'; fetches batch progress once on mount - Add batch_id filter to GET /sessions backend endpoint and SessionListParams frontend type - Add /flows/:id/batches/:batchId route to router Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: session detail page — completion action + outcome summary card - In-progress sessions: amber banner with "Complete Session" button opens SessionOutcomeModal to set outcome/notes/next-steps and finalize - Completed sessions: colored outcome summary card (icon + outcome label + duration + notes + next steps) replaces dense header metadata; "Copy for Ticket" promoted to primary action inside the card - Export toolbar de-emphasized to secondary row of smaller controls below the summary card Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add library-page action props to StepCard (edit/delete/save) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: pass library-page action props through StepLibraryBrowser + refreshKey Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepFormModal wrapper + submitLabel/isSubmitting props on StepForm Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: Step Library page — create, edit, delete, save-to-library Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add RuntimeStep union type for procedural custom steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepChecklist accepts RuntimeStep[], renders amber Custom badge Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: StepDetail accepts RuntimeStep, renders Custom Step badge for custom steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: custom step insertion in procedural flow sessions Engineers can add custom steps inline during execution. Steps are persisted to session.custom_steps and restored on resume. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: suppress StepFeedback on custom steps, fix resume stepState seeding, functional updater for step index Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add tree forking UI design doc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add tree fork UI implementation plan Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkInfo type and fork fields to Tree/TreeListItem Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: align ForkInfo type with backend schema, remove redundant fork fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: ForkInfo placement, required fork_info field, add JSDoc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkModal component with name and reason fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: ForkModal accessibility and UX (escape, click-outside, labels, maxLength) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: open ForkModal on fork action in TreeLibraryPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add ForkModal to MyTreesPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show Fork chip badge on forked tree cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add flow-to-library step sync design doc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add flow-to-library sync implementation plan Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add sync tracking columns to step_library Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add sync columns and source_tree relationship to StepLibrary model Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add group_label to StepContent, is_flow_synced/source_tree_name to StepLibraryResponse Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: include is_flow_synced and source_tree_name in step list/detail responses Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add is_flow_synced and source_tree_name to step list response Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add selectinload and sync fields to search and get_step endpoints Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add step_sync module with extraction and upsert logic Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: safe NOT IN placeholders for asyncpg, add deactivate docstring Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: trigger step library sync on tree publish and deactivate on delete - Call sync_steps_from_tree in update_tree whenever the tree is published (status transitions to 'published' or is already published and structure changes) - Call deactivate_synced_steps_for_tree in delete_tree before db.commit() so the FK SET NULL does not nullify source_tree_id before the WHERE clause runs - Fix ::jsonb cast syntax in step_sync.py (asyncpg rejects :: operator in text() queries; replaced with CAST(:content AS jsonb)) - Add UniqueConstraint('source_tree_id','source_node_id') to StepLibrary model so Base.metadata.create_all (used by tests) creates the constraint that the ON CONFLICT clause in sync_steps_from_tree depends on Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add is_flow_synced and source_tree_name to Step types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show From Flow badge and lock icon on flow-synced StepCard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: show source flow name in StepDetailModal for synced steps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: add Library Visibility select to procedural StepEditor Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: address code review issues in flow-to-library sync - Fix sync trigger: only fire on publish transition, not every PUT - Add TestSyncOnPublish integration tests (2 tests, 16 total passing) - Add group_label to frontend StepContent interface - Guard Library Visibility select to procedure_step nodes only - Block API edits to flow-synced steps (400 read-only guard) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: handle None author_id in step sync to avoid invalid UUID error When a system/default tree has no author (author_id is None), str(None) produces the literal string 'None' which asyncpg rejects as an invalid UUID for the created_by column. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: add ResolutionFlow service account to own default tree steps in library Default/system trees had no author_id (NULL), causing a NOT NULL violation when syncing steps to step_library.created_by on publish. - Add is_service_account flag to users table (migration 4f4137ce) - Add service_account.py: idempotent ensure_service_account() creates noreply@resolutionflow.com with unusable password on startup - Cache service account ID on app.state at lifespan startup - Add get_service_account_id() FastAPI dep (returns None in tests) - sync_steps_from_tree: resolve author_id or service_account_id as created_by - create_tree: set author_id=service_account_id for is_default trees - Migration 1490781700bc: backfill author_id on 31 existing default trees Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #89.
This commit is contained in:
chihlasm
@@ -1,11 +1,15 @@
|
||||
import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle } from 'lucide-react'
|
||||
import { Star, User, Calendar, TrendingUp, Eye, Plus, HelpCircle, Zap, CheckCircle, Pencil, Trash2, Bookmark, Lock } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { StepListItem } from '@/types/step'
|
||||
|
||||
interface StepCardProps {
|
||||
step: StepListItem
|
||||
onPreview: (step: StepListItem) => void
|
||||
onInsert: (step: StepListItem) => void
|
||||
onInsert?: (step: StepListItem) => void // session context (now optional)
|
||||
onEdit?: (step: StepListItem) => void // library page
|
||||
onDelete?: (step: StepListItem) => void // library page — NOTE: pass full StepListItem, not just ID
|
||||
onSave?: (step: StepListItem) => void // library page (save copy to My Steps)
|
||||
currentUserId?: string // to determine ownership
|
||||
}
|
||||
|
||||
const stepTypeIcons = {
|
||||
@@ -20,12 +24,14 @@ const stepTypeColors = {
|
||||
solution: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/20'
|
||||
}
|
||||
|
||||
export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
|
||||
export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave, currentUserId }: StepCardProps) {
|
||||
const Icon = stepTypeIcons[step.step_type as keyof typeof stepTypeIcons] || HelpCircle
|
||||
const hasRating = step.rating_count > 0
|
||||
const visibleTags = step.tags.slice(0, 3)
|
||||
const remainingTags = step.tags.length - 3
|
||||
|
||||
const isOwn = currentUserId ? step.created_by === currentUserId : false
|
||||
|
||||
return (
|
||||
<div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
|
||||
{/* Header */}
|
||||
@@ -49,6 +55,13 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* From Flow Badge */}
|
||||
{step.is_flow_synced && (
|
||||
<span className="rounded-full bg-blue-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-blue-400">
|
||||
From Flow
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
@@ -118,26 +131,89 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
|
||||
'hover:bg-accent hover:text-foreground transition-colors'
|
||||
)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onInsert(step)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
|
||||
'hover:opacity-90 transition-colors'
|
||||
)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Insert
|
||||
</button>
|
||||
{(onEdit || onDelete || onSave) ? (
|
||||
isOwn ? (
|
||||
step.is_flow_synced ? (
|
||||
// Flow-synced step: Preview + lock (read-only)
|
||||
<>
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<span
|
||||
title="Managed by source flow — fork to customize"
|
||||
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
|
||||
>
|
||||
<Lock className="h-4 w-4" />
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
// Own step: Preview + Edit + Delete icon
|
||||
<>
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onEdit?.(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete?.(step)}
|
||||
className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
|
||||
aria-label="Delete step"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
// Others' step: Preview + Save
|
||||
<>
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSave?.(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
|
||||
>
|
||||
<Bookmark className="h-4 w-4" />
|
||||
Save
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
// Session context (original): Preview + Insert
|
||||
<>
|
||||
<button
|
||||
onClick={() => onPreview(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onInsert?.(step)}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Insert
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar } from 'lucide-react'
|
||||
import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar, GitBranch } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { MarkdownContent } from '@/components/ui/MarkdownContent'
|
||||
import { stepsApi } from '@/api/steps'
|
||||
@@ -283,6 +283,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
|
||||
<span className="text-muted-foreground">Author:</span>
|
||||
<span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
|
||||
</div>
|
||||
{step.is_flow_synced && step.source_tree_name && (
|
||||
<div className="col-span-2 flex items-center gap-1.5 text-muted-foreground">
|
||||
<GitBranch className="h-3.5 w-3.5 shrink-0" />
|
||||
<span>Sourced from <span className="font-medium text-foreground">{step.source_tree_name}</span></span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="text-muted-foreground">Usage Count:</span>
|
||||
<span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
|
||||
|
||||
@@ -8,6 +8,8 @@ interface StepFormProps {
|
||||
onSubmit: (data: StepCreate) => void
|
||||
onCancel: () => void
|
||||
initialData?: Partial<StepCreate>
|
||||
submitLabel?: string
|
||||
isSubmitting?: boolean
|
||||
}
|
||||
|
||||
const stepTypeOptions = [
|
||||
@@ -16,7 +18,7 @@ const stepTypeOptions = [
|
||||
{ value: 'solution', label: 'Solution', icon: CheckCircle, description: 'Resolution endpoint' }
|
||||
] as const
|
||||
|
||||
export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
|
||||
export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmitting }: StepFormProps) {
|
||||
// Form state
|
||||
const [stepType, setStepType] = useState<'decision' | 'action' | 'solution'>(
|
||||
initialData?.step_type || 'action'
|
||||
@@ -376,9 +378,10 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
Insert Step
|
||||
{isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
89
frontend/src/components/step-library/StepFormModal.tsx
Normal file
89
frontend/src/components/step-library/StepFormModal.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useState } from 'react'
|
||||
import { X } from 'lucide-react'
|
||||
import { stepsApi } from '@/api/steps'
|
||||
import { StepForm } from './StepForm'
|
||||
import type { Step, StepCreate } from '@/types/step'
|
||||
|
||||
interface StepFormModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSuccess: (step: Step) => void
|
||||
editingStep?: Step | null // full Step (parent fetches before opening), null/undefined = create mode
|
||||
}
|
||||
|
||||
export function StepFormModal({ isOpen, onClose, onSuccess, editingStep }: StepFormModalProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const isEditMode = !!editingStep
|
||||
|
||||
const handleSubmit = async (data: StepCreate) => {
|
||||
setIsSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
let result: Step
|
||||
if (isEditMode && editingStep) {
|
||||
result = await stepsApi.update(editingStep.id, data)
|
||||
} else {
|
||||
result = await stepsApi.create(data)
|
||||
}
|
||||
onSuccess(result)
|
||||
} catch (err) {
|
||||
console.error('Failed to save step:', err)
|
||||
setError('Failed to save step. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Build initialData from full Step including content
|
||||
const initialData = editingStep ? {
|
||||
title: editingStep.title,
|
||||
step_type: editingStep.step_type,
|
||||
content: editingStep.content,
|
||||
visibility: editingStep.visibility,
|
||||
category_id: editingStep.category_id,
|
||||
tags: editingStep.tags,
|
||||
} : undefined
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
|
||||
<div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border p-6 pb-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
{isEditMode ? 'Edit Step' : 'Create Step'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mx-6 mt-4 rounded-lg border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<StepForm
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={onClose}
|
||||
initialData={initialData}
|
||||
submitLabel={isEditMode ? 'Save Changes' : 'Create Step'}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -8,12 +8,17 @@ import { StepDetailModal } from './StepDetailModal'
|
||||
import type { Step, StepListItem, StepCategory, PopularTag, StepListParams } from '@/types/step'
|
||||
|
||||
interface StepLibraryBrowserProps {
|
||||
onInsert: (step: Step) => void
|
||||
onInsert?: (step: Step) => void
|
||||
onCreateNew?: () => void
|
||||
showCreateButton?: boolean
|
||||
onEdit?: (step: StepListItem) => void
|
||||
onDelete?: (step: StepListItem) => void
|
||||
onSave?: (step: StepListItem) => void
|
||||
currentUserId?: string
|
||||
refreshKey?: number
|
||||
}
|
||||
|
||||
export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false }: StepLibraryBrowserProps) {
|
||||
export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = false, onEdit, onDelete, onSave, currentUserId, refreshKey }: StepLibraryBrowserProps) {
|
||||
// State
|
||||
const [steps, setSteps] = useState<StepListItem[]>([])
|
||||
const [categories, setCategories] = useState<StepCategory[]>([])
|
||||
@@ -87,7 +92,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
|
||||
}
|
||||
|
||||
loadSteps()
|
||||
}, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag])
|
||||
}, [searchQuery, selectedCategoryId, selectedStepType, minRating, sortBy, selectedTag, refreshKey])
|
||||
|
||||
// Group steps by visibility
|
||||
const groupedSteps = useMemo(() => {
|
||||
@@ -108,12 +113,15 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
|
||||
|
||||
const handleInsertFromPreview = (step: Step) => {
|
||||
setPreviewStepId(null)
|
||||
onInsert(step)
|
||||
if (onInsert) {
|
||||
onInsert(step)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInsertFromCard = (stepItem: StepListItem) => {
|
||||
// Need to fetch full step details for insert
|
||||
stepsApi.get(stepItem.id).then(onInsert)
|
||||
if (onInsert) {
|
||||
stepsApi.get(stepItem.id).then(onInsert)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
@@ -275,7 +283,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
onInsert={onInsert ? handleInsertFromCard : undefined}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -304,7 +316,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
onInsert={onInsert ? handleInsertFromCard : undefined}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -333,7 +349,11 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
|
||||
key={step.id}
|
||||
step={step}
|
||||
onPreview={handlePreview}
|
||||
onInsert={handleInsertFromCard}
|
||||
onInsert={onInsert ? handleInsertFromCard : undefined}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
onSave={onSave}
|
||||
currentUserId={currentUserId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user