feat(20143): Add Schema versioning (#334)

* feat(20143): add types for resource family and creation status

* feat(20143): add name to schema type

* feat(20143): add name to the JSON Schema for the Schema nodes

* refactor(20143): remove deprecated buttons from the code editor

* feat(20143): add a create selectable editor for the name of a resource

* refactor(20143): remove the create command from the version
- fix the latest identifier

* refactor(20143): refactor the side panel to support creating and editing schemas
- editing state to identify creation status
- conditional ordering and enabling of fields to identify state

* refactor(20143): extract resource families from the list of schemas

* refactor(20143): remove static UISchema

* refactor(20143): streamline content of default JSONSchema

* refactor(20143): refactor schema and script types to incorporate resource status

* refactor(20143): add name properties

* refactor(20143): refactor types

* refactor(20143): add versions to the attributes of existing schemas

* refactor(20143): add handling for new options

* refactor(20143): fix version

* refactor(20143): fix version

* refactor(20143): add status to the resource family payload

* refactor(20143): fix initial payload for schema nodes

* refactor(20143): fix imports

* fix(20143): fix default layout

* refactor(20143): exclude reuse of schema from publishing

* refactor(20143): fix id and version

* refactor(20143): remove ordering of fields

* refactor(20143): fix version

* refactor(20143): sdd draft to new named schema

* fix(20143): fix type

* fix(20143): fix translation

* test(20143): fix tests

* test(20143): add test-only dummy editor panel and fix the test

* test(20143): fix test

* test(20143): add test

* test(20143): add test

* test(20143): add test

* test(20143): fix test

* test(20143): add test

* test(20143): fix test

* test(20143): fix test

* chore(20143): reduce verbosity of stdout

* fix(20143): change the default content on a change in the type of schema

* fix(20143): fix default placeholders for JSON and PROTOBUF contents

* fix(20143): add draft name to the options of the select widget

* fix(20143): fix flow initialising the name and properties of a draft and modified version

* fix(20143): fix dependencies

* fix(20143): fix display of version

* Revert "chore(20143): reduce verbosity of stdout"

This reverts commit 370e1e9.

* refactor(20143): improve readability

* fix(20143): fix loading of name and version

* fix(20143): fix status

* fix(20143): fix label

* test(20143): fix test

* chore(20143): linting

* refactor(20712): update the edit flow for the Scripts (#357)

* chore(20143): reduce verbosity of stdout

* Revert "chore(20143): reduce verbosity of stdout"

This reverts commit 370e1e9.

* fix(20712): fix type and json-schema for the scripts

* feat(20712): add script families generator

* feat(20712): add support for script in the name selector

* feat(20712): change mapping for the script name widget

* refactor(20712): change UISchema to a dynamic definition

* feat(20712): implement the FSM flow for editing Scripts

* test(20712): add tests

* fix(20712): fix schema version and name

* test(20712): add tests

* fix(20712): fix content readonly

* test(20712): add test

* test(20712): fix test

* fix(20712): fix

* chore(20712): update prettier ignore

Author: vanch3d

hivemq-edge/src/frontend/.prettierignore

@@ -1,5 +1,6 @@
 pnpm-lock.*
 
+.idea/
 docs/
 dist/
 coverage/

hivemq-edge/src/frontend/package.json

@@ -69,6 +69,7 @@
     "i18next": "^22.4.15",
     "luxon": "^3.3.0",
     "mermaid": "^10.8.0",
+    "monaco-editor": "^0.47.0",
     "mqtt-match": "^3.0.0",
     "protobufjs": "^7.2.6",
     "react": "^18.2.0",

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -57,7 +57,7 @@ export const MOCK_INITIAL_POLICY = () => {
 
   const schemaNode: Node<SchemaData> = {
     id: '5',
-    data: { type: SchemaType.JSON, schemaSource: '', version: 1 },
+    data: { name: '5', type: SchemaType.JSON, schemaSource: '', version: 1 },
     type: DataHubNodeType.SCHEMA,
     position: { x: 645, y: -195 },
   }

hivemq-edge/src/frontend/src/extensions/datahub/__test-utils__/react-flow.mocks.tsx

@@ -1,35 +1,18 @@
-export const MOCK_PROTOBUF_SCHEMA = `
-syntax = "proto3";
+export const MOCK_PROTOBUF_SCHEMA = `syntax = "proto3";
 
 message GpsCoordinates {
   int32 longitude = 1;
   int32 latitude = 2;
 }
 `
 
-export const MOCK_JSONSCHEMA_SCHEMA = `
-{
-   "$id":"https://example.com/geographical-location.schema.json",
+export const MOCK_JSONSCHEMA_SCHEMA = `{
    "$schema":"https://json-schema.org/draft/2020-12/schema",
-   "title":"Longitude and Latitude Values",
-   "description":"A geographical coordinate.",
-   "required":[
-      "latitude",
-      "longitude"
-   ],
+   "title":"",
+   "description":"",
+   "required":[],
    "type":"object",
-   "properties":{
-      "latitude":{
-         "type":"number",
-         "minimum":-90,
-         "maximum":90
-      },
-      "longitude":{
-         "type":"number",
-         "minimum":-180,
-         "maximum":180
-      }
-   }
+   "properties":{}
 }
 `
 

hivemq-edge/src/frontend/src/extensions/datahub/__test-utils__/schema.mocks.ts

@@ -36,10 +36,11 @@ describe('PropertyPanelController', () => {
           <Route path="/node/:type/:nodeId" element={<PropertyPanelController />}></Route>
         </Routes>
       </ReactFlowProvider>,
-      { routerProps: { initialEntries: ['/node/TOPIC_FILTER/1'] } }
+      { routerProps: { initialEntries: ['/node/INTERNAL/1'] } }
     )
 
     cy.getByTestId('node-editor-under-construction').should('not.exist')
+    cy.getByTestId('loading-spinner').should('be.visible')
     cy.get('button[type="submit"]').should('be.visible')
   })
 })

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

@@ -8,7 +8,7 @@ import { MdPublishedWithChanges } from 'react-icons/md'
 import { BehaviorPolicy, DataPolicy, Schema, Script } from '@/api/__generated__'
 
 import { usePolicyChecksStore } from '@datahub/hooks/usePolicyChecksStore.ts'
-import { DataHubNodeType, DesignerStatus, DryRunResults } from '@datahub/types.ts'
+import { DataHubNodeType, DesignerStatus, DryRunResults, ResourceState, ResourceStatus } from '@datahub/types.ts'
 import { useCreateSchema } from '@datahub/api/hooks/DataHubSchemasService/useCreateSchema.tsx'
 import { useCreateScript } from '@datahub/api/hooks/DataHubScriptsService/useCreateScript.tsx'
 import { useCreateDataPolicy } from '@datahub/api/hooks/DataHubDataPoliciesService/useCreateDataPolicy.tsx'
@@ -24,13 +24,16 @@ interface Mutate<T> {
 type ValidMutate = Mutate<Schema> | Mutate<Script> | Mutate<DataPolicy> | Mutate<BehaviorPolicy>
 
 const resourceReducer =
-  <T extends { id: string }>(type: DataHubNodeType) =>
+  <T extends Schema | Script>(type: DataHubNodeType) =>
   (accumulator: T[], result: DryRunResults<T, never>) => {
     if (result.node.type !== type) return accumulator
     if (!result.data) return accumulator
     const { id } = result.data
     if (!id) return accumulator
 
+    const { version } = result.node.data as ResourceState
+    if (version !== ResourceStatus.DRAFT && version !== ResourceStatus.MODIFIED) return accumulator
+
     const allIds = accumulator.map((resource) => resource.id)
     if (allIds.includes(id)) return accumulator
 

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

@@ -1,19 +1,20 @@
+import { useMemo } from 'react'
 import { labelValue, WidgetProps } from '@rjsf/utils'
 import { Editor } from '@monaco-editor/react'
-import { Button, FormControl, FormLabel, HStack, VStack } from '@chakra-ui/react'
+import { FormControl, FormLabel, VStack } from '@chakra-ui/react'
 import { getChakra } from '@rjsf/chakra-ui/lib/utils'
-import { useTranslation } from 'react-i18next'
 
 const CodeEditor = (lng: string, props: WidgetProps) => {
-  const { t } = useTranslation('datahub')
   const chakraProps = getChakra({ uiSchema: props.uiSchema })
 
+  const isReadOnly = useMemo(() => props.readonly || props.options.readonly, [props.readonly, props.options.readonly])
+
   return (
     <FormControl
       {...chakraProps}
       isDisabled={props.disabled || props.readonly}
       isRequired={props.required}
-      isReadOnly={props.readonly}
+      isReadOnly={isReadOnly}
       isInvalid={props.rawErrors && props.rawErrors.length > 0}
     >
       {labelValue(
@@ -28,17 +29,10 @@ const CodeEditor = (lng: string, props: WidgetProps) => {
           height="40vh"
           defaultLanguage={lng}
           defaultValue={props.value}
+          value={props.value}
           onChange={(event) => props.onChange(event)}
+          options={{ readOnly: isReadOnly }}
         />
-
-        <HStack>
-          <Button variant="danger" isDisabled size="sm">
-            {t('workspace.codeEditor.delete')}
-          </Button>
-          <Button isDisabled size="sm">
-            {t('workspace.codeEditor.test')}
-          </Button>
-        </HStack>
       </VStack>
     </FormControl>
   )