Align Summary pages to Tango style: Projects.

Change-Id: I25843b03ddff7291d2d89df541df819985b75c00 Reviewed-on: https://bellevue-ci.eng.vmware.com:8080/45963 Closures-Verified: jenkins <[email protected]> Upgrade-Verified: jenkins <[email protected]> Bellevue-Verified: jenkins <[email protected]> PG-Verified: jenkins <[email protected]> CS-Verified: jenkins <[email protected]> Reviewed-by: Iveta Ilieva <[email protected]>
ekmixon · Oct 9, 2018 · 171b42d · 171b42d
1 parent ff3b4ed
commit 171b42d
Show file tree

Hide file tree

Showing 14 changed files with 317 additions and 230 deletions.
diff --git a/ui/ng-app/src/app/admiral.ts b/ui/ng-app/src/app/admiral.ts
@@ -29,6 +29,7 @@ import { UsersGroupsAssignRolesComponent } from "./views/identity-management/use
 import { ProjectsComponent } from './views/projects/projects.component';
 import { ProjectDetailsComponent } from './views/projects/project-details/project-details.component';
 import { ProjectSummaryComponent } from "./views/projects/project-details/project-summary.component";
+import { ProjectEditComponent } from "./views/projects/project-details/project-edit.component";
 import { ProjectConfigurationComponent } from './views/projects/project-details/project-configuration.component';
 import { ProjectCreateComponent } from './views/projects/project-create/project-create.component';
 import { ProjectMembersComponent } from "./views/projects/project-details/project-members.component";
@@ -130,6 +131,7 @@ export const ADMIRAL_DECLARATIONS = [
   ProjectAddMemberComponent,
   ProjectAddMembersComponent,
   ProjectEditMemberComponent,
+  ProjectEditComponent,
   ProjectCreateComponent,
   ProjectConfigurationComponent,
   ProjectRegistriesComponent,

diff --git a/ui/ng-app/src/app/app.module.ts b/ui/ng-app/src/app/app.module.ts
@@ -12,8 +12,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
-import { Injectable } from '@angular/core';
+import { NgModule} from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
@@ -28,9 +27,7 @@ import { ProjectService } from './utils/project.service';
 import { AuthService } from './utils/auth.service';
 import { TemplateService } from './utils/template.service';
 import { ViewExpandRequestService } from './services/view-expand-request.service';
-import { HarborLibraryModule, SERVICE_CONFIG, IServiceConfig } from 'harbor-ui';
-import * as I18n from 'i18next';
-import { FT } from './utils/ft';
+import { HarborLibraryModule, SERVICE_CONFIG } from 'harbor-ui';
 import { HomeAuthGuard } from 'app/services/home-auth-guard.service';
 import { AdminAuthGuard } from 'app/services/admin-auth-guard.service';
 

diff --git a/ui/ng-app/src/app/views/projects/project-create/project-create.component.html b/ui/ng-app/src/app/views/projects/project-create/project-create.component.html
@@ -10,47 +10,7 @@
   -->
 
 <div class="main-view">
-    <clr-alert *ngIf="alertMessage" [clrAlertType]="alertType" [(clrAlertClosed)]="!alertMessage"
-               (clrAlertClosedChange)="resetAlert()">
-        <div class="alert-item">
-            <span class="alert-text">{{ alertMessage }}</span>
-        </div>
-    </clr-alert>
+    <div class="title">{{"projects.edit.titleNew" | i18n}}</div>
 
-    <div class="title">{{title | i18n}}</div>
-
-    <form [formGroup]="projectForm">
-        <section class="form-block">
-            <div class="form-group">
-                <label for="name" class="required">{{"projects.edit.name" | i18n}}</label>
-                <label for="name" aria-haspopup="true" role="tooltip"
-                       class="tooltip tooltip-validation tooltip-sm tooltip-right"
-                       [class.invalid]="projectForm.get('name').invalid
-                                        && (projectForm.get('name').dirty || projectForm.get('name').touched)">
-                    <input id="name" [attr.disabled]="isNameInputDisabled" type="text" formControlName="name">
-                    <span class="tooltip-content">{{"projects.edit.nameRequired" | i18n}}</span>
-                </label>
-            </div>
-            <div class="form-group">
-                <label for="description">{{"projects.edit.description" | i18n}}</label>
-                <textarea id="description" rows="5" formControlName="description"></textarea>
-            </div>
-            <div class="form-group">
-                <div class="checkbox-inline">
-                    <input type="checkbox" id="isPublic" formControlName="isPublic">
-                    <label for="isPublic" aria-haspopup="true" role="tooltip"
-                           class="tooltip tooltip-validation tooltip-sm"
-                        >{{"projects.publicDescription" | i18n}}</label>
-                </div>
-            </div>
-        </section>
-
-        <button type="button" class="btn btn-primary"
-                [clrLoading]="isUpdatingProject"
-                [disabled]="!projectForm.dirty || projectForm.invalid"
-                (click)="update()">{{(isEdit ? "update" : 'create') | i18n}}</button>
-        <button type="button" class="btn btn-secondary"
-                [disabled]="isUpdatingProject"
-                (click)="goBack()">{{ "cancel" | i18n }}</button>
-    </form>
+    <app-project-edit [editAllowed]="true"></app-project-edit>
 </div>
diff --git a/ui/ng-app/src/app/views/projects/project-create/project-create.component.scss b/ui/ng-app/src/app/views/projects/project-create/project-create.component.scss
@@ -1,7 +1,3 @@
 // Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
-
-textarea {
-    width: 350px;
-}
diff --git a/ui/ng-app/src/app/views/projects/project-create/project-create.component.ts b/ui/ng-app/src/app/views/projects/project-create/project-create.component.ts
@@ -10,110 +10,16 @@
  */
 
 import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { BaseDetailsComponent } from '../../../components/base/base-details.component';
-import { Constants } from '../../../utils/constants';
-import { DocumentService } from '../../../utils/document.service';
-import { ErrorService } from '../../../utils/error.service';
-import { FT } from '../../../utils/ft';
-import { Links } from '../../../utils/links';
-import { Utils } from '../../../utils/utils';
 
 @Component({
     selector: 'app-project-create',
     templateUrl: './project-create.component.html',
     styleUrls: ['./project-create.component.scss']
 })
+
 /**
- * Create/edit project.
+ * Create project.
  */
-export class ProjectCreateComponent extends BaseDetailsComponent {
-    isEdit: boolean;
-
-    isUpdatingProject: boolean = false;
-
-    projectForm = new FormGroup({
-        name: new FormControl('', Validators.required),
-        description: new FormControl('', Validators.maxLength(2048)),
-        icon: new FormControl(''),
-        isPublic: new FormControl('')
-    });
-
-    alertMessage: string;
-    alertType: string;
-
-    constructor(router: Router, route: ActivatedRoute, service: DocumentService,
-                errorService: ErrorService) {
-        super(Links.PROJECTS, route, router, service, null, errorService);
-    }
-
-    get title() {
-        return this.isEdit ? "projects.edit.titleEdit" : "projects.edit.titleNew";
-    }
-
-    get isNameInputDisabled() {
-        return this.isEdit && FT.isVic() ? '' : null;
-    }
-
-    entityInitialized() {
-        this.isEdit = true;
-
-        this.projectForm.get('name').setValue(this.entity.name);
-
-        if (this.entity.description) {
-            this.projectForm.get('description').setValue(this.entity.description);
-        }
-
-        if (this.entity.isPublic) {
-            this.projectForm.get('isPublic').setValue(this.entity.isPublic);
-        }
-    }
-
-    goBack() {
-        let path: any[] = this.isEdit
-                            ? ['../../' + Utils.getDocumentId(this.entity.documentSelfLink)]
-                            : ['../'];
-
-        this.router.navigate(path, { relativeTo: this.route });
-    }
-
-    update() {
-        if (this.projectForm.valid) {
-            this.isUpdatingProject = true;
-
-            if (this.isEdit) {
-                this.service.patch(this.entity.documentSelfLink, this.projectForm.value)
-                    .then(() => {
-                    this.isUpdatingProject = false;
-                    this.goBack();
-
-                }).catch((error) => {
-                    this.showErrorMessage(error);
-
-                    this.isUpdatingProject = false;
-                });
-            } else {
-
-                this.service.post(Links.PROJECTS, this.projectForm.value).then(() => {
-                    this.isUpdatingProject = false;
-                    this.goBack();
-
-                }).catch((error) => {
-                   this.showErrorMessage(error);
-
-                    this.isUpdatingProject = false;
-                });
-            }
-        }
-    }
-
-    showErrorMessage(error) {
-        this.alertType = Constants.alert.type.DANGER;
-        this.alertMessage = Utils.getErrorMessage(error)._generic;
-    }
+export class ProjectCreateComponent {
 
-    resetAlert() {
-        this.alertMessage = null;
-    }
 }
diff --git a/ui/ng-app/src/app/views/projects/project-details/project-details.component.html b/ui/ng-app/src/app/views/projects/project-details/project-details.component.html
@@ -9,10 +9,18 @@
   ~ conditions of the subcomponent's license, as noted in the LICENSE file.
   -->
 
+<delete-confirmation [title]="'projects.delete.title' | i18n"
+                     [description]="deleteConfirmationDescription"
+                     [(alert)]="deleteConfirmationAlert" [visible]="showDeleteConfirmation"
+                     (onDelete)="deleteConfirmed()" (onCancel)="deleteCanceled()">
+</delete-confirmation>
+
 <div class="main-view">
     <img [src]="'./container-image-icons?container-image=' + entity?.documentSelfLink"/>
-    <h3 class="projects-details-header-title">{{entity?.name}}</h3>
-
+    <h3 class="projects-details-header-title">{{entity?.name}}<div
+            class="btn-group" role="group" aria-label="Available Actions"
+        ><button type="button" class="btn btn-link" (click)="deleteProject($event)"
+            >{{"delete" | i18n}}</button></div></h3>
     <clr-tabs>
     <clr-tab>
         <button clrTabLink id="summaryTab">{{"projects.summary.title" | i18n}}</button>

diff --git a/ui/ng-app/src/app/views/projects/project-details/project-details.component.ts b/ui/ng-app/src/app/views/projects/project-details/project-details.component.ts
@@ -21,6 +21,8 @@ import { Roles } from '../../../utils/roles';
 import { RoutesRestriction } from '../../../utils/routes-restriction';
 import { Utils } from '../../../utils/utils';
 
+import * as I18n from 'i18next';
+
 const TAB_ID_SUMMARY = "summary";
 const TAB_ID_MEMBERS = "members";
 const TAB_ID_REPOSITORIES = "hbrRepo";
@@ -43,6 +45,9 @@ export class ProjectDetailsComponent extends BaseDetailsComponent {
     isHbrEnabled = FT.isHbrEnabled();
     userSecurityContext: any;
 
+    showDeleteConfirmation: boolean = false;
+    deleteConfirmationAlert: string;
+
     constructor(route: ActivatedRoute, service: DocumentService, router: Router,
                 private authService: AuthService, errorService: ErrorService) {
         super(Links.PROJECTS, route, router, service, null, errorService);
@@ -161,4 +166,42 @@ export class ProjectDetailsComponent extends BaseDetailsComponent {
     get embedded(): boolean {
         return FT.isApplicationEmbedded();
     }
+
+    deleteProject($event) {
+        $event.stopPropagation();
+
+        this.showDeleteConfirmation = true;
+    }
+
+    get deleteConfirmationDescription(): string {
+        let projectName = this.entity && this.entity.name;
+
+        if (projectName) {
+            if (FT.isVic()) {
+                return I18n.t('projects.delete.confirmationVic',
+                    { projectName:  projectName } as I18n.TranslationOptions);
+            } else {
+                return I18n.t('projects.delete.confirmation',
+                    { projectName:  projectName } as I18n.TranslationOptions);
+            }
+        }
+    }
+
+    deleteConfirmed() {
+        this.service.delete(this.entity.documentSelfLink)
+            .then(() => {
+                this.showDeleteConfirmation = false;
+                this.goBack();
+            }).catch(err => {
+            this.deleteConfirmationAlert = Utils.getErrorMessage(err)._generic;
+        });
+    }
+
+    deleteCanceled() {
+        this.showDeleteConfirmation = false;
+    }
+
+    goBack() {
+        this.router.navigate(['..'], { relativeTo: this.route });
+    }
 }
diff --git a/ui/ng-app/src/app/views/projects/project-details/project-edit.component.html b/ui/ng-app/src/app/views/projects/project-details/project-edit.component.html
@@ -0,0 +1,45 @@
+<!--
+  ~ Copyright (c) 2018 VMware, Inc. All Rights Reserved.
+  ~
+  ~ This product is licensed to you under the Apache License, Version 2.0 (the "License").
+  ~ You may not use this product except in compliance with the License.
+  ~
+  ~ This product may include a number of subcomponents with separate copyright notices
+  ~ and license terms. Your use of these subcomponents is subject to the terms and
+  ~ conditions of the subcomponent's license, as noted in the LICENSE file.
+  -->
+
+<form [formGroup]="projectForm">
+    <div class="form-group" *ngIf="editAllowed">
+        <label for="name" class="required">{{"projects.edit.name" | i18n}}</label>
+        <label for="name" aria-haspopup="true" role="tooltip"
+               class="tooltip tooltip-validation tooltip-sm tooltip-right"
+               [class.invalid]="projectForm.get('name').invalid
+                            && (projectForm.get('name').dirty || projectForm.get('name').touched)">
+            <input id="name" [attr.disabled]="isNameInputDisabled" type="text" formControlName="name">
+            <span class="tooltip-content">{{"projects.edit.nameRequired" | i18n}}</span>
+        </label>
+    </div>
+    <div class="form-group" *ngIf="editAllowed">
+        <label for="description">{{"projects.edit.description" | i18n}}</label>
+        <textarea id="description" rows="2" formControlName="description"></textarea>
+    </div>
+    <div class="form-group" *ngIf="editAllowed">
+        <div class="checkbox-inline">
+            <input type="checkbox" id="isPublic" formControlName="isPublic">
+                <label for="isPublic" aria-haspopup="true" role="tooltip"
+                       class="tooltip tooltip-validation tooltip-sm"
+                >{{"projects.publicDescription" | i18n}}</label>
+        </div>
+    </div>
+
+    <ng-content select="[summary]"></ng-content>
+
+    <button  *ngIf="editAllowed" type="button" class="btn btn-primary"
+            [clrLoading]="isUpdatingProject"
+            [disabled]="!projectForm.dirty || projectForm.invalid"
+            (click)="update()">{{(isEdit ? "update" : 'create') | i18n}}</button>
+    <button  *ngIf="editAllowed" type="button" class="btn btn-secondary"
+            [disabled]="isUpdatingProject"
+            (click)="goBack()">{{ "cancel" | i18n }}</button>
+</form>
diff --git a/ui/ng-app/src/app/views/projects/project-details/project-edit.component.scss b/ui/ng-app/src/app/views/projects/project-details/project-edit.component.scss
@@ -0,0 +1,7 @@
+// Copyright (c) 2018 VMware, Inc. All Rights Reserved.
+// This software is released under MIT license.
+// The full license information can be found in LICENSE in the root directory of this project.
+
+input, textarea {
+    width: 350px;
+}