Merge pull request #1021

* fix(33994): fix initial state for the schema panel

* fix(33994): fix initial state for the function panel

* fix(33994): add computation of internal state for resources

* test(33994): add tests

* test(33994): fix tests

* fix(33994): a bit of cleaning

Author: vanch3d

hivemq-edge-frontend/src/extensions/datahub/designer/schema/SchemaPanel.tsx

@@ -6,10 +6,10 @@ import type { CustomValidator, UiSchema } from '@rjsf/utils'
 import type { IChangeEvent } from '@rjsf/core'
 import { Card, CardBody } from '@chakra-ui/react'
 
+import type { PolicySchema } from '@/api/__generated__'
+import ErrorMessage from '@/components/ErrorMessage.tsx'
 import { enumFromStringValue } from '@/utils/types.utils.ts'
 
-import type { PanelProps, SchemaData } from '@datahub/types.ts'
-import { ResourceStatus, ResourceWorkingVersion, SchemaType } from '@datahub/types.ts'
 import { MOCK_JSONSCHEMA_SCHEMA, MOCK_PROTOBUF_SCHEMA } from '@datahub/__test-utils__/schema.mocks.ts'
 import { useGetAllSchemas } from '@datahub/api/hooks/DataHubSchemasService/useGetAllSchemas.ts'
 import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaForm.tsx'
@@ -18,19 +18,23 @@ import { MOCK_SCHEMA_SCHEMA } from '@datahub/designer/schema/SchemaData.ts'
 import { getSchemaFamilies } from '@datahub/designer/schema/SchemaNode.utils.ts'
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
 import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.ts'
-import ErrorMessage from '@/components/ErrorMessage.tsx'
+import { ResourceStatus, ResourceWorkingVersion, SchemaType } from '@datahub/types.ts'
+import type { PanelProps, SchemaData } from '@datahub/types.ts'
+import { getResourceInternalStatus } from '@datahub/utils/policy.utils.ts'
 
 export const SchemaPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { data: allSchemas } = useGetAllSchemas()
   const { nodes } = useDataHubDraftStore()
   const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
   const [formData, setFormData] = useState<SchemaData | null>(() => {
+    if (!allSchemas) return null
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<SchemaData> | undefined
+    if (!adapterNode) return null
 
-    const internalStatus =
-      typeof adapterNode?.data.version === 'number' ? ResourceStatus.LOADED : adapterNode?.data.version
+    const internalState = getResourceInternalStatus<PolicySchema>(adapterNode.data.name, allSchemas, getSchemaFamilies)
+    const intData: SchemaData = { ...adapterNode.data, ...internalState }
 
-    return adapterNode ? { ...adapterNode.data, internalStatus } : null
+    return intData
   })
 
   const onReactFlowSchemaFormChange = useCallback(

hivemq-edge-frontend/src/extensions/datahub/designer/script/FunctionPanel.tsx

@@ -5,30 +5,35 @@ import { Card, CardBody } from '@chakra-ui/react'
 import type { UiSchema } from '@rjsf/utils'
 import type { IChangeEvent } from '@rjsf/core'
 
+import type { Script } from '@/api/__generated__'
+import ErrorMessage from '@/components/ErrorMessage.tsx'
+
 import { MOCK_JAVASCRIPT_SCHEMA } from '@datahub/__test-utils__/schema.mocks.ts'
-import type { FunctionData, PanelProps } from '@datahub/types.ts'
-import { ResourceStatus, ResourceWorkingVersion } from '@datahub/types.ts'
-import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
-import { useGetAllScripts } from '@datahub/api/hooks/DataHubScriptsService/useGetAllScripts.ts'
 import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaForm.tsx'
 import { datahubRJSFWidgets } from '@datahub/designer/datahubRJSFWidgets.tsx'
 import { MOCK_FUNCTION_SCHEMA } from '@datahub/designer/script/FunctionData.ts'
 import { getScriptFamilies } from '@datahub/designer/schema/SchemaNode.utils.ts'
+import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+import { useGetAllScripts } from '@datahub/api/hooks/DataHubScriptsService/useGetAllScripts.ts'
 import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.ts'
-import ErrorMessage from '@/components/ErrorMessage.tsx'
+import type { FunctionData, PanelProps } from '@datahub/types.ts'
+import { ResourceStatus, ResourceWorkingVersion } from '@datahub/types.ts'
+import { getResourceInternalStatus } from '@datahub/utils/policy.utils.ts'
 
 export const FunctionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { data: allScripts } = useGetAllScripts({})
   const { nodes } = useDataHubDraftStore()
   const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const [formData, setFormData] = useState<FunctionData | null>(() => {
+    if (!allScripts) return null
     const sourceNode = nodes.find((node) => node.id === selectedNode) as Node<FunctionData> | undefined
+    if (!sourceNode) return null
 
-    const internalStatus =
-      typeof sourceNode?.data.version === 'number' ? ResourceStatus.LOADED : sourceNode?.data.version
+    const internalState = getResourceInternalStatus<Script>(sourceNode.data.name, allScripts, getScriptFamilies)
+    const intData: FunctionData = { ...sourceNode.data, ...internalState }
 
-    return sourceNode ? { ...sourceNode.data, internalStatus } : null
+    return intData
   })
 
   const getUISchema = (script: FunctionData | null): UiSchema => {
@@ -37,10 +42,6 @@ export const FunctionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) =>
       type: {
         'ui:widget': 'hidden',
       },
-      // 'ui:order':
-      //   internalStatus === ResourceStatus.DRAFT || !internalStatus
-      //     ? ['name', 'type', 'schemaSource', 'messageType', 'version']
-      //     : ['name', 'version', 'schemaSource', 'messageType', 'type'],
       name: {
         'ui:widget': 'datahub:function-name',
         'ui:options': {

hivemq-edge-frontend/src/extensions/datahub/utils/policy.utils.spec.ts

@@ -1,8 +1,11 @@
+import { MOCK_SCRIPT_ID, mockScript } from '@datahub/api/hooks/DataHubScriptsService/__handlers__'
+import { getSchemaFamilies, getScriptFamilies } from '@datahub/designer/schema/SchemaNode.utils.ts'
+import { ResourceStatus, ResourceWorkingVersion } from '@datahub/types.ts'
 import { describe, expect } from 'vitest'
 
-import type { PolicySchema, SchemaList } from '@/api/__generated__'
-import { mockSchemaTempHumidity } from '@datahub/api/hooks/DataHubSchemasService/__handlers__'
-import { type ExpandableGroupedResource, groupResourceItems } from './policy.utils'
+import type { PolicySchema, SchemaList, Script } from '@/api/__generated__'
+import { MOCK_SCHEMA_ID, mockSchemaTempHumidity } from '@datahub/api/hooks/DataHubSchemasService/__handlers__'
+import { type ExpandableGroupedResource, getResourceInternalStatus, groupResourceItems } from './policy.utils'
 
 interface GroupSchemaTest {
   data: SchemaList | undefined
@@ -88,3 +91,34 @@ describe('groupResourceItems', () => {
     }
   )
 })
+
+describe('getResourceInternalStatus', () => {
+  it('should work for Schemas', () => {
+    expect(getResourceInternalStatus<PolicySchema>('my-schema', {}, getSchemaFamilies)).toStrictEqual({
+      internalStatus: ResourceStatus.DRAFT,
+      version: ResourceWorkingVersion.DRAFT,
+    })
+
+    expect(
+      getResourceInternalStatus<PolicySchema>(MOCK_SCHEMA_ID, { items: [mockSchemaTempHumidity] }, getSchemaFamilies)
+    ).toStrictEqual({
+      internalStatus: ResourceStatus.LOADED,
+      internalVersions: [1],
+      version: 1,
+    })
+  })
+  it('should work for Scripts', () => {
+    expect(getResourceInternalStatus<Script>('my-script', {}, getScriptFamilies)).toStrictEqual({
+      internalStatus: ResourceStatus.DRAFT,
+      version: ResourceWorkingVersion.DRAFT,
+    })
+
+    expect(getResourceInternalStatus<Script>(MOCK_SCRIPT_ID, { items: [mockScript] }, getScriptFamilies)).toStrictEqual(
+      {
+        internalStatus: ResourceStatus.LOADED,
+        internalVersions: [1],
+        version: 1,
+      }
+    )
+  })
+})

hivemq-edge-frontend/src/extensions/datahub/utils/policy.utils.ts

@@ -1,8 +1,12 @@
-// TODO[OpenAPI] This MUST be the common properties of DataHub resources, i.e. Script and Schema
-export interface ResourceBase {
-  id: string
-  readonly version?: number
-}
+import type { PolicySchema, Script } from '@/api/__generated__'
+import { type ResourceFamily, ResourceStatus } from '@datahub/types.ts'
+import type { ResourceState } from '@datahub/types.ts'
+import { ResourceWorkingVersion } from '@datahub/types.ts'
+
+// TODO[OpenAPI]
+//  - This MUST be the common properties of DataHub resources, i.e. Script and Schema
+//  - Assuming that Script and Schema both have the same properties
+export type ResourceBase = Pick<PolicySchema, 'id' | 'version'> | Pick<Script, 'id' | 'version'>
 
 export type ExpandableGroupedResource<T extends ResourceBase> = T & {
   children?: T[]
@@ -39,3 +43,22 @@ export const groupResourceItems = <T extends { items?: Array<U> }, U extends Res
     } as ExpandableGroupedResource<U>
   })
 }
+
+export const getResourceInternalStatus = <U extends ResourceBase>(
+  id: string,
+  allResources: { items?: U[] },
+  formatter: (items: U[]) => Record<string, ResourceFamily>
+): ResourceState | undefined => {
+  const schema = allResources.items?.findLast((resource) => resource.id === id)
+  if (schema) {
+    return {
+      version: schema.version || ResourceWorkingVersion.MODIFIED,
+      internalVersions: formatter(allResources?.items || [])[schema.id].versions,
+      internalStatus: ResourceStatus.LOADED,
+    }
+  }
+  return {
+    internalStatus: ResourceStatus.DRAFT,
+    version: ResourceWorkingVersion.DRAFT,
+  }
+}