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 application and env admin views #6228

Merged
merged 7 commits into from
Jul 5, 2022
Merged

refactor(ui): remove semantic from application and env admin views #6228

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ddf41d2
refactor(ui): remove semantic from app admin view
sguiheux Jul 1, 2022
dc971a5
refactor(ui): remove semantic from env and app admin
sguiheux Jul 1, 2022
14d8eda
refactor(ui): remove semantic from application deployment
sguiheux Jul 1, 2022
d35ab67
refactor(ui): vcs strategy
sguiheux Jul 4, 2022
4b382f5
refactor(ui): remove semantic from vcs strategy
sguiheux Jul 4, 2022
e215c29
Merge branch 'master' into semanticAdmin
sguiheux Jul 5, 2022
ab99b61
fix(ui): fix translate and unit test
sguiheux Jul 5, 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: 63 additions & 79 deletions ui/src/app/shared/vcs/vcs.strategy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,68 @@
<div class="ui form">
<div class="inline fields">
<div class="two wide field">
<label>{{ 'vcs_connection' | translate }}</label>
</div>
<div class="fourteen wide field">
<ng-container *ngFor="let c of connectionType.values()">
<div class="ui radio checkbox">
<input type="radio" id="connection-{{c}}" name="connection" [value]="c"
[(ngModel)]="strategy.connection_type">
<label for="connection-{{c}}">{{c}}</label>
</div>
</ng-container>
</div>
</div>
<div class="field">
<ng-container [ngSwitch]="strategy.connection_type">
<ng-container *ngSwitchCase="connectionType.SSH">
<div class="inline fields">
<div class="two wide field">
<label>{{ 'vcs_ssh_key' | translate }} *<span class="keyLink"
(click)="openCreateKeyModal('ssh')"
*ngIf="createOnProject">{{ 'key_or_create' | translate }}</span></label>
</div>
<div class="thirteen wide field">
<div class="ssh">
<app-parameter-value [editList]="false" [edit]="true" [type]="'ssh-key'" [keys]="keys"
[(value)]="strategy.ssh_key" (valueChange)="updatePublicKey($event)">
</app-parameter-value>
</div>
</div>
<div class="one wide field" *ngIf="selectedPublicKey">
<button class="ui icon button copyButton" [title]="'key_copy_public' | translate" ngxClipboard
<form nz-form>
<nz-form-item>
<nz-form-label>Connection</nz-form-label>
<nz-form-control>
<nz-radio-group [(ngModel)]="strategy.connection_type" name="radioConnecion">
<ng-container *ngFor="let c of connectionType.values()">
<label nz-radio [nzValue]="c" >{{c}}</label>
</ng-container>
</nz-radio-group>
</nz-form-control>
</nz-form-item>

<ng-container [ngSwitch]="strategy.connection_type">
<ng-container *ngSwitchCase="connectionType.SSH">
<nz-form-item>
<nz-form-label [nzSpan]="3">
SSH key*
<span class="keyLink" (click)="openCreateKeyModal('ssh')"
*ngIf="createOnProject">{{ 'key_or_create' | translate }}</span>
</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-parameter-value [editList]="false" [edit]="true" [type]="'ssh-key'" [keys]="keys"
[(value)]="strategy.ssh_key" (valueChange)="updatePublicKey($event)">
</app-parameter-value>
</nz-form-control>
<ng-container *ngIf="selectedPublicKey">
<button nz-button [title]="'key_copy_public' | translate" ngxClipboard
[cbContent]="selectedPublicKey" (click)="clickCopyKey()">
<i class="copy icon"></i>
</button>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="connectionType.HTTPS">
<div class="inline fields">
<div class="two wide field">
<label>{{ 'vcs_user' | translate }}</label>
</div>
<div class="fourteen wide field">
<input type="text" class="ui input" [(ngModel)]="strategy.user">
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>{{ 'vcs_password' | translate }}</label>
</div>
<div class="fourteen wide field">
<input type="password" class="ui input" [(ngModel)]="strategy.password">
</div>
</div>
</ng-container>
<div class="inline fields">
<div class="two wide field">
<label>{{ 'vcs_pgp_key' | translate }}<span class="keyLink" (click)="openCreateKeyModal('pgp')"
*ngIf="createOnProject">{{ 'key_or_create' | translate }}</span></label>
</div>
<div class="fourteen wide field">
<div class="ssh">
<app-parameter-value [editList]="false" [edit]="true" [type]="'pgp-key'" [keys]="keys"
[(value)]="strategy.pgp_key"></app-parameter-value>
</div>
</div>
</div>
<i nz-icon nzType="copy" nzTheme="outline"></i>
</button>
</ng-container>
</nz-form-item>
</ng-container>
</div>
<div class="field" *ngIf="sshWarning && strategy.connection_type === 'ssh'">
<div class="ui warning message">
{{ 'key_warning_add_repo_title' | translate }}
</div>
</div>
<div class="right aligned field" *ngIf="!hideButton">
<button class="ui green button" [class.loading]="loading" [disabled]="loading || !strategy.connection_type"
(click)="saveStrategy()">{{ 'btn_save' | translate }}</button>
</div>
</div>
<ng-container *ngSwitchCase="connectionType.HTTPS">
<nz-form-item>
<nz-form-label [nzSpan]="3">User</nz-form-label>
<nz-form-control [nzSpan]="7">
<input nz-input name="user" type="text" class="ui input" [(ngModel)]="strategy.user">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">Password</nz-form-label>
<nz-form-control [nzSpan]="7">
<input nz-input name="password" type="password" class="ui input" [(ngModel)]="strategy.password">
</nz-form-control>
</nz-form-item>
</ng-container>
</ng-container>
<nz-form-item>
<nz-form-label [nzSpan]="3">PGP key</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-parameter-value [editList]="false" [edit]="true" [type]="'pgp-key'" [keys]="keys"
[(value)]="strategy.pgp_key"></app-parameter-value>
</nz-form-control>
</nz-form-item>

<ng-container *ngIf="sshWarning && strategy.connection_type === 'ssh'">
<nz-alert nzType="info" nzMessage="Don't forget to add your ssh key on your repository"></nz-alert>
</ng-container>
<nz-form-item nzJustify="end">
<button nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || !strategy.connection_type"
(click)="saveStrategy()">Save
</button>
</nz-form-item>
</form>
<ng-template let-context let-modal="modal" #createKey>
<div class="header">{{ 'keys_add_title' | translate }}</div>
<div class="content scrolling">
Expand Down
4 changes: 1 addition & 3 deletions ui/src/app/shared/vcs/vcs.strategy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@import '../../../common';
.ssh {
width: 100%;
}
.keyLink {
padding-left: 10px;
color: $cds_color_teal;
cursor: pointer;
}
}
143 changes: 61 additions & 82 deletions ui/src/app/views/application/show/admin/application.admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,64 @@
<div id="ApplicationAdmin">
<app-zone header="{{ 'application_rename_title' | translate }}">
<app-zone-content class="bottom">
<form class="ui form" #applicationUpdateFrom="ngForm">
<div class="fields">
<div class="eight wide field">
<input type="text" name="formApplicationUpdateName" [(ngModel)]="newName" required #formApplicationUpdateName="ngModel"
pattern="[a-zA-Z0-9._-]*"
[disabled]="loading">
<div *ngIf="formApplicationUpdateName.invalid && !formApplicationUpdateName.pristine"
class="ui error message">
<p>{{'application_update_name_error' | translate}}</p>
</div>
<nz-card nzTitle="Settings">
<form nz-form #applicationUpdateFrom="ngForm">
<nz-form-item>
<nz-form-label [nzSpan]="3">Name</nz-form-label>
<nz-form-control>
<input nz-input type="text" name="formApplicationUpdateName" [(ngModel)]="newName" required #formApplicationUpdateName="ngModel"
pattern="[a-zA-Z0-9._-]*"
[disabled]="loading">
<nz-alert nzType="error" *ngIf="formApplicationUpdateName.invalid && !formApplicationUpdateName.pristine" nzMessage="Application name is mandatory and must respect the alphanumeric pattern + the following characters: .-_ ([a-zA-Z0-9._-]*)"></nz-alert>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">Description</nz-form-label>
<nz-form-control>
<textarea nz-input class="app-description" type="text" name="formApplicationUpdateDescription"
[(ngModel)]="application.description" required #formApplicationUpdateDescription="ngModel" [disabled]="loading">
</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="app-icon" [src]="application.icon" alt="application icon" *ngIf="application.icon">
</div>
<div class="eight wide right aligned field">
<button class="ui green button" [class.loading]="loading" name="updateNameButton" (click)="onSubmitApplicationUpdate()" [disabled]="applicationUpdateFrom.invalid">{{ 'btn_rename' | translate }}
</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'application_description' | translate }}">
<app-zone-content class="bottom">
<form class="ui form" #applicationUpdateForm="ngForm">
<div class="fields">
<div class="fourteen wide field">
<textarea class="app-description" type="text" name="formApplicationUpdateDescription" [(ngModel)]="application.description" required #formApplicationUpdateDescription="ngModel"
[disabled]="loading">
</textarea>
</div>
<div class="two wide right aligned field">
<button class="ui green button" [class.loading]="loading" name="updateDescriptionButton" (click)="onSubmitApplicationUpdate()" [disabled]="loading">{{ 'btn_save' | translate }}
</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'application_icon' | translate }}">
<app-zone-content class="bottom">
<form class="ui form" #applicationUpdateForm="ngForm">
<div class="fields">
<div class="fourteen wide field center aligned" *ngIf="!fileTooLarge">
<div>
<img class="app-icon" [src]="application.icon" alt="application icon" *ngIf="application.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="updateDescriptionButton" (click)="onSubmitApplicationUpdate()" [disabled]="loading || application.from_repository">{{ 'btn_save' | translate }}
</button>
</div>
</div>
</form>
</app-zone-content>
</app-zone>
<app-zone header="{{ 'application_repo_title' | translate }}">
<app-zone-content class="bottom">
<app-application-repo [project]="project" [application]="application" [editMode]="editMode"></app-application-repo>
</app-zone-content>
</app-zone>
<ng-container *ngIf="project.integrations && project.integrations.length > 0">
<app-zone header="{{ 'application_deployment_title' | translate }}">
<app-zone-content class="bottom">
<app-application-deployment [project]="project" [application]="application" [editMode]="editMode"></app-application-deployment>
</app-zone-content>
</app-zone>
</ng-container>
<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">{{ 'application_delete_label' | translate}}</div>
<div class="description">{{ 'application_delete_description' | translate}}</div>
</div>
<div class="eight wide right aligned column">
<app-delete-button [loading]="loading" (event)="deleteApplication()"></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" [nzLoading]="loading" name="updateDescriptionButton" (click)="onSubmitApplicationUpdate()" [disabled]="loading || application.from_repository">
Save
</button>
</nz-form-item>
</form>
</nz-card>

<nz-card nzTitle="Repository">
<app-application-repo [project]="project" [application]="application" [editMode]="editMode"></app-application-repo>
</nz-card>

<nz-card nzTitle="Integrations">
<ng-container *ngIf="project.integrations && project.integrations.length > 0">
<app-application-deployment [project]="project" [application]="application" [editMode]="editMode"></app-application-deployment>
</ng-container>
<ng-container *ngIf="!project.integrations || project.integrations.length === 0">
<nz-alert nzType="info" nzMessage="There is no available integration for your application on your project"></nz-alert>
</ng-container>
</nz-card>

<nz-card nzTitle="Danger zone">
<nz-row>
<nz-col [nzSpan]="12">
<div class="title">Delete application</div>
<div class="description">Once you delete an application, there is no going back. Please be certain.</div>
</nz-col>
<nz-col [nzSpan]="12" class="alignRight">
<button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this application ?"
[nzLoading]="loading" (nzOnConfirm)="deleteApplication()">Delete</button>
</nz-col>
</nz-row>
</nz-card>
</div>
30 changes: 13 additions & 17 deletions ui/src/app/views/application/show/admin/application.admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
.applicationRepo {
margin-top : 50px;
}
.ui.inverted.attached {
border-color: #DB2828;
}

.app-description {
min-height: 4em !important;
max-height: 6em !important;
nz-card {
margin-top: 15px;
margin-bottom: 15px;
}

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

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

.applicationRepo {
margin-top : 50px;
}

.title {
font-weight: bold;
}
Loading