create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/settings/settings-sync-panel.tsx

@@ -1,104 +1,26 @@
 'use client'
 
-import { useEffect, useState, type ReactNode } from 'react'
-import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 import {
-  CircleHelp,
-  Code,
-  Component,
-  Group,
-  LayoutTemplate,
-  Puzzle,
   RefreshCw,
-  Server,
-  Tag,
-  TestTubeDiagonal,
-  TestTubes,
 } from 'lucide-react'
-import { getSyncPendingCountsAction, runSyncAction } from '@/actions/settings/sync-actions'
 import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { toast } from '@/hooks/use-toast'
 import {
   SYNC_ALL_REQUEST_ID,
-  getSyncScriptDefinition,
-  resolveRequestedSyncExecutionOrder,
-  syncScriptDefinitions,
   type SyncRequestId,
-  type SyncScriptId,
   type SyncScriptDefinition,
+  syncScriptDefinitions,
 } from '@/lib/sync/sync-registry'
 import type { SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
-
-type SyncRunResult = Awaited<ReturnType<typeof runSyncAction>>
-type SyncTileColor = keyof typeof AppDrawerItemColor
-
-const syncPresentation: Record<SyncScriptId, { icon: ReactNode; colorKey: SyncTileColor }> = {
-  'sync-modules': {
-    icon: <Puzzle />,
-    colorKey: 'indigo',
-  },
-  'sync-environments': {
-    icon: <Server />,
-    colorKey: 'sky',
-  },
-  'sync-tags': {
-    icon: <Tag />,
-    colorKey: 'yellow',
-  },
-  'sync-template-step-groups': {
-    icon: <Component />,
-    colorKey: 'violet',
-  },
-  'sync-template-steps': {
-    icon: <LayoutTemplate />,
-    colorKey: 'purple',
-  },
-  'sync-locator-groups': {
-    icon: <Group />,
-    colorKey: 'blue',
-  },
-  'sync-locators': {
-    icon: <Code />,
-    colorKey: 'emerald',
-  },
-  'sync-test-suites': {
-    icon: <TestTubes />,
-    colorKey: 'orange',
-  },
-  'sync-test-cases': {
-    icon: <TestTubeDiagonal />,
-    colorKey: 'rose',
-  },
-}
-
-function formatExecutionSummary(result: SyncRunResult): string {
-  if (result.requestedScriptId === SYNC_ALL_REQUEST_ID) {
-    return `Completed ${result.executedScriptIds.length} sync scripts successfully.`
-  }
-
-  if (result.executedScriptIds.length <= 1) {
-    return `${result.requestedScriptId} completed successfully.`
-  }
-
-  return `${result.requestedScriptId} completed after running ${result.executedScriptIds.join(' -> ')}.`
-}
-
-function formatFailureSummary(result: SyncRunResult): string {
-  if ('failedScriptId' in result && result.failedScriptId) {
-    const exitCode = typeof result.exitCode === 'number' ? ` (exit code ${result.exitCode})` : ''
-    const cause = result.cause ?? 'No cause was reported.'
-    return `${result.failedScriptId}${exitCode} failed: ${cause}`
-  }
-
-  return result.cause ?? `Unable to run ${result.requestedScriptId}.`
-}
-
-function formatExecutionOrder(scriptIds: SyncScriptId[]): string {
-  return scriptIds.map(scriptId => getSyncScriptDefinition(scriptId).orderLabel).join(' -> ')
-}
+import {
+  getSyncTooltipCopy,
+  syncPanelInfo,
+  syncPresentation,
+} from './settings-sync-panel-helpers'
+import { useSettingsSync } from './use-settings-sync'
 
 function SyncRow({
   definition,
@@ -115,7 +37,6 @@ function SyncRow({
 }) {
   const { icon, colorKey } = syncPresentation[definition.id]
   const color = AppDrawerItemColor[colorKey]
-  const executionOrder = resolveRequestedSyncExecutionOrder(definition.id)
 
   return (
     <Tooltip>
@@ -123,6 +44,7 @@ function SyncRow({
         <Button
           variant="outline"
           disabled={disabled}
+          aria-label={definition.label}
           onClick={() => onRun(definition.id)}
           className={`inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none px-3 py-2.5 text-left hover:text-gray-200 ${color.buttonColor}`}
         >
@@ -145,59 +67,21 @@ function SyncRow({
       </TooltipTrigger>
       <TooltipContent className="max-w-xs">
         <p>{definition.description}</p>
-        <p className="mt-1 text-primary-foreground/80">Runs synchronization in order: {formatExecutionOrder(executionOrder)}</p>
+        <p className="mt-1 text-primary-foreground/80">{getSyncTooltipCopy(definition.id)}</p>
       </TooltipContent>
     </Tooltip>
   )
 }
 
 export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendingCounts }) {
-  const router = useRouter()
-  const [activeRequestId, setActiveRequestId] = useState<SyncRequestId | null>(null)
-  const [currentPendingCounts, setCurrentPendingCounts] = useState<SyncPendingCounts>(pendingCounts)
+  const { activeRequestId, isRunning, pendingCounts: currentPendingCounts, runSync, setPendingCounts } =
+    useSettingsSync({
+      initialPendingCounts: pendingCounts,
+    })
 
   useEffect(() => {
-    setCurrentPendingCounts(pendingCounts)
-  }, [pendingCounts])
-
-  const runSync = async (requestId: SyncRequestId) => {
-    if (activeRequestId) {
-      return
-    }
-
-    setActiveRequestId(requestId)
-
-    try {
-      const result = await runSyncAction(requestId)
-
-      if (result.success) {
-        const refreshedCounts = await getSyncPendingCountsAction()
-        setCurrentPendingCounts(refreshedCounts)
-        toast({
-          title: 'Sync completed',
-          description: formatExecutionSummary(result),
-        })
-      } else {
-        toast({
-          variant: 'destructive',
-          title: 'Sync failed',
-          description: formatFailureSummary(result),
-        })
-      }
-
-      router.refresh()
-    } catch (error) {
-      toast({
-        variant: 'destructive',
-        title: 'Sync failed',
-        description: error instanceof Error ? error.message : String(error),
-      })
-    } finally {
-      setActiveRequestId(null)
-    }
-  }
-
-  const isRunning = activeRequestId !== null
+    setPendingCounts(pendingCounts)
+  }, [pendingCounts, setPendingCounts])
 
   return (
     <TooltipProvider>
@@ -208,7 +92,7 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
             <Tooltip>
               <TooltipTrigger asChild>
                 <span className="cursor-help text-muted-foreground">
-                  <CircleHelp className="h-4 w-4" />
+                  {syncPanelInfo.helpIcon}
                 </span>
               </TooltipTrigger>
               <TooltipContent className="max-w-xs">
@@ -222,6 +106,7 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
             <TooltipTrigger asChild>
               <Button
                 disabled={isRunning}
+                aria-label="Sync All"
                 onClick={() => runSync(SYNC_ALL_REQUEST_ID)}
                 className="inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none bg-emerald-500/10 px-3 py-2.5 text-left text-gray-100 hover:bg-emerald-500/20 hover:text-gray-100"
               >
@@ -239,7 +124,7 @@ export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendin
               </Button>
             </TooltipTrigger>
             <TooltipContent className="max-w-xs">
-              Runs synchronization in order: {formatExecutionOrder(resolveRequestedSyncExecutionOrder(SYNC_ALL_REQUEST_ID))}
+              {getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}
             </TooltipContent>
           </Tooltip>
           <div className="flex flex-wrap items-start gap-4">

package/templates/default/src/app/(base)/settings/use-settings-sync.ts

@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { getSyncPendingCountsAction, runSyncAction } from '@/actions/settings/sync-actions'
+import { toast } from '@/hooks/use-toast'
+import type { SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
+import type { SyncRequestId } from '@/lib/sync/sync-registry'
+
+import { formatExecutionSummary, formatFailureSummary, type SyncRunResult } from './settings-sync-panel-helpers'
+
+type UseSettingsSyncOptions = {
+  initialPendingCounts: SyncPendingCounts
+}
+
+export function useSettingsSync({ initialPendingCounts }: UseSettingsSyncOptions) {
+  const router = useRouter()
+  const [activeRequestId, setActiveRequestId] = useState<SyncRequestId | null>(null)
+  const [pendingCounts, setPendingCounts] = useState<SyncPendingCounts>(initialPendingCounts)
+
+  const runSync = async (requestId: SyncRequestId) => {
+    if (activeRequestId) {
+      return
+    }
+
+    setActiveRequestId(requestId)
+
+    try {
+      const result = (await runSyncAction(requestId)) as SyncRunResult
+
+      if (result.success) {
+        const refreshedCounts = await getSyncPendingCountsAction()
+        setPendingCounts(refreshedCounts)
+        toast({
+          title: 'Sync completed',
+          description: formatExecutionSummary(result),
+        })
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Sync failed',
+          description: formatFailureSummary(result),
+        })
+      }
+
+      router.refresh()
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Sync failed',
+        description: error instanceof Error ? error.message : String(error),
+      })
+    } finally {
+      setActiveRequestId(null)
+    }
+  }
+
+  return {
+    activeRequestId,
+    isRunning: activeRequestId !== null,
+    pendingCounts,
+    runSync,
+    setPendingCounts,
+  }
+}

package/templates/default/src/app/(base)/tags/create/page.tsx

@@ -1,39 +1,39 @@
-import { createTagAction } from '@/actions/tags/tag-actions'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Tag } from 'lucide-react'
-import React from 'react'
-import TagForm from '../tag-form'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Tag',
-  description: 'Create a new tag to be used in your test cases',
-}
-
-const CreateTag = () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Tag className="mr-2 h-8 w-8" />
-            Create Tag
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Create a new tag to be used in your test cases.</HeaderSubtitle>
-      </div>
-      <TagForm
-        successTitle="Tag created"
-        successMessage="Tag created successfully"
-        onSubmitAction={createTagAction}
-        defaultValues={{
-          name: '',
-          tagExpression: '',
-        }}
-      />
-    </>
-  )
-}
-
-export default CreateTag
+import { createTagAction } from '@/actions/tags/tag-actions'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Tag } from 'lucide-react'
+import React from 'react'
+import TagForm from '../tag-form'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Tag',
+  description: 'Create a new tag to be used in your test cases',
+}
+
+const CreateTag = () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Tag className="mr-2 h-8 w-8" />
+            Create Tag
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Create a new tag to be used in your test cases.</HeaderSubtitle>
+      </div>
+      <TagForm
+        successTitle="Tag created"
+        successMessage="Tag created successfully"
+        onSubmitAction={createTagAction}
+        defaultValues={{
+          name: '',
+          tagExpression: '',
+        }}
+      />
+    </>
+  )
+}
+
+export default CreateTag

package/templates/default/src/app/(base)/tags/modify/[id]/page.tsx

@@ -1,50 +1,50 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import TagForm from '../../tag-form'
-import { getTagByIdAction, updateTagAction } from '@/actions/tags/tag-actions'
-import { Tag } from 'lucide-react'
-import { Tag as TagType } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Tag',
-  description: 'Modify a tag',
-}
-
-const ModifyTag = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data: tagToBeEditedData, error: tagToBeEditedError } = await getTagByIdAction(id)
-
-  if (tagToBeEditedError) {
-    return <div>Error: {tagToBeEditedError}</div>
-  }
-
-  const tagData = tagToBeEditedData as TagType
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Tag className="mr-2 h-8 w-8" />
-            Modify Tag
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Modify a tag.</HeaderSubtitle>
-      </div>
-      <TagForm
-        successTitle="Tag modified"
-        successMessage="Tag modified successfully"
-        onSubmitAction={updateTagAction}
-        defaultValues={{
-          name: tagData.name,
-          tagExpression: tagData.tagExpression,
-        }}
-        id={id}
-      />
-    </>
-  )
-}
-
-export default ModifyTag
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import TagForm from '../../tag-form'
+import { getTagByIdAction, updateTagAction } from '@/actions/tags/tag-actions'
+import { Tag } from 'lucide-react'
+import { Tag as TagType } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Tag',
+  description: 'Modify a tag',
+}
+
+const ModifyTag = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: tagToBeEditedData, error: tagToBeEditedError } = await getTagByIdAction(id)
+
+  if (tagToBeEditedError) {
+    return <div>Error: {tagToBeEditedError}</div>
+  }
+
+  const tagData = tagToBeEditedData as TagType
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Tag className="mr-2 h-8 w-8" />
+            Modify Tag
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Modify a tag.</HeaderSubtitle>
+      </div>
+      <TagForm
+        successTitle="Tag modified"
+        successMessage="Tag modified successfully"
+        onSubmitAction={updateTagAction}
+        defaultValues={{
+          name: tagData.name,
+          tagExpression: tagData.tagExpression,
+        }}
+        id={id}
+      />
+    </>
+  )
+}
+
+export default ModifyTag

package/templates/default/src/app/(base)/tags/page.tsx

@@ -1,58 +1,58 @@
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Tag } from 'lucide-react'
-import { Suspense } from 'react'
-import TagTable from './tag-table'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { Tag as TagModel } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Tags',
-  description: 'Manage tags for categorizing test cases and test runs',
-}
-
-const Tags = async () => {
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (tagsError) {
-    return <div>Error: {tagsError}</div>
-  }
-
-  const tagsData = tags as TagModel[]
-
-  if (!tagsData || tagsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<Tag className="h-8 w-8" />}
-          title="No tags found"
-          description="Get started by creating a tag to categorize your test cases and test runs"
-          createRoute="/tags/create"
-          createText="Create Tag"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Tag className="mr-2 h-8 w-8" />
-            Tags
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Categorize test cases and test runs for better organization and filtering</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TagTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default Tags
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Tag } from 'lucide-react'
+import { Suspense } from 'react'
+import TagTable from './tag-table'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Tag as TagModel } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Tags',
+  description: 'Manage tags for categorizing test cases and test runs',
+}
+
+const Tags = async () => {
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (tagsError) {
+    return <div>Error: {tagsError}</div>
+  }
+
+  const tagsData = tags as TagModel[]
+
+  if (!tagsData || tagsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Tag className="h-8 w-8" />}
+          title="No tags found"
+          description="Get started by creating a tag to categorize your test cases and test runs"
+          createRoute="/tags/create"
+          createText="Create Tag"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Tag className="mr-2 h-8 w-8" />
+            Tags
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Categorize test cases and test runs for better organization and filtering</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TagTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Tags

package/templates/default/src/app/(base)/tags/tag-form-helpers.ts

@@ -0,0 +1,13 @@
+import { tagSchema, type Tag } from '@/constants/form-opts/tag-form-opts'
+import { type ActionResponse } from '@/types/form/actionHandler'
+
+export type TagFormSubmitAction = (_prev: unknown, value: Tag, id?: string) => Promise<ActionResponse>
+
+export const tagFieldValidators = {
+  name: tagSchema.shape.name,
+  tagExpression: tagSchema.shape.tagExpression,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save tag.'
+}

package/templates/default/src/app/(base)/tags/tag-form.test.tsx

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagForm from './tag-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('TagForm', () => {
+  it('submits valid values, shows a toast, and navigates back to the tags list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <TagForm
+        successTitle="Tag created"
+        successMessage="Tag created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Smoke')
+    await user.type(screen.getByLabelText('Tag Expression'), '@smoke')
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'Smoke',
+          tagExpression: '@smoke',
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Tag created',
+      description: 'Tag created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/tags')
+  })
+
+  it('shows validation feedback for an invalid tag expression and does not submit', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TagForm
+        successTitle="Tag created"
+        successMessage="Tag created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Smoke')
+    await user.type(screen.getByLabelText('Tag Expression'), 'smoke')
+
+    expect(
+      screen.getByText('Tag expression must be a single tag starting with @ and contain no spaces (e.g., "@smoke")'),
+    ).toBeInTheDocument()
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+})