Ui Fixes (#809)

* updated analytics modal * fix for creating organisation * fix fecth apps on create subscriptions oage * fix: update sources * updated create/update endpoint form * updated app details for incoming projects * updated create subscriptions for app portal * updated create projects form * removed console.log, updated project type
frain-dev · Jun 28, 2022 · c482eda · c482eda
1 parent 73f0eb7
commit c482eda
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 65 deletions.
diff --git a/web/ui/dashboard/src/app/private/components/add-analytics/add-analytics.component.html b/web/ui/dashboard/src/app/private/components/add-analytics/add-analytics.component.html
@@ -30,7 +30,6 @@ <h5 class="margin-top__24px font__weight-500">Would you like to enable analytics
 
 		<div class="flex flex__column flex__justify-center width__50 margin-auto">
 			<button class="button button__primary" [disabled]="loading">Save option</button>
-			<button class="button__primary button__clear font__weight-500 margin-top__20px" (click)="closeModal.emit()">Discard</button>
 		</div>
 	</form>
 </div>
diff --git a/web/ui/dashboard/src/app/private/components/create-app/create-app.component.html b/web/ui/dashboard/src/app/private/components/create-app/create-app.component.html
@@ -73,16 +73,6 @@ <h3>Endpoint {{ i > 0 ? i + 1 : '' }}</h3>
 								<span>Please provide an endpoint URL</span>
 							</div>
 						</div>
-
-						<div class="input">
-							<label for="rate-limit-count">Rate Limit</label>
-							<input type="number" id="rate-limit-count" placeholder="e.g 5000" formControlName="rate_limit" />
-						</div>
-
-						<div class="input">
-							<label for="rate-limit-duration">Rate Limit Duration</label>
-							<input type="text" id="rate-limit-duration" placeholder="e.g 1m" formControlName="rate_limit_duration" />
-						</div>
 					</div>
 					<div class="input">
 						<label class="flex flex__align-items-center" for="http-timeout">

diff --git a/web/ui/dashboard/src/app/private/components/create-app/create-app.component.ts b/web/ui/dashboard/src/app/private/components/create-app/create-app.component.ts
@@ -46,9 +46,7 @@ export class CreateAppComponent implements OnInit {
 		return this.formBuilder.group({
 			url: ['', Validators.required],
 			description: ['', Validators.required],
-			http_timeout: [null],
-			rate_limit: [null],
-			rate_limit_duration: [null]
+			http_timeout: [null]
 		});
 	}
 

diff --git a/...c/app/private/components/create-project-component/create-project-component.component.html b/...c/app/private/components/create-project-component/create-project-component.component.html
@@ -44,6 +44,10 @@ <h3 class="margin-top__24px margin-bottom__16px">Project type</h3>
 				</label>
 			</div>
 		</div>
+		<div class="input__error input__error__danger" *ngIf="projectForm.controls['type'].touched && projectForm.controls['type'].invalid">
+			<img src="assets/img/input-error-icon.svg" alt="input error icon" />
+			<span>Please select a project type</span>
+		</div>
 
 		<div formGroupName="config">
 			<h3 class="margin-top__24px margin-bottom__16px flex flex__align-items-center">
@@ -111,7 +115,7 @@ <h3 class="margin-top__24px margin-bottom__16px flex flex__align-items-center">
 						<span class="bg__grey__light rounded__4px padding-x__4px position__absolute position--right__0px font__10px font__weight-400">required</span>
 					</label>
 					<input
-						type="text"
+						[type]="action === 'update' ? 'number' : 'text'"
 						id="retry-logic-duration"
 						placeholder="e.g 3s"
 						formControlName="duration"

diff --git a/...src/app/private/components/create-project-component/create-project-component.component.ts b/...src/app/private/components/create-project-component/create-project-component.component.ts
@@ -15,21 +15,21 @@ export class CreateProjectComponent implements OnInit {
 		name: ['', Validators.required],
 		config: this.formBuilder.group({
 			strategy: this.formBuilder.group({
-				duration: ['', Validators.required],
-				retry_count: ['', Validators.required],
-				type: ['', Validators.required]
+				duration: [null],
+				retry_count: [null],
+				type: [null]
 			}),
 			signature: this.formBuilder.group({
-				header: ['', Validators.required],
-				hash: ['', Validators.required]
+				header: [null],
+				hash: [null]
 			}),
 			ratelimit: this.formBuilder.group({
-				count: [null, Validators.required],
-				duration: [null, Validators.required]
+				count: [null],
+				duration: [null]
 			}),
-			disable_endpoint: [false, Validators.required]
+			disable_endpoint: [null]
 		}),
-		type: ['', Validators.required]
+		type: [null, Validators.required]
 	});
 	isCreatingProject = false;
 	showApiKey = false;
@@ -65,12 +65,9 @@ export class CreateProjectComponent implements OnInit {
 
 	async createProject() {
 		if (this.projectForm.invalid) return this.projectForm.markAllAsTouched();
-
+		this.checkProjectConfig();
 		this.isCreatingProject = true;
-		let duration = this.projectForm.value.config.strategy.duration;
-		const [digits, word] = duration.match(/\D+|\d+/g);
-		word === 's' ? (duration = parseInt(digits) * 1000) : (duration = parseInt(digits) * 1000000);
-		this.projectForm.value.config.strategy.duration = duration;
+
 		try {
 			const response = await this.createProjectService.createProject(this.projectForm.value);
 			this.isCreatingProject = false;
@@ -93,7 +90,6 @@ export class CreateProjectComponent implements OnInit {
 		if (this.projectForm.invalid) return this.projectForm.markAllAsTouched();
 
 		this.isCreatingProject = true;
-
 		try {
 			const response = await this.createProjectService.updateProject(this.projectForm.value);
 			if (response.status === true) {
@@ -117,9 +113,25 @@ export class CreateProjectComponent implements OnInit {
 		document.execCommand('copy');
 		this.showSecretCopyText = true;
 		setTimeout(() => {
-			this.showSecretCopyText = false
+			this.showSecretCopyText = false;
 		}, 3000);
-		
+
 		document.body.removeChild(el);
 	}
+
+	checkProjectConfig() {
+		const configDetails = this.projectForm.value.config;
+		const configKeys = Object.keys(configDetails).slice(0, -1);
+		configKeys.forEach(configKey => {
+			const configKeyValues = Object.values(configDetails[configKey]);
+			if (configKeyValues.every(item => item === null)) delete this.projectForm.value.config[configKey];
+			if (configKey === 'strategy' && configDetails?.strategy?.duration && this.action !== 'update') {
+				let duration = configDetails.strategy.duration;
+				const [digits, word] = duration.match(/\D+|\d+/g);
+				word === 's' ? (duration = parseInt(digits) * 1000) : (duration = parseInt(digits) * 1000000);
+				this.projectForm.value.config.strategy.duration = duration;
+			}
+		});
+		if (this.projectForm.value.config.disable_endpoint === null) delete this.projectForm.value.config.disable_endpoint;
+	}
 }
diff --git a/web/ui/dashboard/src/app/private/components/create-source/create-source.component.ts b/web/ui/dashboard/src/app/private/components/create-source/create-source.component.ts
@@ -58,7 +58,9 @@ export class CreateSourceComponent implements OnInit {
 	async getSourceDetails() {
 		try {
 			const response = await this.createSourceService.getSourceDetails(this.sourceId);
+			const sourceProvider = response.data?.provider;
 			this.sourceForm.patchValue(response.data);
+			if (sourceProvider === 'github') this.sourceForm.patchValue({ verifier: { type: 'github' } });
 			return;
 		} catch (error) {
 			return error;

diff --git a/...dashboard/src/app/private/components/create-subscription/create-subscription.component.ts b/...dashboard/src/app/private/components/create-subscription/create-subscription.component.ts
@@ -66,7 +66,7 @@ export class CreateSubscriptionComponent implements OnInit {
 
 		try {
 			const apps = await this.createSubscriptionService.getAppPortalApp(this.token);
-			this.subscriptionForm.patchValue({ app_id: apps.data.uid, group_id: apps.data.group_id });
+			this.subscriptionForm.patchValue({ app_id: apps.data.uid, group_id: apps.data.group_id, type: 'outgoing' });
 			this.endPoints = apps.data.endpoints;
 			this.isloadingAppPortalAppDetails = false;
 			return;
@@ -85,7 +85,7 @@ export class CreateSubscriptionComponent implements OnInit {
 			this.subscriptionForm.patchValue({ source_id: response.data?.source_metadata?.uid, app_id: response.data?.app_metadata?.uid, endpoint_id: response.data?.endpoint_metadata?.uid });
 			if (!this.token) this.onUpdateAppSelection();
 			response.data.filter_config?.event_types ? (this.eventTags = response.data.filter_config?.event_types) : (this.eventTags = []);
-
+			if (this.token) this.projectType = 'outgoing';
 			return;
 		} catch (error) {
 			return error;
@@ -97,7 +97,6 @@ export class CreateSubscriptionComponent implements OnInit {
 			await this.getAppPortalApp();
 			return;
 		}
-		if (this.privateService.activeProjectDetails.type === 'incoming') return;
 
 		try {
 			const appsResponse = await this.privateService.getApps();
@@ -159,6 +158,7 @@ export class CreateSubscriptionComponent implements OnInit {
 		) {
 			return this.subscriptionForm.markAllAsTouched();
 		}
+
 		if (
 			this.subscriptionForm.get('name')?.invalid ||
 			this.subscriptionForm.get('type')?.invalid ||
@@ -176,7 +176,6 @@ export class CreateSubscriptionComponent implements OnInit {
 			delete subscription.retry_config;
 		}
 		this.isCreatingSubscription = true;
-
 		try {
 			const response =
 				this.action == 'update'
@@ -192,7 +191,7 @@ export class CreateSubscriptionComponent implements OnInit {
 	async onCreateNewApp(newApp: APP) {
 		await this.getApps();
 		this.subscriptionForm.patchValue({ app_id: newApp.uid });
-		this.onUpdateAppSelection()
+		this.onUpdateAppSelection();
 	}
 
 	removeEventTag(tag: string) {

diff --git a/web/ui/dashboard/src/app/private/pages/project/apps/app-details/app-details.component.html b/web/ui/dashboard/src/app/private/pages/project/apps/app-details/app-details.component.html
@@ -77,7 +77,7 @@ <h3>Overview</h3>
     </div> -->
 
 	<div class="flex flex__justify-between flex__wrap border__top margin-top__22px">
-		<div class="padding-top__32px" [ngClass]="{ 'width__50 border__right padding-right__32px': !shouldRenderSmallSize, width__100: shouldRenderSmallSize }">
+		<div class="padding-top__32px" [ngClass]="{ 'width__50 border__right padding-right__32px': !shouldRenderSmallSize && privateService.activeProjectDetails?.type === 'outgoing', width__100: shouldRenderSmallSize || privateService.activeProjectDetails?.type === 'incoming' }">
 			<div class="flex flex__align-items-center flex__justify-between" *ngIf="isLoadingAppDetails">
 				<h3>App Event Endpoints</h3>
 				<div class="flex flex__align-items-center">
@@ -176,7 +176,7 @@ <h5 class="color__black font__14px font__weight-400">{{ endpoint.description }}<
 				<p>No endpoint has been added for selected app yet</p>
 			</div>
 		</div>
-		<div class="padding-top__32px" [ngClass]="{ 'width__50 padding-left__32px': !shouldRenderSmallSize, 'border__top width__100': shouldRenderSmallSize }">
+		<div class="padding-top__32px" *ngIf="privateService.activeProjectDetails?.type === 'outgoing'" [ngClass]="{ 'width__50 padding-left__32px': !shouldRenderSmallSize, 'border__top width__100': shouldRenderSmallSize }">
 			<div *ngIf="loadingAppPotalToken">
 				<h3>App Portal</h3>
 				<ul class="margin-top__10px">
@@ -247,7 +247,7 @@ <h2>{{ selectedEndpoint ? 'Update' : 'Add' }} Endpoint</h2>
 		<app-create-endpoint
 			[selectedEndpoint]="selectedEndpoint"
 			[appId]="appsDetailsItem.uid"
-			(onAction)="$event.action == 'cancel' ? (showAddEndpointModal = false) : getAppDetails(appsDetailsItem.uid); showAddEndpointModal = false"
+			(onAction)="$event.action == 'cancel' ? closeEditEndpointModal() : getAppDetails(appsDetailsItem.uid); closeEditEndpointModal()"
 		></app-create-endpoint>
 	</ng-container>
 
@@ -277,10 +277,5 @@ <h2>Endpoint Secret</h2>
 </div>
 
 <div class="modal modal__center small" *ngIf="showDeleteModal">
-	<app-delete-modal
-		[isLoading]="isDeletingEndpoint"
-		[deleteText]="'“' + selectedEndpoint?.description + '”'"
-		(closeModal)="showDeleteModal = false"
-		(deleteData)="deleteEndpoint()"
-	></app-delete-modal>
+	<app-delete-modal [isLoading]="isDeletingEndpoint" [deleteText]="'“' + selectedEndpoint?.description + '”'" (closeModal)="showDeleteModal = false" (deleteData)="deleteEndpoint()"></app-delete-modal>
 </div>
diff --git a/web/ui/dashboard/src/app/private/pages/project/apps/app-details/app-details.component.ts b/web/ui/dashboard/src/app/private/pages/project/apps/app-details/app-details.component.ts
@@ -123,6 +123,10 @@ export class AppDetailsComponent implements OnInit {
 		this.screenWidth > 1010 ? (this.shouldRenderSmallSize = false) : (this.shouldRenderSmallSize = true);
 	}
 
+	closeEditEndpointModal(){
+		this.showAddEndpointModal = false;
+		this.selectedEndpoint = undefined
+	}
 	focusInput() {
 		document.getElementById('tagInput')?.focus();
 	}

diff --git a/...app/private/pages/project/apps/app-details/create-endpoint/create-endpoint.component.html b/...app/private/pages/project/apps/app-details/create-endpoint/create-endpoint.component.html
@@ -30,17 +30,6 @@
 			</div>
 		</div>
 
-		<div class="grid grid__col-2 grid--gap__20px">
-			<div class="input">
-				<label for="rate-limit-count">Rate Limit</label>
-				<input type="number" id="rate-limit-count" placeholder="e.g 5000" formControlName="rate_limit" />
-			</div>
-			<div class="input">
-				<label for="rate-limit-duration">Rate Limit Duration</label>
-				<input type="text" id="rate-limit-duration" placeholder="e.g 1m" formControlName="rate_limit_duration" />
-			</div>
-		</div>
-
 		<div class="input">
 			<label class="flex flex__align-items-center" for="http-timeout">
 				HTTP Timeout

diff --git a/...c/app/private/pages/project/apps/app-details/create-endpoint/create-endpoint.component.ts b/...c/app/private/pages/project/apps/app-details/create-endpoint/create-endpoint.component.ts
@@ -18,8 +18,6 @@ export class CreateEndpointComponent implements OnInit {
 	addNewEndpointForm: FormGroup = this.formBuilder.group({
 		url: ['', Validators.required],
 		http_timeout: [null],
-		rate_limit: [null],
-		rate_limit_duration: [null],
 		description: ['', Validators.required]
 	});
 	token: string = this.route.snapshot.params.token;

diff --git a/web/ui/dashboard/src/app/private/private.component.html b/web/ui/dashboard/src/app/private/private.component.html
@@ -1,7 +1,7 @@
 <header class="dashboard--header border__bottom">
 	<div class="dashboard--header--container">
 		<div class="flex flex__align-items-center">
-			<a target="_blank" href="https://getconvoy.io" rel="noreferrer">
+			<a target="_blank" routerLink="/" rel="noreferrer">
 				<img src="/assets/img/logo.svg" alt="convoy logo" class="logo" />
 			</a>
 
@@ -23,9 +23,9 @@
 				<span class="font__weight-400 color__primary">Go to docs</span>
 			</a>
 
-			<div class="dropdown" *ngIf="organisations?.length">
+			<div class="dropdown">
 				<button class="button__more with-padding button--has-icon icon-left" (click)="showOrgDropdown = !showOrgDropdown; showOverlay = true">
-					<div class="badge">
+					<div class="badge" *ngIf="organisations?.length">
 						<div class="icon">{{ userOrganization?.name?.slice(0, 1) }}</div>
 						<div class="name">{{ userOrganization?.name }}</div>
 					</div>
@@ -48,7 +48,7 @@
 					<div class="dropdown--footer">
 						<button class="base-button" (click)="showAddOrganisationModal = true; showOrgDropdown = false">
 							<img src="/assets/img/add-circlar-icon.svg" alt="add icon" />
-							Add another Organization
+							Add {{ organisations?.length ? 'another' : 'an' }} Organization
 						</button>
 					</div>
 				</div>
@@ -82,7 +82,7 @@ <h3 class="text__capitalize">{{ authDetails()?.first_name }} {{ authDetails()?.l
 </header>
 <div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showMoreDropdown = false; showOrgDropdown = false"></div>
 
-<div class="_overlay z-index--2" *ngIf="showAddOrganisationModal || showAddAnalytics" (click)="showAddOrganisationModal = false; showAddAnalytics = false"></div>
+<div class="_overlay z-index--2" *ngIf="showAddOrganisationModal || showAddAnalytics" (click)="showAddOrganisationModal = false"></div>
 <div class="modal modal__right z-index--3" *ngIf="showAddOrganisationModal">
 	<app-create-organisation *ngIf="showAddOrganisationModal" (closeModal)="closeAddOrganisationModal($event)"></app-create-organisation>
 </div>

diff --git a/web/ui/dashboard/src/app/private/private.component.ts b/web/ui/dashboard/src/app/private/private.component.ts
@@ -42,7 +42,7 @@ export class PrivateComponent implements OnInit {
 	async getConfiguration() {
 		try {
 			const response = await this.privateService.getConfiguration();
-			if (response.data.length === 0) this.showAddAnalytics = true;
+			if (response.data.length === 0 && !this.router.url.includes('/app-portal/')) this.showAddAnalytics = true;
 		} catch {}
 	}