@eventcatalog/core 0.2.15 → 0.2.18

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @eventcatalog/core
 
+## 0.2.18
+
+### Patch Changes
+
+- [`602f726`](https://github.com/boyney123/eventcatalog/commit/602f72693f9b4f3f9dd9838dd8cad2da6c4ff6a2) [#254](https://github.com/boyney123/eventcatalog/pull/254) Thanks [@drub0y](https://github.com/drub0y)! - fix(core): Fixes getEditUrl to build URLs w/URL vs just path.join
+
+## 0.2.17
+
+### Patch Changes
+
+- [`c5330cd`](https://github.com/boyney123/eventcatalog/commit/c5330cd9776de26389271a2bd7b0c589a59b0982) [#265](https://github.com/boyney123/eventcatalog/pull/265) Thanks [@boyney123](https://github.com/boyney123)! - fix: fixing small padding issues on various pages
+
+## 0.2.16
+
+### Patch Changes
+
+- [`6ffc4af`](https://github.com/boyney123/eventcatalog/commit/6ffc4afe7059b98c02b496349ca624c9b672dbcb) [#261](https://github.com/boyney123/eventcatalog/pull/261) Thanks [@boyney123](https://github.com/boyney123)! - fix(core): Fixes node domain service/event linking
+
 ## 0.2.15
 
 ### Patch Changes

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -8,7 +8,7 @@ const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
 const MIN_NODE_WIDTH = 150;
 type NODE_TYPES = 'service' | 'event';
 
-const generateLink = (value, type) => (basePath !== '' ? `${basePath}/${type}/${value}` : `/${type}/${value}`);
+const generateLink = (value, type, domain?) => `${basePath}/${domain ? `domains/${domain}/` : ''}${type}/${value}`;
 const calcWidth = (value) => (value.length * 8 > MIN_NODE_WIDTH ? value.length * 8 : MIN_NODE_WIDTH);
 
 const buildNodeEdge = ({ id, target, source, label, isAnimated = true }): Edge => ({
@@ -31,16 +31,19 @@ const buildNodeData = ({
   type,
   maxWidth,
   renderInColumn,
+  domain,
 }: {
   name: string;
   label: string;
   type: NODE_TYPES;
   maxWidth?: number;
   renderInColumn?: number;
+  domain?: string;
 }) => {
   const width = calcWidth(label);
   const linkType = type === 'service' ? 'services' : 'events';
-  const link = generateLink(name, linkType);
+
+  const link = generateLink(name, linkType, domain);
   return { label, link, width, maxWidth, renderInColumn };
 };
 
@@ -56,7 +59,7 @@ const getNodeLabel = ({ type, label, includeIcon }: { type: NODE_TYPES; label: a
  * @param isAnimated - whether to animate the graph
  */
 export const getEventElements = (
-  { name: eventName, producerNames: eventProducers, consumerNames: eventConsumers }: Event,
+  { name: eventName, domain, consumers: eventConsumers = [], producers: eventProducers = [] }: Event,
   rootNodeColor = '#2563eb',
   isAnimated = true,
   includeLabels = false,
@@ -70,37 +73,59 @@ export const getEventElements = (
     fontSize: includeNodeIcons ? '8px' : 'auto',
   };
 
-  const producersNames = eventProducers.map((s) => calcWidth(s));
+  const producersNames = eventProducers.map((s) => calcWidth(s.name));
   const maxProducersWidth = Math.max(...producersNames);
-  const consumersNames = eventConsumers.map((s) => calcWidth(s));
+  const consumersNames = eventConsumers.map((s) => calcWidth(s.name));
   const maxConsumersWidth = Math.max(...consumersNames);
 
   const eventNameAsNodeID = `ev-${eventName.replace(/ /g, '_')}`;
   const eventNodeWidth = calcWidth(eventName);
 
-  const producers = eventProducers.map((node) => ({ label: node, id: `pr-${node.replace(/ /g, '_')}` }));
-  const consumers = eventConsumers.map((node) => ({ label: node, id: `co-${node.replace(/ /g, '_')}` }));
+  const producers = eventProducers.map((node) => ({
+    label: node.name,
+    id: `pr-${node.name.replace(/ /g, '_')}`,
+    domain: node.domain,
+  }));
+  const consumers = eventConsumers.map((node) => ({
+    label: node.name,
+    id: `co-${node.name.replace(/ /g, '_')}`,
+    domain: node.domain,
+  }));
 
   // Transforms services & event into a graph model
-  const producersNodes: Node[] = producers.map(({ label, id }) => {
+  const producersNodes: Node[] = producers.map(({ label, id, domain: producerDomain }) => {
     const nodeWidth = calcWidth(label);
     const diff = maxProducersWidth - nodeWidth;
     const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxProducersWidth;
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: nodeMaxWidth, renderInColumn: 1 }),
+      data: buildNodeData({
+        name: label,
+        label: labelToRender,
+        type: 'service',
+        maxWidth: nodeMaxWidth,
+        renderInColumn: 1,
+        domain: producerDomain,
+      }),
       style: { border: `2px solid ${producerColor}`, width: nodeWidth, ...nodeStyles },
       type: 'input',
       position,
     };
   });
-  const consumersNodes: Node[] = consumers.map(({ id, label }) => {
+  const consumersNodes: Node[] = consumers.map(({ id, label, domain: consumerDomain }) => {
     const width = calcWidth(label);
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: maxConsumersWidth, renderInColumn: 3 }),
+      data: buildNodeData({
+        name: label,
+        label: labelToRender,
+        type: 'service',
+        maxWidth: maxConsumersWidth,
+        renderInColumn: 3,
+        domain: consumerDomain,
+      }),
       style: { border: `2px solid ${consumerColor}`, width, ...nodeStyles },
       type: 'output',
       position,
@@ -115,6 +140,7 @@ export const getEventElements = (
       type: 'event',
       maxWidth: eventNodeWidth,
       renderInColumn: 2,
+      domain,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,
@@ -157,7 +183,7 @@ export const getEventElements = (
  * @returns {string} Mermaid Graph
  */
 export const getServiceElements = (
-  { publishes, subscribes, name: serviceName }: Service,
+  { publishes, subscribes, name: serviceName, domain }: Service,
   rootNodeColor = '#2563eb',
   isAnimated = true,
   includeEdgeLabels = false,
@@ -190,6 +216,7 @@ export const getServiceElements = (
         type: 'event',
         maxWidth: maxPublishesWidth,
         renderInColumn: 3,
+        domain: node.domain,
       }),
       style: { border: `2px solid ${publishColor}`, width: nodeWidth, ...nodeStyles },
       type: 'output',
@@ -210,6 +237,7 @@ export const getServiceElements = (
         maxWidth: nodeMaxWidth,
         ...nodeStyles,
         renderInColumn: 1,
+        domain: node.domain,
       }),
       style: {
         border: `2px solid ${subscribeColor}`,
@@ -229,6 +257,7 @@ export const getServiceElements = (
       type: 'service',
       maxWidth: calcWidth(serviceName),
       renderInColumn: 2,
+      domain,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,

package/components/Mdx/NodeGraph/__tests__/__snapshots__/GraphElements.spec.ts.snap

@@ -2,66 +2,6 @@
 
 exports[`GraphElements getEventElements takes a given event and returns the ReactFlow elements with multiple services & long names 1`] = `
 Array [
-  Object {
-    "data": Object {
-      "label": "Service 1",
-      "link": "/docs/services/Service 1",
-      "maxWidth": -332,
-      "renderInColumn": 1,
-      "width": 150,
-    },
-    "id": "pr-Service_1",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #75d7b6",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "input",
-  },
-  Object {
-    "data": Object {
-      "label": "Service 2",
-      "link": "/docs/services/Service 2",
-      "maxWidth": -332,
-      "renderInColumn": 1,
-      "width": 150,
-    },
-    "id": "pr-Service_2",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #75d7b6",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "input",
-  },
-  Object {
-    "data": Object {
-      "label": "very very very very very very very very very very very very long name Service 3",
-      "link": "/docs/services/very very very very very very very very very very very very long name Service 3",
-      "maxWidth": 632,
-      "renderInColumn": 1,
-      "width": 632,
-    },
-    "id": "pr-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #75d7b6",
-      "fontSize": "auto",
-      "width": 632,
-    },
-    "type": "input",
-  },
   Object {
     "data": Object {
       "label": "My Event",
@@ -81,349 +21,11 @@ Array [
       "width": 150,
     },
   },
-  Object {
-    "data": Object {
-      "label": "Service 4",
-      "link": "/docs/services/Service 4",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_4",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "data": Object {
-      "label": "Service 5",
-      "link": "/docs/services/Service 5",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_5",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "data": Object {
-      "label": "Service 6",
-      "link": "/docs/services/Service 6",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_6",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "data": Object {
-      "label": "Service 7",
-      "link": "/docs/services/Service 7",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_7",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "data": Object {
-      "label": "Service 8",
-      "link": "/docs/services/Service 8",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_8",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "data": Object {
-      "label": "very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
-      "link": "/docs/services/very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
-      "maxWidth": 616,
-      "renderInColumn": 3,
-      "width": 616,
-    },
-    "id": "co-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 616,
-    },
-    "type": "output",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "pr-Service_1",
-    "target": "ev-My_Event",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_2-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "pr-Service_2",
-    "target": "ev-My_Event",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "epe-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "pr-very_very_very_very_very_very_very_very_very_very_very_very_long_name_Service_3",
-    "target": "ev-My_Event",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_4-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_4",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_5-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_5",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_6-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_6",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_7-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_7",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_8-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_8",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.8",
-    "type": "smoothstep",
-  },
 ]
 `;
 
 exports[`GraphElements getEventElements takes a given event and returns the ReactFlow elements with relations between the event and its consumers and producers 1`] = `
 Array [
-  Object {
-    "data": Object {
-      "label": "Service 1",
-      "link": "/docs/services/Service 1",
-      "maxWidth": 150,
-      "renderInColumn": 1,
-      "width": 150,
-    },
-    "id": "pr-Service_1",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #75d7b6",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "input",
-  },
   Object {
     "data": Object {
       "label": "My Event",
@@ -443,70 +45,6 @@ Array [
       "width": 150,
     },
   },
-  Object {
-    "data": Object {
-      "label": "Service 2",
-      "link": "/docs/services/Service 2",
-      "maxWidth": 150,
-      "renderInColumn": 3,
-      "width": 150,
-    },
-    "id": "co-Service_2",
-    "position": Object {
-      "x": 0,
-      "y": 0,
-    },
-    "style": Object {
-      "border": "2px solid #818cf8",
-      "fontSize": "auto",
-      "width": 150,
-    },
-    "type": "output",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "epe-Service_1-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "pr-Service_1",
-    "target": "ev-My_Event",
-    "type": "smoothstep",
-  },
-  Object {
-    "animated": true,
-    "arrowHeadType": "arrowclosed",
-    "id": "ece-Service_2-ev-My_Event",
-    "label": "",
-    "labelBgBorderRadius": 4,
-    "labelBgPadding": Array [
-      8,
-      4,
-    ],
-    "labelBgStyle": Object {
-      "color": "#fff",
-      "fill": "white",
-      "fillOpacity": 0.5,
-    },
-    "labelStyle": Object {
-      "fontSize": "6px",
-    },
-    "source": "ev-My_Event",
-    "target": "co-Service_2",
-    "type": "smoothstep",
-  },
 ]
 `;
 

package/hooks/EventCatalog.tsx

@@ -26,7 +26,13 @@ export const useUser = () => {
 
 export const useUrl = () => {
   const config = useConfig();
-  const getEditUrl = (url: string) => path.join(config.editUrl, url);
+  const getEditUrl = (url: string) => {
+    const editBaseUrl = new URL(config.editUrl);
+
+    editBaseUrl.pathname = path.join(editBaseUrl.pathname, url);
+
+    return editBaseUrl.toString();
+  };
 
   return {
     getEditUrl,