Update UI for the deprecation of Artifact Hub (#18303)

1. Update edit-registry page to enable the edition for Artifact Hub
2. Update edit-replication-rule page to enable the edition for rules contain Artifact Hub

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

src/portal/src/app/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.html

@@ -27,12 +27,20 @@
                     (change)="adapterChange($event)"
                     [(ngModel)]="target.type"
                     [disabled]="testOngoing || editDisabled">
-                    <option
-                        [ngClass]="{ hidden: shouldHide(adapter) }"
-                        *ngFor="let adapter of adapterList"
-                        value="{{ adapter }}">
-                        {{ getAdapterText(adapter) }}
-                    </option>
+                    <ng-container *ngIf="!editDisabled">
+                        <option
+                            *ngFor="let adapter of adapterList"
+                            value="{{ adapter }}">
+                            {{ getAdapterText(adapter) }}
+                        </option>
+                    </ng-container>
+                    <ng-container *ngIf="editDisabled">
+                        <option
+                            *ngFor="let adapter of [target.type]"
+                            value="{{ adapter }}">
+                            {{ getAdapterText(adapter) }}
+                        </option>
+                    </ng-container>
                 </select>
             </clr-select-container>
             <!-- Endpoint name -->

src/portal/src/app/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.scss

@@ -74,7 +74,3 @@
     display: flex;
     align-items: center;
   }
-
-  .hidden{
-    display:none;
-  }

src/portal/src/app/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.ts

@@ -25,7 +25,7 @@ import { Subscription, throwError as observableThrowError } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { ErrorHandler } from '../../../../shared/units/error-handler';
 import { InlineAlertComponent } from '../../../../shared/components/inline-alert/inline-alert.component';
-import { Endpoint, PingEndpoint } from '../../../../shared/services/interface';
+import { Endpoint, PingEndpoint } from '../../../../shared/services';
 import {
     clone,
     compareValue,
@@ -35,10 +35,7 @@ import {
 import { HttpClient } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
 import { AppConfigService } from '../../../../services/app-config.service';
-import {
-    EndpointService,
-    HELM_HUB,
-} from '../../../../shared/services/endpoint.service';
+import { EndpointService } from '../../../../shared/services/endpoint.service';
 import { ClrLoadingState } from '@clr/angular';
 
 const FAKE_PASSWORD = 'rjGcfuRu';
@@ -56,7 +53,6 @@ export class CreateEditEndpointComponent
     modalTitle: string;
     urlDisabled: boolean = false;
     editDisabled: boolean = false;
-    controlEnabled: boolean = false;
     createEditDestinationOpened: boolean;
     staticBackdrop: boolean = true;
     closable: boolean = false;
@@ -64,11 +60,9 @@ export class CreateEditEndpointComponent
     adapterList: string[];
     endpointList: any[] = [];
     target: Endpoint = this.initEndpoint();
-    selectedType: string;
     initVal: Endpoint;
     targetForm: NgForm;
     @ViewChild('targetForm') currentForm: NgForm;
-    targetEndpoint;
     testOngoing: boolean;
     onGoing: boolean;
     endpointId: number | string;
@@ -101,12 +95,6 @@ export class CreateEditEndpointComponent
         this.endpointService.getAdapters().subscribe(
             adapters => {
                 this.adapterList = adapters || [];
-                // disable helm-hub
-                for (let i = 0; i < this.adapterList.length; i++) {
-                    if (this.adapterList[i] === HELM_HUB) {
-                        this.adapterList.splice(i, 1);
-                    }
-                }
             },
             error => {
                 this.errorHandler.error(error);
@@ -521,8 +509,4 @@ export class CreateEditEndpointComponent
     getAdapterText(adapter: string): string {
         return this.endpointService.getAdapterText(adapter);
     }
-    // hide helm hub option when creating registry
-    shouldHide(adapter: string) {
-        return adapter === HELM_HUB && !this.endpointId;
-    }
 }

src/portal/src/app/base/left-side-nav/registries/endpoint.component.html

@@ -74,6 +74,9 @@
                 <clr-dg-column [clrDgSortBy]="'creation_time'">{{
                     'DESTINATION.CREATION_TIME' | translate
                 }}</clr-dg-column>
+                <clr-dg-column [clrDgField]="'description'">{{
+                    'REPLICATION.DESCRIPTION' | translate
+                }}</clr-dg-column>
                 <clr-dg-placeholder>{{
                     'DESTINATION.PLACEHOLDER' | translate
                 }}</clr-dg-placeholder>
@@ -100,22 +103,6 @@
                         <span class="margin-right-2px">{{
                             getAdapterText(t.type)
                         }}</span>
-                        <clr-signpost *ngIf="isHelmHub(t.type)">
-                            <clr-icon
-                                clrSignpostTrigger
-                                class="color-red"
-                                shape="error-standard"></clr-icon>
-                            <clr-signpost-content *clrIfOpen>
-                                <a
-                                    href="https://helm.sh/blog/helm-hub-moving-to-artifact-hub"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    >{{
-                                        'DESTINATION.DEPRECATED' | translate
-                                    }}</a
-                                >
-                            </clr-signpost-content>
-                        </clr-signpost>
                     </clr-dg-cell>
                     <clr-dg-cell>
                         {{ !t.insecure }}
@@ -124,6 +111,7 @@
                     <clr-dg-cell>{{
                         t.creation_time | harborDatetime: 'short'
                     }}</clr-dg-cell>
+                    <clr-dg-cell>{{ t.description }}</clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination

src/portal/src/app/base/left-side-nav/registries/endpoint.component.ts

@@ -45,10 +45,7 @@ import { OperationService } from '../../../shared/components/operation/operation
 import { errorHandler } from '../../../shared/units/shared.utils';
 import { ConfirmationMessage } from '../../global-confirmation-dialog/confirmation-message';
 import { ConfirmationAcknowledgement } from '../../global-confirmation-dialog/confirmation-state-message';
-import {
-    EndpointService,
-    HELM_HUB,
-} from '../../../shared/services/endpoint.service';
+import { EndpointService } from '../../../shared/services/endpoint.service';
 import { RegistryService } from '../../../../../ng-swagger-gen/services/registry.service';
 import { ClrDatagridStateInterface } from '@clr/angular';
 import { Registry } from '../../../../../ng-swagger-gen/models/registry';
@@ -287,7 +284,4 @@ export class EndpointComponent implements OnInit, OnDestroy {
     getAdapterText(adapter: string): string {
         return this.oldEndpointService.getAdapterText(adapter);
     }
-    isHelmHub(str: string): boolean {
-        return str === HELM_HUB;
-    }
 }

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

@@ -602,38 +602,31 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
             this.onGoing = true;
             this.policyId = +rule.id;
             this.headerTitle = 'REPLICATION.EDIT_POLICY_TITLE';
-            this.repService.getReplicationRule(rule.id).subscribe(
-                ruleInfo => {
-                    let srcRegistryId = ruleInfo.src_registry.id;
-                    this.repService
-                        .getRegistryInfo(srcRegistryId)
-                        .pipe(finalize(() => (this.onGoing = false)))
-                        .subscribe(
-                            adapter => {
-                                this.setFilterAndTrigger(adapter);
-                                this.updateRuleFormAndCopyUpdateForm(ruleInfo);
-                            },
-                            (error: any) => {
-                                this.translateService
-                                    .get(
-                                        'REPLICATION.UNREACHABLE_SOURCE_REGISTRY',
-                                        {
-                                            error: errorHandlerFn(error),
-                                        }
-                                    )
-                                    .subscribe(translatedResponse => {
-                                        this.inlineAlert.showInlineError(
-                                            translatedResponse
-                                        );
-                                    });
-                            }
-                        );
-                },
-                (error: any) => {
-                    this.onGoing = false;
-                    this.inlineAlert.showInlineError(error);
-                }
-            );
+            this.repService
+                .getRegistryInfo(rule.src_registry.id)
+                .pipe(finalize(() => (this.onGoing = false)))
+                .subscribe({
+                    next: adapter => {
+                        this.setFilterAndTrigger(adapter);
+                        this.updateRuleFormAndCopyUpdateForm(rule);
+                    },
+                    error: (error: any) => {
+                        // if error, use default(set registry id to 0) filters and triggers
+                        this.repService.getRegistryInfo(0).subscribe(res => {
+                            this.setFilterAndTrigger(res);
+                            this.updateRuleFormAndCopyUpdateForm(rule);
+                        });
+                        this.translateService
+                            .get('REPLICATION.UNREACHABLE_SOURCE_REGISTRY', {
+                                error: errorHandlerFn(error),
+                            })
+                            .subscribe(translatedResponse => {
+                                this.inlineAlert.showInlineError(
+                                    translatedResponse
+                                );
+                            });
+                    },
+                });
         } else {
             this.onGoing = true;
             let registryObs = this.repService.getRegistryInfo(0);

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

@@ -142,20 +142,6 @@
                 <span class="margin-right-2px">{{
                     p.src_registry ? p.src_registry.name : ''
                 }}</span>
-                <clr-signpost *ngIf="isHelmHub(p.src_registry)">
-                    <clr-icon
-                        clrSignpostTrigger
-                        class="color-red"
-                        shape="error-standard"></clr-icon>
-                    <clr-signpost-content *clrIfOpen>
-                        <a
-                            rel="noopener noreferrer"
-                            href="https://helm.sh/blog/helm-hub-moving-to-artifact-hub"
-                            target="_blank"
-                            >{{ 'DESTINATION.DEPRECATED' | translate }}</a
-                        >
-                    </clr-signpost-content>
-                </clr-signpost>
             </clr-dg-cell>
             <clr-dg-cell class="col-width">
                 {{

src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts

@@ -47,12 +47,10 @@ import { ClrDatagridStateInterface } from '@clr/angular';
 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 { HELM_HUB } from '../../../../../shared/services/endpoint.service';
 import { BandwidthUnit, Flatten_I18n_MAP } from '../../replication';
 import { KB_TO_MB } from '../create-edit-rule/create-edit-rule.component';
 import { ReplicationService } from 'ng-swagger-gen/services/replication.service';
 import { ReplicationPolicy } from '../../../../../../../ng-swagger-gen/models/replication-policy';
-import { JobserviceService } from '../../../../../../../ng-swagger-gen/services/jobservice.service';
 import { ReplicationTrigger } from '../../../../../../../ng-swagger-gen/models/replication-trigger';
 import {
     TRIGGER,
@@ -369,10 +367,6 @@ export class ListReplicationRuleComponent implements OnInit {
         this.clrLoad();
     }
 
-    isHelmHub(srcRegistry: any): boolean {
-        return srcRegistry && srcRegistry.type === HELM_HUB;
-    }
-
     getFlattenLevelString(level: number) {
         if (level !== null && Flatten_I18n_MAP[level]) {
             return Flatten_I18n_MAP[level];

src/portal/src/app/shared/services/endpoint.service.ts

@@ -31,8 +31,6 @@ export const ADAPTERS_MAP = {
     'github-ghcr': 'Github GHCR',
 };
 
-export const HELM_HUB: string = 'helm-hub';
-
 /**
  * Define the service methods to handle the endpoint related things.
  *

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

@@ -696,8 +696,7 @@
         "DELETED_FAILED": "Löschen des Endpunktes fehlgeschlagen.",
         "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"
+        "PLACEHOLDER": "Wir konnten keine Endpunkt finden."
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Kopiere Digest",

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

@@ -696,8 +696,7 @@
         "DELETED_FAILED": "Deleted endpoints failed.",
         "CANNOT_EDIT": "Endpoint cannot be changed while the replication rule is enabled.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Failed to delete the endpoint in use.",
-        "PLACEHOLDER": "We couldn't find any endpoints!",
-        "DEPRECATED": "Helm Hub is moving to Artifact Hub"
+        "PLACEHOLDER": "We couldn't find any endpoints!"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Copy Digest",

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

@@ -698,8 +698,7 @@
         "DELETED_FAILED": "Ha fallado la eliminación del endpoint.",
         "CANNOT_EDIT": "El endpoint no puede ser cambiado mientras la regla de replicación está activa.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Fallo al eliminar el endpoint en uso.",
-        "PLACEHOLDER": "We couldn't find any endpoints!",
-        "DEPRECATED": "Helm Hub is moving to Artifact Hub"
+        "PLACEHOLDER": "We couldn't find any endpoints!"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Copy Digest",

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

@@ -685,8 +685,7 @@
         "DELETED_FAILED": "Echec de la suppression du Endpoint",
         "CANNOT_EDIT": "Le Endpoint ne peut pas être modifié tant que la règle de réplication est activée.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Echec de la suppression du Endpoint en cours d'utilisation",
-        "PLACEHOLDER": "Nous n'avons trouvé aucun Endpoint !",
-        "DEPRECATED": "Helm Hub migre vers Artifact Hub"
+        "PLACEHOLDER": "Nous n'avons trouvé aucun Endpoint !"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Copier le Résumé",

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

@@ -696,8 +696,7 @@
         "DELETED_FAILED": "Falha ao remover endereço.",
         "CANNOT_EDIT": "Endereço não pode ser alterado enquando a regra de replicação estiver ativa.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Falha ao remover endereço em uso.",
-        "PLACEHOLDER": "Não há endereços cadastrados",
-        "DEPRECATED": "Helm Hub está sendo movido para Artifact Hub"
+        "PLACEHOLDER": "Não há endereços cadastrados"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Copiar Digest",

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

@@ -696,8 +696,7 @@
         "DELETED_FAILED": "Silinen uç noktalar başarısız oldu.",
         "CANNOT_EDIT": "Çoğaltma kuralı etkinken uç noktası değiştirilemez.",
         "FAILED_TO_DELETE_TARGET_IN_USED": "Kullanılan uç nokta silinemedi.",
-        "PLACEHOLDER": "Uç noktaları bulamadık!",
-        "DEPRECATED": "Helm Hub is moving to Artifact Hub"
+        "PLACEHOLDER": "Uç noktaları bulamadık!"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "Özet Kopyala",

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

@@ -698,8 +698,7 @@
         "DELETED_FAILED": "删除目标失败。",
         "CANNOT_EDIT": "当复制规则启用时目标无法修改。",
         "FAILED_TO_DELETE_TARGET_IN_USED": "无法删除正在使用的目标。",
-        "PLACEHOLDER": "未发现任何复制目标!",
-        "DEPRECATED": "Helm Hub 正被移至 Artifact Hub"
+        "PLACEHOLDER": "未发现任何复制目标!"
     },
     "REPOSITORY": {
         "COPY_DIGEST_ID": "复制摘要",

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

@@ -693,8 +693,7 @@
     "DELETED_FAILED": "刪除目標失敗。",
     "CANNOT_EDIT": "當複制規則啟用時目標無法修改。",
     "FAILED_TO_DELETE_TARGET_IN_USED": "無法刪除正在使用的目標。",
-    "PLACEHOLDER": "未發現任何復制目標!",
-    "DEPRECATED": "Helm Hub is moving to Artifact Hub"
+    "PLACEHOLDER": "未發現任何復制目標!"
   },
   "REPOSITORY":{
     "COPY_DIGEST_ID": "複製摘要",