Merge branch 'upstream-master' into app-component

KhudaDad414 · Oct 5, 2023 · 63f097c · 63f097c
2 parents e21613d + 7fd77f8
commit 63f097c
Show file tree

Hide file tree

Showing 20 changed files with 676 additions and 657 deletions.
diff --git a/.../src/components/ProtocolBadge.stories.tsx → ...c/components/ServiceInfoBadge.stories.tsx b/.../src/components/ProtocolBadge.stories.tsx → ...c/components/ServiceInfoBadge.stories.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { ProtocolBadge } from '@asyncapi/studio-ui'
+import { ServiceInfoBadge } from '@asyncapi/studio-ui'
 
 export default {
-  component: ProtocolBadge,
+  component: ServiceInfoBadge,
   parameters: {
     backgrounds: {
       default: 'dark'
@@ -12,84 +12,96 @@ export default {
 
 export const HTTP = {
   args: {
-    protocol: 'http'
+    info: 'http'
+  }
+}
+
+export const Server = {
+  args: {
+    info: 'server'
+  }
+}
+
+export const Client = {
+  args: {
+    info: 'client'
   }
 }
 
 export const Kafka = {
   args: {
-    protocol: 'kafka'
+    info: 'kafka'
   }
 }
 
 export const Websocket = {
   args: {
-    protocol: 'websocket'
+    info: 'websocket'
   }
 }
 
 export const AMQP = {
   args: {
-    protocol: 'amqp'
+    info: 'amqp'
   }
 }
 
 export const MQTT = {
   args: {
-    protocol: 'mqtt'
+    info: 'mqtt'
   }
 }
 
 export const GooglePubSub = {
   args: {
-    protocol: 'googlepubsub'
+    info: 'googlepubsub'
   }
 }
 
 export const IBMMQ = {
   args: {
-    protocol: 'ibmmq'
+    info: 'ibmmq'
   }
 }
 
 export const NATS = {
   args: {
-    protocol: 'nats'
+    info: 'nats'
   }
 }
 
 export const Pulsar = {
   args: {
-    protocol: 'pulsar'
+    info: 'pulsar'
   }
 }
 
 export const Redis = {
   args: {
-    protocol: 'redis'
+    info: 'redis'
   }
 }
 
 export const SNS = {
   args: {
-    protocol: 'sns'
+    info: 'sns'
   }
 }
 
 export const SQS = {
   args: {
-    protocol: 'sqs'
+    info: 'sqs'
   }
 }
 
 export const Solace = {
   args: {
-    protocol: 'solace'
+    info: 'solace'
   }
 }
 
 export const STOMP = {
   args: {
-    protocol: 'stomp'
+    info: 'stomp'
   }
 }
diff --git a/apps/studio-next/package.json b/apps/studio-next/package.json
@@ -16,7 +16,7 @@
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "next": "13.4.12",
-    "postcss": "8.4.27",
+    "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",

diff --git a/apps/studio/package.json b/apps/studio/package.json
@@ -26,8 +26,8 @@
     "@asyncapi/avro-schema-parser": "^3.0.2",
     "@asyncapi/converter": "^1.3.1",
     "@asyncapi/openapi-schema-parser": "^3.0.4",
-    "@asyncapi/parser": "^2.1.0-next-major-spec.5",
-    "@asyncapi/react-component": "^1.0.0-next.51",
+    "@asyncapi/parser": "^3.0.0-next-major-spec.3",
+    "@asyncapi/react-component": "^1.0.2",
     "@asyncapi/specs": "^6.0.0-next-major-spec.6",
     "@ebay/nice-modal-react": "^1.2.10",
     "@headlessui/react": "^1.7.4",
@@ -74,14 +74,14 @@
     ]
   },
   "devDependencies": {
-    "@asyncapi/dotnet-nats-template": "^0.11.0",
+    "@asyncapi/dotnet-nats-template": "^0.12.1",
     "@asyncapi/go-watermill-template": "^0.2.40",
     "@asyncapi/html-template": "^0.28.4",
     "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
-    "@asyncapi/java-spring-template": "^1.0.0",
+    "@asyncapi/java-spring-template": "^1.2.0",
     "@asyncapi/java-template": "^0.2.1",
     "@asyncapi/markdown-template": "^1.3.3",
-    "@asyncapi/nodejs-template": "^0.13.3",
+    "@asyncapi/nodejs-template": "^1.0.0",
     "@asyncapi/nodejs-ws-template": "^0.9.33",
     "@asyncapi/python-paho-template": "^0.2.13",
     "@asyncapi/ts-nats-template": "^0.10.3",
@@ -110,7 +110,7 @@
     "https-browserify": "^1.0.0",
     "markdown-toc": "^1.2.0",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.31",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
     "react-scripts": "5.0.1",

diff --git a/apps/studio/src/components/Content.tsx b/apps/studio/src/components/Content.tsx
@@ -1,6 +1,7 @@
 import SplitPane from './SplitPane';
 import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
+import { Navigationv3 } from './Navigationv3';
 import { Template } from './Template';
 import { VisualiserTemplate } from './Visualiser';
 
@@ -16,7 +17,7 @@ export const Content: FunctionComponent<ContentProps> = () => { // eslint-disabl
   const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
   const v3Enabled = useSettingsState(state => state.editor.v3support) || false;
   const isV3 = document?.version() === '3.0.0' && v3Enabled;
-  const navigationEnabled = isV3 ? false : show.primarySidebar;
+  const navigationEnabled = show.primarySidebar;
   const editorEnabled = show.primaryPanel;
   const viewEnabled = show.secondaryPanel;
   const viewType = secondaryPanelType;
@@ -42,7 +43,9 @@ export const Content: FunctionComponent<ContentProps> = () => { // eslint-disabl
         localStorage.setItem(splitPosLeft, String(size));
       }, 100)}
     >
-      <Navigation />
+      {
+        isV3 ? <Navigationv3 /> : <Navigation />
+      }
       <Editor />
     </SplitPane>
   );

diff --git a/apps/studio/src/components/Modals/Generator/template-parameters.json b/apps/studio/src/components/Modals/Generator/template-parameters.json
diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx
@@ -5,14 +5,14 @@ import React, { useEffect, useState } from 'react';
 import { useServices } from '../services';
 import { useDocumentsState, useFilesState } from '../state';
 
-import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs';
+import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs';
 
 interface NavigationProps {
   className?: string;
 }
 
 interface NavigationSectionProps {
-  document: AsyncAPIDocument;
+  document: AsyncAPIDocumentInterface;
   rawSpec: string;
   hash: string;
 }
@@ -36,8 +36,9 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
         Servers
       </div>
       <ul>
-        {Object.entries(document.servers() || {}).map(([serverName, server]) => (
-          <li
+        {document.servers().all().map((server) => {
+          const serverName = server.id();
+          return <li
             key={serverName}
             className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
               hash === `server-${serverName}` ? 'bg-gray-800' : ''
@@ -60,7 +61,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
               <span className="truncate">{serverName}</span>
             </div>
           </li>
-        ))}
+        })}
       </ul>
     </>
   );
@@ -72,11 +73,15 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
 }) => {
   const { navigationSvc } = useServices();
 
-  const operations = Object.entries(document.channels() || {}).map(
-    ([channelName, channel]) => {
+  const operations = document.operations().all().map(
+    (operation) => {
       const channels: React.ReactNode[] = [];
-
-      if (channel.hasPublish()) {
+      // only has one channel per operation 
+      let channelName = 'Unknown';
+      if (!operation.channels().isEmpty()) {
+        channelName = operation.channels().all()[0].address() ?? 'Unknown';
+      }
+      if (operation.isReceive()) {
         channels.push(
           <li
             key={`${channelName}-publish`}
@@ -101,7 +106,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
           </li>,
         );
       }
-      if (channel.hasSubscribe()) {
+      if (operation.isSend()) {
         channels.push(
           <li
             key={`${channelName}-subscribe`}
@@ -157,9 +162,10 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
 }) => {
   const { navigationSvc } = useServices();
 
-  const messages = Object.keys(document.components()?.messages() || {}).map(
-    messageName => (
-      <li
+  const messages = document.components().messages().all().map(
+    message => {
+      const messageName = message.id();
+      return <li
         key={messageName}
         className={`p-2 pl-6 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 truncate ${
           hash === `message-${messageName}` ? 'bg-gray-800' : ''
@@ -173,7 +179,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       >
         {messageName}
       </li>
-    ),
+    },
   );
 
   return (
@@ -202,9 +208,10 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
 }) => {
   const { navigationSvc } = useServices();
 
-  const schemas = Object.keys(document.components()?.schemas() || {}).map(
-    schemaName => (
-      <li
+  const schemas = document.components().schemas().all().map(
+    schema => {
+      const schemaName = schema.id();
+      return <li
         key={schemaName}
         className={`p-2 pl-6 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 truncate ${
           hash === `schema-${schemaName}` ? 'bg-gray-800' : ''
@@ -218,7 +225,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
       >
         {schemaName}
       </li>
-    ),
+    }
   );
 
   return (
@@ -271,7 +278,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     );
   }
 
-  const components = document.hasComponents() && document.components();
+  const components = document.components();
   return (
     <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-gray-800 h-full ${className}`}>
       <ul>
@@ -290,7 +297,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
             Information
           </div>
         </li>
-        {document.hasServers() && (
+        {!document.servers().isEmpty() && (
           <li className="mb-4">
             <ServersNavigation
               document={document}
@@ -306,7 +313,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
             hash={hash}
           />
         </li>
-        {components && components.hasMessages() && (
+        {!components.messages().isEmpty() && (
           <li className="mb-4">
             <MessagesNavigation
               document={document}
@@ -315,7 +322,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
             />
           </li>
         )}
-        {components && components.hasSchemas() && (
+        {!components.schemas().isEmpty() && (
           <li className="mb-4">
             <SchemasNavigation
               document={document}