mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
34 changed files with 700 additions and 456 deletions
@ -0,0 +1,8 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
export * from './pages/webhooks-page.component'; |
||||
@ -0,0 +1,9 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
export * from './declarations'; |
||||
|
export * from './module'; |
||||
@ -0,0 +1,33 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { RouterModule, Routes } from '@angular/router'; |
||||
|
|
||||
|
import { SqxFrameworkModule } from 'shared'; |
||||
|
|
||||
|
import { |
||||
|
WebhooksPageComponent |
||||
|
} from './declarations'; |
||||
|
|
||||
|
const routes: Routes = [ |
||||
|
{ |
||||
|
path: '', |
||||
|
component: WebhooksPageComponent |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
@NgModule({ |
||||
|
imports: [ |
||||
|
SqxFrameworkModule, |
||||
|
RouterModule.forChild(routes) |
||||
|
], |
||||
|
declarations: [ |
||||
|
WebhooksPageComponent |
||||
|
] |
||||
|
}) |
||||
|
export class SqxFeatureWebhooksModule { } |
||||
@ -0,0 +1,98 @@ |
|||||
|
<sqx-title message="{app} | Webhooks" parameter1="app" value1="{{appName() | async}}"></sqx-title> |
||||
|
|
||||
|
<sqx-panel panelWidth="46rem"> |
||||
|
<div class="panel-header"> |
||||
|
<div class="panel-title-row"> |
||||
|
<div class="float-right"> |
||||
|
<button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)"> |
||||
|
<i class="icon-reset"></i> Refresh |
||||
|
</button> |
||||
|
|
||||
|
<sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="panel-title">Webhooks</h3> |
||||
|
</div> |
||||
|
|
||||
|
<a class="panel-close" sqxParentLink isLazyLoaded="true"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="panel-main"> |
||||
|
<div class="panel-content panel-content-scroll"> |
||||
|
<div class="table-items-row table-items-row-empty" *ngIf="webhooks && webhooks.length === 0"> |
||||
|
No Webhook created yet. |
||||
|
</div> |
||||
|
|
||||
|
<div *ngIf="webhooks"> |
||||
|
<div *ngFor="let webhook of webhooks"> |
||||
|
<div class="table-items-row"> |
||||
|
<table class="table table-middle table-sm table-borderless table-fixed"> |
||||
|
<colgroup> |
||||
|
<col style="width: 160px; text-align: right;" /> |
||||
|
<col style="width: 100%" /> |
||||
|
<col style="width: 40px" /> |
||||
|
</colgroup> |
||||
|
|
||||
|
<tr> |
||||
|
<td colspan="2"> |
||||
|
<h3 class="client-name"> |
||||
|
Schema: {{webhook.schema.name}} |
||||
|
</h3> |
||||
|
</td> |
||||
|
<td class="client-delete"> |
||||
|
<button type="button" class="btn btn-link btn-danger" (click)="deleteWebhook(webhook)"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Url:</td> |
||||
|
<td> |
||||
|
<input readonly class="form-control" [attr.value]="webhook.webhook.url" #inputUrl /> |
||||
|
</td> |
||||
|
<td> |
||||
|
<button type="button" class="btn btn-primary btn-link" [sqxCopy]="inputUrl"> |
||||
|
<i class="icon-copy"></i> |
||||
|
</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Token:</td> |
||||
|
<td> |
||||
|
<input readonly class="form-control" [attr.value]="webhook.webhook.securityToken" #inputToken /> |
||||
|
</td> |
||||
|
<td> |
||||
|
<button type="button" class="btn btn-primary btn-link" [sqxCopy]="inputToken"> |
||||
|
<i class="icon-copy"></i> |
||||
|
</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-items-footer"> |
||||
|
<form class="form-inline" [formGroup]="addWebhookForm" (ngSubmit)="addWebhook()"> |
||||
|
<div class="form-group mr-1"> |
||||
|
<select class="form-control schemas-control" formControlName="schemaId"> |
||||
|
<option *ngFor="let schema of schemas" [ngValue]="schema.id">{{schema.name}}</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group mr-1"> |
||||
|
<sqx-control-errors for="url" [submitted]="addWebhookFormSubmitted"></sqx-control-errors> |
||||
|
|
||||
|
<input type="text" class="form-control" formControlName="url" placeholder="Enter webhook url" autocomplete="off" /> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<button type="submit" class="btn btn-success" [disabled]="!hasUrl">Add Webhook</button> |
||||
|
<button type="reset" class="btn btn-link" (click)="resetWebhookForm()" [disabled]="addWebhookFormSubmitted">Cancel</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</sqx-panel> |
||||
@ -0,0 +1,6 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.schemas-control { |
||||
|
width: 10rem; |
||||
|
} |
||||
@ -0,0 +1,126 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, OnInit } from '@angular/core'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
|
||||
|
import { |
||||
|
AppComponentBase, |
||||
|
AppsStoreService, |
||||
|
CreateWebhookDto, |
||||
|
ImmutableArray, |
||||
|
NotificationService, |
||||
|
SchemaDto, |
||||
|
SchemasService, |
||||
|
Version, |
||||
|
WebhookDto, |
||||
|
WebhooksService |
||||
|
} from 'shared'; |
||||
|
|
||||
|
interface WebhookWithSchema { webhook: WebhookDto; schema: SchemaDto; }; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-webhooks-page', |
||||
|
styleUrls: ['./webhooks-page.component.scss'], |
||||
|
templateUrl: './webhooks-page.component.html' |
||||
|
}) |
||||
|
export class WebhooksPageComponent extends AppComponentBase implements OnInit { |
||||
|
private readonly version = new Version(); |
||||
|
|
||||
|
public webhooks: ImmutableArray<WebhookWithSchema>; |
||||
|
|
||||
|
public schemas: SchemaDto[]; |
||||
|
|
||||
|
public addWebhookFormSubmitted = false; |
||||
|
public addWebhookForm: FormGroup = |
||||
|
this.formBuilder.group({ |
||||
|
schemaId: ['', |
||||
|
[ |
||||
|
Validators.required |
||||
|
]], |
||||
|
url: ['', |
||||
|
[ |
||||
|
Validators.required |
||||
|
]] |
||||
|
}); |
||||
|
|
||||
|
public get hasUrl() { |
||||
|
return this.addWebhookForm.get('url').value && this.addWebhookForm.get('url').value.length > 0; |
||||
|
} |
||||
|
|
||||
|
constructor(apps: AppsStoreService, notifications: NotificationService, |
||||
|
private readonly schemasService: SchemasService, |
||||
|
private readonly webhooksService: WebhooksService, |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
super(notifications, apps); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.load(); |
||||
|
} |
||||
|
|
||||
|
public load(showInfo = false) { |
||||
|
this.appNameOnce() |
||||
|
.switchMap(app => |
||||
|
this.schemasService.getSchemas(app) |
||||
|
.withLatestFrom(this.webhooksService.getWebhooks(app), |
||||
|
(s, w) => { return { webhooks: w, schemas: s }; })) |
||||
|
.subscribe(dtos => { |
||||
|
this.schemas = dtos.schemas; |
||||
|
|
||||
|
this.webhooks = |
||||
|
ImmutableArray.of( |
||||
|
dtos.webhooks.map(w => { |
||||
|
return { webhook: w, schema: dtos.schemas.find(s => s.id === w.schemaId) }; |
||||
|
}).filter(w => !!w.schema)); |
||||
|
|
||||
|
if (showInfo) { |
||||
|
this.notifyInfo('Webhooks reloaded.'); |
||||
|
} |
||||
|
}, error => { |
||||
|
this.notifyError(error); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public resetWebhookForm() { |
||||
|
this.addWebhookFormSubmitted = false; |
||||
|
this.addWebhookForm.enable(); |
||||
|
this.addWebhookForm.reset(); |
||||
|
} |
||||
|
|
||||
|
public addWebhook() { |
||||
|
if (this.addWebhookForm.valid) { |
||||
|
this.addWebhookFormSubmitted = true; |
||||
|
this.addWebhookForm.disable(); |
||||
|
|
||||
|
const requestDto = new CreateWebhookDto(this.addWebhookForm.get('url')!.value); |
||||
|
const schemaId = this.addWebhookForm.get('schemaId')!.value; |
||||
|
const schema = this.schemas.find(s => s.id === schemaId); |
||||
|
|
||||
|
this.appNameOnce() |
||||
|
.switchMap(app => this.webhooksService.postWebhook(app, schema.name, requestDto, this.version)) |
||||
|
.subscribe(dto => { |
||||
|
this.webhooks = this.webhooks.push({ schema, webhook: dto }); |
||||
|
this.resetWebhookForm(); |
||||
|
}, error => { |
||||
|
this.notifyError(error); |
||||
|
this.resetWebhookForm(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public deleteWebhook(webhook: WebhookWithSchema) { |
||||
|
this.appNameOnce() |
||||
|
.switchMap(app => this.webhooksService.deleteWebhook(app, webhook.schema.name, webhook.webhook.id, this.version)) |
||||
|
.subscribe(dto => { |
||||
|
this.webhooks = this.webhooks.remove(webhook); |
||||
|
}, error => { |
||||
|
this.notifyError(error); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,108 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Response, ResponseOptions } from '@angular/http'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { IMock, Mock, Times } from 'typemoq'; |
||||
|
|
||||
|
import { |
||||
|
ApiUrlConfig, |
||||
|
AuthService, |
||||
|
CreateWebhookDto, |
||||
|
Version, |
||||
|
WebhookDto, |
||||
|
WebhooksService |
||||
|
} from './../'; |
||||
|
|
||||
|
describe('WebhooksService', () => { |
||||
|
let authService: IMock<AuthService>; |
||||
|
let webhooksService: WebhooksService; |
||||
|
let version = new Version('1'); |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
authService = Mock.ofType(AuthService); |
||||
|
webhooksService = new WebhooksService(authService.object, new ApiUrlConfig('http://service/p/')); |
||||
|
}); |
||||
|
|
||||
|
it('should make get request to get app webhooks', () => { |
||||
|
authService.setup(x => x.authGet('http://service/p/api/apps/my-app/webhooks', version)) |
||||
|
.returns(() => Observable.of( |
||||
|
new Response( |
||||
|
new ResponseOptions({ |
||||
|
body: [{ |
||||
|
id: 'id1', |
||||
|
schemaId: 'schemaId1', |
||||
|
securityToken: 'token1', |
||||
|
url: 'http://squidex.io/1' |
||||
|
}, { |
||||
|
id: 'id2', |
||||
|
schemaId: 'schemaId2', |
||||
|
securityToken: 'token2', |
||||
|
url: 'http://squidex.io/2' |
||||
|
}] |
||||
|
}) |
||||
|
) |
||||
|
)) |
||||
|
.verifiable(Times.once()); |
||||
|
|
||||
|
let webhooks: WebhookDto[] | null = null; |
||||
|
|
||||
|
webhooksService.getWebhooks('my-app', version).subscribe(result => { |
||||
|
webhooks = result; |
||||
|
}).unsubscribe(); |
||||
|
|
||||
|
expect(webhooks).toEqual([ |
||||
|
new WebhookDto('id1', 'schemaId1', 'token1', 'http://squidex.io/1'), |
||||
|
new WebhookDto('id2', 'schemaId2', 'token2', 'http://squidex.io/2') |
||||
|
]); |
||||
|
|
||||
|
authService.verifyAll(); |
||||
|
}); |
||||
|
|
||||
|
it('should make post request to create webhook', () => { |
||||
|
const dto = new CreateWebhookDto('http://squidex.io/hook'); |
||||
|
|
||||
|
authService.setup(x => x.authPost('http://service/p/api/apps/my-app/schemas/my-schema/webhooks', dto, version)) |
||||
|
.returns(() => Observable.of( |
||||
|
new Response( |
||||
|
new ResponseOptions({ |
||||
|
body: { |
||||
|
id: 'id1', |
||||
|
schemaId: 'schemaId1', |
||||
|
securityToken: 'token1', |
||||
|
url: 'http://squidex.io/1' |
||||
|
} |
||||
|
}) |
||||
|
) |
||||
|
)) |
||||
|
.verifiable(Times.once()); |
||||
|
|
||||
|
let webhook: WebhookDto | null = null; |
||||
|
|
||||
|
webhooksService.postWebhook('my-app', 'my-schema', dto, version).subscribe(result => { |
||||
|
webhook = result; |
||||
|
}).unsubscribe(); |
||||
|
|
||||
|
expect(webhook).toEqual(new WebhookDto('id1', 'schemaId1', 'token1', 'http://squidex.io/1')); |
||||
|
|
||||
|
authService.verifyAll(); |
||||
|
}); |
||||
|
|
||||
|
it('should make delete request to delete webhook', () => { |
||||
|
authService.setup(x => x.authDelete('http://service/p/api/apps/my-app/schemas/my-schema/webhooks/123', version)) |
||||
|
.returns(() => Observable.of( |
||||
|
new Response( |
||||
|
new ResponseOptions() |
||||
|
) |
||||
|
)) |
||||
|
.verifiable(Times.once()); |
||||
|
|
||||
|
webhooksService.deleteWebhook('my-app', 'my-schema', '123', version); |
||||
|
|
||||
|
authService.verifyAll(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,81 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
|
||||
|
import 'framework/angular/http-extensions'; |
||||
|
|
||||
|
import { ApiUrlConfig, Version } from 'framework'; |
||||
|
import { AuthService } from './auth.service'; |
||||
|
|
||||
|
export class WebhookDto { |
||||
|
constructor( |
||||
|
public readonly id: string, |
||||
|
public readonly schemaId: string, |
||||
|
public readonly securityToken: string, |
||||
|
public readonly url: string |
||||
|
) { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export class CreateWebhookDto { |
||||
|
constructor( |
||||
|
public readonly url: string |
||||
|
) { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Injectable() |
||||
|
export class WebhooksService { |
||||
|
constructor( |
||||
|
private readonly authService: AuthService, |
||||
|
private readonly apiUrl: ApiUrlConfig |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public getWebhooks(appName: string, version?: Version): Observable<WebhookDto[]> { |
||||
|
const url = this.apiUrl.buildUrl(`api/apps/${appName}/webhooks`); |
||||
|
|
||||
|
return this.authService.authGet(url, version) |
||||
|
.map(response => response.json()) |
||||
|
.map(response => { |
||||
|
const items: any[] = response; |
||||
|
|
||||
|
return items.map(item => { |
||||
|
return new WebhookDto( |
||||
|
item.id, |
||||
|
item.schemaId, |
||||
|
item.securityToken, |
||||
|
item.url); |
||||
|
}); |
||||
|
}) |
||||
|
.catchError('Failed to load webhooks. Please reload.'); |
||||
|
} |
||||
|
|
||||
|
public postWebhook(appName: string, schemaName: string, dto: CreateWebhookDto, version?: Version): Observable<WebhookDto> { |
||||
|
const url = this.apiUrl.buildUrl(`api/apps/${appName}/schemas/${schemaName}/webhooks`); |
||||
|
|
||||
|
return this.authService.authPost(url, dto, version) |
||||
|
.map(response => response.json()) |
||||
|
.map(response => { |
||||
|
return new WebhookDto( |
||||
|
response.id, |
||||
|
response.schemaId, |
||||
|
response.securityToken, |
||||
|
response.url); |
||||
|
}) |
||||
|
.catchError('Failed to create webhook. Please reload.'); |
||||
|
} |
||||
|
|
||||
|
public deleteWebhook(appName: string, schemaName: string, id: string, version?: Version): Observable<any> { |
||||
|
const url = this.apiUrl.buildUrl(`api/apps/${appName}/schemas/${schemaName}/webhooks/${id}`); |
||||
|
|
||||
|
return this.authService.authDelete(url, version) |
||||
|
.catchError('Failed to delete webhook. Please reload.'); |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue