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

refactor(ui): remove semantic from project admin view and integration view #6224

Merged
merged 6 commits into from
Jul 1, 2022
Merged

refactor(ui): remove semantic from project admin view and integration view #6224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8498c3e
refactor(ui): remove semantic from integration view
sguiheux Jun 29, 2022
3a928ae
refactor(ui): change integration button
sguiheux Jun 29, 2022
bca5401
refactor(ui): remove semantic from project.admin component
sguiheux Jun 29, 2022
ccaf444
refactor(ui): remove semantic from repomanager list
sguiheux Jun 30, 2022
8fb8b5d
fix(ui): remove unused translate
sguiheux Jun 30, 2022
1252b2b
fix(ui): remove untestable feature
sguiheux Jun 30, 2022
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
142 changes: 58 additions & 84 deletions ui/src/app/views/project/show/admin/project.admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,62 @@
<div id="projectAdmin">
<app-zone header="{{ 'project_rename_title' | translate }}">
<app-zone-content class="bottom">
<form class="ui form" (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
<div class="fields">
<div class="seven wide field">
<input type="text" name="formProjectUpdateName"
placeholder="{{ 'project_name' | translate}}"
[(ngModel)]="project.name"
[disabled]="loading"
required
#formProjectUpdateName="ngModel">
<div *ngIf="formProjectUpdateName.invalid && !formProjectUpdateName.pristine"
class="ui error message">
<p>{{'project_update_name_error' | translate}}</p>
</div>
</div>
<div class="nine wide right aligned field">
<button class="ui green button" name="btnrename" [class.loading]="loading" [disabled]="projectUpdateFrom.invalid">{{ 'btn_rename' | translate }}</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'project_description' | translate }}">
<app-zone-content class="bottom">
<form class="ui form" (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
<div class="fields">
<div class="fourteen wide field">
<textarea name="formProjectUpdateDescription"
placeholder="{{ 'project_description' | translate}}"
[(ngModel)]="project.description"
[disabled]="loading"
#formProjectUpdateDescription="ngModel">
<nz-card nzTitle="Project configuration" >
<form nz-form (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
<nz-form-item>
<nz-form-label [nzSpan]="3">Project name</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="formProjectUpdateName"
placeholder="Project name"
[(ngModel)]="project.name"
[disabled]="loading"
required
#formProjectUpdateName="ngModel">
</nz-form-control>
<nz-alert *ngIf="formProjectUpdateName.invalid && !formProjectUpdateName.pristine"
nzType="error" nzMessage="Project name is mandatory and must respect the alphanumeric pattern ([a-zA-Z0-9]*)"></nz-alert>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">Description</nz-form-label>
<nz-form-control>
<textarea nz-input name="formProjectUpdateDescription"
placeholder="Description"
[(ngModel)]="project.description"
[disabled]="loading"
#formProjectUpdateDescription="ngModel">
</textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">Icon</nz-form-label>
<nz-form-control>
<div>
<img class="proj-icon" [src]="project.icon" alt="project icon" *ngIf="project.icon">
</div>
<div class="two wide right aligned field">
<button class="ui green button" name="btnrename" [class.loading]="loading" [disabled]="projectUpdateFrom.invalid">{{ 'btn_save' | translate }}</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'project_icon' | translate }}">
<app-zone-content class="bottom">
<form class="ui form">
<div class="fields">
<div class="fourteen wide field center aligned" *ngIf="!fileTooLarge">
<div>
<img class="proj-icon" [src]="project.icon" alt="project icon" *ngIf="project.icon">
</div>
<app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
</app-upload-button>
</div>
<div class="ui fourteen wide red message field center aligned" *ngIf="fileTooLarge" [textContent]="'common_file_too_large' | translate"></div>
<div class="two wide right aligned field">
<button class="ui green button" [class.loading]="loading" name="updateiconButton" (click)="onSubmitProjectUpdate()" [disabled]="loading">{{ 'btn_save' | translate }}
</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone>
<h4 class="ui top attached segment">
{{ 'project_repoman_title' | translate }}
</h4>
<app-zone-content class="bottom">
<app-repomanager-form [project]="project"></app-repomanager-form>
<app-project-repomanager-list *ngIf="project.vcs_servers && project.vcs_servers.length > 0"
[project]="project" [reposmanagers]="project.vcs_servers"
></app-project-repomanager-list>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'danger_zone' | translate }}" headerClass="red inverted">
<app-zone-content class="bottom">
<div class="ui grid">
<div class="eight wide column">
<div class="title">{{ 'project_delete_label' | translate}}</div>
<div class="description">{{ 'project_delete_description' | translate}}</div>
</div>
<div class="eight wide right aligned column">
<app-delete-button [loading]="loading" (event)="deleteProject()"></app-delete-button>
</div>
</div>
</app-zone-content>
</app-zone>
<app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)"></app-upload-button>
<nz-alert *ngIf="fileTooLarge" nzType="error" nzMessage="Your file is too large (max 100Ko)"></nz-alert>
</nz-form-control>
</nz-form-item>
<nz-form-item nzJustify="end">
<button nz-button nzType="primary" name="btnrename" [nzLoading]="loading" [disabled]="projectUpdateFrom.invalid">Rename</button>
</nz-form-item>
</form>
</nz-card>
<nz-card nzTitle="Link to a repository manager">
<app-repomanager-form [project]="project"></app-repomanager-form>
<app-project-repomanager-list *ngIf="project.vcs_servers && project.vcs_servers.length > 0"
[project]="project" [reposmanagers]="project.vcs_servers"
></app-project-repomanager-list>
</nz-card>
<nz-card nzTitle="Danger zone">
<nz-row>
<nz-col [nzSpan]="12">
<div class="title">Delete project</div>
<div class="description">Once you delete a project, there is no going back. Please be certain.</div>
</nz-col>
<nz-col [nzSpan]="12" class="alignRight">
<button nz-button nzDanger nzType="primary" [nzLoading]="loading"
nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this project ?"
(nzOnConfirm)="deleteProject()">Delete</button>
</nz-col>
</nz-row>
</nz-card>
</div>
22 changes: 7 additions & 15 deletions ui/src/app/views/project/show/admin/project.admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
.repomanager {
margin-top: 50px;
}

.ui.grid {
.column {
.title {
font-size: 1.1rem;
font-weight: 600;
}
}
}

.ui.form .fields {
margin-bottom: 0px;
nz-card {
margin-top: 15px;
margin-bottom: 15px;
}

.proj-icon {
height: 5em;
width: 5em;
}

.alignRight {
text-align: right;
}
17 changes: 4 additions & 13 deletions ui/src/app/views/project/show/admin/repomanager/list/project.repomanager.list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngxs/store';
import { Project } from 'app/model/project.model';
import { RepositoriesManager } from 'app/model/repositories.model';
import { RepoManagerService } from 'app/service/repomanager/project.repomanager.service';
import { ConfirmModalComponent } from 'app/shared/modal/confirm/confirm.component';
import { Table } from 'app/shared/table/table';
import { ToastService } from 'app/shared/toast/ToastService';
import { DisconnectRepositoryManagerInProject } from 'app/store/project.action';
import { finalize } from 'rxjs/operators';
Expand All @@ -16,18 +14,16 @@ import { finalize } from 'rxjs/operators';
styleUrls: ['./project.repomanager.list.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectRepoManagerComponent extends Table<RepositoriesManager> {
export class ProjectRepoManagerComponent {

@Input() project: Project;
@Input() reposmanagers: RepositoriesManager[];

@ViewChild('confirmDeletionModal')
confirmDeletionModal: ConfirmModalComponent;

public deleteLoading = false;
loadingDependencies = false;
repoNameToDelete: string;
confirmationMessage: string;
deleteModal: boolean;

constructor(
private _toast: ToastService,
Expand All @@ -36,17 +32,11 @@ export class ProjectRepoManagerComponent extends Table<RepositoriesManager> {
private store: Store,
private _cd: ChangeDetectorRef
) {
super();
}

getData(): Array<RepositoriesManager> {
return this.reposmanagers;
}

clickDeleteButton(repoName: string): void {
this.loadingDependencies = true;
this.repoNameToDelete = repoName;
this.confirmDeletionModal.show();
this.repoManagerService.getDependencies(this.project.key, repoName)
.pipe(finalize(() => {
this.loadingDependencies = false;
Expand All @@ -60,6 +50,7 @@ export class ProjectRepoManagerComponent extends Table<RepositoriesManager> {
this.confirmationMessage = this._translate.instant('repoman_delete_dependencies_message', {
apps: apps.map((app) => app.name).join(', ')
});
this.deleteModal = true;
});
}

Expand Down
60 changes: 25 additions & 35 deletions ui/src/app/views/project/show/admin/repomanager/list/project.repomanager.list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,31 @@
<div id="projectRepoManagers">
<table class="ui fixed single line celled table">
<nz-table [nzData]="reposmanagers" nzSize="small" #listrepos>
<thead>
<tr>
<th class="seven wide">{{ 'common_name' | translate }}</th>
<th class="two wide"></th>
</tr>
<tr>
<th nzWidth="400px">Name</th>
<th nzWidth="50px"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let r of getDataForCurrentPage()">
<td>
{{r.name}}
<span *ngIf="r.created_by !== ''"> -
{{ 'project_repoman_created_by' | translate }}{{r.created_by}}</span>
</td>
<td class="right aligned">
<app-delete-button (event)="clickDeleteButton(r.name)" [loading]="deleteLoading" *ngIf="r.type === ''">
</app-delete-button>
</td>
</tr>
<tr *ngFor="let r of listrepos.data">
<td>
{{r.name}}
<span *ngIf="r.created_by !== ''"> -
{{ 'project_repoman_created_by' | translate }}{{r.created_by}}</span>
</td>
<td class="rightAlign">
<button nz-button nzDanger nzType="primary" [nzLoading]="deleteLoading" *ngIf="r.type === ''" (click)="clickDeleteButton(r.name)">Remove</button>
</td>
</tr>
</tbody>
<tfoot *ngIf="getNbOfPages() > 1">
<tr>
<th colspan="4">
<div class="ui right floated pagination menu">
<a class="icon item" (click)="downPage()">
<i class="left chevron icon"></i>
</a>
<a class="item" *ngFor="let page of getNbOfPages() | ngForNumber" (click)="goTopage(page)"
[class.active]="currentPage === page">{{page}}</a>
<a class="icon item" (click)="upPage()">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</nz-table>
</div>
<app-confirm-modal [loading]="loadingDependencies" [title]="'repoman_delete_confirm_title' | translate"
[msg]="confirmationMessage" (event)="confirmDeletion($event)" #confirmDeletionModal></app-confirm-modal>
<nz-modal [(nzVisible)]="deleteModal" nzTitle="Repository manager deletion" (nzOnCancel)="deleteModal = false">
<div *nzModalContent>
{{confirmationMessage}}
</div>
<div *nzModalFooter>
<button nz-button (click)="deleteModal = false">{{'common_no' | translate}}</button>
<button nz-button nzType="primary" (click)="confirmDeletion(true)">{{'common_yes' | translate}}</button>
</div>
</nz-modal>
4 changes: 3 additions & 1 deletion ui/src/app/views/project/show/admin/repomanager/list/project.repomanager.list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
@import '../../../../../../../common';
.rightAlign {
text-align: right;
}
Loading