diff --git a/i18n/de/messages.de.xlf b/i18n/de/messages.de.xlf index 1869ed74d680..ccd0845a5a17 100644 --- a/i18n/de/messages.de.xlf +++ b/i18n/de/messages.de.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4559,7 +4559,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/fr/messages.fr.xlf b/i18n/fr/messages.fr.xlf index adc372601f77..9e40624b5fbc 100644 --- a/i18n/fr/messages.fr.xlf +++ b/i18n/fr/messages.fr.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4573,7 +4573,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/ja/messages.ja.xlf b/i18n/ja/messages.ja.xlf index 9a5dded32268..160da8ab5f3e 100644 --- a/i18n/ja/messages.ja.xlf +++ b/i18n/ja/messages.ja.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4543,7 +4543,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/ko/messages.ko.xlf b/i18n/ko/messages.ko.xlf index 7cd439c79dff..65fbcbb37365 100644 --- a/i18n/ko/messages.ko.xlf +++ b/i18n/ko/messages.ko.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4674,7 +4674,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/messages.xlf b/i18n/messages.xlf index d6ce30e5ed68..cf580aaf8568 100644 --- a/i18n/messages.xlf +++ b/i18n/messages.xlf @@ -32,7 +32,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -47,7 +47,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -3253,7 +3253,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf b/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf index f40b367e1212..f91c5805a7b7 100644 --- a/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf +++ b/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4677,7 +4677,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/zh-Hans/messages.zh-Hans.xlf b/i18n/zh-Hans/messages.zh-Hans.xlf index d5327d37191a..9eeb96f9d7f6 100644 --- a/i18n/zh-Hans/messages.zh-Hans.xlf +++ b/i18n/zh-Hans/messages.zh-Hans.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4677,7 +4677,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf b/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf index 8d7ce5e81eff..14f763c232e7 100644 --- a/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf +++ b/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4681,7 +4681,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/zh-Hant/messages.zh-Hant.xlf b/i18n/zh-Hant/messages.zh-Hant.xlf index a873221eed7e..d0fafabf1940 100644 --- a/i18n/zh-Hant/messages.zh-Hant.xlf +++ b/i18n/zh-Hant/messages.zh-Hant.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4681,7 +4681,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/i18n/zh/messages.zh.xlf b/i18n/zh/messages.zh.xlf index 410a24252525..747c3af3662d 100644 --- a/i18n/zh/messages.zh.xlf +++ b/i18n/zh/messages.zh.xlf @@ -35,7 +35,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 26 + 29 @@ -51,7 +51,7 @@ ../src/app/frontend/resource/config/secret/detail/edit/template.html - 30 + 33 ../src/app/frontend/create/from/form/createnamespace/template.html @@ -4677,7 +4677,7 @@ ../src/app/frontend/resource/config/secret/detail/template.html - 37 + 40 diff --git a/src/app/frontend/_theming.scss b/src/app/frontend/_theming.scss index ba26106742a1..f1cfa388568a 100644 --- a/src/app/frontend/_theming.scss +++ b/src/app/frontend/_theming.scss @@ -288,4 +288,27 @@ fill: mat-color($foreground-palette, text) !important; } } + + .kd-secret-detail-text { + .mat-form-field-infix { + border-top: 0; + } + + .mat-form-field-underline { + background: none; + + .mat-form-field-ripple { + background: none; + } + } + + textarea { + background-color: $border; + border: 0; + } + } + + .kd-edit-active { + color: $primary; + } } diff --git a/src/app/frontend/common/components/hiddenproperty/component.ts b/src/app/frontend/common/components/hiddenproperty/component.ts index 6f32554beeaa..250b0feee2f4 100644 --- a/src/app/frontend/common/components/hiddenproperty/component.ts +++ b/src/app/frontend/common/components/hiddenproperty/component.ts @@ -14,11 +14,32 @@ import {Component, Input} from '@angular/core'; +export enum HiddenPropertyMode { + Hidden = 'hidden', + Visible = 'visible', + Edit = 'edit', +} + @Component({ selector: 'kd-hidden-property', templateUrl: './template.html', styleUrls: ['./style.scss'], }) export class HiddenPropertyComponent { - @Input() hidden = true; + @Input() mode = HiddenPropertyMode.Hidden; + @Input() enableEdit = false; + + HiddenPropertyMode = HiddenPropertyMode; + + toggleVisible(): void { + this.mode = + this.mode !== HiddenPropertyMode.Visible + ? HiddenPropertyMode.Visible + : HiddenPropertyMode.Hidden; + } + + toggleEdit(): void { + this.mode = + this.mode !== HiddenPropertyMode.Edit ? HiddenPropertyMode.Edit : HiddenPropertyMode.Hidden; + } } diff --git a/src/app/frontend/common/components/hiddenproperty/template.html b/src/app/frontend/common/components/hiddenproperty/template.html index 8027144193fa..2dadfbdf4c22 100644 --- a/src/app/frontend/common/components/hiddenproperty/template.html +++ b/src/app/frontend/common/components/hiddenproperty/template.html @@ -19,22 +19,30 @@ fxLayout="row" fxLayoutAlign=" center" class="kd-hidden-property-key kd-clickable" - (click)="hidden = !hidden"> + (click)="toggleVisible()"> - visibility - visibility_off + visibility + visibility_off + edit
-
+
-
+
+
+ +
+
diff --git a/src/app/frontend/index.scss b/src/app/frontend/index.scss index 807ed956c981..c81cac127baa 100644 --- a/src/app/frontend/index.scss +++ b/src/app/frontend/index.scss @@ -198,6 +198,7 @@ router-outlet::after { font-size: $body-font-size-base; padding: $baseline-grid * 2; white-space: pre-wrap; + width: 100%; } .kd-code-block-font { @@ -352,3 +353,17 @@ router-outlet::after { .nvtooltip { font-family: Roboto, sans-serif; } + +.kd-secret-detail-text { + .mat-form-field-wrapper { + padding-bottom: $baseline-grid; + } + + .mat-form-field-infix { + padding-top: 2px; + } + + textarea { + padding: (2 * $baseline-grid) (2 * $baseline-grid) 0 !important; + } +} diff --git a/src/app/frontend/resource/config/secret/detail/component.ts b/src/app/frontend/resource/config/secret/detail/component.ts index 82ac825ef49f..e5db900afc8a 100644 --- a/src/app/frontend/resource/config/secret/detail/component.ts +++ b/src/app/frontend/resource/config/secret/detail/component.ts @@ -21,6 +21,7 @@ import {ActionbarService, ResourceMeta} from '../../../../common/services/global import {NotificationsService} from '../../../../common/services/global/notifications'; import {EndpointManager, Resource} from '../../../../common/services/resource/endpoint'; import {NamespacedResourceService} from '../../../../common/services/resource/resource'; +import {HiddenPropertyMode} from '../../../../common/components/hiddenproperty/component'; @Component({ selector: 'kd-secret-detail', @@ -31,6 +32,7 @@ export class SecretDetailComponent implements OnInit, OnDestroy { private readonly endpoint_ = EndpointManager.resource(Resource.secret, true); secret: SecretDetail; isInitialized = false; + HiddenPropertyMode = HiddenPropertyMode; constructor( private readonly secret_: NamespacedResourceService, diff --git a/src/app/frontend/resource/config/secret/detail/edit/component.ts b/src/app/frontend/resource/config/secret/detail/edit/component.ts index 6e13264c2f02..8e32d6112510 100644 --- a/src/app/frontend/resource/config/secret/detail/edit/component.ts +++ b/src/app/frontend/resource/config/secret/detail/edit/component.ts @@ -26,32 +26,34 @@ import {MatDialogConfig, MatDialog} from '@angular/material/dialog'; }) export class SecretDetailEditComponent implements OnInit { @Output() onClose = new EventEmitter(); + @Input() key: string; + + text = ''; + + private secret_: SecretDetail; + private editing_ = false; + @Input() set editing(value: boolean) { this.editing_ = value; - this.updateText(); + this.updateText_(); } + get editing(): boolean { return this.editing_; } + @Input() set secret(value: SecretDetail) { this.secret_ = value; - - if (!this.editing) { - this.updateText(); - } } + get secret(): SecretDetail { return this.secret_; } - @Input() key: string; - text = ''; - private secret_: SecretDetail; - private editing_ = false; constructor(private readonly dialog_: MatDialog, private readonly http_: HttpClient) {} ngOnInit(): void { - this.updateText(); + this.updateText_(); } update(): void { @@ -61,8 +63,8 @@ export class SecretDetailEditComponent implements OnInit { .get(url) .toPromise() .then((resource: any) => { - const dataValue = this.encode(this.text); - resource.data[this.key] = this.encode(this.text); + const dataValue = this.encode_(this.text); + resource.data[this.key] = this.encode_(this.text); const url = RawResource.getUrl(this.secret.typeMeta, this.secret.objectMeta); this.http_ .put(url, resource, {headers: this.getHttpHeaders_(), responseType: 'text'}) @@ -78,26 +80,26 @@ export class SecretDetailEditComponent implements OnInit { this.onClose.emit(true); } - updateText(): void { - this.text = this.secret && this.key ? this.decode(this.secret.data[this.key]) : ''; - } - - getHttpHeaders_(): HttpHeaders { - const headers = new HttpHeaders(); - headers.set('Content-Type', 'application/json'); - headers.set('Accept', 'application/json'); - return headers; + private updateText_(): void { + this.text = this.secret && this.key ? this.decode_(this.secret.data[this.key]) : ''; } - decode(s: string): string { + private decode_(s: string): string { return atob(s); } - encode(s: string): string { + private encode_(s: string): string { return btoa(s); } - handleErrorResponse_(err: HttpErrorResponse): void { + private getHttpHeaders_(): HttpHeaders { + const headers = new HttpHeaders(); + headers.set('Content-Type', 'application/json'); + headers.set('Accept', 'application/json'); + return headers; + } + + private handleErrorResponse_(err: HttpErrorResponse): void { if (err) { const alertDialogConfig: MatDialogConfig = { width: '630px', diff --git a/src/app/frontend/resource/config/secret/detail/edit/style.scss b/src/app/frontend/resource/config/secret/detail/edit/style.scss index 5106c57a0760..7474c7aa4425 100644 --- a/src/app/frontend/resource/config/secret/detail/edit/style.scss +++ b/src/app/frontend/resource/config/secret/detail/edit/style.scss @@ -15,8 +15,13 @@ @import '../../../../../variables'; @import '../../../../../mixins'; -.kd-secret-detail-edit-container { - margin-top: $baseline-grid / 2; +.kd-secret-detail-text { + width: 100%; + + .mat-input-element { + font-family: $font-family-monospace; + font-size: $body-font-size-base; + } } .kd-secret-detail-actions { diff --git a/src/app/frontend/resource/config/secret/detail/edit/template.html b/src/app/frontend/resource/config/secret/detail/edit/template.html index c5e34a96fc08..6b074cc88593 100644 --- a/src/app/frontend/resource/config/secret/detail/edit/template.html +++ b/src/app/frontend/resource/config/secret/detail/edit/template.html @@ -16,10 +16,13 @@
- + + +
-
{{key}}
-
+
{{decode(secret?.data[key])}}
+
+ [editing]="property.mode == HiddenPropertyMode.Edit" + (onClose)="property.mode = HiddenPropertyMode.Hidden">
{{decode(secret?.data[key]).length}} bytes