Update source (#758)

web/ui/dashboard/src/app/private/components/create-source/create-source.component.html

@@ -1,4 +1,4 @@
-<form class="padding-bottom__40px" [formGroup]="sourceForm" (ngSubmit)="createSource()">
+<form class="padding-bottom__40px" [formGroup]="sourceForm" (ngSubmit)="saveSource()">
 	<section class="card padding-all__24px">
 		<h3 class="margin-bottom__12px font__weight-600 font__18px">Source name</h3>
 
@@ -176,8 +176,8 @@ <h2 class="margin-bottom__12px">Configure Basic Auth</h2>
 	<div class="button-container flex flex__justify-end margin-top__32px">
 		<button class="button button__white padding-y__12px padding-x__28px rounded__8px margin-right__16px" type="button" (click)="onAction.emit({ action: 'close' })">Cancel</button>
 
-		<button class="button button__primary button--has-icon padding-y__12px rounded__8px">
-			Create Source
+		<button class="button button__primary button--has-icon padding-y__12px rounded__8px" [disabled]="isloading">
+			{{ action === 'update' ? 'Update' : 'Create' }} Source
 			<svg width="24" height="24" class="margin-left__8px" fill="#FCFCFC">
 				<use xlink:href="#arrow-right-icon"></use>
 			</svg>

web/ui/dashboard/src/app/private/components/create-source/create-source.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { PrivateService } from '../../private.service';
+import { ActivatedRoute } from '@angular/router';
 import { CreateSourceService } from './create-source.service';
 
 @Component({
@@ -9,7 +9,7 @@ import { CreateSourceService } from './create-source.service';
 	styleUrls: ['./create-source.component.scss']
 })
 export class CreateSourceComponent implements OnInit {
-	@Input() projectId!: string;
+	@Input('action') action: 'update' | 'create' = 'create';
 	@Output() onAction = new EventEmitter<any>();
 	sourceForm: FormGroup = this.formBuilder.group({
 		name: ['', Validators.required],
@@ -46,12 +46,27 @@ export class CreateSourceComponent implements OnInit {
 	];
 	encodings = ['base64', 'hex'];
 	hashAlgorithms = ['SHA256', 'SHA512', 'MD5', 'SHA1', 'SHA224', 'SHA384', 'SHA3_224', 'SHA3_256', 'SHA3_384', 'SHA3_512', 'SHA512_256', 'SHA512_224'];
+	sourceId = this.route.snapshot.params.id;
+	isloading = false;
 
-	constructor(private formBuilder: FormBuilder, private createSourceService: CreateSourceService, public privateService: PrivateService) {}
+	constructor(private formBuilder: FormBuilder, private createSourceService: CreateSourceService, private route: ActivatedRoute) {}
 
-	ngOnInit(): void {}
+	ngOnInit(): void {
+		this.action === 'update' && this.getSourceDetails();
+	}
+
+	async getSourceDetails() {
+		try {
+			const response = await this.createSourceService.getSourceDetails(this.sourceId);
+			this.sourceForm.patchValue(response.data);
+			return;
+		} catch (error) {
+			return error;
+		}
+	}
 
-	async createSource() {
+	async saveSource() {
+		this.isloading = true;
 		if (!this.isSourceFormValid()) return this.sourceForm.markAllAsTouched();
 
 		const sourceData = {
@@ -63,9 +78,12 @@ export class CreateSourceComponent implements OnInit {
 		};
 
 		try {
-			const response = await this.createSourceService.createSource({ sourceData });
+			const response = this.action === 'update' ? await this.createSourceService.updateSource({ data: sourceData, id: this.sourceId }) : await this.createSourceService.createSource({ sourceData });
+			this.isloading = false;
 			this.onAction.emit(response.data);
-		} catch (error) {}
+		} catch (error) {
+			this.isloading = false;
+		}
 	}
 
 	isSourceFormValid(): boolean {

web/ui/dashboard/src/app/private/components/create-source/create-source.service.ts

@@ -25,4 +25,35 @@ export class CreateSourceService {
 			}
 		});
 	}
+
+	updateSource(requestDetails: { data: any; id: string }): Promise<HTTP_RESPONSE> {
+		return new Promise(async (resolve, reject) => {
+			try {
+				const projectResponse = await this.http.request({
+					url: `${this.privateService.urlFactory('org_project')}/sources/${requestDetails.id}`,
+					method: 'put',
+					body: requestDetails.data
+				});
+
+				return resolve(projectResponse);
+			} catch (error: any) {
+				return reject(error);
+			}
+		});
+	}
+
+	getSourceDetails(sourceId: string): Promise<HTTP_RESPONSE> {
+		return new Promise(async (resolve, reject) => {
+			try {
+				const projectResponse = await this.http.request({
+					url: `${this.privateService.urlFactory('org_project')}/sources/${sourceId}`,
+					method: 'get'
+				});
+
+				return resolve(projectResponse);
+			} catch (error: any) {
+				return reject(error);
+			}
+		});
+	}
 }

web/ui/dashboard/src/app/private/components/create-subscription/create-subscription.component.ts

@@ -49,6 +49,7 @@ export class CreateSubscriptionComponent implements OnInit {
 	@Input('action') action: 'update' | 'create' = 'create';
 	projectType: 'incoming' | 'outgoing' = 'incoming';
 	isLoadingForm = true;
+	subscriptionId = this.route.snapshot.params.id;
 
 	constructor(private formBuilder: FormBuilder, private privateService: PrivateService, private createSubscriptionService: CreateSubscriptionService, private route: ActivatedRoute) {}
 
@@ -63,7 +64,7 @@ export class CreateSubscriptionComponent implements OnInit {
 		if (this.action !== 'update') return;
 
 		try {
-			const response = await this.createSubscriptionService.getSubscriptionDetail(this.route.snapshot.params.id);
+			const response = await this.createSubscriptionService.getSubscriptionDetail(this.subscriptionId);
 			this.subscriptionForm.patchValue(response.data);
 			this.subscriptionForm.patchValue({ source_id: response.data?.source_metadata?.uid, app_id: response.data?.app_metadata?.uid, endpoint_id: response.data?.endpoint_metadata?.uid });
 			this.onUpdateAppSelection();
@@ -144,7 +145,7 @@ export class CreateSubscriptionComponent implements OnInit {
 		try {
 			const response =
 				this.action == 'update'
-					? await this.createSubscriptionService.updateSubscription({ data: this.subscriptionForm.value, id: this.route.snapshot.params.id })
+					? await this.createSubscriptionService.updateSubscription({ data: this.subscriptionForm.value, id: this.subscriptionId })
 					: await this.createSubscriptionService.createSubscription(this.subscriptionForm.value);
 			this.isCreatingSubscription = false;
 			this.onAction.emit(response.data);

web/ui/dashboard/src/app/private/pages/project/project.component.html

@@ -17,7 +17,14 @@
 			<ul>
 				<li *ngFor="let nav of sideBarItems" class="animate">
 					<a [routerLink]="'.' + nav.route" routerLinkActive="active" class="flex flex__align-items-center color__grey padding-y__8px padding-left__24px margin-y__8px rounded__8px animate">
-						<svg width="18" height="18" class="margin-right__10px" fill="var(--grey-color)">
+						<svg
+							width="18"
+							height="18"
+							class="margin-right__10px"
+							[attr.xlink:fill]="nav.icon == 'subscriptions' ? '' : 'var(--grey-color)'"
+							[attr.stroke]="nav.icon == 'subscriptions' ? 'var(--grey-color)' : ''"
+							[id]="nav.icon"
+						>
 							<use [attr.xlink:href]="'#' + nav.icon + '-icon'"></use>
 						</svg>
 						<span class="font__weight-500 font__14px animate">{{ nav.name }}</span>

web/ui/dashboard/src/app/private/pages/project/project.component.scss

@@ -4,6 +4,10 @@
 
 	svg {
 		fill: var(--primary-color);
+
+		&#subscriptions {
+			stroke: var(--primary-color);
+		}
 	}
 }
 

web/ui/dashboard/src/app/private/pages/project/project.module.ts

@@ -22,7 +22,7 @@ const routes: Routes = [
 				loadChildren: () => import('./sources/sources.module').then(m => m.SourcesModule)
 			},
 			{
-				path: 'sources/new',
+				path: 'sources/:id',
 				loadChildren: () => import('./sources/sources.module').then(m => m.SourcesModule)
 			},
 			{
@@ -37,10 +37,6 @@ const routes: Routes = [
 				path: 'subscriptions',
 				loadChildren: () => import('./subscriptions/subscriptions.module').then(m => m.SubscriptionsModule)
 			},
-			{
-				path: 'subscriptions/new',
-				loadChildren: () => import('./subscriptions/subscriptions.module').then(m => m.SubscriptionsModule)
-			},
 			{
 				path: 'subscriptions/:id',
 				loadChildren: () => import('./subscriptions/subscriptions.module').then(m => m.SubscriptionsModule)

web/ui/dashboard/src/app/private/pages/project/sources/sources.component.html

@@ -32,10 +32,10 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 							<div>{{ source.name }}</div>
 						</td>
 						<td>
-							<div class="text__uppercase">{{ source.type }}</div>
+							<div>{{ getDataReadableValue('sourceType', source.type)?.viewValue }}</div>
 						</td>
 						<td>
-							<div class="text__uppercase">{{ source.verifier.type }}</div>
+							<div>{{ getDataReadableValue('verifier', source.verifier.type)?.viewValue }}</div>
 						</td>
 						<td>
 							<div class="position__relative">
@@ -138,7 +138,10 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">S
 						<use xlink:href="#delete-icon"></use>
 					</svg>
 				</button>
-				<button class="button button__primary button--has-icon icon-right padding-x__24px padding-y__8px font__12px margin-left__24px">
+				<button
+					class="button button__primary button--has-icon icon-right padding-x__24px padding-y__8px font__12px margin-left__24px"
+					[routerLink]="'/projects/' + projectId + '/sources/' + activeSource?.uid"
+				>
 					Edit source
 					<svg width="18" height="18" class="margin-left__8px">
 						<use xlink:href="#edit-icon"></use>
@@ -176,7 +179,7 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">S
 	</button>
 </div>
 
-<div class="modal modal__full" *ngIf="shouldShowCreateSourceModal">
+<div class="modal modal__full" *ngIf="shouldShowCreateSourceModal || shouldShowUpdateSourceModal">
 	<div class="modal--head">
 		<div class="flex flex__align-items-center flex__justify-between width__100">
 			<div class="modal--head--left flex flex__align-items-center">
@@ -187,7 +190,7 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">S
 				>
 					<img src="/assets/img/modal-close-icon.svg" alt="close icon" />
 				</a>
-				<h2 class="font__16px font__weight-600">Create source</h2>
+				<h2 class="font__16px font__weight-600">{{ shouldShowUpdateSourceModal ? 'Update Source' : 'Create source' }}</h2>
 			</div>
 
 			<a class="button--has-icon icon-left" target="_blank" href="https://getconvoy.io/docs" rel="noreferrer">
@@ -198,6 +201,6 @@ <h2 class="font__16px font__weight-600">Create source</h2>
 	</div>
 
 	<div class="modal--body padding-all__0px">
-		<app-create-source (onAction)="closeCreateSourceModal()"></app-create-source>
+		<app-create-source (onAction)="closeCreateSourceModal()" [action]="shouldShowUpdateSourceModal ? 'update' : 'create'"></app-create-source>
 	</div>
 </div>

web/ui/dashboard/src/app/private/pages/project/sources/sources.component.scss

@@ -25,12 +25,16 @@ tbody {
 	}
 }
 
+.table--container.smaller table {
+	tbody td:nth-of-type(4) div {
+		width: 197px;
+	}
+}
+
 @media only screen and (max-device-width: 1340px) and (-webkit-min-device-pixel-ratio: 1) {
 	.table--container.smaller table {
 		tbody td:nth-of-type(4) div {
 			width: 100px;
-			overflow: hidden;
-			text-overflow: ellipsis;
 		}
 	}
 }
@@ -39,8 +43,6 @@ tbody {
 	table {
 		tbody td:nth-of-type(4) div {
 			width: 100px;
-			overflow: hidden;
-			text-overflow: ellipsis;
 		}
 	}
 }

web/ui/dashboard/src/app/private/pages/project/sources/sources.component.ts

@@ -12,17 +12,41 @@ import { SourcesService } from './sources.service';
 	styleUrls: ['./sources.component.scss']
 })
 export class SourcesComponent implements OnInit {
-	sourcesTableHead: string[] = ['Source name', 'Source type', 'Verifier', 'URL', 'Date created', ''];
-	shouldShowCreateSourceModal = this.router.url.split('/')[4] === 'new';
+	sourcesTableHead: string[] = ['Name', 'Type', 'Verifier', 'URL', 'Date created', ''];
+	shouldShowCreateSourceModal = false;
+	shouldShowUpdateSourceModal = false;
 	activeSource?: SOURCE;
 	sources!: { content: SOURCE[]; pagination: PAGINATION };
 	isLoadingSources = false;
 	projectId = this.privateService.activeProjectDetails.uid;
+	sourceTypes = [
+		{ value: 'http', viewValue: 'http' },
+		{ value: 'rest_api', viewValue: 'Rest API' },
+		{ value: 'pub_sub', viewValue: 'Pub/Sub' },
+		{ value: 'db_change_stream', viewValue: 'Database' }
+	];
+	httpTypes = [
+		{ value: 'hmac', viewValue: 'HMAC' },
+		{ value: 'basic_auth', viewValue: 'Basic Auth' },
+		{ value: 'api_key', viewValue: 'API Key' }
+	];
 
 	constructor(private route: ActivatedRoute, private router: Router, private sourcesService: SourcesService, public privateService: PrivateService, private generalService: GeneralService) {
-		this.route.queryParams.subscribe(params => {
-			this.activeSource = this.sources?.content.find(source => source.uid === params?.id);
-		});
+		this.route.queryParams.subscribe(params => (this.activeSource = this.sources?.content.find(source => source.uid === params?.id)));
+
+		const urlParam = route.snapshot.params.id;
+		if (urlParam && urlParam === 'new') this.shouldShowCreateSourceModal = true;
+		if (urlParam && urlParam !== 'new') this.shouldShowUpdateSourceModal = true;
+	}
+
+	getDataReadableValue(type: 'sourceType' | 'verifier', value: string): { value: string; viewValue: string } | null {
+		if (type === 'sourceType') {
+			return this.sourceTypes.find(source => source.value === value)!;
+		}
+		if (type === 'verifier') {
+			return this.httpTypes.find(source => source.value === value)!;
+		}
+		return null;
 	}
 
 	ngOnInit() {
@@ -55,7 +79,7 @@ export class SourcesComponent implements OnInit {
 	}
 
 	closeCreateSourceModal() {
-		this.generalService.showNotification({ message: 'Source created successfully', style: 'success' });
+		this.generalService.showNotification({ message: `Source ${this.shouldShowUpdateSourceModal ? 'updat' : 'creat'}ed successfully`, style: 'success' });
 		this.router.navigateByUrl('/projects/' + this.projectId + '/sources');
 	}
 

web/ui/dashboard/src/app/private/pages/project/subscriptions/subscriptions.component.html

@@ -232,7 +232,7 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">{
 	</button>
 </div>
 
-<div class="modal modal__full" *ngIf="shouldShowCreateSubscriptionModal || showUpdateSubscription">
+<div class="modal modal__full" *ngIf="shouldShowCreateSubscriptionModal || showUpdateSubscriptionModal">
 	<div class="modal--head">
 		<div class="flex flex__align-items-center flex__justify-between width__100">
 			<div class="modal--head--left flex flex__align-items-center">
@@ -243,7 +243,7 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">{
 				>
 					<img src="/assets/img/modal-close-icon.svg" alt="close icon" />
 				</a>
-				<h2 class="font__16px font__weight-600">{{ showUpdateSubscription ? 'Update Subscription' : 'Create Subscription' }}</h2>
+				<h2 class="font__16px font__weight-600">{{ showUpdateSubscriptionModal ? 'Update Subscription' : 'Create Subscription' }}</h2>
 			</div>
 
 			<a class="button--has-icon icon-left" target="_blank" href="https://getconvoy.io/docs" rel="noreferrer">
@@ -254,6 +254,6 @@ <h2 class="font__16px font__weight-600">{{ showUpdateSubscription ? 'Update Subs
 	</div>
 
 	<div class="modal--body padding-all__0px">
-		<app-create-subscription (onAction)="createSubscription($event.action)" [action]="showUpdateSubscription ? 'update' : 'create'"></app-create-subscription>
+		<app-create-subscription (onAction)="createSubscription($event.action)" [action]="showUpdateSubscriptionModal ? 'update' : 'create'"></app-create-subscription>
 	</div>
 </div>

web/ui/dashboard/src/app/private/pages/project/subscriptions/subscriptions.component.ts

@@ -13,23 +13,25 @@ import { SubscriptionsService } from './subscriptions.service';
 })
 export class SubscriptionsComponent implements OnInit {
 	activeSubscription?: SUBSCRIPTION;
-	shouldShowCreateSubscriptionModal = this.router.url.split('/')[4] === 'new';
+	shouldShowCreateSubscriptionModal = false;
 	projectId!: string;
 	subscriptions!: { content: SUBSCRIPTION[]; pagination: PAGINATION };
 	subscriptionsLoaders = [1, 2, 3, 4, 5];
 	isLoadindingSubscriptions = false;
 	isDeletingSubscription = false;
-	showUpdateSubscription = false;
+	showUpdateSubscriptionModal = false;
 
 	constructor(private route: ActivatedRoute, public privateService: PrivateService, private router: Router, private subscriptionsService: SubscriptionsService, private generalService: GeneralService) {
+		this.route.queryParams.subscribe(params => (this.activeSubscription = this.subscriptions?.content.find(source => source.uid === params?.id)));
 		this.projectId = this.privateService.activeProjectDetails.uid;
-		this.showUpdateSubscription = !!route.snapshot.params.id;
+
+		const urlParam = route.snapshot.params.id;
+		if (urlParam && urlParam === 'new') this.shouldShowCreateSubscriptionModal = true;
+		if (urlParam && urlParam !== 'new') this.showUpdateSubscriptionModal = true;
 	}
 
 	async ngOnInit() {
 		await this.getSubscriptions();
-
-		this.route.queryParams.subscribe(params => (this.activeSubscription = this.subscriptions?.content.find(source => source.uid === params?.id)));
 	}
 
 	async getSubscriptions(requestDetails?: { page?: number }) {

web/ui/dashboard/src/index.html

@@ -62,10 +62,10 @@
 			</symbol>
 
 			<symbol width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" id="subscriptions-icon">
-				<path d="M15.3747 11.2422L11.6172 15.0072" stroke="#737A91" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-				<path d="M2.625 11.2422H15.375" stroke="#737A91" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-				<path d="M2.625 6.75719L6.3825 2.99219" stroke="#737A91" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-				<path d="M15.375 6.75781H2.625" stroke="#737A91" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+				<path d="M15.3747 11.2422L11.6172 15.0072" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+				<path d="M2.625 11.2422H15.375" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+				<path d="M2.625 6.75719L6.3825 2.99219" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+				<path d="M15.375 6.75781H2.625" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
 			</symbol>
 
 			<symbol width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" id="sources-icon">