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>

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;

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 => {
+          pod.getSecrets().map(secretName => {
+            const secret = this.secrets.get(secretName);
+
+            if (secret) {
+              return this.renderSecretLink(secret);
+            } else {
               return (
-              <Link key={secret.getId()} to={getDetailsUrl(secret.selfLink)}>
-                {secret.getName()}
-              </Link>
+                <span key={secretName}>{secretName}</span>
               );
+            }
           })
         }
       </div>
     );
   }
+
+  protected renderSecretLink(secret: Secret) {
+    return (
+      <Link key={secret.getId()} to={getDetailsUrl(secret.selfLink)}>
+        {secret.getName()}
+      </Link>
+    );
+  }
 }