Fix ui issues found in testing day (#15015)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/account-settings/account-settings-modal.component.html

@@ -101,7 +101,7 @@
 [clrModalClosable]="false">
 
     <h3 class="modal-title">{{'PROFILE.ADMIN_CLI_SECRET_RESET_BUTTON' | translate}}</h3>
-    <div class="modal-body">
+    <div class="modal-body upload-secret">
         <form #resetSecretFrom="ngForm" class="clr-form reset-cli-form clr-form-horizontal">
             <clr-input-container>
                 <label>{{'PROFILE.NEW_SECRET' | translate}}</label>

src/portal/src/app/base/account-settings/account-settings-modal.component.scss

@@ -45,4 +45,7 @@ clr-modal {
 }
 .set-btns {
     display: flex;
-}
+}
+:host::ng-deep.upload-secret {
+    width: 23rem;
+}

src/portal/src/app/base/left-side-nav/config/auth/config-auth.component.html

@@ -73,14 +73,13 @@
                 [(ngModel)]="currentConfig.ldap_search_dn.value" id="ldapSearchDN" size="40"
                 [disabled]="disabled(currentConfig.ldap_search_dn)" />
         </clr-input-container>
-
         <clr-input-container>
             <label for="ldapSearchPwd">{{'CONFIG.LDAP.SEARCH_PWD' | translate}}</label>
+            <!--disable property should be consistent with 'ldap_search_dn', as the back end API won't return this fielder, -->
             <input clrInput name="ldapSearchPwd" type="password" #ldapSearchPwdInput="ngModel"
                 [(ngModel)]="currentConfig.ldap_search_password.value" id="ldapSearchPwd" size="40"
-                [disabled]="disabled(currentConfig.ldap_search_password)" />
+                [disabled]="disabled(currentConfig.ldap_search_dn)" />
         </clr-input-container>
-
         <clr-input-container>
             <label for="ldapBaseDN" class="required">{{'CONFIG.LDAP.BASE_DN' | translate}}
                 <clr-tooltip>

src/portal/src/app/base/left-side-nav/config/email/config-email.component.html

@@ -22,9 +22,10 @@
         </clr-input-container>
         <clr-input-container>
             <label for="emailPassword">{{'CONFIG.MAIL_PASSWORD' | translate}}</label>
+            <!--disable property should be consistent with 'email_username', as the back end API won't return this fielder, -->
             <input clrInput name="emailPassword" type="password" #emailPasswordInput="ngModel"
                 [(ngModel)]="currentConfig.email_password.value" id="emailPassword" size="40"
-                [disabled]="disabled(currentConfig.email_password)" />
+                [disabled]="disabled(currentConfig.email_username)" />
         </clr-input-container>
         <clr-input-container>
             <label for="emailFrom" class="required">{{'CONFIG.MAIL_FROM' | translate}}</label>
@@ -82,4 +83,4 @@
     <button type="button" id="ping-test" class="btn btn-outline" (click)="testMailServer()" [disabled]="!isMailConfigValid()">{{'BUTTON.TEST_MAIL'
         | translate}}</button>
     <span id="forTestingMail" class="spinner spinner-inline" [hidden]="hideMailTestingSpinner"></span>
-</div>
+</div>

src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html

@@ -160,7 +160,7 @@
                    maxlength="255">
             <clr-tooltip class="des-tooltip">
               <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
-              <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
+              <clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
                 <span>{{'TOOLTIP.DESTINATION_NAMESPACE' | translate}}</span>
               </clr-tooltip-content>
             </clr-tooltip>
@@ -173,11 +173,11 @@
       <!--destination namespaces -->
       <div class="clr-form-control">
         <label for="dest_namespace_replace_count" class="clr-control-label"></label>
-        <div class="clr-control-container" [class.clr-error]="ruleForm.controls.dest_namespace_replace_count.touched && ruleForm.controls.dest_namespace_replace_count.invalid">
+        <div class="clr-control-container">
           <div class="input-width flex">
             <div class="clr-select-wrapper">
               <label class="sub-label">{{'REPLICATION.REPO_FLATTENING' | translate}}:</label>
-              <select id="dest_namespace_replace_count" formControlName="dest_namespace_replace_count" class="clr-select count-type">
+              <select [attr.disabled]="(ruleForm.controls.dest_namespace.invalid || !ruleForm.controls.dest_namespace.value) ? 'disabled' : null" id="dest_namespace_replace_count" formControlName="dest_namespace_replace_count" class="clr-select count-type">
                 <option *ngFor="let item of flattenLevelMap | keyvalue"
                         [value]="item.key">{{item.value | translate}}</option>
               </select>
@@ -185,8 +185,13 @@
             <div class="clr-input-wrapper">
               <clr-tooltip class="des-tooltip">
                 <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
-                <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
+                <clr-tooltip-content class="flatten" clrPosition="top-left" clrSize="lg" *clrIfOpen>
-                  {{'REPLICATION.FLATTEN_LEVEL_TIP' | translate}}
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP' | translate}}</div>
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP_ALL' | translate}}</div>
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP_NO' | translate}}</div>
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP_1' | translate}}</div>
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP_2' | translate}}</div>
+                  <div>{{'REPLICATION.FLATTEN_LEVEL_TIP_3' | translate}}</div>
                 </clr-tooltip-content>
               </clr-tooltip>
             </div>

src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.scss

@@ -304,3 +304,6 @@ clr-modal {
 .count-type {
     width: 158px;
 }
+:host::ng-deep.flatten {
+    width: 23rem!important;
+}

src/portal/src/app/base/project/project-config/project-policy-config/project-policy-config.component.ts

@@ -12,6 +12,7 @@ import {Project} from './project';
 import {SystemInfo, SystemInfoService} from '../../../../shared/services';
 import {UserPermissionService} from '../../../../shared/services';
 import {USERSTATICPERMISSION} from '../../../../shared/services';
+import { EventService, HarborEvent } from "../../../../services/event-service/event.service";
 
 
 const ONE_THOUSAND: number = 1000;
@@ -92,6 +93,7 @@ export class ProjectPolicyConfigComponent implements OnInit {
         private projectService: ProjectService,
         private systemInfoService: SystemInfoService,
         private userPermission: UserPermissionService,
+        private event: EventService
     ) {
     }
 
@@ -176,6 +178,8 @@ export class ProjectPolicyConfigComponent implements OnInit {
 
     refresh() {
         this.retrieve();
+        // notify project detail component to refresh project info
+        this.event.publish(HarborEvent.REFRESH_PROJECT_INFO);
     }
 
     isValid() {

src/portal/src/app/base/project/project-detail/project-detail.component.ts

@@ -25,6 +25,7 @@ import { ProjectService } from "../../../../../ng-swagger-gen/services/project.s
 import { ProjectSummaryQuota } from "../../../../../ng-swagger-gen/models/project-summary-quota";
 import { QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT, QuotaUnits } from "../../../shared/entities/shared.const";
 import { clone, GetIntegerAndUnit, getSizeNumber, getSizeUnit } from "../../../shared/units/utils";
+import { EventService, HarborEvent } from "../../../services/event-service/event.service";
 
 
 @Component({
@@ -134,6 +135,7 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
   projectQuota: ProjectSummaryQuota;
   quotaDangerCoefficient: number = QUOTA_DANGER_COEFFICIENT;
   quotaWarningCoefficient: number = QUOTA_WARNING_COEFFICIENT;
+  eventSub: Subscription;
   constructor(
     private projectService: ProjectService,
     private route: ActivatedRoute,
@@ -142,7 +144,8 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
     private appConfigService: AppConfigService,
     private userPermissionService: UserPermissionService,
     private errorHandler: ErrorHandler,
-    private cdf: ChangeDetectorRef) {
+    private cdf: ChangeDetectorRef,
+    private event: EventService) {
     this.hasSignedIn = this.sessionService.getCurrentUser() !== null;
     this.route.data.subscribe(data => {
       this.currentProject = <Project>data['projectResolver'];
@@ -169,6 +172,11 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
           }
       );
     }
+    if (!this.eventSub) {
+      this.eventSub = this.event.subscribe(HarborEvent.REFRESH_PROJECT_INFO, () => {
+        this.refreshProjectInfo();
+      });
+    }
   }
 
   ngAfterViewInit() {
@@ -182,6 +190,10 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
       this._subscription.unsubscribe();
       this._subscription = null;
     }
+    if (this.eventSub) {
+      this.eventSub.unsubscribe();
+      this.eventSub = null;
+    }
   }
   getPermissionsList(projectId: number): void {
     let permissionsList = [];
@@ -315,4 +327,17 @@ export class ProjectDetailComponent implements OnInit, AfterViewInit, OnDestroy
     }
     return null;
   }
+  refreshProjectInfo() {
+    this.getQuotaInfo();
+    this.getProject();
+  }
+  getProject() {
+    this.projectService.getProject({
+      projectNameOrId: this.projectId.toString()
+    }).subscribe(res => {
+      if (res) {
+        this.currentProject = <any>res as Project;
+      }
+    });
+  }
 }

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -412,8 +412,6 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
               }
             }
             this.artifactList = res.body;
-            this.artifactList = doSorting<Artifact>(this.artifactList, state);
-
             this.getPullCommand(this.artifactList);
             this.getArtifactTagsAsync(this.artifactList);
             this.getIconsFromBackEnd();

src/portal/src/app/base/project/repository/repository-gridview.component.ts

@@ -53,6 +53,7 @@ import { HttpErrorResponse } from "@angular/common/http";
 import { errorHandler } from "../../../shared/units/shared.utils";
 import { ConfirmationAcknowledgement } from "../../global-confirmation-dialog/confirmation-state-message";
 import { ConfirmationMessage } from "../../global-confirmation-dialog/confirmation-message";
+import { EventService, HarborEvent } from "../../../services/event-service/event.service";
 
 @Component({
   selector: "hbr-repository-gridview",
@@ -109,6 +110,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit, OnDestroy
               private route: ActivatedRoute,
               private session: SessionService,
               private router: Router,
+              private event: EventService
   ) {
     if (localStorage) {
       this.isCardView =  localStorage.getItem(CARD_VIEW_LOCALSTORAGE_KEY) === TRUE_STR;
@@ -329,6 +331,8 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit, OnDestroy
 
   refresh() {
     this.doSearchRepoNames("");
+    // notify project detail component to refresh project info
+    this.event.publish(HarborEvent.REFRESH_PROJECT_INFO);
   }
 
   loadNextPage() {

src/portal/src/app/services/event-service/event.service.ts

@@ -56,5 +56,6 @@ export class EventService {
 
 export enum HarborEvent {
   SCROLL = 'scroll',
-  SCROLL_TO_POSITION = 'scrollToPosition'
+  SCROLL_TO_POSITION = 'scrollToPosition',
+  REFRESH_PROJECT_INFO = 'refreshProjectInfo'
 }

src/portal/src/i18n/lang/de-de-lang.json

@@ -637,7 +637,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "Neuer Endpunkt",
@@ -672,7 +677,7 @@
         "CANNOT_EDIT": "Endpunkt kann nicht geändert werden, während die Replikationsregel aktiviert ist.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Genutzter Endpunkt konnte nicht gelöscht werden.",
         "PLACEHOLDER": "Wir konnten keine Endpunkt finden.",
-	"DEPRECATED": "Helm Hub wird nach Artifact Hub migriert"
+	    "DEPRECATED": "Helm Hub wird nach Artifact Hub migriert"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Kopiere Digest",

src/portal/src/i18n/lang/en-us-lang.json

@@ -637,7 +637,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "New Endpoint",

src/portal/src/i18n/lang/es-es-lang.json

@@ -638,7 +638,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "Nuevo Endpoint",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -627,7 +627,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "Nouveau Point Final",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -637,7 +637,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "Novo Endpoint",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -637,7 +637,12 @@
         "FLATTEN_LEVEL_2": "Flatten 2 Levels",
         "FLATTEN_LEVEL_3": "Flatten 3 Levels",
         "FLATTEN_ALL": "Flatten All Levels",
-        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+        "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+        "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "Yeni Uç Nokta",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -639,7 +639,12 @@
         "FLATTEN_LEVEL_2": "替换2级",
         "FLATTEN_LEVEL_3": "替换3级",
         "FLATTEN_ALL": "替换所有级",
-        "FLATTEN_LEVEL_TIP": "此项用以在复制镜像时减少仓库的层级结构。默认值'替换1级'表示将用目标名称空间替换仓库的最左侧一级，例如：a/b/c/img -> namespace/b/c/img，其他替换层级以此类推。'替换所有级'是v2.3之前版本所使用的行为，它表示 a/b/c/img -> namespace/img。"
+        "FLATTEN_LEVEL_TIP": "此项用以在复制镜像时减少仓库的层级结构。假设仓库的层级结构为 'a/b/c/d/img' 且目标名称空间为 'ns'，则每一项对应的结果如下：",
+        "FLATTEN_LEVEL_TIP_ALL": "'替换所有级'(v2.3之前版本所使用的行为): 'a/b/c/d/img' -> 'ns/img'",
+        "FLATTEN_LEVEL_TIP_NO": "'无替换': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+        "FLATTEN_LEVEL_TIP_1": "'替换1级'(默认项): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+        "FLATTEN_LEVEL_TIP_2": "'替换2级': 'a/b/c/d/img' -> 'ns/c/d/img'",
+        "FLATTEN_LEVEL_TIP_3": "'替换3级': 'a/b/c/d/img' -> 'ns/d/img'"
     },
     "DESTINATION": {
         "NEW_ENDPOINT": "新建目标",

src/portal/src/i18n/lang/zh-tw-lang.json

@@ -634,7 +634,12 @@
     "FLATTEN_LEVEL_2": "Flatten 2 Levels",
     "FLATTEN_LEVEL_3": "Flatten 3 Levels",
     "FLATTEN_ALL": "Flatten All Levels",
-    "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Default 'Flatten 1 Level' will replace the left most repository component with the destination namespace a/b/c/img -> ns/b/c/img. 'Flatten all Levels' is the legacy option used prior v2.3 resulting in a/b/c/img -> ns/img."
+    "FLATTEN_LEVEL_TIP": "Reduce the nested repository structure when copying images. Assuming that the nested repository structure is 'a/b/c/d/img' and the destination namespace is 'ns', the corresponding results of each item are as below:",
+    "FLATTEN_LEVEL_TIP_ALL": "'Flatten All Levels'(Used prior v2.3): 'a/b/c/d/img' -> 'ns/img'",
+    "FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
+    "FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
+    "FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
+    "FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
   },
   "DESTINATION":{
     "NEW_ENDPOINT": "新建目標",