Fix endpoint secret modal on portal links (#1909)

* fix endpoint form * fix endpoint secret modal on portal links page * show owner id for portal links
frain-dev · Feb 3, 2024 · cefbc07 · cefbc07
1 parent 6b27db3
commit cefbc07
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html b/web/ui/dashboard/src/app/private/components/config-button/config-button.component.html
@@ -1,8 +1,8 @@
 <button convoy-button size="sm" fill="outline" color="grey" texture="light" type="button" class="!px-0 !py-0 rounded-4px" (click)="onClick.emit()">
-	<div class="px-10px">
+	<div class="px-10px whitespace-nowrap">
 		<ng-content></ng-content>
 	</div>
-	<div class="flex items-center justify-center bg-new.gray-100 ml-4px py-8px px-10px">
+	<div class="flex items-center justify-center bg-new.gray-200 ml-4px py-8px px-10px min-h-[26px] min-w-[30px]">
 		<img src="assets/img/svg/plus-icon.svg" class="" alt="plus icon" />
 	</div>
 </button>
diff --git a/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts b/web/ui/dashboard/src/app/private/components/create-endpoint/create-endpoint.component.ts
@@ -75,7 +75,10 @@ export class CreateEndpointComponent implements OnInit {
 	token: string = this.route.snapshot.params.token;
 	@Input('endpointId') endpointUid: string = this.route.snapshot.params.id;
 	enableMoreConfig = false;
-	configurations = [{ uid: 'http_timeout', name: 'Timeout ', show: false }];
+	configurations = [
+		{ uid: 'http_timeout', name: 'Timeout ', show: false },
+		{ uid: 'owner_id', name: 'Owner ID ', show: false }
+	];
 	endpointCreated: boolean = false;
 	endpointSecret?: SECRET;
 	private rbacService = inject(RbacService);
@@ -92,13 +95,7 @@ export class CreateEndpointComponent implements OnInit {
 
 	async ngOnInit() {
 		if (this.type !== 'portal')
-			this.configurations.push(
-				{ uid: 'owner_id', name: 'Owner ID ', show: false },
-				{ uid: 'rate_limit', name: 'Rate Limit ', show: false },
-				{ uid: 'alert_config', name: 'Notifications', show: false },
-				{ uid: 'auth', name: 'Auth', show: false },
-				{ uid: 'signature', name: 'Signature Format', show: false }
-			);
+			this.configurations.push({ uid: 'rate_limit', name: 'Rate Limit ', show: false }, { uid: 'alert_config', name: 'Notifications', show: false }, { uid: 'auth', name: 'Auth', show: false }, { uid: 'signature', name: 'Signature Format', show: false });
 		if (this.endpointUid && this.editMode) this.getEndpointDetails();
 		if (!(await this.rbacService.userCanAccess('Endpoints|MANAGE'))) this.addNewEndpointForm.disable();
 	}

diff --git a/web/ui/dashboard/src/app/public/app/app.component.html b/web/ui/dashboard/src/app/public/app/app.component.html
@@ -66,7 +66,7 @@ <h2 class="font-medium text-14 text-new.gray-400">Endpoints</h2>
 							</button>
 						</li>
 						<li class="mb-10px hover:bg-new.primary-25 transition-all duration-300 rounded-8px" *ngIf="portalDetails?.can_manage_endpoint">
-							<button convoy-dropdown-option convoy-button size="sm" fill="clear" class="w-full !justify-start px-8px py-4px" color="grey" (click)="showEndpointSecret = true; activeEndpoint = endpoint">
+							<button convoy-dropdown-option convoy-button size="sm" fill="clear" class="w-full !justify-start px-8px py-4px" color="grey" (click)="activeEndpoint = endpoint; secretDialog.showModal()">
 								<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-8px">
 									<path
 										d="M6.99344 1.48703L3.66677 2.74036C2.9001 3.02703 2.27344 3.9337 2.27344 4.74703V9.70036C2.27344 10.487 2.79344 11.5204 3.42677 11.9937L6.29344 14.1337C7.23344 14.8404 8.7801 14.8404 9.7201 14.1337L12.5868 11.9937C13.2201 11.5204 13.7401 10.487 13.7401 9.70036V4.74703C13.7401 3.92703 13.1134 3.02036 12.3468 2.7337L9.0201 1.48703C8.45344 1.28036 7.54677 1.28036 6.99344 1.48703Z"
@@ -290,9 +290,11 @@ <h2 class="font-medium text-14 text-new.gray-400">Endpoints</h2>
 
 	<div id="convoy-app"></div>
 
-	<convoy-endpoint-secret class="z-20 relative" *ngIf="showEndpointSecret" [endpointDetails]="activeEndpoint" (closeSecretModal)="showEndpointSecret = false" (expireCurrentSecret)="getEndpoints()"></convoy-endpoint-secret>
-
 	<div class="fixed top-0 left-0 right-0 bottom-0 bg-[#fff] z-20 pb-100px overflow-auto" *ngIf="showCreateEndpoint === true">
 		<convoy-create-portal-endpoint (onAction)="onCloseEndpointForm()" [endpoint]="activeEndpoint"></convoy-create-portal-endpoint>
 	</div>
 </div>
+
+<dialog #secretDialog convoy-dialog position="center">
+	<convoy-endpoint-secret [endpointDetails]="activeEndpoint" (closeSecretModal)="secretDialog.close()" (expireCurrentSecret)="getEndpoints(); secretDialog.close()"></convoy-endpoint-secret>
+</dialog>
diff --git a/web/ui/dashboard/src/app/public/app/app.component.ts b/web/ui/dashboard/src/app/public/app/app.component.ts
@@ -27,7 +27,6 @@ export class AppComponent implements OnInit {
 	activeEndpoint?: PORTAL_ENDPOINT;
 	eventDeliveryFilteredByEventId!: string;
 	isloadingSubscriptions = false;
-	showEndpointSecret: boolean = false;
 	showCreateEndpoint = false;
 	isTogglingEndpoint = false;
 	portalDetails!: PORTAL_LINK;

diff --git a/web/ui/dashboard/src/app/public/app/app.module.ts b/web/ui/dashboard/src/app/public/app/app.module.ts
@@ -13,6 +13,7 @@ import { DropdownComponent, DropdownOptionDirective } from 'src/app/components/d
 import { CreateEndpointComponent } from 'src/app/private/components/create-endpoint/create-endpoint.component';
 import { CreatePortalEndpointComponent } from '../create-endpoint/create-endpoint.component';
 import { EndpointSecretComponent } from 'src/app/private/pages/project/endpoints/endpoint-secret/endpoint-secret.component';
+import { DialogDirective } from 'src/app/components/dialog/dialog.directive';
 
 const routes: Routes = [{ path: '', component: AppComponent }];
 
@@ -32,7 +33,8 @@ const routes: Routes = [{ path: '', component: AppComponent }];
 		DropdownOptionDirective,
 		TagComponent,
 		EndpointSecretComponent,
-		CreatePortalEndpointComponent
+		CreatePortalEndpointComponent,
+        DialogDirective
 	]
 })
 export class AppModule {}