create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,158 +0,0 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateStepAction } from '@/actions/template-step/template-step-actions'
-import { TemplateStep, TemplateStepParameter, TemplateStepType } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { CheckCheck, MousePointer2 } from 'lucide-react'
-import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
-import { Kbd, KbdGroup } from '@/components/ui/kbd'
-
-export const templateStepTableCols: ColumnDef<TemplateStep>[] = [
-  {
-    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: 'icon',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Icon" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      return (
-        <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
-          {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
-        </Badge>
-      )
-    },
-  },
-  {
-    accessorKey: 'type',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      const icon =
-        templateStep.type === TemplateStepType.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} {templateStep.type.charAt(0).toUpperCase() + templateStep.type.slice(1).toLowerCase()}
-        </Badge>
-      )
-    },
-  },
-  {
-    accessorKey: 'parameters',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Parameters" />,
-    cell: ({ row }) => {
-      const parameters = row.original as TemplateStep & {
-        parameters: TemplateStepParameter[]
-      }
-      return (
-        <KbdGroup className="flex flex-wrap gap-1">
-          {parameters.parameters.map((parameter: TemplateStepParameter) => (
-            <Kbd
-              key={parameter.id}
-              className="bg-gray-200 px-2 text-xs text-gray-600 dark:bg-gray-700/55 dark:text-gray-400"
-            >
-              {parameter.name}
-            </Kbd>
-          ))}
-        </KbdGroup>
-      )
-    },
-  },
-  {
-    accessorKey: 'signature',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Signature" />,
-    cell: ({ row }) => {
-      const templateStep = row.original
-      const signature = templateStep.signature || ''
-      const parts: (string | React.ReactElement)[] = []
-      const regex = /\{(string|int)\}/g
-      let lastIndex = 0
-      let match
-
-      while ((match = regex.exec(signature)) !== null) {
-        if (match.index > lastIndex) {
-          parts.push(signature.slice(lastIndex, match.index))
-        }
-
-        parts.push(
-          <Badge key={match.index} variant="outline" className="mx-1 px-1.5">
-            {match[0]}
-          </Badge>,
-        )
-
-        lastIndex = regex.lastIndex
-      }
-
-      if (lastIndex < signature.length) {
-        parts.push(signature.slice(lastIndex))
-      }
-
-      return (
-        <div className="inline-flex flex-wrap items-center gap-0 text-sm">{parts.length > 0 ? parts : signature}</div>
-      )
-    },
-  },
-  {
-    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 templateStep = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-steps/modify/${templateStep.id}`}
-          deleteHandler={() => deleteTemplateStepAction([templateStep.id])}
-        />
-      )
-    },
-  },
-]

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

@@ -1,24 +0,0 @@
-import { deleteTemplateStepAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { templateStepTableCols } from './template-step-table-columns'
-import { TemplateStep } from '@prisma/client'
-
-const TemplateStepTable = async () => {
-  const { data: templateSteps } = await getAllTemplateStepsAction()
-
-  return (
-    <>
-      <DataTable
-        columns={templateStepTableCols}
-        data={templateSteps as TemplateStep[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-steps/create"
-        modifyLink="/template-steps/modify"
-        deleteAction={deleteTemplateStepAction}
-      />
-    </>
-  )
-}
-
-export default TemplateStepTable

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

@@ -1,56 +0,0 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Blocks } from 'lucide-react'
-import React from 'react'
-import TemplateTestCaseForm from '../template-test-case-form'
-import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Template Test Case',
-  description: 'Create a new template test case to quickly create test cases',
-}
-
-const CreateTemplateTestCase = async () => {
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-
-  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
-    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
-            Create Template Test Case
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Create a new template test case to quickly create test cases</HeaderSubtitle>
-      </div>
-      <TemplateTestCaseForm
-        defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        onSubmitAction={createTemplateTestCaseAction}
-        defaultValueInput={true}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateTestCase

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

@@ -1,89 +0,0 @@
-import {
-  Locator,
-  LocatorGroup,
-  TemplateStep,
-  TemplateStepParameter,
-  TemplateTestCase,
-  TemplateTestCaseStep,
-  TemplateTestCaseStepParameter,
-} from '@prisma/client'
-import React from 'react'
-import TemplateTestCaseForm from '../../template-test-case-form'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import {
-  getAllTemplateStepParamsAction,
-  getAllTemplateStepsAction,
-} from '@/actions/template-step/template-step-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import {
-  getTemplateTestCaseByIdAction,
-  updateTemplateTestCaseAction,
-} from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Template Test Case',
-  description: 'Modify a template test case',
-}
-
-const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getTemplateTestCaseByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-  const templateTestCase = data as TemplateTestCase & {
-    steps: (TemplateTestCaseStep & {
-      parameters: TemplateTestCaseStepParameter[]
-    })[]
-  }
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
-    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Modify Template Test Case</PageHeader>
-        <HeaderSubtitle>Modify a template test case</HeaderSubtitle>
-      </div>
-      <TemplateTestCaseForm
-        onSubmitAction={updateTemplateTestCaseAction}
-        id={id}
-        defaultTitle={templateTestCase.name}
-        defaultDescription={templateTestCase.description || ''}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
-            order: step.order,
-            label: step.label,
-            gherkinStep: step.gherkinStep,
-            icon: step.icon,
-            parameters: ((step.parameters || []) as TemplateTestCaseStepParameter[]).map(
-              (param: TemplateTestCaseStepParameter) => ({
-                name: param.name,
-                defaultValue: param.defaultValue,
-                type: param.type,
-                order: param.order,
-              }),
-            ),
-            templateStepId: step.templateStepId,
-          }
-          return acc
-        }, {} as TemplateTestCaseNodeOrderMap)}
-      />
-    </>
-  )
-}
-
-export default ModifyTemplateTestCase

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

@@ -1,58 +0,0 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Blocks } from 'lucide-react'
-import React, { Suspense } from 'react'
-import TemplateTestCaseTable from './template-test-case-table'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Template Test Cases',
-  description: 'Manage template test cases for quickly creating test cases',
-}
-
-const TemplateTestCasesPage = async () => {
-  const { data: templateTestCases, error: templateTestCasesError } = await getAllTemplateTestCasesAction()
-
-  if (templateTestCasesError) {
-    return <div>Error: {templateTestCasesError}</div>
-  }
-
-  const templateTestCasesData = templateTestCases as (TemplateTestCase & { steps: TemplateTestCaseStep[] })[]
-
-  if (!templateTestCasesData || templateTestCasesData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<Blocks className="h-8 w-8" />}
-          title="No template test cases found"
-          description="Get started by creating a template test case to quickly create test cases"
-          createRoute="/template-test-cases/create"
-          createText="Create Template Test Case"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
-            Template Test Cases
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>A collection of templates to quickly create test cases</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TemplateTestCaseTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TemplateTestCasesPage

package/templates/default/src/app/(base)/template-test-cases/template-test-case-flow.tsx

@@ -1,84 +0,0 @@
-import FlowDiagram from '@/components/diagram/flow-diagram'
-import { TemplateTestCaseNodeOrderMap, NodeOrderMap } from '@/types/diagram/diagram'
-import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
-import React, { useCallback, useState, useEffect, useRef } from 'react'
-
-function useDebouncedCallback<T extends unknown[]>(callback: (...args: T) => void, delay: number) {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  return (...args: T) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    timeoutRef.current = setTimeout(() => {
-      callback(...args)
-    }, delay)
-  }
-}
-
-const TemplateTestCaseFlow = ({
-  initialNodesOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  onNodeOrderChange,
-  defaultValueInput = false,
-}: {
-  initialNodesOrder: TemplateTestCaseNodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  onNodeOrderChange: (nodesOrder: TemplateTestCaseNodeOrderMap) => void
-  defaultValueInput?: boolean
-}) => {
-  const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(initialNodesOrder)
-
-  const handleNodeOrderChange = useCallback(
-    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
-      // Convert NodeOrderMap to TemplateTestCaseNodeOrderMap if needed
-      const convertedNodeOrder: TemplateTestCaseNodeOrderMap = {}
-      Object.entries(nodeOrder).forEach(([key, nodeData]) => {
-        convertedNodeOrder[key] = {
-          ...nodeData,
-          parameters: nodeData.parameters.map(
-            (param: {
-              name: string
-              value?: string
-              defaultValue?: string
-              type: StepParameterType
-              order: number
-            }) => ({
-              ...param,
-              defaultValue: 'value' in param ? param.value : param.defaultValue,
-            }),
-          ),
-        }
-      })
-      setNodesOrder(convertedNodeOrder)
-    },
-    [setNodesOrder],
-  )
-
-  const debouncedSaveNodesOrder = useDebouncedCallback(onNodeOrderChange, 200)
-
-  useEffect(() => {
-    debouncedSaveNodesOrder(nodesOrder)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodesOrder])
-
-  return (
-    <>
-      <FlowDiagram
-        nodeOrder={nodesOrder}
-        templateStepParams={templateStepParams}
-        onNodeOrderChange={handleNodeOrderChange}
-        templateSteps={templateSteps}
-        locators={locators}
-        locatorGroups={locatorGroups}
-        defaultValueInput={defaultValueInput}
-      />
-    </>
-  )
-}
-
-export default TemplateTestCaseFlow