Implemented inline editing for data entries on Secrets page. (#5040)

* Implemented inline editing for data entries on Secrets page.

* Fixed cancelling inline edit of secret data not returning to original.

* Added ending newline to style.scss.

* Fixed CSS property sort order, and applying update to current page with secret.

* Fixed HTML alignment for build.

i18n/de/messages.de.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4551,7 +4559,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/fr/messages.fr.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4565,7 +4573,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/ja/messages.ja.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4535,7 +4543,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/ko/messages.ko.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4666,7 +4674,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/messages.xlf

@@ -30,6 +30,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -41,6 +45,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -3245,7 +3253,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5927a3493fbb556db65f530e01b3aa6ab9f186e6" datatype="html">

i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4669,7 +4677,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/zh-Hans/messages.zh-Hans.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4669,7 +4677,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4673,7 +4681,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/zh-Hant/messages.zh-Hant.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4673,7 +4681,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

i18n/zh/messages.zh.xlf

@@ -33,6 +33,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/editresource/template.html</context>
           <context context-type="linenumber">43</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
         <source>Cancel</source>
@@ -45,6 +49,10 @@
           <context context-type="sourcefile">../src/app/frontend/common/dialogs/deleteresource/template.html</context>
           <context context-type="linenumber">49</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/edit/template.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
           <context context-type="linenumber">72</context>
@@ -4669,7 +4677,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/resource/config/secret/detail/template.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

src/app/frontend/resource/config/secret/detail/edit/component.ts

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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, Input, EventEmitter, Output} from '@angular/core';
+import {SecretDetail} from '@api/backendapi';
+import {RawResource} from 'common/resources/rawresource';
+import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
+import {AlertDialogConfig, AlertDialog} from 'common/dialogs/alert/dialog';
+import {MatDialogConfig, MatDialog} from '@angular/material/dialog';
+
+@Component({
+  selector: 'kd-secret-detail-edit',
+  templateUrl: './template.html',
+  styleUrls: ['./style.scss'],
+})
+export class SecretDetailEditComponent implements OnInit {
+  @Output() onClose = new EventEmitter<boolean>();
+  @Input() set editing(value: boolean) {
+    this.editing_ = value;
+    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();
+  }
+
+  update(): void {
+    // Get the latest raw resource, and update it.
+    const url = RawResource.getUrl(this.secret.typeMeta, this.secret.objectMeta);
+    this.http_
+      .get(url)
+      .toPromise()
+      .then((resource: any) => {
+        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'})
+          .subscribe(() => {
+            // Update current data value for secret, so refresh isn't needed.
+            this.secret_.data[this.key] = dataValue;
+            this.onClose.emit(true);
+          }, this.handleErrorResponse_.bind(this));
+      });
+  }
+
+  cancel(): void {
+    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;
+  }
+
+  decode(s: string): string {
+    return atob(s);
+  }
+
+  encode(s: string): string {
+    return btoa(s);
+  }
+
+  handleErrorResponse_(err: HttpErrorResponse): void {
+    if (err) {
+      const alertDialogConfig: MatDialogConfig<AlertDialogConfig> = {
+        width: '630px',
+        data: {
+          title: err.statusText === 'OK' ? 'Internal server error' : err.statusText,
+          message: err.error || 'Could not perform the operation.',
+          confirmLabel: 'OK',
+        },
+      };
+      this.dialog_.open(AlertDialog, alertDialogConfig);
+    }
+  }
+}

src/app/frontend/resource/config/secret/detail/edit/style.scss

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 '../../../../../variables';
+@import '../../../../../mixins';
+
+.kd-secret-detail-edit-container {
+  margin-top: $baseline-grid / 2;
+}
+
+.kd-secret-detail-actions {
+  min-height: $baseline-grid * 6.5;
+  padding: $baseline-grid 0;
+}

src/app/frontend/resource/config/secret/detail/edit/template.html

+<!--
+Copyright 2017 The Kubernetes Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+-->
+
+<div class="kd-secret-detail-edit-container"
+     *ngIf="secret">
+  <kd-text-input [(text)]="text"
+                 [border]="false"></kd-text-input>
+  <div class="kd-secret-detail-actions">
+    <button mat-button
+            color="primary"
+            id="confirm-edit"
+            (click)="update()"
+            i18n>Update</button>
+    <button mat-button
+            color="primary"
+            (click)="cancel()"
+            i18n>Cancel</button>
+  </div>
+</div>

src/app/frontend/resource/config/secret/detail/template.html

@@ -21,10 +21,16 @@ limitations under the License.
   <div title
        i18n>Data</div>
   <div content>
-    <kd-hidden-property *ngFor="let key of getDataKeys()">
+    <kd-hidden-property *ngFor="let key of getDataKeys()"
+                        #property>
       <div key>{{key}}</div>
-      <div whenVisible
-           class="kd-code-block">{{decode(secret?.data[key])}}</div>
+      <div whenVisible>
+        <kd-secret-detail-edit [secret]="secret"
+                               [key]="key"
+                               [editing]="!property.hidden"
+                               (onClose)="property.hidden = true">
+        </kd-secret-detail-edit>
+      </div>
       <div whenHidden>{{decode(secret?.data[key]).length}} bytes</div>
     </kd-hidden-property>
     <ng-container *ngIf="!secret?.data"

src/app/frontend/resource/config/secret/module.ts

@@ -18,11 +18,12 @@ import {ComponentsModule} from '../../../common/components/module';
 import {SharedModule} from '../../../shared.module';
 
 import {SecretDetailComponent} from './detail/component';
+import {SecretDetailEditComponent} from './detail/edit/component';
 import {SecretListComponent} from './list/component';
 import {SecretRoutingModule} from './routing';
 
 @NgModule({
   imports: [SharedModule, ComponentsModule, SecretRoutingModule],
-  declarations: [SecretListComponent, SecretDetailComponent],
+  declarations: [SecretListComponent, SecretDetailComponent, SecretDetailEditComponent],
 })
 export class SecretModule {}