From c0ffee5a6789b46aeb5516608301a65493a8826c Mon Sep 17 00:00:00 2001 From: bupd Date: Wed, 22 Jan 2025 16:51:45 +0530 Subject: [PATCH] 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 --- .../preference-settings.component.html | 78 ++++++++++++++++--- .../preference-settings.component.scss | 8 +- .../preference-settings.component.ts | 42 +++++++++- .../artifact-list-tab.component.scss | 2 + .../pull-command/pull-command.component.html | 2 +- .../artifact-tag/artifact-tag.component.html | 4 +- .../artifact-tag/artifact-tag.component.scss | 66 +++++++++------- .../project/repository/artifact/artifact.ts | 12 +++ .../push-image/copy-input.coponent.html | 4 +- .../src/app/shared/entities/shared.const.ts | 2 + .../src/app/shared/units/shared.utils.ts | 16 +++- 11 files changed, 184 insertions(+), 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 index 94fd4ce24d9..b69f1deab35 100644 --- 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">

{{ 'CHANGE_PREF.TITLE' | translate }}

-
+
@@ -66,14 +66,74 @@

{{ 'CHANGE_PREF.TITLE' | translate }}

- {{ runtime[1] }} + + + +
+
+ +
+
+ + +
+
+
+ Prefix is required +
+
+ Prefix must be at least 2 + characters +
+
+ +
+
+ +
+
+
+ + + + {{ runtime[1] }} +
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 index 437f23eb8d9..cc22550dd1c 100644 --- 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 index d7045e16aaf..506c759ffda 100644 --- 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/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss index 1500c41c550..c6e1cc8e728 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss +++ b/src/portal/src/app/base/project/repository/artifact/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/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html index dd9d458b31f..bde38a0479b 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html +++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component.html @@ -2,7 +2,7 @@
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 index fba8bd89c5e..b6409e9eb51 100644 --- 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 @@

{{ 'REPOSITORY.TAGS' | translate }}

-
+
-
- {{ headerTitle }} -
+
{{ headerTitle }}
k === x); } +/** + * Gets the custom container runtime saved by the user + */ +export function getCustomContainerRuntime(): SupportedRuntime { + const savedContainerRuntime = localStorage.getItem( + CUSTOM_RUNTIME_LOCALSTORAGE_KEY + ); + if (savedContainerRuntime) { + return savedContainerRuntime; + } + return DeFaultRuntime; +} + /** * Gets the datetime rendering setting saved by the user, or the default setting if no valid saved value is found. */