From 25a7403f3c05ecf6083c00c97da9d8b671c9d4e6 Mon Sep 17 00:00:00 2001
From: Lauri Nevala <lauri.nevala@gmail.com>
Date: Wed, 3 Mar 2021 15:40:19 +0200
Subject: [PATCH] Render only secret name on pod details without access to
 secrets (#2244)

* Render only secret name on pod details without access to secrets

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

* Preserving layout when amount of secrets passed

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Refactor secrets to observable map

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+workloads-pods/pod-details-secrets.scss  |  4 +--
 .../+workloads-pods/pod-details-secrets.tsx   | 32 ++++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/+workloads-pods/pod-details-secrets.scss b/src/renderer/components/+workloads-pods/pod-details-secrets.scss
index d1ee08c51b..f20aced60d 100644
--- a/src/renderer/components/+workloads-pods/pod-details-secrets.scss
+++ b/src/renderer/components/+workloads-pods/pod-details-secrets.scss
@@ -1,7 +1,7 @@
 .PodDetailsSecrets {
-  a {
+  > * {
     display: block;
-    margin-bottom: $margin;
+    margin-bottom: var(--margin);
 
     &:last-child {
       margin-bottom: 0;
diff --git a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
index af1515c1b4..b2c7cd14c3 100644
--- a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx
@@ -13,33 +13,49 @@ interface Props {
 
 @observer
 export class PodDetailsSecrets extends Component<Props> {
-  @observable secrets: Secret[] = [];
+  @observable secrets: Map<string, Secret> = observable.map<string, Secret>();
 
   @disposeOnUnmount
   secretsLoader = autorun(async () => {
     const { pod } = this.props;
 
-    this.secrets = await Promise.all(
+    const secrets = await Promise.all(
       pod.getSecrets().map(secretName => secretsApi.get({
         name: secretName,
         namespace: pod.getNs(),
       }))
     );
+
+    secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
   });
 
   render() {
+    const { pod } = this.props;
+
     return (
       <div className="PodDetailsSecrets">
         {
-          this.secrets.map(secret => {
-            return (
-              <Link key={secret.getId()} to={getDetailsUrl(secret.selfLink)}>
-                {secret.getName()}
-              </Link>
-            );
+          pod.getSecrets().map(secretName => {
+            const secret = this.secrets.get(secretName);
+
+            if (secret) {
+              return this.renderSecretLink(secret);
+            } else {
+              return (
+                <span key={secretName}>{secretName}</span>
+              );
+            }
           })
         }
       </div>
     );
   }
+
+  protected renderSecretLink(secret: Secret) {
+    return (
+      <Link key={secret.getId()} to={getDetailsUrl(secret.selfLink)}>
+        {secret.getName()}
+      </Link>
+    );
+  }
 }