Merge pull request #3878 from ninjadq/metadata_description_enhancement

Enhancement of Metadata Descrition

src/ui_ng/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.2",
+    "version": "0.6.6",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "scripts": {
         "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",

src/ui_ng/lib/pkg/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.2",
+    "version": "0.6.6",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",

src/ui_ng/lib/src/harbor-library.module.ts

@@ -214,7 +214,7 @@ export class HarborLibraryModule {
         config.configService || { provide: ConfigurationService, useClass: ConfigurationDefaultService },
         config.jobLogService || { provide: JobLogService, useClass: JobLogDefaultService },
         config.projectPolicyService || { provide: ProjectService, useClass: ProjectDefaultService },
-        //Do initializing
+        // Do initializing
         TranslateServiceInitializer,
         {
           provide: APP_INITIALIZER,

src/ui_ng/lib/src/repository/repository.component.css.ts

@@ -26,8 +26,25 @@ export const REPOSITORY_STYLE = `.option-right {
   font-size: 32px;
 }
 
-pre {
-  white-space: pre-wrap;
+.no-info-div {
+  background: white;
+  border: 1px;
+  border-style: solid;
+  border-color: #CCCCCC;
+  padding: 12px 12px 12px 12px;
+}
+
+.info-div {
+  background: white;
+  border: 1px;
+  border-style: solid;
+  border-color: #CCCCCC;
+  padding: 0px 12px 24px 12px;
+}
+
+.info-pre {
+  border: 0px;
+  max-height: fit-content;
 }
 
 #info-edit-button {

src/ui_ng/lib/src/repository/repository.component.html.ts

@@ -24,12 +24,18 @@ export const REPOSITORY_TEMPLATE = `
     <section id="info" role="tabpanel" aria-labelledby="repo-info" [hidden]='!isCurrentTabContent("info")'>
       <form #repoInfoForm="ngForm">
         <div id="info-edit-button">
-          <button class="btn btn-sm" [disabled]="editing" (click)="editInfo()" >{{'BUTTON.EDIT' | translate}}</button>
+          <button class="btn btn-sm" [disabled]="editing || !hasProjectAdminRole " (click)="editInfo()" >{{'BUTTON.EDIT' | translate}}</button>
         </div>
-        <div>
-          <h3 *ngIf="!editing && !hasInfo()" >{{'REPOSITORY.NO_INFO' | translate }}</h3>
-          <pre *ngIf="!editing && hasInfo()" ><code>{{ imageInfo }}</code></pre>
-          <textarea *ngIf="editing" name="info-edit-textarea" [(ngModel)]="imageInfo"></textarea>
+        <div *ngIf="!editing">
+          <div *ngIf="!hasInfo()" class="no-info-div">
+            <p>{{'REPOSITORY.NO_INFO' | translate }}<p>
+          </div>
+          <div *ngIf="hasInfo()" class="info-div">
+            <pre class="info-pre">{{ imageInfo }}</pre>
+          </div>
+        </div>
+        <div *ngIf="editing">
+            <textarea rows="5"  name="info-edit-textarea" [(ngModel)]="imageInfo"></textarea>
         </div>
         <div class="btn-sm" *ngIf="editing">
           <button class="btn btn-primary" [disabled]="!hasChanges()" (click)="saveInfo()" >{{'BUTTON.SAVE' | translate}}</button>

src/ui_ng/lib/src/shared/shared.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { HttpModule, Http } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
 import { FormsModule } from '@angular/forms';
-import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from "@ngx-translate/core";
+import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from '@ngx-translate/core';
 import { MyMissingTranslationHandler } from '../i18n/missing-trans.handler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TranslatorJsonLoader } from '../i18n/local-json.loader';
@@ -30,9 +30,9 @@ export function GeneralTranslatorLoader(http: Http, config: IServiceConfig) {
 }
 
 /**
- * 
+ *
  * Module for sharing common modules
- * 
+ *
  * @export
  * @class SharedModule
  */
@@ -68,4 +68,4 @@ export function GeneralTranslatorLoader(http: Http, config: IServiceConfig) {
     providers: [CookieService]
 })
 
-export class SharedModule { }
+export class SharedModule { }

src/ui_ng/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "Harbor UI with Clarity",
     "angular-cli": {},
     "scripts": {
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.10.17",
         "clarity-ui": "^0.10.17",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.5",
+        "harbor-ui": "0.6.6-dev.0",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",

src/ui_ng/rollup-config.js

@@ -21,7 +21,7 @@ export default {
   plugins: [
       nodeResolve({jsnext: true, module: true, browser: true}),
       commonjs({
-        include: ['node_modules/**']
+        include: ['node_modules/**'],
       }),
       uglify()
   ]