Skip to content

Commit dec0398

Browse files
sguiheuxsguiheux
authored
refactor(ui): remove semantic ui from edit context modal (#6173)
1 parent edb9ff8 commit dec0398

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+846
-1117
lines changed

‎ui/src/app/shared/action/action.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@import '../../../common';
2+
#ActionEdit {
3+
padding-bottom: 100px;
4+
}
25
.requirementForm {
36
margin-top: 10px;
47
h3 {

‎ui/src/app/shared/conditions/conditions.component.ts

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
1+
import {
2+
ChangeDetectionStrategy,
3+
ChangeDetectorRef,
4+
Component,
5+
EventEmitter,
6+
Input,
7+
OnDestroy,
8+
OnInit,
9+
Output,
10+
ViewChild
11+
} from '@angular/core';
212
import { PipelineStatus } from 'app/model/pipeline.model';
313
import { Project } from 'app/model/project.model';
414
import { WorkflowNodeCondition, WorkflowNodeConditions, WorkflowTriggerConditionCache } from 'app/model/workflow.model';
@@ -23,6 +33,7 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
2333
if (data) {
2434
this.operators = Object.keys(data.operators).map(k => ({ key: k, value: data.operators[k] }));
2535
this.conditionNames = data.names;
36+
this.clearConditionNames = data.names;
2637
if (this.conditionNames) {
2738
this.suggest = this.conditionNames.map((d) => d.replace(/-|\./g, '_'));
2839
}
@@ -64,6 +75,7 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
6475
loadingConditions = false;
6576
operators: Array<any>;
6677
conditionNames: Array<string>;
78+
clearConditionNames: Array<string>;
6779
statuses = [PipelineStatus.SUCCESS, PipelineStatus.FAIL, PipelineStatus.SKIPPED];
6880
loading = false;
6981
previousValue: string;
@@ -72,7 +84,8 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
7284
_triggerCondition: WorkflowTriggerConditionCache;
7385

7486
constructor(
75-
private _theme: ThemeStore
87+
private _theme: ThemeStore,
88+
private _cd: ChangeDetectorRef
7689
) {
7790
super();
7891
}
@@ -83,6 +96,13 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
8396
return undefined;
8497
}
8598

99+
onSearchName(value: string): void {
100+
if (this.conditionNames.indexOf(value) === -1) {
101+
this.conditionNames = [].concat(this.clearConditionNames);
102+
this.conditionNames.push(value);
103+
}
104+
}
105+
86106
ngOnInit(): void {
87107
this.codeMirrorConfig = {
88108
matchBrackets: true,
@@ -116,6 +136,7 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
116136
}
117137

118138
removeCondition(index: number): void {
139+
this.conditions.plain = Object.assign([], this.conditions.plain);
119140
this.conditions.plain.splice(index, 1);
120141
this.pushChange('remove');
121142
}
@@ -127,9 +148,11 @@ export class ConditionsComponent extends Table<WorkflowNodeCondition> implements
127148
if (!this.conditions.plain) {
128149
this.conditions.plain = [emptyCond];
129150
} else {
151+
this.conditions.plain = Object.assign([], this.conditions.plain)
130152
this.conditions.plain.push(emptyCond);
131153
}
132154
this.conditionsChange.emit(this.conditions);
155+
this._cd.markForCheck();
133156
}
134157

135158
filterConditionVariables(opts: string[], query: string) {

‎ui/src/app/shared/conditions/conditions.html

Lines changed: 86 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,98 @@
1-
<div class="mb">
2-
<div class="ui right aligned field">
3-
<sui-checkbox class="toggle" [(ngModel)]="isAdvanced">{{'workflow_node_condition_advanced' | translate }}
4-
</sui-checkbox>
5-
</div>
6-
<div class="ui warning message" *ngIf="conditions.plain && conditions.plain.length && conditions.lua_script">
7-
<p>
8-
{{'workflow_node_condition_warning' | translate}}
9-
</p>
10-
</div>
1+
<div class="header">
2+
{{'workflow_node_condition_advanced' | translate }}
3+
<nz-switch name="mutex" [(ngModel)]="isAdvanced"></nz-switch>
4+
</div>
5+
<div class="content">
6+
<ng-container *ngIf="conditions.plain && conditions.plain.length && conditions.lua_script">
7+
<nz-alert nzType="warning" nzMessage="{{'workflow_node_condition_warning' | translate}}"></nz-alert>
8+
</ng-container>
119
<ng-container *ngIf="!isAdvanced">
12-
<div class="ui info message" *ngIf="!conditions || !conditions.plain || conditions.plain.length === 0">
13-
<div class="empty">
14-
{{ 'workflow_node_trigger_condition_no' | translate }}
15-
<button class="ui right floated blue button" (click)="addEmptyCondition()" *ngIf="!readonly">
16-
{{ 'btn_add' | translate }}
17-
</button>
18-
</div>
19-
</div>
20-
<ng-container *ngIf="conditions?.plain?.length > 0">
21-
<table class="ui fixed celled table">
22-
<thead>
23-
<tr>
24-
<th class="four wide">{{ 'workflow_node_trigger_condition_name' | translate }}</th>
25-
<th class="three wide">{{ 'workflow_node_trigger_condition_operator' | translate }}</th>
26-
<th class="five wide">{{ 'workflow_node_trigger_condition_value' | translate }}</th>
27-
<th class="three wide" *ngIf="!readonly">
28-
<button class="ui right floated blue icon button" (click)="addEmptyCondition()">
29-
<i class="plus icon"></i>
30-
</button>
31-
</th>
32-
</tr>
33-
</thead>
34-
<tbody>
35-
<tr *ngFor="let c of conditions?.plain; let i = index">
36-
<td class="middle-aligned">
37-
<div class="field">
38-
<ng-container *ngIf="conditionNames">
39-
<app-select-filter [disabled]="readonly" [searchable]="true" [(value)]="c.variable"
40-
[options]="conditionNames" (valueChange)="pushChange('name')">
41-
</app-select-filter>
42-
</ng-container>
43-
</div>
44-
</td>
45-
<td>
46-
<div *ngIf="c && operators && !readonly; then operatorWrite;else operatorRead">
47-
</div>
48-
<ng-template #operatorWrite>
49-
<sui-select class="fluid selection" [(ngModel)]="c.operator"
50-
(ngModelChange)="pushChange('operator')" [options]="operators" [isSearchable]="true"
51-
[isDisabled]="readonly" labelField="value" valueField="key" #operatorSelect>
52-
<sui-select-option *ngFor="let option of operatorSelect.filteredOptions"
53-
[value]="option"></sui-select-option>
54-
</sui-select>
55-
</ng-template>
56-
<ng-template #operatorRead>
57-
<div class="ui input">{{c.operator}}</div>
58-
</ng-template>
59-
</td>
60-
<td>
61-
<div *ngIf="!readonly; then valueWrite;else valueRead"></div>
62-
<ng-template #valueWrite>
63-
<div class="ui fluid input">
64-
<ng-container *ngIf="c.variable === 'cds.status' && statuses">
65-
<sui-select class="selection" name="value" [(ngModel)]="c.value"
66-
(ngModelChange)="pushChange('value')" [options]="statuses" #selectStatus>
67-
<sui-select-option *ngFor="let s of selectStatus.filteredOptions"
68-
[value]="s">
69-
</sui-select-option>
70-
</sui-select>
71-
</ng-container>
72-
<ng-container *ngIf="c.variable === 'cds.manual'">
73-
<input class="ui checkbox" type="checkbox" [(ngModel)]="c.value"
74-
(ngModelChange)="pushChange('manual')">
75-
</ng-container>
76-
<input type="text" [(ngModel)]="c.value" (ngModelChange)="pushChange('all')"
77-
*ngIf="c.variable !== 'cds.status' && c.variable !== 'cds.manual'">
78-
</div>
79-
</ng-template>
80-
<ng-template #valueRead>
81-
<div class="ui input">{{c.value}}</div>
82-
</ng-template>
83-
</td>
84-
<td class="center" *ngIf="!readonly">
85-
<app-delete-button (event)="removeCondition(i)"></app-delete-button>
86-
</td>
87-
</tr>
88-
</tbody>
89-
<tfoot *ngIf="getNbOfPages() > 1">
90-
<tr>
91-
<th colspan="4">
92-
<div class="ui right floated pagination menu">
93-
<a class="icon item" (click)="downPage()">
94-
<i class="left chevron icon"></i>
95-
</a>
96-
<a class="item" *ngFor="let page of getNbOfPages() | ngForNumber"
97-
(click)="goTopage(page)" [class.active]="currentPage === page">{{page}}</a>
98-
<a class="icon item" (click)="upPage()">
99-
<i class="right chevron icon"></i>
100-
</a>
101-
</div>
102-
</th>
103-
</tr>
104-
</tfoot>
105-
</table>
106-
</ng-container>
10+
<nz-table [nzData]="conditions?.plain" #condTab *ngIf="conditionNames">
11+
<thead>
12+
<tr>
13+
<th>Variable name</th>
14+
<th>Operator</th>
15+
<th>Expected value</th>
16+
<th *ngIf="!readonly">
17+
<button nz-button nzType="primary" (click)="addEmptyCondition()">
18+
<i nz-icon nzType="plus" nzTheme="outline"></i>
19+
</button>
20+
</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr *ngFor="let c of condTab.data; let i = index">
25+
<td>
26+
<nz-select nzShowSearch (nzOnSearch)="onSearchName($event)" [(ngModel)]="c.variable" (ngModelChange)="pushChange('name')" [nzDisabled]="readonly">
27+
<nz-option *ngFor="let n of conditionNames" [nzValue]="n" [nzLabel]="n"></nz-option>
28+
</nz-select>
29+
</td>
30+
<td>
31+
<div *ngIf="c && operators && !readonly; then operatorWrite;else operatorRead">
32+
</div>
33+
<ng-template #operatorWrite>
34+
<nz-select nzShowSearch [(ngModel)]="c.operator" (ngModelChange)="pushChange('operator')" [nzDisabled]="readonly">
35+
<nz-option *ngFor="let o of operators" [nzValue]="o.key" [nzLabel]="o.value"></nz-option>
36+
</nz-select>
37+
</ng-template>
38+
<ng-template #operatorRead>
39+
{{c.operator}}
40+
</ng-template>
41+
</td>
42+
<td>
43+
<div *ngIf="!readonly; then valueWrite;else valueRead"></div>
44+
<ng-template #valueWrite>
45+
<ng-container *ngIf="c.variable === 'cds.status' && statuses">
46+
<nz-select name="value" nzShowSearch [(ngModel)]="c.value" (ngModelChange)="pushChange('value')">
47+
<nz-option *ngFor="let s of statuses" [nzLabel]="s" [nzValue]="s"></nz-option>
48+
</nz-select>
49+
</ng-container>
50+
<ng-container *ngIf="c.variable === 'cds.manual'">
51+
<label name="value" nz-checkbox [(ngModel)]="c.value"></label>
52+
</ng-container>
53+
<ng-container *ngIf="c.variable !== 'cds.status' && c.variable !== 'cds.manual'">
54+
<input name="value" nz-input [(ngModel)]="c.value" (ngModelChange)="pushChange('all')" />
55+
</ng-container>
56+
</ng-template>
57+
<ng-template #valueRead>
58+
{{c.value}}
59+
</ng-template>
60+
</td>
61+
<td *ngIf="!readonly">
62+
<button nz-button nzDanger nzType="primary" (click)="removeCondition(i)">Remove</button>
63+
</td>
64+
</tr>
65+
</tbody>
66+
</nz-table>
10767
</ng-container>
10868
<ng-container *ngIf="isAdvanced">
109-
<div>
110-
<div class="mb">
111-
<h4 class="inline">{{'workflow_node_condition_lua_title' | translate}}</h4>
112-
<em> {{'workflow_node_condition_lua_help' | translate}}</em>
113-
<div class="right floated">
69+
<div class="title">
70+
<h4>Lua script</h4>
71+
<em>(should return a boolean)</em>
72+
<h4>:</h4>
73+
</div>
74+
75+
<nz-row>
76+
<nz-col [nzSpan]="18">
77+
<codemirror [(ngModel)]="conditions.lua_script"
78+
(ngModelChange)="pushChange('codemirror', $event)" (change)="changeCodeMirror()"
79+
[config]="codeMirrorConfig" #textareaCodeMirror></codemirror>
80+
</nz-col>
81+
<nz-col [nzSpan]="6">
82+
<div class="helper" *ngIf="isAdvanced">
11483
<div>
115-
<i class="book icon"></i><a href="https://devhints.io/lua" target="_blank"
116-
rel="noopener noreferrer">Lua Cheatsheet</a>
84+
<i nz-icon nzType="book" nzTheme="outline"></i><a href="https://devhints.io/lua" target="_blank" rel="noopener noreferrer">Lua Cheatsheet</a>
11785
</div>
11886
<div>
119-
<i class="book icon"></i><a
87+
<i nz-icon nzType="book" nzTheme="outline"></i><a
12088
href="#" [routerLink]="['/docs', 'docs', 'concepts', 'workflow', 'run-conditions']" target="_blank"
12189
rel="noopener noreferrer">{{'common_cds_documentation' | translate}}</a>
12290
</div>
12391
</div>
124-
</div>
125-
<codemirror [(ngModel)]="conditions.lua_script" (ngModelChange)="pushChange('codemirror', $event)"
126-
(change)="changeCodeMirror()" [config]="codeMirrorConfig" #textareaCodeMirror>
127-
</codemirror>
128-
</div>
92+
</nz-col>
93+
</nz-row>
94+
95+
12996
</ng-container>
13097
</div>
98+

‎ui/src/app/shared/conditions/conditions.scss

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
1-
@import '../../../common';
1+
.header {
2+
height: 25px;
3+
text-align: end;
4+
margin-bottom: 25px;
5+
}
6+
.content {
7+
.title h4 {
8+
display: inline;
9+
}
210

3-
td {
4-
&.middle-aligned {
5-
vertical-align: middle !important;
11+
nz-table {
12+
th {
13+
button {
14+
float: right;
15+
}
616
}
7-
}
17+
td {
18+
nz-select {
19+
width: 100%;
20+
}
21+
button {
22+
float: right;
23+
}
24+
}
25+
}
826

9-
.mb {
10-
margin-bottom: 20px;
11-
}
27+
.helper {
28+
float: right;
29+
30+
i {
31+
margin-right: 5px;
32+
}
33+
}
1234

13-
.empty {
14-
display: flex;
15-
align-items: center;
16-
flex-direction: row;
17-
justify-content: space-between
1835
}
36+

‎ui/src/app/shared/parameter/list/parameter.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,5 @@
101101
</tr>
102102
</tfoot>
103103
</table>
104-
<div class="ui info message" *ngIf="data.length === 0">
105-
{{ 'parameter_no' | translate }}
106-
</div>
104+
<nz-alert nzMessage="There is no parameters" *ngIf="data.length === 0"></nz-alert>
107105
</div>

0 commit comments

Comments
 (0)