create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/template-step-groups/template-step-group-table-columns.tsx

@@ -1,89 +1,89 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { TemplateStepGroup, TemplateStepGroupType } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
-import { formatDateTime } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { CheckCheck, MousePointer2 } from 'lucide-react'
-
-export const templateStepGroupTableCols: ColumnDef<TemplateStepGroup>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'description',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
-  },
-  {
-    accessorKey: 'type',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-    cell: ({ row }) => {
-      const templateStepGroup = row.original
-      const icon =
-        templateStepGroup.type === TemplateStepGroupType.ACTION ? (
-          <MousePointer2 className="h-4 w-4" />
-        ) : (
-          <CheckCheck className="h-4 w-4" />
-        )
-      return (
-        <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {icon}
-          {templateStepGroup.type.charAt(0).toUpperCase() + templateStepGroup.type.slice(1).toLowerCase()}
-        </Badge>
-      )
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const templateStepGroup = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-step-groups/modify/${templateStepGroup.id}`}
-          deleteHandler={() => deleteTemplateStepGroupAction([templateStepGroup.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { deleteTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import TableActions from '@/components/table/table-actions'
+import { formatDateTime } from '@/lib/utils'
+import { CheckCheck, MousePointer2 } from 'lucide-react'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { type TemplateStepGroupTableRow } from './template-step-group-helpers'
+
+export const templateStepGroupTableCols: ColumnDef<TemplateStepGroupTableRow>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const templateStepGroup = row.original
+      const icon =
+        templateStepGroup.type === 'ACTION' ? (
+          <MousePointer2 className="h-4 w-4" />
+        ) : (
+          <CheckCheck className="h-4 w-4" />
+        )
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {icon}
+          {templateStepGroup.type.charAt(0).toUpperCase() + templateStepGroup.type.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const templateStepGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-step-groups/modify/${templateStepGroup.id}`}
+          deleteHandler={() => deleteTemplateStepGroupAction([templateStepGroup.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/template-step-groups/template-step-group-table.tsx

@@ -1,32 +1,34 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { templateStepGroupTableCols } from './template-step-group-table-columns'
-import {
-  getAllTemplateStepGroupsAction,
-  deleteTemplateStepGroupAction,
-} from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroup } from '@prisma/client'
-
-const TemplateStepGroupTable = async () => {
-  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
-
-  if (templateStepGroupsError) {
-    return <div>Error: {templateStepGroupsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={templateStepGroupTableCols}
-        data={templateStepGroups as TemplateStepGroup[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-step-groups/create"
-        modifyLink="/template-step-groups/modify"
-        deleteAction={deleteTemplateStepGroupAction}
-      />
-    </>
-  )
-}
-
-export default TemplateStepGroupTable
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateStepGroupTableCols } from './template-step-group-table-columns'
+import {
+  getAllTemplateStepGroupsAction,
+  deleteTemplateStepGroupAction,
+} from '@/actions/template-step-group/template-step-group-actions'
+import { getTemplateStepGroupRows } from './template-step-group-helpers'
+
+const TemplateStepGroupTable = async () => {
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (templateStepGroupsError) {
+    return <div>Error: {templateStepGroupsError}</div>
+  }
+
+  const templateStepGroupRows = getTemplateStepGroupRows(templateStepGroups)
+
+  return (
+    <>
+      <DataTable
+        columns={templateStepGroupTableCols}
+        data={templateStepGroupRows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-step-groups/create"
+        modifyLink="/template-step-groups/modify"
+        deleteAction={deleteTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default TemplateStepGroupTable

package/templates/default/src/app/(base)/template-steps/create/page.tsx

@@ -1,37 +1,40 @@
-import React from 'react'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { TemplateStepForm } from '../template-step-form'
-import { createTemplateStepAction } from '@/actions/template-step/template-step-actions'
-import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Template Step',
-  description: 'Create a new template step to be used in test cases',
-}
-
-const CreateTemplateStep = async () => {
-  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
-
-  if (templateStepGroupsError) {
-    return <div>Error: {templateStepGroupsError}</div>
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Template Step</PageHeader>
-        <HeaderSubtitle>Create a new template step to be used in test cases</HeaderSubtitle>
-      </div>
-      <TemplateStepForm
-        successTitle="Template Step Created"
-        successMessage="The template step has been created successfully"
-        onSubmitAction={createTemplateStepAction}
-        templateStepGroups={templateStepGroups as Array<{ id: string; name: string }>}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateStep
+import React from 'react'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TemplateStepForm } from '../template-step-form'
+import { createTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+import { getTemplateStepGroupRows } from '../template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Step',
+  description: 'Create a new template step to be used in test cases',
+}
+
+const CreateTemplateStep = async () => {
+  const response = await getAllTemplateStepGroupsAction()
+  const templateStepGroups = getTemplateStepGroupRows(response.data)
+
+  if (response.error) {
+    return <div>Error: {response.error}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step</PageHeader>
+        <HeaderSubtitle>Create a new template step to be used in test cases</HeaderSubtitle>
+      </div>
+      <TemplateStepForm
+        successTitle="Template Step Created"
+        successMessage="The template step has been created successfully"
+        onSubmitAction={createTemplateStepAction}
+        templateStepGroups={templateStepGroups}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStep

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

@@ -1,49 +1,54 @@
-import { updateTemplateStepAction } from '@/actions/template-step/template-step-actions'
-import { getTemplateStepByIdAction } from '@/actions/template-step/template-step-actions'
-import { TemplateStepForm } from '../../template-step-form'
-import { TemplateStep, TemplateStepParameter } from '@prisma/client'
-import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Template Step',
-  description: 'Update template step configuration',
-}
-
-export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params
-  const { data, error } = await getTemplateStepByIdAction(id)
-  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
-
-  if (error || templateStepGroupsError) {
-    return <div>Error: {error || templateStepGroupsError}</div>
-  }
-
-  const templateStep = data as TemplateStep & {
-    parameters: TemplateStepParameter[]
-  }
-  return (
-    <TemplateStepForm
-      successTitle="Template step modified"
-      successMessage="The template step has been modified"
-      onSubmitAction={updateTemplateStepAction}
-      defaultValues={{
-        name: templateStep.name,
-        type: templateStep.type,
-        signature: templateStep.signature,
-        icon: templateStep.icon,
-        description: templateStep.description || '',
-        functionDefinition: templateStep.functionDefinition || '',
-        params: templateStep.parameters.map(param => ({
-          id: param.id,
-          name: param.name,
-          type: param.type,
-          order: param.order,
-        })),
-        templateStepGroupId: templateStep.templateStepGroupId || '',
-      }}
-      id={id}
-      templateStepGroups={templateStepGroups as Array<{ id: string; name: string }>}
-    />
-  )
-}
+import { updateTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getTemplateStepByIdAction } from '@/actions/template-step/template-step-actions'
+import { TemplateStepForm } from '../../template-step-form'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+import { getEditableTemplateStep, getTemplateStepGroupRows } from '../../template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Step',
+  description: 'Update template step configuration',
+}
+
+export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const [templateStepResponse, templateStepGroupsResponse] = await Promise.all([
+    getTemplateStepByIdAction(id),
+    getAllTemplateStepGroupsAction(),
+  ])
+
+  if (templateStepResponse.error || templateStepGroupsResponse.error) {
+    return <div>Error: {templateStepResponse.error || templateStepGroupsResponse.error}</div>
+  }
+
+  const templateStep = getEditableTemplateStep(templateStepResponse.data)
+  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
+  if (!templateStep) {
+    return <div>Error: Invalid template step</div>
+  }
+  return (
+    <TemplateStepForm
+      successTitle="Template step modified"
+      successMessage="The template step has been modified"
+      onSubmitAction={updateTemplateStepAction}
+      defaultValues={{
+        name: templateStep.name,
+        type: templateStep.type,
+        signature: templateStep.signature,
+        icon: templateStep.icon,
+        description: templateStep.description || '',
+        functionDefinition: templateStep.functionDefinition || '',
+        params: templateStep.parameters.map(param => ({
+          id: param.id,
+          name: param.name,
+          type: param.type,
+          order: param.order,
+        })),
+        templateStepGroupId: templateStep.templateStepGroupId || '',
+      }}
+      id={id}
+      templateStepGroups={templateStepGroups}
+    />
+  )
+}

package/templates/default/src/app/(base)/template-steps/page.tsx

@@ -1,58 +1,59 @@
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import TemplateStepTable from './template-step-table'
-import { LayoutTemplate } from 'lucide-react'
-import { Suspense } from 'react'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { TemplateStep } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Template Steps',
-  description: 'Manage template steps for reusable test steps',
-}
-
-const TemplateSteps = async () => {
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  if (templateStepsError) {
-    return <div>Error: {templateStepsError}</div>
-  }
-
-  const templateStepsData = templateSteps as TemplateStep[]
-
-  if (!templateStepsData || templateStepsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<LayoutTemplate className="h-8 w-8" />}
-          title="No template steps found"
-          description="Get started by creating a template step to define reusable test steps"
-          createRoute="/template-steps/create"
-          createText="Create Template Step"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <LayoutTemplate className="mr-2 h-8 w-8" />
-            Template Steps
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Define reusable test steps for consistent and efficient test authoring</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TemplateStepTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TemplateSteps
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import TemplateStepTable from './template-step-table'
+import { LayoutTemplate } from 'lucide-react'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+
+import { getTemplateStepRows } from './template-step-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Steps',
+  description: 'Manage template steps for reusable test steps',
+}
+
+const TemplateSteps = async () => {
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+
+  if (templateStepsError) {
+    return <div>Error: {templateStepsError}</div>
+  }
+
+  const templateStepsData = getTemplateStepRows(templateSteps)
+
+  if (!templateStepsData || templateStepsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<LayoutTemplate className="h-8 w-8" />}
+          title="No template steps found"
+          description="Get started by creating a template step to define reusable test steps"
+          createRoute="/template-steps/create"
+          createText="Create Template Step"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <LayoutTemplate className="mr-2 h-8 w-8" />
+            Template Steps
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Define reusable test steps for consistent and efficient test authoring</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateStepTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateSteps