@eventcatalog/core 0.2.8 → 0.2.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @eventcatalog/core
 
+## 0.2.11
+
+### Patch Changes
+
+- [`8c3c719`](https://github.com/boyney123/eventcatalog/commit/8c3c719b94e005921f6caec16106466da3f86992) [#244](https://github.com/boyney123/eventcatalog/pull/244) Thanks [@otbe](https://github.com/otbe)! - Fix broken links for services that have no domain on events detail page
+
+## 0.2.10
+
+### Patch Changes
+
+- [`41f6b5a`](https://github.com/boyney123/eventcatalog/commit/41f6b5a03645bfac2006f80c013ed7315cbe3add) [#229](https://github.com/boyney123/eventcatalog/pull/229) Thanks [@rtoro](https://github.com/rtoro)! - feat(core): allow the use of swagger ui in service pages
+
+## 0.2.9
+
+### Patch Changes
+
+- [`3740427`](https://github.com/boyney123/eventcatalog/commit/37404275e021c4d55ae43f5efbf12e321bf65025) [#230](https://github.com/boyney123/eventcatalog/pull/230) Thanks [@boyney123](https://github.com/boyney123)! - fix: visualiser now supports long names in diagram (again)
+
 ## 0.2.8
 
 ### Patch Changes

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -25,11 +25,23 @@ const buildNodeEdge = ({ id, target, source, label, isAnimated = true }): Edge =
   labelBgStyle: { fill: 'white', color: '#fff', fillOpacity: 0.5 },
 });
 
-const buildNodeData = ({ name, label, type, maxWidth }: { name: string; label: string; type: NODE_TYPES; maxWidth?: number }) => {
+const buildNodeData = ({
+  name,
+  label,
+  type,
+  maxWidth,
+  renderInColumn,
+}: {
+  name: string;
+  label: string;
+  type: NODE_TYPES;
+  maxWidth?: number;
+  renderInColumn?: number;
+}) => {
   const width = calcWidth(label);
   const linkType = type === 'service' ? 'services' : 'events';
   const link = generateLink(name, linkType);
-  return { label, link, width, maxWidth };
+  return { label, link, width, maxWidth, renderInColumn };
 };
 
 const getNodeLabel = ({ type, label, includeIcon }: { type: NODE_TYPES; label: any; includeIcon: boolean }) => {
@@ -77,7 +89,7 @@ export const getEventElements = (
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: nodeMaxWidth }),
+      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: nodeMaxWidth, renderInColumn: 1 }),
       style: { border: `2px solid ${producerColor}`, width: nodeWidth, ...nodeStyles },
       type: 'input',
       position,
@@ -88,7 +100,7 @@ export const getEventElements = (
     const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
     return {
       id,
-      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: maxConsumersWidth }),
+      data: buildNodeData({ name: label, label: labelToRender, type: 'service', maxWidth: maxConsumersWidth, renderInColumn: 3 }),
       style: { border: `2px solid ${consumerColor}`, width, ...nodeStyles },
       type: 'output',
       position,
@@ -102,6 +114,7 @@ export const getEventElements = (
       label: getNodeLabel({ type: 'event', label: eventName, includeIcon: includeNodeIcons }),
       type: 'event',
       maxWidth: eventNodeWidth,
+      renderInColumn: 2,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,
@@ -171,7 +184,13 @@ export const getServiceElements = (
     const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
     return {
       id: `pub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: maxPublishesWidth }),
+      data: buildNodeData({
+        name: node.name,
+        label: labelToRender,
+        type: 'event',
+        maxWidth: maxPublishesWidth,
+        renderInColumn: 3,
+      }),
       style: { border: `2px solid ${publishColor}`, width: nodeWidth, ...nodeStyles },
       type: 'output',
       position,
@@ -184,7 +203,14 @@ export const getServiceElements = (
     const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
     return {
       id: `sub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({ name: node.name, label: labelToRender, type: 'event', maxWidth: nodeMaxWidth, ...nodeStyles }),
+      data: buildNodeData({
+        name: node.name,
+        label: labelToRender,
+        type: 'event',
+        maxWidth: nodeMaxWidth,
+        ...nodeStyles,
+        renderInColumn: 1,
+      }),
       style: {
         border: `2px solid ${subscribeColor}`,
         width: nodeWidth,
@@ -202,6 +228,7 @@ export const getServiceElements = (
       label: getNodeLabel({ type: 'service', label: serviceName, includeIcon: includeNodeIcons }),
       type: 'service',
       maxWidth: calcWidth(serviceName),
+      renderInColumn: 2,
     }),
     style: {
       border: `2px solid ${rootNodeColor}`,

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -6,6 +6,27 @@ const nodeDefaultHeight = 36;
 const offset = 48;
 const verticalOffset = offset / 1.5;
 
+const getMaxWidthElementFromPreviousColumn = (elements, column) => {
+  const elementsInColumn = elements.filter((element) => element?.data?.renderInColumn === column);
+
+  if (elementsInColumn.length === 0) return {};
+  if (elementsInColumn.length === 1) return elementsInColumn[0];
+
+  const maxWidthElement = elementsInColumn.reduce((currentElement, element) => {
+    const currentElementWidth = currentElement?.data?.maxWidth || currentElement?.data?.width || nodeDefaultWidth;
+    const elementWidth = element?.data?.maxWidth || element?.data.width || nodeDefaultWidth;
+    return elementWidth > currentElementWidth ? element : currentElement;
+  }, elementsInColumn[0]);
+
+  return maxWidthElement;
+};
+
+const getXPositionFromElement = (elem) => {
+  const elementWidth = elem?.data?.maxWidth || elem.width || nodeDefaultWidth;
+  const currentXPositionOfElement = elem.position.x;
+  return currentXPositionOfElement + elementWidth;
+};
+
 export default function createGraphLayout(elements: Elements, isHorizontal: boolean): Elements {
   const dagreGraph = new dagre.graphlib.Graph();
 
@@ -29,21 +50,43 @@ export default function createGraphLayout(elements: Elements, isHorizontal: bool
   // Calculate the layout, to get the node positions with their widths and heights
   dagre.layout(dagreGraph);
 
-  return elements.map((element) => {
+  const allNodes = elements.filter((element) => element.data);
+  const allEdges = elements.filter((element) => !element.data);
+
+  const sortedNodesByColumn = allNodes.sort((nodeA, nodeB) =>
+    // eslint-disable-next-line no-nested-ternary
+    nodeA.data.renderInColumn > nodeB.data.renderInColumn ? 1 : nodeB.data.renderInColumn > nodeA.data.renderInColumn ? -1 : 0
+  );
+  const allData = [...sortedNodesByColumn, ...allEdges];
+
+  return allData.map((element) => {
     if (isNode(element)) {
       const node = dagreGraph.node(element.id);
       element.targetPosition = isHorizontal ? Position.Left : Position.Top;
       element.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+
+      const paddingBetweenNodes = element.data.renderInColumn > 1 ? 75 : 0;
+      const currentColumnToRenderIn = element?.data?.renderInColumn;
+      const maxWidthElementFromPreviousColumn = getMaxWidthElementFromPreviousColumn(elements, currentColumnToRenderIn - 1);
+
+      const nodeX =
+        Object.keys(maxWidthElementFromPreviousColumn).length > 0
+          ? getXPositionFromElement(maxWidthElementFromPreviousColumn)
+          : 0;
+
       element.position = {
-        x: offset / 2 + node.x - (element?.data?.maxWidth || node.width) / 2,
+        x: nodeX + paddingBetweenNodes,
         y: node.y - node.height / 2,
       };
 
       // This is due to an issue with ReactFlow giving errors when we set the width in the styles.
       if (element.style.width) {
-        element.style.width = undefined;
+        if (element.style.width <= nodeDefaultWidth) {
+          element.style.width = undefined;
+        }
       }
     }
+
     return element;
   });
 }

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

@@ -7,6 +7,7 @@ Array [
       "label": "Service 1",
       "link": "/docs/services/Service 1",
       "maxWidth": -332,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_1",
@@ -26,6 +27,7 @@ Array [
       "label": "Service 2",
       "link": "/docs/services/Service 2",
       "maxWidth": -332,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_2",
@@ -45,6 +47,7 @@ Array [
       "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",
@@ -64,6 +67,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ev-My_Event",
@@ -82,6 +86,7 @@ Array [
       "label": "Service 4",
       "link": "/docs/services/Service 4",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_4",
@@ -101,6 +106,7 @@ Array [
       "label": "Service 5",
       "link": "/docs/services/Service 5",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_5",
@@ -120,6 +126,7 @@ Array [
       "label": "Service 6",
       "link": "/docs/services/Service 6",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_6",
@@ -139,6 +146,7 @@ Array [
       "label": "Service 7",
       "link": "/docs/services/Service 7",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_7",
@@ -158,6 +166,7 @@ Array [
       "label": "Service 8",
       "link": "/docs/services/Service 8",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_8",
@@ -177,6 +186,7 @@ Array [
       "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",
@@ -399,6 +409,7 @@ Array [
       "label": "Service 1",
       "link": "/docs/services/Service 1",
       "maxWidth": 150,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "pr-Service_1",
@@ -418,6 +429,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ev-My_Event",
@@ -436,6 +448,7 @@ Array [
       "label": "Service 2",
       "link": "/docs/services/Service 2",
       "maxWidth": 150,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "co-Service_2",
@@ -504,6 +517,7 @@ Array [
       "label": "very very very very very very very very very very very very long name event 5",
       "link": "/docs/events/very very very very very very very very very very very very long name event 5",
       "maxWidth": 616,
+      "renderInColumn": 1,
       "width": 616,
     },
     "id": "sub-very_very_very_very_very_very_very_very_very_very_very_very_long_name_event_5",
@@ -523,6 +537,7 @@ Array [
       "label": "My Event 6",
       "link": "/docs/events/My Event 6",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_6",
@@ -542,6 +557,7 @@ Array [
       "label": "My Event 7",
       "link": "/docs/events/My Event 7",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_7",
@@ -561,6 +577,7 @@ Array [
       "label": "My Event 8",
       "link": "/docs/events/My Event 8",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_8",
@@ -580,6 +597,7 @@ Array [
       "label": "My Event 9",
       "link": "/docs/events/My Event 9",
       "maxWidth": -316,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_9",
@@ -599,6 +617,7 @@ Array [
       "label": "My Service",
       "link": "/docs/services/My Service",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ser-My_Service",
@@ -617,6 +636,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event",
@@ -636,6 +656,7 @@ Array [
       "label": "My Event 2",
       "link": "/docs/events/My Event 2",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event_2",
@@ -655,6 +676,7 @@ Array [
       "label": "My Event 3",
       "link": "/docs/events/My Event 3",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event_3",
@@ -674,6 +696,7 @@ Array [
       "label": "very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
       "link": "/docs/events/very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
       "maxWidth": 616,
+      "renderInColumn": 3,
       "width": 616,
     },
     "id": "pub-very.very.very.very.very.very.very.very.very.very.very.very.long.name.event.4",
@@ -896,6 +919,7 @@ Array [
       "label": "My Event 2",
       "link": "/docs/events/My Event 2",
       "maxWidth": 150,
+      "renderInColumn": 1,
       "width": 150,
     },
     "id": "sub-My_Event_2",
@@ -915,6 +939,7 @@ Array [
       "label": "My Service",
       "link": "/docs/services/My Service",
       "maxWidth": 150,
+      "renderInColumn": 2,
       "width": 150,
     },
     "id": "ser-My_Service",
@@ -933,6 +958,7 @@ Array [
       "label": "My Event",
       "link": "/docs/events/My Event",
       "maxWidth": 150,
+      "renderInColumn": 3,
       "width": 150,
     },
     "id": "pub-My_Event",

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

@@ -11,7 +11,7 @@ Array [
     },
     "id": "s-My_Event_2",
     "position": Object {
-      "x": 24,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",
@@ -31,7 +31,7 @@ Array [
     },
     "id": "c-My_Service",
     "position": Object {
-      "x": 270,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",
@@ -50,7 +50,7 @@ Array [
     },
     "id": "p-My_Event",
     "position": Object {
-      "x": 516,
+      "x": 0,
       "y": 0,
     },
     "sourcePosition": "right",

package/components/Mdx/OpenApiSpec.tsx

@@ -0,0 +1,18 @@
+import SwaggerUI from 'swagger-ui-react';
+import 'swagger-ui-react/swagger-ui.css';
+
+interface OpenApiSpecProps {
+  spec: string;
+  showTitle?: boolean;
+}
+
+export default function OpenApiSpec({ spec, showTitle = true }: OpenApiSpecProps) {
+  const className = !showTitle ? 'swagger-hide-title' : '';
+
+  return (
+    <div className={`my-4 border border-gray-300 border-dashed px-5 eventcatalog-swagger ${className}`}>
+      {!showTitle && <span className="text-2xl block mt-10 font-bold -mb-8">OpenAPI Specification</span>}
+      <SwaggerUI spec={spec} tryItOutEnabled={false} />
+    </div>
+  );
+}

package/components/Sidebars/EventSidebar.tsx

@@ -18,7 +18,7 @@ interface EventSideBarProps {
 const getServiceLink = (serviceName: string, event: Event) => {
   const allEventServices = [...event.consumers, ...event.producers];
   const matchedService = allEventServices.find((service) => service.name === serviceName);
-  if (matchedService) return `/domains/${matchedService.domain}/services/${serviceName}`;
+  if (matchedService && matchedService.domain) return `/domains/${matchedService.domain}/services/${serviceName}`;
   return `/services/${serviceName}`;
 };
 

package/lib/__tests__/assets/services/Payment Service/index.md

@@ -0,0 +1,7 @@
+---
+name: Payment Service
+summary: |
+  Event based application that integrates with Stripe.
+---
+
+# Testing

package/lib/__tests__/assets/services/Payment Service/openapi.yaml

@@ -0,0 +1,94 @@
+openapi: 3.0.0
+info:
+  description: A Payment Service API
+  version: 0.0.1
+  title: Payment service API
+servers:
+  - url: http://payment.example.com/v1
+    description: Optional server description, e.g. Main (production) server
+  - url: http://payment.example.com
+    description: Optional server description, e.g. Internal staging server for testing
+paths:
+  /getSinglePaymentURL:
+    get:
+      tags:
+        - PaymentServices
+      summary: Generate a Payment endpoint URL
+      operationId: singlepaymenturlUsingGET
+      consumes:
+        - application/json
+      produces:
+        - application/xml
+      parameters:
+        - name: transType
+          in: query
+          description: transType
+          required: true
+          type: string
+        - name: invoiceNumber
+          in: query
+          description: invoiceNumber
+          required: true
+          type: string
+        - name: approvedPage
+          in: query
+          description: approvedPage
+          required: true
+          type: string
+        - name: declinedPage
+          in: query
+          description: declinedPage
+          required: true
+          type: string
+        - in: query
+          name: errorPage
+          description: errorPage
+          required: true
+          type: string
+        - in: query
+          name: totalItemsAmount
+          description: totalItemsAmount
+          required: true
+          type: string
+        - name: ref1
+          in: query
+          description: ref1
+          required: false
+          type: string
+        - name: ref2
+          in: query
+          description: ref2
+          required: false
+          type: string
+        - name: ref3
+          in: query
+          description: ref3
+          required: false
+          type: string
+        - name: minutesToExpire
+          in: query
+          description: minutesToExpire
+          required: true
+          type: string
+      responses:
+        '200':
+          description: Successful operation
+          schema:
+            $ref: '#/definitions/SinglePaymentResponse'
+        '401':
+          description: Unauthorized
+        '403':
+          description: Forbidden
+        '404':
+          description: Not Found
+definitions:
+  SinglePaymentResponse:
+    type: object
+    properties:
+      respCode:
+        type: integer
+        format: int32
+      respMsg:
+        type: string
+      respValue:
+        type: string

package/lib/__tests__/file-reader.spec.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs';
-import { getSchemaFromDir, getLastModifiedDateOfFile } from '../file-reader';
+import { getSchemaFromDir, getLastModifiedDateOfFile, getOpenAPISpecFromDir } from '../file-reader';
 
 let PROJECT_DIR: any;
 
@@ -34,6 +34,24 @@ describe('file-reader lib', () => {
     });
   });
 
+  describe('getOpenAPISpecFromDir', () => {
+    it('returns the OPEN API file found in the given directory path', () => {
+      const rawFile = fs.readFileSync(path.join(process.env.PROJECT_DIR, 'services', 'Payment Service', 'openapi.yaml'), {
+        encoding: 'utf-8',
+      });
+
+      const result = getOpenAPISpecFromDir(path.join(process.env.PROJECT_DIR, 'services', 'Payment Service'));
+
+      expect(result).toEqual(rawFile);
+    });
+
+    it('returns null when no schema file can be found in the given directory path', () => {
+      const result = getSchemaFromDir(path.join(process.env.PROJECT_DIR, 'services', 'Email Service'));
+
+      expect(result).toEqual(null);
+    });
+  });
+
   describe('getLastModifiedDateOfFile', () => {
     it('returns the date the given file was last modified', () => {
       const result = getLastModifiedDateOfFile(

package/lib/__tests__/services.spec.ts

@@ -19,29 +19,29 @@ describe('services', () => {
 
       expect(services).toEqual([
         {
+          name: 'Basket Service',
+          summary: 'CRUD based API to handle Basket interactions for users of the shopping website.\n',
+          domain: null,
+          owners: ['mSmith'],
+          repository: {
+            language: 'JavaScript',
+            url: 'https://github.com/boyney123/pretend-basket-service',
+          },
+          tags: [],
           externalLinks: [
             {
               label: 'AsyncAPI Specification',
               url: 'https://studio.asyncapi.com/#schema-lightMeasuredPayload',
             },
           ],
-          name: 'Basket Service',
-          owners: ['mSmith'],
           publishes: [],
-          repository: {
-            language: 'JavaScript',
-            url: 'https://github.com/boyney123/pretend-basket-service',
-          },
           subscribes: [],
-          domain: null,
-          summary: 'CRUD based API to handle Basket interactions for users of the shopping website.\n',
-          tags: [],
         },
         {
           name: 'Email Platform',
           summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
-          owners: ['dboyne'],
           domain: null,
+          owners: ['dboyne'],
           repository: {
             url: 'https://github.com/boyney123/EmailPlatform',
             language: 'JavaScript',
@@ -55,21 +55,32 @@ describe('services', () => {
               url: 'https://www.apache.org/licenses/LICENSE-2.0',
             },
           ],
+          externalLinks: [],
           publishes: [
             {
               name: 'EmailSent',
               version: '0.0.1',
               summary: 'Tells us when an email has been sent\n',
+              domain: null,
               producerNames: ['Email Platform'],
               consumerNames: [],
+              owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
-              domain: null,
-              owners: ['dboyne', 'mSmith'],
             },
           ],
           subscribes: [],
+        },
+        {
+          name: 'Payment Service',
+          summary: 'Event based application that integrates with Stripe.\n',
+          domain: null,
+          owners: [],
+          repository: {},
+          tags: [],
           externalLinks: [],
+          publishes: [],
+          subscribes: [],
         },
         {
           name: 'User Service',
@@ -151,6 +162,7 @@ describe('services', () => {
         summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
         owners: ['dboyne'],
         domain: null,
+        openAPISpec: null,
         repository: {
           url: 'https://github.com/boyney123/EmailPlatform',
           language: 'JavaScript',
@@ -194,6 +206,7 @@ describe('services', () => {
           summary: 'CRUD based API to handle User information\n',
           domain: 'User',
           owners: ['mSmith'],
+          openAPISpec: null,
           repository: {
             language: 'JavaScript',
             url: 'https://github.com/boyney123/pretend-basket-service',