create-appraisejs 0.1.7 → 0.1.8

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

@@ -1,58 +1,58 @@
-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
+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 +1,84 @@
-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
+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