Inline edit secret enhancements (kubernetes#5046)

* Completed toggling between visible read-only and edit for inline secret. * Changed inline edit button for secret to blue with border. * Added auto-size textarea for multi-line and input for single line secret editing. * Ran fontend fixes. * Added enableEdit flag to HiddenPropertyComponent. * Improve styling and behavior Co-authored-by: Sebastian Florek <[email protected]>
namgon-kim · Apr 3, 2020 · cb2c4cc · cb2c4cc
1 parent 5246b8c
commit cb2c4cc
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 68 deletions.
diff --git a/i18n/de/messages.de.xlf b/i18n/de/messages.de.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4559,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/fr/messages.fr.xlf b/i18n/fr/messages.fr.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4573,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/ja/messages.ja.xlf b/i18n/ja/messages.ja.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4543,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/ko/messages.ko.xlf b/i18n/ko/messages.ko.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4674,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/messages.xlf b/i18n/messages.xlf
@@ -32,7 +32,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -47,7 +47,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -3253,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5927a3493fbb556db65f530e01b3aa6ab9f186e6" datatype="html">

diff --git a/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf b/i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4677,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/zh-Hans/messages.zh-Hans.xlf b/i18n/zh-Hans/messages.zh-Hans.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4677,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf b/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4681,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/zh-Hant/messages.zh-Hant.xlf b/i18n/zh-Hant/messages.zh-Hant.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4681,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git a/i18n/zh/messages.zh.xlf b/i18n/zh/messages.zh.xlf
@@ -35,7 +35,7 @@
         </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 context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7b35c384aecd25a516200d6921836374613dfe7" datatype="html">
@@ -51,7 +51,7 @@
         </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 context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/create/from/form/createnamespace/template.html</context>
@@ -4677,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">37</context>
+          <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eeff8ad50c095fe47ae84d4ee2536b0e191c256d" datatype="html">

diff --git 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
@@ -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
@@ -19,22 +19,30 @@
        fxLayout="row"
        fxLayoutAlign=" center"
        class="kd-hidden-property-key kd-clickable"
-       (click)="hidden = !hidden">
+       (click)="toggleVisible()">
     <ng-content select="[key]"></ng-content>
     <mat-icon class="kd-hidden-property-icon">
-      <ng-container *ngIf="hidden">visibility</ng-container>
-      <ng-container *ngIf="!hidden">visibility_off</ng-container>
+      <ng-container *ngIf="mode == HiddenPropertyMode.Hidden">visibility</ng-container>
+      <ng-container *ngIf="mode != HiddenPropertyMode.Hidden">visibility_off</ng-container>
     </mat-icon>
+    <mat-icon *ngIf="enableEdit"
+              class="kd-hidden-property-icon"
+              [ngClass]="mode == HiddenPropertyMode.Edit ? 'kd-edit-active' : ''"
+              (click)="toggleEdit(); $event.stopPropagation();">edit</mat-icon>
   </div>
   <div value>
 
-    <div [hidden]="!hidden">
+    <div [hidden]="mode != HiddenPropertyMode.Hidden">
       <ng-content select="[whenHidden]"></ng-content>
     </div>
 
-    <div [hidden]="hidden">
+    <div [hidden]="mode != HiddenPropertyMode.Visible">
       <ng-content select="[whenVisible]"></ng-content>
     </div>
 
+    <div [hidden]="mode != HiddenPropertyMode.Edit">
+      <ng-content select="[whenEdit]"></ng-content>
+    </div>
+
   </div>
 </kd-property>
diff --git 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;
+  }
+}