Skip to content

Commit 0ddece0

Browse files
sguiheuxsguiheux
authored
refactor(ui): remove consumer SUIModal + last suiPopup (#6243)
1 parent 9cec240 commit 0ddece0

File tree

17 files changed

+258
-277
lines changed

17 files changed

+258
-277
lines changed

‎ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<a title="Copy version" ngxClipboard [cbContent]="r.version ? r.version : r.num"
2727
(click)="confirmCopy();$event.stopPropagation();"><i class="copy outline icon"></i></a>
2828
</div>
29-
<ng-template let-popup #popupTemplate>
29+
<ng-template #popupTemplate>
3030
<div class="content">
3131
<div class="ui bulleted list">
3232
<div class="item"
@@ -36,8 +36,8 @@
3636
</div>
3737
</div>
3838
</ng-template>
39-
<div class="line" *ngIf="filteredTags[r.id] && filteredTags[r.id].length" suiPopup
40-
[popupTemplate]="popupTemplate" popupPlacement="right">
39+
<div class="line" *ngIf="filteredTags[r.id] && filteredTags[r.id].length" nz-popover
40+
[nzPopoverContent]="popupTemplate" nzPopoverPlacement="right">
4141
<ng-container *ngFor="let t of filteredTags[r.id]; let i = index; let last = last">
4242
{{t.value}}<ng-container *ngIf="!last">,</ng-container>
4343
</ng-container>

‎ui/src/app/views/application/show/application.html‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@
44
<app-project-breadcrumb [project]="project" [application]="readOnlyApplication" [workflow]="workflowName"
55
[workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
66
<div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
7-
<a class="ui label small basic" [class.green]="application && application.from_repository" suiPopup
8-
[popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
9-
#popup="suiPopup">
10-
<i class="code icon"></i>as code
11-
</a>
12-
<ng-template let-popup #popupFromRepository>
7+
<nz-tag [nzColor]="application?.from_repository?'green':''" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
8+
nzPopoverPlacement="leftBottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
9+
<ng-template #popupFromRepository>
1310
<div class="content infoPopup">
1411
<ng-container *ngIf="application && application.from_repository">
1512
<p>
@@ -21,12 +18,10 @@
2118
<p>{{'workflow_repository_help_line_2' | translate}}</p>
2219
<div class="footer">
2320
<div>
24-
<div class="ui list">
25-
<a class="item" target="_blank" rel="noopener noreferrer"
21+
<a class="item" target="_blank" rel="noopener noreferrer"
2622
href="#" [routerLink]="['/docs', 'tutorials', 'init_workflow_with_cdsctl']">
27-
{{'common_read_more'| translate}}
28-
</a>
29-
</div>
23+
Read more
24+
</a>
3025
</div>
3126
</div>
3227
</ng-container>

‎ui/src/app/views/application/show/application.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@
1616
.ascodeButton {
1717
position: absolute;
1818
right: 15px;
19-
top: 121px;
19+
top: 135px;
2020
}
2121

22+
.labelFeature {
23+
position: relative;
24+
top: -3px;
25+
margin-left: 10px;
26+
margin-top: 5px;
27+
28+
nz-tag {
29+
cursor: pointer;
30+
}
31+
32+
i {
33+
margin-right: 5px;
34+
}
35+
}

‎ui/src/app/views/environment/show/environment.show.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@
44
<app-project-breadcrumb [project]="project" [environment]="environment" [workflow]="workflowName"
55
[workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
66
<div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
7-
<a class="ui label small basic" [class.green]="environment.from_repository" suiPopup
8-
[popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
9-
#popup="suiPopup">
10-
<i class="code icon"></i>as code
11-
</a>
12-
<ng-template let-popup #popupFromRepository>
7+
<nz-tag [nzColor]="environment?.from_repository?'green':''" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
8+
nzPopoverPlacement="leftBottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
9+
<ng-template #popupFromRepository>
1310
<div class="content infoPopup">
1411
<ng-container *ngIf="environment.from_repository">
1512
<p>

‎ui/src/app/views/environment/show/environment.show.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,22 @@
1111
.ascodeButton {
1212
position: absolute;
1313
right: 15px;
14-
top: 121px;
14+
top: 135px;
15+
}
16+
}
17+
18+
.labelFeature {
19+
position: relative;
20+
top: -3px;
21+
margin-left: 10px;
22+
margin-top: 5px;
23+
24+
nz-tag {
25+
cursor: pointer;
26+
}
27+
28+
i {
29+
margin-right: 5px;
1530
}
1631
}
1732

‎ui/src/app/views/pipeline/show/pipeline.show.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
6969

7070
keys: AllKeys;
7171
asCodeEditorOpen: boolean;
72+
nzTagColor: string = '';
7273

7374
// tabs
7475
tabs: Array<Tab>;
@@ -103,7 +104,6 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
103104
this._cd.markForCheck();
104105
});
105106

106-
107107
this.asCodeEditorSubscription = this._pipCoreService.getAsCodeEditor()
108108
.subscribe((state) => {
109109
if (state != null) {
@@ -197,6 +197,14 @@ export class PipelineShowComponent implements OnInit, OnDestroy {
197197
this.pipeline = cloneDeep(pip.pipeline);
198198
}
199199

200+
if (this.pipeline.from_repository && (!this.pipeline.ascode_events || this.pipeline.ascode_events.length ===0)) {
201+
this.nzTagColor = 'green';
202+
} else if (this.pipeline.from_repository && this.pipeline?.ascode_events?.length > 0) {
203+
this.nzTagColor = 'orange';
204+
} else {
205+
this.nzTagColor = '';
206+
}
207+
200208
if (this.pipeline.usage) {
201209
this.applications = this.pipeline.usage.applications || [];
202210
this.workflows = this.pipeline.usage.workflows || [];

‎ui/src/app/views/pipeline/show/pipeline.show.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,10 @@
55
[workflow]="workflowName" [version]="version" [buildNumber]="buildNumber" [envName]="envName"
66
[remote]="remote" [branch]="branch">
77
<div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
8-
<a class="ui label small basic"
9-
[class.green]="pipeline && pipeline.from_repository && (!pipeline.ascode_events || pipeline.ascode_events.length ===0)"
10-
[class.orange]="pipeline && pipeline.from_repository && pipeline?.ascode_events?.length > 0"
11-
[class.grey]="pipeline && !pipeline.from_repository && (!pipeline.ascode_events || pipeline.ascode_events.length === 0)"
12-
nz-popover [nzPopoverContent]="popupFromRepository" nzPopoverPlacement="bottomLeft" nzPopoverTrigger="click">
13-
<i class="code icon"></i>as code
14-
</a>
15-
<ng-template let-popup #popupFromRepository>
8+
<nz-tag [nzColor]="nzTagColor" nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
9+
nzPopoverPlacement="bottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
10+
11+
<ng-template #popupFromRepository>
1612
<div class="content infoPopup">
1713
<ng-container *ngIf="pipeline?.workflow_ascode_holder">
1814
<app-ascode-event [project]="project" [workflow]="pipeline.workflow_ascode_holder"

‎ui/src/app/views/pipeline/show/pipeline.show.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,20 @@
88
.ascodeButton {
99
position: absolute;
1010
right: 15px;
11-
top: 121px;
11+
top: 135px;
12+
}
13+
14+
.labelFeature {
15+
position: relative;
16+
top: -3px;
17+
margin-left: 10px;
18+
margin-top: 5px;
19+
20+
nz-tag {
21+
cursor: pointer;
22+
}
23+
24+
i {
25+
margin-right: 5px;
26+
}
1227
}

‎ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<div class="ui buttons">
66
<div class="ui blue button" (click)="showAsCodeEditor()">
77
<i class="terminal icon"></i> {{'workflow_edit_as_code' | translate}}
8-
<i class="orange warning sign icon ml5" *ngIf="previewMode" suiPopup
9-
[popupText]="'workflow_preview_mode' | translate" popupPlacement="top center">
8+
<i class="orange warning sign icon ml5" *ngIf="previewMode" nz-tooltip
9+
nzTooltipTitle="Your pipeline is in preview mode">
1010
</i>
1111
</div>
1212
<div *ngIf="previewMode" class="ui green button" (click)="savePreview()">

‎ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.component.ts‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@ import {
22
ChangeDetectionStrategy,
33
ChangeDetectorRef,
44
Component,
5-
EventEmitter,
6-
Input,
7-
Output,
8-
ViewChild
5+
Input, OnInit,
96
} from '@angular/core';
107
import { TranslateService } from '@ngx-translate/core';
11-
import { ModalTemplate, SuiActiveModal, SuiModalService, TemplateModalConfig } from '@richardlt/ng2-semantic-ui';
128
import { AuthConsumer, AuthConsumerScopeDetail } from 'app/model/authentication.model';
139
import { Group } from 'app/model/group.model';
1410
import { AuthentifiedUser } from 'app/model/user.model';
@@ -18,6 +14,7 @@ import { UserService } from 'app/service/user/user.service';
1814
import { Column, Select } from 'app/shared/table/data-table.component';
1915
import { ToastService } from 'app/shared/toast/ToastService';
2016
import { finalize } from 'rxjs/operators';
17+
import { NzModalRef } from 'ng-zorro-antd/modal';
2118

2219
export enum CloseEventType {
2320
CREATED = 'CREATED',
@@ -38,13 +35,9 @@ export enum FormStepName {
3835
styleUrls: ['./consumer-create-modal.scss'],
3936
changeDetection: ChangeDetectionStrategy.OnPush
4037
})
41-
export class ConsumerCreateModalComponent {
42-
@ViewChild('consumerCreateModal') consumerDetailsModal: ModalTemplate<boolean, boolean, void>;
43-
modal: SuiActiveModal<boolean, boolean, void>;
44-
open: boolean;
38+
export class ConsumerCreateModalComponent implements OnInit {
4539

4640
@Input() user: AuthentifiedUser;
47-
@Output() close = new EventEmitter<CloseEventType>();
4841

4942
newConsumer: AuthConsumer = new AuthConsumer();
5043
signinToken: string;
@@ -62,7 +55,7 @@ export class ConsumerCreateModalComponent {
6255
maxActivedStep: FormStepName;
6356

6457
constructor(
65-
private _modalService: SuiModalService,
58+
private _modal: NzModalRef,
6659
private _userService: UserService,
6760
private _groupService: GroupService,
6861
private _authenticationService: AuthenticationService,
@@ -79,36 +72,15 @@ export class ConsumerCreateModalComponent {
7972
];
8073
}
8174

82-
show() {
83-
if (this.open) {
84-
return;
85-
}
86-
87-
this.open = true;
88-
89-
const config = new TemplateModalConfig<boolean, boolean, void>(this.consumerDetailsModal);
90-
config.mustScroll = true;
91-
this.modal = this._modalService.open(config);
92-
this.modal.onApprove(_ => {
93-
this.closeCallback();
94-
});
95-
this.modal.onDeny(_ => {
96-
this.closeCallback();
97-
});
98-
99-
this.init();
100-
}
101-
10275
closeCallback(): void {
103-
this.open = false;
10476
if (this.newConsumer.id) {
105-
this.close.emit(CloseEventType.CREATED);
77+
this._modal.triggerOk();
10678
} else {
107-
this.close.emit(CloseEventType.CLOSED);
79+
this._modal.triggerCancel();
10880
}
10981
}
11082

111-
init(): void {
83+
ngOnInit(): void {
11284
this.newConsumer = new AuthConsumer();
11385
this.signinToken = null;
11486
this.selectedGroupKeys = null;
@@ -257,8 +229,4 @@ export class ConsumerCreateModalComponent {
257229
}
258230
this.selectedScopeDetails.push(detail);
259231
}
260-
261-
clickClose() {
262-
this.modal.approve(true);
263-
}
264232
}

0 commit comments

Comments
 (0)