Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Allow single item deletion from multi-value fields #7084

Merged
merged 14 commits into from
Sep 18, 2023
Merged

[UI] Allow single item deletion from multi-value fields #7084

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
bdcf736
Support single endpoint deletion from multi-endpoints component
rm3l Sep 13, 2023
b3514e2
Support single command deletion from multi-commands component
rm3l Sep 13, 2023
4b7d0e3
Support single key-value item deletion from multi-key-value component
rm3l Sep 13, 2023
eaecfad
Support single text item deletion from multi-text component
rm3l Sep 13, 2023
b149eb0
Support single volume mount item deletion from multi-volume-mounts co…
rm3l Sep 13, 2023
a1ceb78
Add Cypress test cases
rm3l Sep 13, 2023
0a0ca54
Git-ignore Cypress screenshots folder
rm3l Sep 13, 2023
b43be6d
Generate static UI
rm3l Sep 13, 2023
d588446
Update Delete icon and add tooltip to it
rm3l Sep 15, 2023
4bf895f
Move the "delete endpoint" button closer to the element it is attache…
rm3l Sep 15, 2023
8f70f87
Generate static UI
rm3l Sep 15, 2023
e6d0d0b
Revert "Move the "delete endpoint" button closer to the element it is…
rm3l Sep 15, 2023
3001acb
Move the "delete endpoint" buttons closer to the elements they are at…
rm3l Sep 15, 2023
b0412b0
Generate static UI
rm3l Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ui/src/app/controls/endpoints/endpoints.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
.mid-width { width: 50%; }
.quart-width { width: 25%; }

mat-card{
display:flex;
flex-direction: row;
margin-bottom: 16px;
}

mat-card-content{
flex-grow: 1;
overflow: auto;
}
88 changes: 47 additions & 41 deletions ui/src/app/controls/endpoints/endpoints.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,49 @@
<div *ngFor="let control of form.controls; index as i">
<ng-container [formGroup]="control">
<mat-form-field class="mid-width" appearance="outline">
<mat-label><span>Name</span></mat-label>
<input [attr.data-cy]="'endpoint-name-'+i" matInput formControlName="name">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label><span>Target Port</span></mat-label>
<input [attr.data-cy]="'endpoint-targetPort-'+i" type="number" matInput formControlName="targetPort">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label>Exposure</mat-label>
<mat-select [attr.data-cy]="'endpoint-exposure-'+i" formControlName="exposure">
<mat-option value="">(default, public)</mat-option>
<mat-option value="public">public</mat-option>
<mat-option value="internal">internal</mat-option>
<mat-option value="none">none</mat-option>
</mat-select>
</mat-form-field>
<div class="group">
<mat-card *ngFor="let control of form.controls; index as i">
<mat-card-content [formGroup]="control">
<mat-form-field class="mid-width" appearance="outline">
<mat-label><span>Name</span></mat-label>
<input [attr.data-cy]="'endpoint-name-'+i" matInput formControlName="name">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label><span>Target Port</span></mat-label>
<input [attr.data-cy]="'endpoint-targetPort-'+i" type="number" matInput formControlName="targetPort">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label>Exposure</mat-label>
<mat-select [attr.data-cy]="'endpoint-exposure-'+i" formControlName="exposure">
<mat-option value="">(default, public)</mat-option>
<mat-option value="public">public</mat-option>
<mat-option value="internal">internal</mat-option>
<mat-option value="none">none</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="mid-width" appearance="outline">
<mat-label><span>Path</span></mat-label>
<input [attr.data-cy]="'endpoint-path-'+i" matInput formControlName="path">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label>Protocol</mat-label>
<mat-select [attr.data-cy]="'endpoint-protocol-'+i" formControlName="protocol">
<mat-option value="">(default, http)</mat-option>
<mat-option value="http">http</mat-option>
<mat-option value="https">https</mat-option>
<mat-option value="ws">ws</mat-option>
<mat-option value="wss">wss</mat-option>
<mat-option value="tcp">tcp</mat-option>
<mat-option value="udp">udp</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox [attr.data-cy]="'endpoint-secure-'+i" formControlName="secure">Protocol Is Secure</mat-checkbox>
</ng-container>
<mat-form-field class="mid-width" appearance="outline">
<mat-label><span>Path</span></mat-label>
<input [attr.data-cy]="'endpoint-path-'+i" matInput formControlName="path">
</mat-form-field>
<mat-form-field class="quart-width" appearance="outline">
<mat-label>Protocol</mat-label>
<mat-select [attr.data-cy]="'endpoint-protocol-'+i" formControlName="protocol">
<mat-option value="">(default, http)</mat-option>
<mat-option value="http">http</mat-option>
<mat-option value="https">https</mat-option>
<mat-option value="ws">ws</mat-option>
<mat-option value="wss">wss</mat-option>
<mat-option value="tcp">tcp</mat-option>
<mat-option value="udp">udp</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox [attr.data-cy]="'endpoint-secure-'+i" formControlName="secure">Protocol Is Secure</mat-checkbox>
</mat-card-content>
<mat-card-actions>
<button [attr.data-cy]="'endpoint-minus-'+i" mat-icon-button (click)="removeEndpoint(i)">
<mat-icon class="tab-icon material-icons-outlined">remove</mat-icon>
</button>
</mat-card-actions>
</mat-card>
<div>
<button data-cy="endpoints-add" mat-flat-button (click)="addEndpoint()">Add an Endpoint</button>
</div>
</div>
<button data-cy="endpoints-plus" *ngIf="form.value.length > 0" mat-icon-button (click)="addEndpoint()">
<mat-icon class="tab-icon material-icons-outlined">add</mat-icon>
</button>
<button data-cy="endpoints-add" *ngIf="form.value.length == 0" mat-flat-button (click)="addEndpoint()">Add an Endpoint</button>
4 changes: 4 additions & 0 deletions ui/src/app/controls/endpoints/endpoints.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ export class EndpointsComponent implements ControlValueAccessor, Validator {
}));
}

removeEndpoint(index: number) {
this.form.removeAt(index);
}

/* ControlValueAccessor implementation */
writeValue(value: Endpoint[]) {
value.forEach(ep => {
Expand Down