Skip to content

feat: Add new tab with message binding to channel documentation and a… #1

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

Draft
sam0r040 wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

feat: Add new tab with message binding to channel documentation and a… #1

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
81c2c5d
feat: Add new tab with message binding to channel documentation and a…
sam0r040 Jan 12, 2023
30c1e7b
Add message binding to the request made by PublisherService so that t…
sam0r040 Jan 13, 2023
e6f4628
Improve mapping of message bindings to be more resilient if a backend…
sam0r040 Jan 13, 2023
92d8bf1
Rename Binding in example tab to Message Binding and add full payload…
sam0r040 Feb 17, 2023
967a029
Display raw message bindings
timonback Mar 10, 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
4 changes: 4 additions & 0 deletions src/app/channels/channel-main/channel-main.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@ button {
padding: 6px;
font-weight: normal;
}

[hidden] {
display: none !important;
}
60 changes: 44 additions & 16 deletions src/app/channels/channel-main/channel-main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,51 @@ <h4>{{ operation.message.description }}</h4>
<mat-tab-group animationDuration="0ms">
<mat-tab label="Example">
<div fxLayout="column">
<textarea spellcheck="false"
#exampleTextArea
[rows]="exampleTextAreaLineCount"
[value]="defaultExample?.value"
(keyup)="recalculateLineCount('example', exampleTextArea.value)"
></textarea>
<div [hidden]="isEmptyObject(operation.message.bindings.get(protocolName))" fxLayout="column" fxLayoutGap="5px">
Copy link
Owner Author

@sam0r040 sam0r040 Jan 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought it might be a good idea to hide elements if they are not part of the spec (for headers and message binding). [hidden] is used instead of *ngif because ngif will not even render the components, which will result in issues with other code (ie reseting to default values)

<h4>Message Binding</h4>
<textarea spellcheck="false"
#bindingTextArea
[rows]="messageBindingExampleTextAreaLineCount"
[value]="createMessageBindingExample(operation.message.bindings.get(protocolName))?.value"
(keyup)="recalculateLineCount('massageBindingExample', bindingTextArea.value)"
></textarea>
</div>
<div [hidden]="!(headersExample?.lineCount > 1)" fxLayout="column" fxLayoutGap="0px">

<h4>Header</h4>
<textarea spellcheck="false"
#headersTextArea
[rows]="headersTextAreaLineCount"
[value]="headersExample?.value"
(keyup)="recalculateLineCount('headers', headersTextArea.value)"
></textarea>

</div>
<div fxLayout="column" fxLayoutGap="5px">
<h4>Message</h4>
<textarea spellcheck="false"
#messageTextArea
[rows]="exampleTextAreaLineCount"
[value]="defaultExample?.value"
(keyup)="recalculateLineCount('example', messageTextArea.value)"
></textarea>
</div>
<div fxLayout fxLayoutGap="8px">
<button mat-raised-button color="primary" (click)="publish(exampleTextArea.value, headersTextArea.value)">
<button mat-raised-button color="primary"
(click)="publish(messageTextArea.value, headersTextArea?.value, bindingTextArea?.value)">
Publish
</button>
<button mat-raised-button color="primary"
(click)="exampleTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
(click)="
messageTextArea.value = defaultExample.value;
exampleTextAreaLineCount = defaultExample.lineCount || 0;
headersTextArea.value = headersExample?.value;
headersTextAreaLineCount = headersExample?.lineCount || 0;
bindingTextArea.value = createMessageBindingExample(operation.message.bindings.get(protocolName))?.value;
messageBindingExampleTextAreaLineCount = messageBindingExample?.lineCount || 0">
Default
</button>
<button mat-raised-button color="primary" [cdkCopyToClipboard]="exampleTextArea.value">Copy</button>
<button mat-raised-button color="primary" [cdkCopyToClipboard]="messageTextArea.value">Copy</button>
</div>
</div>
</mat-tab>
Expand All @@ -43,16 +73,14 @@ <h4>
</h4>
<app-schema *ngIf="headers" [schema]="headers"></app-schema>
<div fxLayout="column">
<textarea spellcheck="false"
#headersTextArea
[rows]="headersTextAreaLineCount"
[value]="headersExample?.value"
(keyup)="recalculateLineCount('headers', headersTextArea.value)"
></textarea>
<app-json [json]="headersExample?.value"></app-json>
Copy link
Owner Author

@sam0r040 sam0r040 Jan 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I switched the editable example to the message view and changed it to readonly here.

</div>
</mat-tab>
<mat-tab label="Bindings">
<mat-tab label="Operation Bindings">
<app-json [data]="operation.bindings[protocolName]"></app-json>
</mat-tab>
<mat-tab label="Message Bindings">
<app-json [data]="operation.message.rawBindings[protocolName]"></app-json>
</mat-tab>
</mat-tab-group>
</section>
58 changes: 48 additions & 10 deletions src/app/channels/channel-main/channel-main.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Example } from 'src/app/shared/models/example.model';
import { Schema } from 'src/app/shared/models/schema.model';
import { PublisherService } from 'src/app/shared/publisher.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Operation } from 'src/app/shared/models/channel.model';
import {MessageBinding, Operation} from 'src/app/shared/models/channel.model';
import { STATUS } from 'angular-in-memory-web-api';

@Component({
Expand All @@ -27,6 +27,8 @@ export class ChannelMainComponent implements OnInit {
headersExample: Example;
headersTextAreaLineCount: number;
protocolName: string;
messageBindingExample?: Example;
messageBindingExampleTextAreaLineCount: number;

constructor(
private asyncApiService: AsyncApiService,
Expand All @@ -38,47 +40,83 @@ export class ChannelMainComponent implements OnInit {
ngOnInit(): void {
this.asyncApiService.getAsyncApi().subscribe(
asyncapi => {
let schemas: Map<string, Schema> = asyncapi.components.schemas;
this.schemaName = this.operation.message.payload.name.slice(this.operation.message.payload.name.lastIndexOf('/') + 1)
const schemas: Map<string, Schema> = asyncapi.components.schemas;
this.schemaName = this.operation.message.payload.name.slice(this.operation.message.payload.name.lastIndexOf('/') + 1);
this.schema = schemas.get(this.schemaName);

this.defaultExample = this.schema.example;
this.exampleTextAreaLineCount = this.defaultExample?.lineCount || 0;

this.headersSchemaName = this.operation.message.headers.name.slice(this.operation.message.headers.name.lastIndexOf('/') + 1)
this.headersSchemaName = this.operation.message.headers.name.slice(this.operation.message.headers.name.lastIndexOf('/') + 1);
this.headers = schemas.get(this.headersSchemaName);
this.headersExample = this.headers.example;
this.headersTextAreaLineCount = this.headersExample?.lineCount || 0;
this.messageBindingExampleTextAreaLineCount = this.messageBindingExample?.lineCount || 0;
}
);

this.protocolName = Object.keys(this.operation.bindings)[0];
}

isEmptyObject(object?: any): boolean {
return (object === undefined || object === null) || Object.keys(object).length === 0;
}

createMessageBindingExample(messageBinding?: MessageBinding): Example | undefined {
if (messageBinding === undefined || messageBinding === null) {
return undefined;
}

const bindingExampleObject = {};
Object.keys(messageBinding).forEach((bindingKey) => {
if (bindingKey !== 'bindingVersion') {
bindingExampleObject[bindingKey] = this.getExampleValue(messageBinding[bindingKey]);
}
});

const bindingExample = new Example(bindingExampleObject);

this.messageBindingExampleTextAreaLineCount = bindingExample.lineCount;

return bindingExample;
}

getExampleValue(bindingValue: string | Schema): any {
if (typeof bindingValue === 'string') {
return bindingValue;
} else {
return bindingValue.example.value;
}
}

recalculateLineCount(field: string, text: string): void {
switch (field) {
case 'example':
this.exampleTextAreaLineCount = text.split('\n').length;
break;
case 'headers':
this.headersTextAreaLineCount = text.split('\n').length
this.headersTextAreaLineCount = text.split('\n').length;
break;
case 'massageBindingExample':
this.messageBindingExampleTextAreaLineCount = text.split('\n').length;
break;
}
}

publish(example: string, headers: string): void {
publish(example: string, headers?: string, bindings?: string): void {
try {
const payloadJson = JSON.parse(example);
const headersJson = JSON.parse(headers)
const headersJson = JSON.parse(headers);
const bindingsJson = JSON.parse(bindings);

this.publisherService.publish(this.protocolName, this.channelName, payloadJson, headersJson).subscribe(
this.publisherService.publish(this.protocolName, this.channelName, payloadJson, headersJson, bindingsJson).subscribe(
_ => this.handlePublishSuccess(),
err => this.handlePublishError(err)
);
} catch(error) {
} catch (error) {
this.snackBar.open('Example payload is not valid', 'ERROR', {
duration: 3000
})
});
}
}

Expand Down
Loading