Merge pull request #383

fix(20360): Fix the serialisation of multiple scripts

* fix(20360): remove the (unrecognised) format from the JSON schema for…

* refactor(20360): export the summary of the dryrun as a component

* refactor(20360): rename function

* refactor(20360): add reducer for unique resources

* fix(20360): fix the serialisation of multiple scripts

* chore(20360): fix config of code coverage

* chore(20360): a bit of cleaning

* test(20360): fix test

* refactor(20360): export and refactor function name utilities

* test(20360): add test

* fix(20360): fix layout of scripts

* chore(20360): fix duplicate engines

Author: vanch3d

hivemq-edge/src/frontend/package.json

@@ -25,10 +25,6 @@
     "test:ui": "vitest --ui",
     "preview": "vite preview"
   },
-  "engines": {
-    "node": "20",
-    "pnpm": "8"
-  },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
     "@chakra-ui/icons": "^2.0.19",

hivemq-edge/src/frontend/src/components/PaginatedTable/PaginatedTable.tsx

@@ -93,7 +93,6 @@ const PaginatedTable = <T,>({
       .flat()
       .filter(Boolean).length > 0
 
-  console.log('XXXXX', hasFooters)
   return (
     <>
       <TableContainer overflowY="auto" overflowX="auto" whiteSpace="normal">

hivemq-edge/src/frontend/src/extensions/datahub/api/__generated__/schemas/OperationData.json

@@ -1,23 +1,7 @@
 import { FC, useCallback, useMemo } from 'react'
 import { Node } from 'reactflow'
 import { useTranslation } from 'react-i18next'
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Box,
-  Button,
-  HStack,
-  Icon,
-  Stack,
-  AlertStatus,
-  CloseButton,
-  Link,
-  Text,
-} from '@chakra-ui/react'
-
-import { ConditionalWrapper } from '@/components/ConditonalWrapper.tsx'
+import { Box, Button, HStack, Icon, Stack } from '@chakra-ui/react'
 
 import PolicyErrorReport from '@datahub/components/helpers/PolicyErrorReport.tsx'
 import { usePolicyDryRun } from '@datahub/hooks/usePolicyDryRun.ts'
@@ -26,6 +10,7 @@ import { usePolicyChecksStore } from '@datahub/hooks/usePolicyChecksStore.ts'
 import { getDryRunStatusIcon } from '@datahub/utils/node.utils.ts'
 import { DataHubNodeData, DesignerStatus, PolicyDryRunStatus } from '@datahub/types.ts'
 import { DesignerToolBoxProps } from '@datahub/components/controls/DesignerToolbox.tsx'
+import PolicySummaryReport from '@datahub/components/helpers/PolicySummaryReport.tsx'
 
 interface ToolboxDryRunProps extends DesignerToolBoxProps {
   onShowNode?: (node: Node) => void
@@ -72,7 +57,6 @@ export const ToolboxDryRun: FC<ToolboxDryRunProps> = ({ onActiveStep, onShowNode
     })
   }
   const errorNodeFrom = useCallback((id: string) => nodes.find((node) => node.id === id), [nodes])
-  const alertStatus: AlertStatus = status === PolicyDryRunStatus.SUCCESS ? 'success' : 'warning'
 
   return (
     <Stack maxW={500}>
@@ -98,30 +82,11 @@ export const ToolboxDryRun: FC<ToolboxDryRunProps> = ({ onActiveStep, onShowNode
 
       {report && (
         <>
-          <Alert status={alertStatus} data-testid="toolbox-policy-check-status">
-            <AlertIcon />
-            <Box whiteSpace="normal">
-              <AlertTitle>
-                <Text as="span">{t('workspace.dryRun.report.success.title', { context: alertStatus })}</Text>
-              </AlertTitle>
-              <AlertDescription>
-                <ConditionalWrapper
-                  condition={status === PolicyDryRunStatus.SUCCESS}
-                  wrapper={(children) => (
-                    <Link
-                      aria-label={t('workspace.toolbox.navigation.goPublish') as string}
-                      onClick={() => onActiveStep?.(DesignerToolBoxProps.Steps.TOOLBOX_CHECK)}
-                    >
-                      {children}
-                    </Link>
-                  )}
-                >
-                  <Text as="span">{t('workspace.dryRun.report.success.description', { context: alertStatus })}</Text>
-                </ConditionalWrapper>
-              </AlertDescription>
-            </Box>
-            <CloseButton alignSelf="flex-start" position="relative" right={-1} top={-1} onClick={handleClearPolicy} />
-          </Alert>
+          <PolicySummaryReport
+            status={status || PolicyDryRunStatus.FAILURE}
+            onOpenPublish={() => onActiveStep?.(DesignerToolBoxProps.Steps.TOOLBOX_PUBLISH)}
+            onClearPolicy={handleClearPolicy}
+          />
           <PolicyErrorReport
             errors={getErrors() || []}
             onFitView={(id) => {

hivemq-edge/src/frontend/src/extensions/datahub/components/controls/ToolboxDryRun.tsx

@@ -0,0 +1,52 @@
+import { FC } from 'react'
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertStatus,
+  AlertTitle,
+  Box,
+  CloseButton,
+  Link,
+  Text,
+} from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { ConditionalWrapper } from '@/components/ConditonalWrapper.tsx'
+import { PolicyDryRunStatus } from '@datahub/types.ts'
+
+interface PolicySummaryReportProps {
+  status: PolicyDryRunStatus
+  onOpenPublish?: () => void
+  onClearPolicy?: () => void
+}
+
+const PolicySummaryReport: FC<PolicySummaryReportProps> = ({ status, onOpenPublish, onClearPolicy }) => {
+  const { t } = useTranslation('datahub')
+  const alertStatus: AlertStatus = status === PolicyDryRunStatus.SUCCESS ? 'success' : 'warning'
+
+  return (
+    <Alert status={alertStatus} data-testid="toolbox-policy-check-status">
+      <AlertIcon />
+      <Box whiteSpace="normal">
+        <AlertTitle>
+          <Text as="span">{t('workspace.dryRun.report.success.title', { context: alertStatus })}</Text>
+        </AlertTitle>
+        <AlertDescription>
+          <ConditionalWrapper
+            condition={status === PolicyDryRunStatus.SUCCESS}
+            wrapper={(children) => (
+              <Link aria-label={t('workspace.toolbox.navigation.goPublish') as string} onClick={onOpenPublish}>
+                {children}
+              </Link>
+            )}
+          >
+            <Text as="span">{t('workspace.dryRun.report.success.description', { context: alertStatus })}</Text>
+          </ConditionalWrapper>
+        </AlertDescription>
+      </Box>
+      <CloseButton alignSelf="flex-start" position="relative" right={-1} top={-1} onClick={onClearPolicy} />
+    </Alert>
+  )
+}
+
+export default PolicySummaryReport

hivemq-edge/src/frontend/src/extensions/datahub/components/helpers/PolicySummaryReport.tsx

@@ -4,7 +4,7 @@ import { XYPosition } from 'reactflow'
 export const CANVAS_POSITION = {
   Client: { x: -300, y: 0 } as XYPosition,
   Topic: { x: -300, y: 0 } as XYPosition,
-  Function: { x: 0, y: -275 } as XYPosition,
+  Function: { x: 350, y: -400 } as XYPosition,
   Transition: { x: 400, y: 100 } as XYPosition,
   Schema: { x: 0, y: -150 } as XYPosition,
   Validator: { x: 0, y: -150 } as XYPosition,

hivemq-edge/src/frontend/src/extensions/datahub/designer/checks.utils.ts

@@ -351,7 +351,7 @@ describe('checkValidityTransformFunction', () => {
       const { node, data, error, resources } = results[2]
       expect(node).toStrictEqual(MOCK_NODE_OPERATION)
       expect(error).toBeUndefined()
-      expect(resources).toBeUndefined()
+      expect(resources).toHaveLength(2)
       expect(data).toEqual(
         expect.objectContaining({
           arguments: {
@@ -367,14 +367,12 @@ describe('checkValidityTransformFunction', () => {
       const { node, data, error, resources } = results[1]
       expect(node).toStrictEqual(MOCK_NODE_OPERATION)
       expect(error).toBeUndefined()
-      expect(resources).toHaveLength(2)
+      expect(resources).toBeUndefined()
       expect(data).toEqual(
         expect.objectContaining({
-          arguments: {
-            transform: ['the_function'],
-          },
+          arguments: {},
           functionId: 'fn:the_function:latest',
-          id: 'node-id',
+          id: 'node-function',
         })
       )
     }

hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationNode.utils.spec.ts

@@ -15,7 +15,12 @@ import {
   WorkspaceAction,
   WorkspaceState,
 } from '@datahub/types.ts'
-import { checkValidityJSScript, loadScripts } from '@datahub/designer/script/FunctionNode.utils.ts'
+import {
+  checkValidityJSScript,
+  formatScriptName,
+  loadScripts,
+  parseScriptName,
+} from '@datahub/designer/script/FunctionNode.utils.ts'
 import { checkValiditySchema, loadSchema } from '@datahub/designer/schema/SchemaNode.utils.ts'
 import { PolicyCheckErrors } from '@datahub/designer/validation.errors.ts'
 import { isFunctionNodeType, isSchemaNodeType } from '@datahub/utils/node.utils.ts'
@@ -39,7 +44,6 @@ export function checkValidityTransformFunction(
 
   ///////// Check the function handle
   const functions = getIncomers(operationNode, nodes, edges).filter(isFunctionNodeType)
-
   if (!functions.length) {
     return [
       {
@@ -51,9 +55,9 @@ export function checkValidityTransformFunction(
 
   ///////// Check the serializers
   const serialisers = getIncomers(operationNode, nodes, edges).filter(isSchemaNodeType)
-
   const connectedEdges = getConnectedEdges([...serialisers], edges).filter(
-    (e) => e.targetHandle === OperationData.Handle.SERIALISER || e.targetHandle === OperationData.Handle.DESERIALISER
+    (edge) =>
+      edge.targetHandle === OperationData.Handle.SERIALISER || edge.targetHandle === OperationData.Handle.DESERIALISER
   )
   const [serial, ...restSerial] = connectedEdges.filter((edge) => edge.targetHandle === OperationData.Handle.SERIALISER)
   const [deserial, ...restDeserial] = connectedEdges.filter(
@@ -78,14 +82,11 @@ export function checkValidityTransformFunction(
     ]
   }
 
-  // TODO[19240] Should serial and deserial be different ?
-
   ///////// Check the resources
   const scriptNodes = functions.map((node) => checkValidityJSScript(node))
   const schemaNodes = serialisers.map((node) => checkValiditySchema(node))
 
-  const scriptName = scriptNodes[0].node as Node<FunctionData>
-  if (!scriptName) {
+  if (!scriptNodes.length) {
     return [
       {
         node: operationNode,
@@ -94,9 +95,23 @@ export function checkValidityTransformFunction(
     ]
   }
 
-  // TODO[19497] This should not have to happen on the client side!
-  const formattedScriptName = (functionNode: Node<FunctionData>): string => {
-    return `fn:${functionNode.data.name}:latest`
+  const { transform } = operationNode.data.formData as unknown as OperationData.DataHubTransformType
+  const defaultOrder = transform.length ? transform : scriptNodes.map((e) => e.data?.id)
+
+  const allTransformScripts: DryRunResults<PolicyOperation, Script>[] = []
+  for (const scriptId of defaultOrder) {
+    const script = scriptNodes.find((e) => e.data?.id === scriptId)
+    if (script) {
+      const scriptName = script.node as Node<FunctionData>
+
+      const operation: PolicyOperation = {
+        functionId: formatScriptName(scriptName),
+        arguments: {},
+        // TODO[19466] Id should be user-facing; Need to fix before merging!
+        id: scriptName.id,
+      }
+      allTransformScripts.push({ data: operation, node: operationNode })
+    }
   }
 
   const sourceDeserial = serialisers.find((node) => node.id === deserial.source)
@@ -120,14 +135,6 @@ export function checkValidityTransformFunction(
     id: `${operationNode.id}-deserializer`,
   }
 
-  // TODO[19497] there should be a list of functions
-  const operation: PolicyOperation = {
-    functionId: formattedScriptName(scriptName),
-    arguments: operationNode.data.formData,
-    // TODO[19466] Id should be user-facing; Need to fix before merging!
-    id: operationNode.id,
-  }
-
   const sourceSerial = serialisers.find((node) => node.id === serial.source)
   if (!sourceSerial) {
     return [
@@ -149,10 +156,12 @@ export function checkValidityTransformFunction(
     } as PolicyOperationArguments,
     id: `${operationNode.id}-serializer`,
   }
+
+  // The resources are added tp the last item for convenience
   return [
     { data: deserializer, node: operationNode },
-    { data: operation, node: operationNode, resources: [...scriptNodes, ...schemaNodes] },
-    { data: serializer, node: operationNode },
+    ...allTransformScripts,
+    { data: serializer, node: operationNode, resources: [...scriptNodes, ...schemaNodes] },
   ]
 }
 
@@ -307,7 +316,7 @@ export const loadPipeline = (
                 isTerminal: false,
                 hasArguments: true,
               },
-              formData: { transform: functions.map((e) => e.functionId) },
+              formData: { transform: functions.map((operation) => parseScriptName(operation)) },
             },
           }
 

hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationNode.utils.ts

@@ -3,7 +3,11 @@ import { Node } from 'reactflow'
 import { MOCK_DEFAULT_NODE } from '@/__test-utils__/react-flow/nodes.ts'
 
 import { DataHubNodeType, FunctionData } from '@datahub/types.ts'
-import { checkValidityJSScript } from '@datahub/designer/script/FunctionNode.utils.ts'
+import {
+  checkValidityJSScript,
+  formatScriptName,
+  parseScriptName,
+} from '@datahub/designer/script/FunctionNode.utils.ts'
 
 describe('checkValidityJSScript', () => {
   it('should return error when not configured', async () => {
@@ -60,3 +64,28 @@ describe('checkValidityJSScript', () => {
     expect(resources).toBeUndefined()
   })
 })
+
+describe('parseScriptName', () => {
+  it('should extract the function name from the operation', async () => {
+    expect(parseScriptName({ functionId: 'fn:my-function:1', id: 'fakeId', arguments: {} })).toEqual('my-function')
+    expect(parseScriptName({ functionId: 'my-raw-id', id: 'fakeId', arguments: {} })).toEqual('my-raw-id')
+  })
+})
+
+describe('formatScriptName', () => {
+  it('should format the id of the script', async () => {
+    const MOCK_NODE_SCRIPT: Node<FunctionData> = {
+      id: 'node-id',
+      type: DataHubNodeType.FUNCTION,
+      data: {
+        type: 'Javascript',
+        name: 'my-name',
+        version: 1,
+      },
+      ...MOCK_DEFAULT_NODE,
+      position: { x: 0, y: 0 },
+    }
+
+    expect(formatScriptName(MOCK_NODE_SCRIPT)).toEqual('fn:my-name:latest')
+  })
+})