Merge pull request #549

feat(25265): Add a schema mapping editor to the subscriptions * feat(25265): add custom field for the outward subscription editor * feat(25265): add mocks * feat(25265): add mocks * refactor(25265): refactor the json schema browser * feat(25265): add list component for subscription * feat(25265): add placeholder for the data model components * feat(25265): add placeholder for mapping editor * feat(25265): add placeholder for the mapping item * feat(25265): add container for the subscription * feat(25265): add react query hooks for payloads * refactor(25265): refactor mocks * fix(25265): fix props * fix(25265): fix initial size of the side panel * refactor(25265): add the data models into the source and destination … * feat(25265): add topic selector * feat(25265): add handler for changes * refactor(25265): refactor topic and tag icons * fix(25265): fix mocks * feat(25265): add support for PLC Tags * refactor(25265): add placeholder for transformation editor * fix(25265): fix loader * fix(25265): add PLC Tags * fix(25265): add PLC Tags * fix(25265): fix layout * fix(25265): fix types * fix(25265): fix types * chore(25265): update dependencies * fix(25265): remove faker generator * feat(25265): add drag and drop * fix(25265): fix layout * feat(25265): add draggable flag to the property browser * refactor(25265): add support for mapping validation * chore(25265): linting * feat(25265): update translations * refactor(25265): fix the mocks * refactor(25265): fix types * fix(25265): fix extraction of object-based properties * feat(25265): serialise the mappings * refactor(25265): fix layout * chore(25265): eslint * chore(25265): bit of cleaning * test(25265): fix test * test(25265): add test * chore(25265): a bit of renaming * refactor(25265): export the custom border style for drop zones * refactor(25265): refactor main icons * refactor(25265): refactor tags * test(25265): add tests * test(25265): add tests * test(25265): add tests * test(25265): add tests * test(25265): add tests * test(25265): add tests * test(25265): add tests * test(25265): fix tests * test(25265): fix tests * refactor(25265): fix button size * fix(25265): fix bug with finding mapping * test(25265): add tests * test(25265): fix coverage * refactor(25265): refactor component * refactor(25265): refactor component * test(25265): add tests * fix(25265): fix creatable status * test(25265): add tests * fix(25265): fix review issues
hivemq · Sep 11, 2024 · 217b2e6 · 217b2e6
1 parent e5cb868
commit 217b2e6
Show file tree

Hide file tree

Showing 64 changed files with 1,587 additions and 197 deletions.
diff --git a/hivemq-edge/src/frontend/package.json b/hivemq-edge/src/frontend/package.json
@@ -27,6 +27,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/radio": "^2.1.2",
@@ -87,7 +88,7 @@
     "react-hook-form": "^7.43.9",
     "react-hotkeys-hook": "^4.5.0",
     "react-i18next": "^14.1.1",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.11.2",
     "reactflow": "^11.11.4",
     "recharts": "^2.12.7",

diff --git a/hivemq-edge/src/frontend/pnpm-lock.yaml b/hivemq-edge/src/frontend/pnpm-lock.yaml
diff --git a/...ils__/adapters/mqtt-subscription.mocks.ts → ...ks/useTopicOntology/__handlers__/index.ts b/...ils__/adapters/mqtt-subscription.mocks.ts → ...ks/useTopicOntology/__handlers__/index.ts
@@ -1,4 +1,89 @@
 import { RJSFSchema } from '@rjsf/utils'
+import { DeviceTags } from '@/modules/Subscriptions/types.ts'
+
+export const GENERATE_DATA_MODELS = (_count?: number, short = false): RJSFSchema => {
+  const model: RJSFSchema = {
+    title: 'A registration form',
+    description: 'A simple form example.',
+    type: 'object',
+    required: ['firstName', 'lastName'],
+    properties: {
+      firstName: {
+        type: 'string',
+        title: short ? 'First String' : 'firstName',
+        default: 'Chuck',
+      },
+      lastName: {
+        type: 'string',
+        title: short ? 'Second String' : 'lastname',
+      },
+      age: {
+        type: 'integer',
+        title: short ? 'Number' : 'age',
+      },
+    },
+  }
+
+  if (!short)
+    model.properties = {
+      ...model.properties,
+      bio: {
+        type: 'string',
+        title: 'bio',
+      },
+      password: {
+        type: 'string',
+        title: 'password',
+        minLength: 3,
+      },
+      telephone: {
+        type: 'string',
+        title: 'telephone',
+        minLength: 10,
+      },
+      listOfStrings: {
+        type: 'array',
+        title: 'listOfStrings',
+        items: {
+          type: 'string',
+          default: 'bazinga',
+        },
+      },
+      minItemsList: {
+        type: 'array',
+        title: 'minItemsList',
+        minItems: 3,
+        items: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              title: 'name',
+              default: 'Default name',
+            },
+          },
+        },
+      },
+      subItems: {
+        type: 'object',
+        title: 'subItems',
+        properties: {
+          name: {
+            type: 'string',
+            title: 'name',
+            default: 'Default name',
+          },
+          type: {
+            type: 'string',
+            title: 'type',
+            default: 'Default type',
+          },
+        },
+      },
+    }
+
+  return model
+}
 
 export const MOCK_MQTT_SCHEMA_REFS: RJSFSchema = {
   definitions: {
@@ -113,3 +198,9 @@ export const MOCK_MQTT_TOPIC_SAMPLES = [
   'tmp/broker2/topic1',
   'tmp/broker4/topic1/segment2',
 ]
+
+export const MOCK_DEVICE_TAGS: DeviceTags[] = [
+  { tag: 'write/power-management/alert', node: 'ns=3;i=1002' },
+  { tag: 'write/power-management/off', node: 'ns=3;i=1003' },
+  { tag: 'write/log/event', node: 'ns=3;i=1008' },
+]
diff --git a/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetDeviceTags.tsx b/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetDeviceTags.tsx
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { QUERY_KEYS } from '@/api/utils.ts'
+
+import { ApiError } from '@/api/__generated__'
+import { DeviceTags } from '@/modules/Subscriptions/types.ts'
+import { MOCK_DEVICE_TAGS } from '@/api/hooks/useTopicOntology/__handlers__'
+
+/**
+ * @deprecated This is a mock, replace with https://hivemq.kanbanize.com/ctrl_board/57/cards/25736/details/
+ */
+export const useGetDeviceTags = (adapterId: string | undefined) => {
+  return useQuery<DeviceTags[], ApiError>({
+    queryKey: [QUERY_KEYS.ADAPTERS, adapterId, QUERY_KEYS.DISCOVERY_TAGS],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return MOCK_DEVICE_TAGS
+    },
+    enabled: Boolean(adapterId),
+  })
+}
diff --git a/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetSubscriptionPayloads.tsx b/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetSubscriptionPayloads.tsx
@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { QUERY_KEYS } from '@/api/utils.ts'
+
+import { ApiError, JsonNode } from '@/api/__generated__'
+
+/**
+ * @deprecated This is a mock, replace with https://hivemq.kanbanize.com/ctrl_board/57/cards/25257/details/
+ */
+export const useGetSubscriptionPayloads = (topic: string | string[], adapter?: string) => {
+  return useQuery<JsonNode, ApiError>({
+    queryKey: [QUERY_KEYS.DISCOVERY_PAYLOADS, topic],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return []
+    },
+    enabled: Boolean(adapter),
+  })
+}
diff --git a/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetSubscriptionSchemas.tsx b/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetSubscriptionSchemas.tsx
@@ -3,19 +3,18 @@ import { QUERY_KEYS } from '@/api/utils.ts'
 import { RJSFSchema } from '@rjsf/utils'
 
 import { ApiError } from '@/api/__generated__'
-
-import { MOCK_MQTT_SCHEMA_REFS } from '@/__test-utils__/adapters/mqtt-subscription.mocks.ts'
+import { GENERATE_DATA_MODELS } from '@/api/hooks/useTopicOntology/__handlers__'
 
 /**
- * @deprecated This is a mock
+ * @deprecated This is a mock, replace with https://hivemq.kanbanize.com/ctrl_board/57/cards/25661/details/
  */
-export const useGetSubscriptionSchemas = (topic: string, adapter?: string) => {
+export const useGetSubscriptionSchemas = (topic: string | string[], type?: 'source' | 'destination') => {
   return useQuery<RJSFSchema, ApiError>({
-    queryKey: [QUERY_KEYS.DISCOVERY_SCHEMAS, topic],
+    queryKey: [QUERY_KEYS.DISCOVERY_SCHEMAS, topic, type],
     queryFn: async () => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
-      return MOCK_MQTT_SCHEMA_REFS
+      return GENERATE_DATA_MODELS(Array.isArray(topic) ? topic.length : 1, type === 'destination')
     },
-    enabled: Boolean(adapter),
+    enabled: Boolean(type),
   })
 }
diff --git a/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetTopicSamples.tsx b/hivemq-edge/src/frontend/src/api/hooks/useTopicOntology/useGetTopicSamples.tsx
@@ -2,15 +2,15 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { QUERY_KEYS } from '@/api/utils.ts'
 
 import { ApiError } from '@/api/__generated__'
-import { MOCK_MQTT_TOPIC_SAMPLES } from '@/__test-utils__/adapters/mqtt-subscription.mocks.ts'
+import { MOCK_MQTT_TOPIC_SAMPLES } from '@/api/hooks/useTopicOntology/__handlers__'
 
 interface PostTopicSamplesProps {
   adapter: string
   topic: string
 }
 
 /**
- * @deprecated This is a mock
+ * @deprecated This is a mock, replace with https://hivemq.kanbanize.com/ctrl_board/57/cards/25255/details/
  */
 export const useGetTopicSamples = () => {
   return useQuery<string[], ApiError>({
@@ -23,7 +23,7 @@ export const useGetTopicSamples = () => {
 }
 
 /**
- * @deprecated This is a mock
+ * @deprecated This is a mock, replace with https://hivemq.kanbanize.com/ctrl_board/57/cards/25255/details/
  */
 export const usePostTopicSamples = () => {
   const queryClient = useQueryClient()

diff --git a/hivemq-edge/src/frontend/src/api/utils.ts b/hivemq-edge/src/frontend/src/api/utils.ts
@@ -6,6 +6,8 @@ export const QUERY_KEYS = {
   DISCOVERY_POINTS: 'discovery.points',
   DISCOVERY_SCHEMAS: 'discovery.schemas',
   DISCOVERY_TOPICS: 'discovery.topics',
+  DISCOVERY_TAGS: 'discovery.tags',
+  DISCOVERY_PAYLOADS: 'discovery.payloads',
   PROTOCOLS: 'protocols',
   ADAPTERS: 'adapters',
   CLIENTS: 'broker-clients',

diff --git a/hivemq-edge/src/frontend/src/components/Icons/TopicIcon.spec.cy.tsx b/hivemq-edge/src/frontend/src/components/Icons/TopicIcon.spec.cy.tsx
@@ -0,0 +1,37 @@
+import { ClientIcon, PLCTagIcon, TopicIcon } from '@/components/Icons/TopicIcon.tsx'
+
+describe('TopicIcon', () => {
+  beforeEach(() => {
+    cy.viewport(100, 100)
+  })
+
+  it('should render properly ', () => {
+    cy.mountWithProviders(<TopicIcon />)
+    cy.get('svg').should('have.attr', 'aria-label', 'Topic')
+    cy.percySnapshot('Component: TopicIcon')
+  })
+})
+
+describe('PLCTagIcon', () => {
+  beforeEach(() => {
+    cy.viewport(100, 100)
+  })
+
+  it('should render properly ', () => {
+    cy.mountWithProviders(<PLCTagIcon />)
+    cy.get('svg').should('have.attr', 'aria-label', 'Tag')
+    cy.percySnapshot('Component: PLCTagIcon')
+  })
+})
+
+describe('ClientIcon', () => {
+  beforeEach(() => {
+    cy.viewport(100, 100)
+  })
+
+  it('should render properly ', () => {
+    cy.mountWithProviders(<ClientIcon />)
+    cy.get('svg').should('have.attr', 'aria-label', 'Client')
+    cy.percySnapshot('Component: ClientIcon')
+  })
+})