Skip to content

Commit

Permalink
FOGL-8115: Add Control Entry-points API Flow (#332)
Browse files Browse the repository at this point in the history 
* form validation related changes and other css fixes

* changes in variables modal to fix alignment issue and other feedback changes
  • Loading branch information
@MonikaSharma06
MonikaSharma06 authored Oct 3, 2023
1 parent f2b1441 commit 551713f
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 62 deletions.
5 changes: 5 additions & 0 deletions ...onents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,8 @@ span.is-small {
[hidden] {
display: none !important;
}

.allow-list-text {
font-size: 0.7em;
color: gray;
}
45 changes: 21 additions & 24 deletions ...nents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,13 @@
<div class="field-body">
<div class="field">
<div class="control">
<input #name=ngModel name="af.name" class="input" type="text" placeholder="Name" required
[(ngModel)]="af.name" title="No single quotes and double quotes!" [ngModelOptions]="{standalone: true}"
<input formControlName="name" class="input" type="text" placeholder="Name" required title="No single quotes and double quotes!"
[pattern]="QUOTATION_VALIDATION_PATTERN" autocomplete="off"
[ngClass]="{'is-small':rolesService.hasControlAccess(), 'is-static static-field pb-4':!rolesService.hasControlAccess()}"
[readonly]="!rolesService.hasControlAccess()">
</div>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="help is-danger">
<div *ngIf="name.errors?.['required']">
<div *ngIf="apiFlowForm.controls['name'].invalid" class="help is-danger">
<div *ngIf=" apiFlowForm.controls['name'].touched && apiFlowForm.controls['name'].errors?.['required']">
*required
</div>
</div>
Expand Down Expand Up @@ -77,15 +76,13 @@
<div class="field">
<ngContainer *ngIf="selectedType === 'operation' && rolesService.hasControlAccess()">
<div class="control">
<input #operation_name=ngModel name="af.operation_name" class="input is-small" type="text" placeholder="Operation name" required
[(ngModel)]="af.operation_name" title="No single quotes and double quotes!" [ngModelOptions]="{standalone: true}"
<input formControlName="operation_name" class="input is-small" type="text" placeholder="Operation name"
title="No single quotes and double quotes!"
[pattern]="QUOTATION_VALIDATION_PATTERN" autocomplete="off">
</div>
<div *ngIf="operation_name.invalid && (operation_name.dirty || operation_name.touched)" class="help is-danger">
<div *ngIf="operation_name.errors?.['required']">
<div *ngIf="selectedType === 'operation' && apiFlowForm.controls.operation_name.value === ''" class="help is-danger">
*required
</div>
</div>
</ngContainer>
</div>

Expand Down Expand Up @@ -197,7 +194,7 @@
<label class="label is-small has-text-left">Variables</label>
</div>
<div class="field-body">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<button class="button px-0 pt-1 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand Down Expand Up @@ -240,7 +237,7 @@
<div class="columns">
<div class="column is-one-fifth"></div>
<div class="btn-column pt-2 pb-0 pl-2">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<button class="button px-0 pt-2 is-small is-link is-light has-background-white" (click)="addValueControl('variables')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand All @@ -257,7 +254,7 @@
<label class="label is-small has-text-left">Constants</label>
</div>
<div class="field-body">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white" (click)="addValueControl('constants')">
<button class="button px-0 pt-1 is-small is-link is-light has-background-white" (click)="addValueControl('constants')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
</span>
Expand Down Expand Up @@ -300,7 +297,7 @@
<div class="columns">
<div class="column is-one-fifth"></div>
<div class="btn-column pt-2 pb-0 pl-2">
<button class="button px-0 pt-0 is-small is-link is-light has-background-white"
<button class="button px-0 pt-2 is-small is-link is-light has-background-white"
(click)="addValueControl('constants')">
<span class="icon is-small pt-1 mr-0">
<i class="fa fa-xs fa-plus" aria-hidden="true"></i>
Expand Down Expand Up @@ -371,7 +368,7 @@
[ngClass]="{'is-static pb-4':!rolesService.hasControlAccess()}"
[readonly]="!rolesService.hasControlAccess()">
</ng-template>
<p class="help">*Allow list will only be applicable when the anonymous access is disabled.</p>
<p class="help allow-list-text">*Allow list will only be applicable when the anonymous access is disabled.</p>
</div>
</div>
</div>
Expand All @@ -394,11 +391,11 @@
<div class="field">
<ng-container *ngIf="rolesService.hasControlAccess(); else staticDescription">
<div class="control">
<textarea rows="2" type="text" class="textarea is-small" placeholder="description" name="af.description" required
[(ngModel)]="af.description" trim="blur" #description="ngModel" [ngModelOptions]="{standalone: true}"></textarea>
<textarea rows="2" type="text" formControlName="description" class="textarea is-small" placeholder="description" required
trim="blur"></textarea>
</div>
<div *ngIf="description.invalid && (description.dirty || description.touched)" class="help is-danger">
<div *ngIf="description.errors?.['required']">
<div *ngIf="apiFlowForm.controls['description'].invalid" class="help is-danger">
<div *ngIf="apiFlowForm.controls['description'].touched && apiFlowForm.controls['description'].errors?.['required']">
*required
</div>
</div>
Expand All @@ -419,7 +416,7 @@
<div class="field">
<div class="columns">
<div class="column is-2">
<div *ngIf="editMode && allowExecute" class="field has-addons is-fullwidth">
<div *ngIf="editMode && af.permitted" class="field has-addons is-fullwidth">
<p class="control is-expanded">
<a class="button is-small is-fullwidth" (click)="checkAndRequestAPIFlow()">Execute</a>
</p>
Expand All @@ -439,7 +436,7 @@
</div>
</div>
</div>
<p *ngIf="editMode && !allowExecute && rolesService.hasControlAccess()" class="control">
<p *ngIf="editMode && !af.permitted && rolesService.hasControlAccess()" class="control">
<button class="button is-small is-danger is-outlined" type="button" (click)="openModal('confirmation-delete-dialog')">Delete</button>
</p>
</div>
Expand All @@ -450,7 +447,7 @@
</p>
<p class="control">
<button (click)="saveAPIFlow(apiFlowForm.value)" type="submit" class="button is-small is-link"
[disabled]="apiFlowForm?.invalid">Save</button>
[disabled]="apiFlowForm?.invalid || (selectedType === 'operation' && apiFlowForm.controls.operation_name.value.trim() === '')">Save</button>
</p>
</div>
</div>
Expand All @@ -476,8 +473,8 @@
</header>
<section class="modal-card-body">
<div class="columns">
<div class="column is-3"></div>
<div class="column pt-5">
<div class="column is-1"></div>
<div class="column py-5">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
Expand All @@ -489,7 +486,7 @@
<label class="label"></label>
</div>
<div class="field-body columns" [formGroupName]="i">
<div class="column is-3">
<div class="column is-4">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
Expand Down
26 changes: 19 additions & 7 deletions ...ponents/core/control-dispatcher/api-flow/add-edit-api-flow/add-edit-api-flow.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ export class AddEditAPIFlowComponent implements OnInit {
destinationNames = [];

editMode = false;
allowExecute = false;

apiFlowName: string;
af: APIFlow;

apiFlowForm: FormGroup;

allUsers: User[];
Expand All @@ -73,6 +73,9 @@ export class AddEditAPIFlowComponent implements OnInit {
private controlUtilsService: ControlUtilsService,
private router: Router) {
this.apiFlowForm = this.fb.group({
name: ['', Validators.required],
description: ['', Validators.required],
operation_name: [''],
variables: this.fb.array([]),
constants: this.fb.array([])
});
Expand All @@ -89,6 +92,7 @@ export class AddEditAPIFlowComponent implements OnInit {
type: 'write',
description: '',
operation_name: '',
permitted: false,
destination: 'broadcast',
constants: {},
variables: {},
Expand Down Expand Up @@ -170,17 +174,20 @@ export class AddEditAPIFlowComponent implements OnInit {
this.editMode = true;
this.ngProgress.done();
this.af = data;

this.apiFlowForm.get('name').setValue(data.name);
this.apiFlowForm.get('description').setValue(data.description);
if (data.type === 'operation') {
this.apiFlowForm.get('operation_name').setValue(data.operation_name);
}

if (this.af.destination !== 'broadcast') {
this.selectedDestinationName = this.af[this.af.destination];
}
this.selectedType = data.type;

// TODO: FOGL-8070
this.af.anonymous = data.anonymous === 't' || data.anonymous === true ? true : false;

this.fillParameters(data.variables, 'variables');
this.fillParameters(data.constants, 'constants');
this.allowExecute = data.anonymous === true || (data.anonymous === false && data.allow.includes(this.loggedInUsername));
}, error => {
/** request completed */
this.ngProgress.done();
Expand All @@ -194,9 +201,14 @@ export class AddEditAPIFlowComponent implements OnInit {

saveAPIFlow(data) {
let payload = this.af;


payload.name = data.name;
payload.description = data.description;
payload.type = this.selectedType;

if (payload.type === 'operation') {
payload.operation_name = data.operation_name;
}

const destination = this.af.destination.toLowerCase();
payload.destination = destination;
if (destination !== 'broadcast') {
Expand Down
60 changes: 32 additions & 28 deletions src/app/components/core/control-dispatcher/api-flow/api-flow.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
<ng-container *ngFor="let ep of apiFlows; let i = index">
<tr id="select{{i}}">
<td class="align-content">
<!-- TODO: 8070, this requires check the same way, we have in details page for this.allowExecute; Here we need to check for each record while rendering -->
<a *ngIf="ep.permitted" class="button is-ghost ep-name mx-0 px-0"
(click)="getAndExecuteAPIFlow(ep.name);">
{{ep.name}}
Expand Down Expand Up @@ -93,37 +92,42 @@
<button type="button" class="delete" aria-label="close" (click)="closeModal('confirmation-execute-dialog')"></button>
</header>
<section class="modal-card-body">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
<div class="field">
<ng-container formArrayName="variables">
<div *ngIf="getFormControls('variables').length === 0" class="has-text-centered">
<small class="text-secondary has-text-grey-light">
There are no variable parameters associated with this entry point.
</small>
</div>
<ng-container *ngFor="let v of getFormControls('variables'); let i = index">
<div class="field is-horizontal">
<div class="field-body columns" [formGroupName]="i">
<div class="column is-3">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
</div>
<div class="column is-4">
<div class="control">
<input formControlName="vValue" placeholder="Variable value" class="input is-small" name="value" type="text">
<div class="columns">
<div class="column is-1"></div>
<div class="column py-5">
<form [formGroup]="apiFlowForm">
<div class="field is-horizontal pt-4">
<div class="field-body">
<div class="field">
<ng-container formArrayName="variables">
<div *ngIf="getFormControls('variables').length === 0" class="has-text-centered">
<small class="text-secondary has-text-grey-light">
There are no variable parameters associated with this entry point.
</small>
</div>
<ng-container *ngFor="let v of getFormControls('variables'); let i = index">
<div class="field is-horizontal">
<div class="field-body columns" [formGroupName]="i">
<div class="column is-4">
<div class="control">
<label class="label label-name has-text-left">{{v.value.vName}}</label>
</div>
</div>
<div class="column is-4">
<div class="control">
<input formControlName="vValue" placeholder="Variable value" class="input is-small" name="value" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
</section>
<footer class="modal-card-foot p-3">
<button class="button is-small" type="button" (click)="closeModal('confirmation-execute-dialog')">Cancel</button>
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/layout/side-menu/side-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@
ACLs
</a>
</li>
<!-- <li>
<li>
<a id="entry-point" routerLinkActive="is-active" routerLink='control-dispatcher/entry-points'>
API Entry Points
</a>
</li> -->
</li>
<li>
<a id="pipelines" routerLinkActive="is-active" routerLink='control-dispatcher/pipelines'>Pipelines</a>
</li>
Expand Down
1 change: 1 addition & 0 deletions src/app/models/control/api-flow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
export class APIFlow {
name: string;
description: string;
permitted: boolean;
type: string;
operation_name?: string;
destination: string;
Expand Down
6 changes: 5 additions & 1 deletion src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,11 @@ a.dropdown-item:hover {
}

.plus-icon {
font-size: 0.70rem;
font-size: 0.80rem;
}

.bi:hover {
color: rgb(91, 89, 89);
}

.desc-text{
Expand Down

0 comments on commit 551713f

Please sign in to comment.