extend copy pull command with custom prefix

* This commit adds custom as dropdown option * add custom_runtime localstorage variable for the pull prefix * fix artifact list tab styles * align copy icon in artifact tag list tab Signed-off-by: bupd <[email protected]>
goharbor · Jan 22, 2025 · c0ffee5 · c0ffee5
1 parent 4fa9a0e
commit c0ffee5
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 52 deletions.
diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.html b/src/portal/src/app/base/preference-settings/preference-settings.component.html
@@ -3,7 +3,7 @@
     [clrModalClosable]="false"
     [clrModalStaticBackdrop]="false">
     <h3 class="modal-title">{{ 'CHANGE_PREF.TITLE' | translate }}</h3>
-    <div class="modal-body dialog-body">
+    <div class="modal-body body-format dialog-body">
         <div class="dropdowns content-container">
             <div class="content-area centered-content-area">
                 <div class="clr-control-label">
@@ -66,14 +66,74 @@ <h3 class="modal-title">{{ 'CHANGE_PREF.TITLE' | translate }}</h3>
                         <clr-icon size="10" shape="caret down"></clr-icon>
                     </button>
                     <clr-dropdown-menu *clrIfOpen>
-                        <a
-                            *ngFor="let runtime of guiRuntimes"
-                            href="javascript:void(0)"
-                            clrDropdownItem
-                            (click)="switchRuntime(runtime[0])"
-                            [class.lang-selected]="matchRuntime(runtime[0])"
-                            >{{ runtime[1] }}</a
-                        >
+                        <clr-dropdown>
+                            <button clrDropdownTrigger>custom</button>
+                            <clr-dropdown-menu *clrIfOpen>
+                                <form
+                                    #customruntimeForm="ngForm"
+                                    class="clr-form">
+                                    <div class="clr-form-control">
+                                        <label
+                                            for="customPrefix"
+                                            class="clr-control-label"
+                                            >Custom</label
+                                        >
+                                        <div class="clr-control-container">
+                                            <div class="clr-input-wrapper">
+                                                <input
+                                                    type="text"
+                                                    id="customPrefix"
+                                                    name="customPrefix"
+                                                    placeholder="Enter custom prefix"
+                                                    [(ngModel)]="customRuntime"
+                                                    #customPrefix="ngModel"
+                                                    minlength="2"
+                                                    class="clr-input" />
+                                                <cds-icon
+                                                    class="clr-validate-icon"
+                                                    shape="exclamation-circle"></cds-icon>
+                                            </div>
+                                            <div
+                                                *ngIf="
+                                                    customPrefix.invalid &&
+                                                    customPrefix.touched
+                                                ">
+                                                <div
+                                                    *ngIf="customPrefix.errors?.['required']">
+                                                    Prefix is required
+                                                </div>
+                                                <div
+                                                    *ngIf="customPrefix.errors?.['minlength']">
+                                                    Prefix must be at least 2
+                                                    characters
+                                                </div>
+                                            </div>
+                                            <!-- <span class="clr-subtext">Helper Text</span> -->
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button
+                                                clrDropdownItem
+                                                type="button"
+                                                class="btn btn-primary"
+                                                id="ok-btn"
+                                                [disabled]="!isValid"
+                                                (click)="addCustomRuntime()">
+                                                {{ 'BUTTON.OK' | translate }}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </clr-dropdown-menu>
+                        </clr-dropdown>
+                        <ng-container *ngFor="let runtime of guiRuntimes">
+                            <a
+                                href="javascript:void(0)"
+                                clrDropdownItem
+                                (click)="switchRuntime(runtime[0])"
+                                [class.lang-selected]="matchRuntime(runtime[0])"
+                                >{{ runtime[1] }}</a
+                            >
+                        </ng-container>
                     </clr-dropdown-menu>
                 </clr-dropdown>
             </div>

diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.scss b/src/portal/src/app/base/preference-settings/preference-settings.component.scss
@@ -17,10 +17,10 @@
 }
 
 .centered-content-area {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 70%
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 70%;
 }
 
 .dropdowns {

diff --git a/src/portal/src/app/base/preference-settings/preference-settings.component.ts b/src/portal/src/app/base/preference-settings/preference-settings.component.ts
@@ -11,10 +11,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
     getContainerRuntime,
+    getCustomContainerRuntime,
     getDatetimeRendering,
 } from 'src/app/shared/units/shared.utils';
 import { registerLocaleData } from '@angular/common';
@@ -23,6 +24,7 @@ import { map } from 'rxjs/operators';
 import { ClrCommonStrings } from '@clr/angular/utils/i18n/common-strings.interface';
 import { ClrCommonStringsService } from '@clr/angular';
 import {
+    CUSTOM_RUNTIME_LOCALSTORAGE_KEY,
     DATETIME_RENDERINGS,
     DatetimeRendering,
     DEFAULT_DATETIME_RENDERING_LOCALSTORAGE_KEY,
@@ -37,6 +39,8 @@ import {
     SupportedLanguage,
     SupportedRuntime,
 } from '../../shared/entities/shared.const';
+import { NgForm } from '@angular/forms';
+import { InlineAlertComponent } from 'src/app/shared/components/inline-alert/inline-alert.component';
 
 @Component({
     selector: 'preference-settings',
@@ -45,12 +49,21 @@ import {
 })
 export class PreferenceSettingsComponent implements OnInit {
     readonly guiLanguages = Object.entries(LANGUAGES);
-    readonly guiRuntimes = Object.entries(RUNTIMES);
+    readonly guiRuntimes = Object.entries(RUNTIMES).filter(
+        ([_, value]) => value !== RUNTIMES.custom
+    );
     readonly guiDatetimeRenderings = Object.entries(DATETIME_RENDERINGS);
     selectedLang: SupportedLanguage = DeFaultLang;
     selectedRuntime: SupportedRuntime = DeFaultRuntime;
     selectedDatetimeRendering: DatetimeRendering = DefaultDatetimeRendering;
     opened: boolean = false;
+    error: any = null;
+    customRuntime: string = '';
+
+    @ViewChild('customruntimeForm', { static: false })
+    customRuntimeForm: NgForm;
+    @ViewChild(InlineAlertComponent, { static: true })
+    inlineAlert: InlineAlertComponent;
 
     constructor(
         private translate: TranslateService,
@@ -68,6 +81,27 @@ export class PreferenceSettingsComponent implements OnInit {
         }
         this.selectedDatetimeRendering = getDatetimeRendering();
         this.selectedRuntime = getContainerRuntime();
+        this.customRuntime = getCustomContainerRuntime();
+    }
+
+    // Check If form is valid
+    public get isValid(): boolean {
+        const customPrefixControl =
+            this.customRuntimeForm?.form.get('customPrefix');
+
+        return (
+            customPrefixControl?.valid &&
+            customPrefixControl?.value?.trim() !== '' &&
+            this.error === null
+        );
+    }
+
+    addCustomRuntime() {
+        if (this.customRuntime.trim()) {
+            const customRuntimeValue = this.customRuntime.trim();
+            this.switchRuntime('custom');
+            this.switchCustomRuntime(customRuntimeValue);
+        }
     }
 
     //Internationalization for Clarity components, refer to https://clarity.design/documentation/internationalization
@@ -137,6 +171,10 @@ export class PreferenceSettingsComponent implements OnInit {
         localStorage.setItem(DEFAULT_RUNTIME_LOCALSTORAGE_KEY, runtime);
     }
 
+    switchCustomRuntime(runtime: SupportedRuntime): void {
+        localStorage.setItem(CUSTOM_RUNTIME_LOCALSTORAGE_KEY, runtime);
+    }
+
     switchDatetimeRendering(datetime: DatetimeRendering): void {
         this.selectedDatetimeRendering = datetime;
         localStorage.setItem(

diff --git a/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss b/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
@@ -203,6 +203,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .signpost-item {

diff --git a/...tifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html b/...tifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html
@@ -2,7 +2,7 @@
     <hbr-copy-input
         #copyInputComponent
         (onCopySuccess)="onCpSuccess(getPullCommandForTopModel())"
-        inputSize="30"
+        inputSize="55"
         headerTitle=""
         defaultValue="{{ getPullCommandForTopModel() }}"></hbr-copy-input>
 </div>

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html
@@ -120,9 +120,7 @@ <h4>{{ 'REPOSITORY.TAGS' | translate }}</h4>
     </clr-dg-placeholder>
     <clr-dg-row *ngFor="let tag of currentTags" [clrDgItem]="tag">
         <clr-dg-cell>
-            <div
-                class="pull cell white-normal"
-                [class.immutable]="tag.immutable">
+            <div class="pull" [class.immutable]="tag.immutable">
                 <span
                     href="javascript:void(0)"
                     class="max-width-150"

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.scss
@@ -1,65 +1,73 @@
-
 .label-form {
-  max-width: 100% !important;
+    max-width: 100% !important;
 }
 
 .clr-control-container {
-  margin-bottom: 1rem;
-  position: relative;
+    margin-bottom: 1rem;
+    position: relative;
 }
 
 .btn.remove-btn {
-  border: none;
-  height: 0.6rem;
-  line-height: 1;
+    border: none;
+    height: 0.6rem;
+    line-height: 1;
 }
 
 .immutable {
-  display: flex;
-  align-items: center;
-  position: relative;
+    display: flex;
+    align-items: center;
+    position: relative;
 
-  .label {
-    position: absolute;
-    right: 0;
-    margin-right: 0;
-  }
+    .label {
+        position: absolute;
+        right: 0;
+        margin-right: 0;
+    }
 }
 
 .datagrid-action-bar {
-  margin-top: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 .position-ab {
-  position: absolute;
+    position: absolute;
 }
 
 .white-space-nowrap {
-  white-space: nowrap;
+    white-space: nowrap;
+}
+
+.pull {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .refresh-btn {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .spinner-tag {
-  position: absolute;
-  right: -.7rem;
-  top: 1.2rem;
+    position: absolute;
+    right: -0.7rem;
+    top: 1.2rem;
 }
 
 .action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .right-pos {
-  margin-right: 35px;
-  display: flex;
-  align-items: center;
+    margin-right: 35px;
+    display: flex;
+    align-items: center;
 }
 
 .pull-btn {
-  margin-left: 10px
+    float: right;
+    margin-right: -20px;
 }
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.ts b/src/portal/src/app/base/project/repository/artifact/artifact.ts
@@ -2,6 +2,7 @@ import { Accessory } from 'ng-swagger-gen/models/accessory';
 import { Artifact } from '../../../../../../ng-swagger-gen/models/artifact';
 import { Platform } from '../../../../../../ng-swagger-gen/models/platform';
 import { Label } from '../../../../../../ng-swagger-gen/models/label';
+import { getCustomContainerRuntime } from 'src/app/shared/units/shared.utils';
 
 export interface ArtifactFront extends Artifact {
     platform?: Platform;
@@ -104,6 +105,9 @@ export function hasPullCommand(artifact: Artifact): boolean {
 export function getPullCommandForTop(url: string, client: Clients): string {
     if (url) {
         if (Object.values(Clients).includes(client)) {
+            if (client == 'custom') {
+                return `${getCustomContainerRuntime()} pull ${url}`;
+            }
             return `${client} pull ${url}`;
         }
     }
@@ -119,6 +123,9 @@ export function getPullCommandByDigest(
     if (artifactType && url && digest) {
         if (artifactType === ArtifactType.IMAGE) {
             if (Object.values(Clients).includes(client)) {
+                if (client == 'custom') {
+                    return `${getCustomContainerRuntime()} pull ${url}@${digest}`;
+                }
                 return `${client} pull ${url}@${digest}`;
             }
         }
@@ -139,6 +146,10 @@ export function getPullCommandByTag(
     if (artifactType && url && tag) {
         if (artifactType === ArtifactType.IMAGE) {
             if (Object.values(Clients).includes(client)) {
+                if (client == 'custom') {
+                    return `${getCustomContainerRuntime()} pull ${url}:${tag}`;
+                }
+
                 return `${client} pull ${url}:${tag}`;
             }
         }
@@ -166,6 +177,7 @@ export enum Clients {
     NERDCTL = 'nerdctl',
     CONTAINERD = 'ctr',
     CRI_O = 'crictl',
+    CUSTOM = 'custom',
     CHART = 'helm',
     CNAB = 'cnab-to-oci',
 }

diff --git a/src/portal/src/app/shared/components/push-image/copy-input.coponent.html b/src/portal/src/app/shared/components/push-image/copy-input.coponent.html
@@ -1,7 +1,5 @@
 <div>
-    <div class="command-title" *ngIf="!iconMode">
-        {{ headerTitle }}
-    </div>
+    <div class="command-title" *ngIf="!iconMode">{{ headerTitle }}</div>
     <div>
         <span [class.hide]="iconMode">
             <input