Skip to content

Commit

Permalink
refactor(ui): remove semantic from application and env admin views (#…
Browse files Browse the repository at this point in the history 
…6228)
  • Loading branch information
@sguiheux
sguiheux authored Jul 5, 2022
1 parent deb7167 commit 87bdd1e
Show file tree
Hide file tree
Showing 15 changed files with 321 additions and 357 deletions.
142 changes: 63 additions & 79 deletions ui/src/app/shared/vcs/vcs.strategy.html
View file
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
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;
}
}
23 changes: 17 additions & 6 deletions ui/src/app/views/application/show/admin/application.admin.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { APP_BASE_HREF } from '@angular/common';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { Component, Injector } from '@angular/core';
import { getTestBed, TestBed } from '@angular/core/testing';
import { fakeAsync, flush, getTestBed, TestBed, tick } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateLoader, TranslateModule, TranslateParser, TranslateService } from '@ngx-translate/core';
Expand Down Expand Up @@ -33,6 +33,9 @@ import { SharedModule } from '../../../../shared/shared.module';
import { ToastService } from '../../../../shared/toast/ToastService';
import { ApplicationModule } from '../../application.module';
import { ApplicationAdminComponent } from './application.admin.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Permission } from 'app/model/permission.model';
import { of } from 'rxjs';

@Component({
template: ''
Expand Down Expand Up @@ -83,6 +86,7 @@ describe('CDS: Application Admin Component', () => {
ApplicationModule,
ServicesModule,
SharedModule,
BrowserAnimationsModule,
TranslateModule.forRoot(),
HttpClientTestingModule
]
Expand All @@ -98,7 +102,7 @@ describe('CDS: Application Admin Component', () => {
router = undefined;
});

it('Load component + renamed app', () => {
it('Load component + renamed app', fakeAsync(() => {
const http = TestBed.get(HttpTestingController);

let appRenamed = new Application();
Expand All @@ -122,22 +126,29 @@ describe('CDS: Application Admin Component', () => {
pip.name = 'myPipeline';
p.pipelines = new Array<Pipeline>();
p.pipelines.push(pip);
p.permissions = new Permission();
p.permissions.writable = true;

fixture.componentInstance.application = app;
fixture.componentInstance.project = p;
fixture.componentInstance.newName = 'appRenamed';

tick(250)
fixture.detectChanges();

fixture.componentInstance.newName = 'appRenamed';

spyOn(router, 'navigate');
let store: Store = injector.get(Store);
spyOn(store, 'dispatch').and.callFake(() => of(null));

let compiled = fixture.debugElement.nativeElement;

compiled.querySelector('button[name="updateNameButton"]').click();

http.expectOne('/project/key1/application/app').flush(appRenamed);

expect(router.navigate).toHaveBeenCalledWith(['/project', 'key1', 'application', 'appRenamed']);
});

flush()
}));
});

class MockToast {
Expand Down
143 changes: 61 additions & 82 deletions ui/src/app/views/application/show/admin/application.admin.html
View file
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="updateNameButton" (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>
Loading

0 comments on commit 87bdd1e

Please sign in to comment.