Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: enable navigation for v3 #796

Merged
merged 5 commits into from
Oct 3, 2023
Merged

feat: enable navigation for v3 #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d3bde3
update to new parser
jonaslagoni Oct 3, 2023
1e531a6
update html template
jonaslagoni Oct 3, 2023
5dae0f6
Merge branch 'master' into enable_navigation
jonaslagoni Oct 3, 2023
02cb0cf
fix sonar
jonaslagoni Oct 3, 2023
a606ffc
Merge branch 'master' into enable_navigation
jonaslagoni Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/studio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@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/parser": "^3.0.0-next-major-spec.2",
"@asyncapi/react-component": "^1.0.0-next.54",
"@asyncapi/specs": "^6.0.0-next-major-spec.6",
"@ebay/nice-modal-react": "^1.2.10",
Expand Down
7 changes: 5 additions & 2 deletions apps/studio/src/components/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
Expand All @@ -42,7 +43,9 @@ export const Content: FunctionComponent<ContentProps> = () => { // eslint-disabl
localStorage.setItem(splitPosLeft, String(size));
}, 100)}
>
<Navigation />
{
isV3 ? <Navigationv3 /> : <Navigation />
}
<Editor />
</SplitPane>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/studio/src/components/Modals/Generator/template-parameters.json
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 25 additions & 22 deletions apps/studio/src/components/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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' : ''
Expand All @@ -60,7 +61,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
<span className="truncate">{serverName}</span>
</div>
</li>
))}
})}
</ul>
</>
);
Expand All @@ -72,11 +73,11 @@ 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()) {
const channelName = operation.channels().all()[0].address() || 'unknown';
if (operation.isReceive()) {
channels.push(
<li
key={`${channelName}-publish`}
Expand All @@ -101,7 +102,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
</li>,
);
}
if (channel.hasSubscribe()) {
if (operation.isSend()) {
channels.push(
<li
key={`${channelName}-subscribe`}
Expand Down Expand Up @@ -157,9 +158,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' : ''
Expand All @@ -173,7 +175,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
>
{messageName}
</li>
),
},
);

return (
Expand Down Expand Up @@ -202,9 +204,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' : ''
Expand All @@ -218,7 +221,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
>
{schemaName}
</li>
),
}
);

return (
Expand Down Expand Up @@ -271,7 +274,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>
Expand All @@ -290,7 +293,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
Information
</div>
</li>
{document.hasServers() && (
{!document.servers().isEmpty() && (
<li className="mb-4">
<ServersNavigation
document={document}
Expand All @@ -306,7 +309,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
hash={hash}
/>
</li>
{components && components.hasMessages() && (
{!components.messages().isEmpty() && (
<li className="mb-4">
<MessagesNavigation
document={document}
Expand All @@ -315,7 +318,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
/>
</li>
)}
{components && components.hasSchemas() && (
{!components.schemas().isEmpty() && (
<li className="mb-4">
<SchemasNavigation
document={document}
Expand Down
Loading