From b8d1ef708ef104b55cf9e649397b18597455f9c7 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 19 Jan 2023 13:27:33 +0300
Subject: [PATCH] Add KubeEventDetails empty placeholder (#6978)

* KubeEventDetails empty placeholder

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

* Updaing snapshots

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

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...when-cluster-is-not-relevant.test.tsx.snap | 21 ++++++++++++++++---
 ...hide-kube-object-detail-item.test.tsx.snap | 14 +++++++++++--
 ...ls.scss => kube-event-details.module.scss} |  8 +++----
 .../components/+events/kube-event-details.tsx | 15 ++++++++-----
 4 files changed, 44 insertions(+), 14 deletions(-)
 rename src/renderer/components/+events/{kube-event-details.scss => kube-event-details.module.scss} (91%)

diff --git a/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap b/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
index 5f9f15db46..6a0943b664 100644
--- a/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -104,12 +104,17 @@ exports[`disable kube object detail items when cluster is not relevant given ext
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -725,12 +730,17 @@ exports[`disable kube object detail items when cluster is not relevant given ext
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -1346,12 +1356,17 @@ exports[`disable kube object detail items when cluster is not relevant given not
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap b/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
index b6c14ca470..578fcae9e9 100644
--- a/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
+++ b/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
@@ -99,12 +99,17 @@ exports[`reactively hide kube object detail item renders 1`] = `
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -725,12 +730,17 @@ exports[`reactively hide kube object detail item when the item is shown renders
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/renderer/components/+events/kube-event-details.scss b/src/renderer/components/+events/kube-event-details.module.scss
similarity index 91%
rename from src/renderer/components/+events/kube-event-details.scss
rename to src/renderer/components/+events/kube-event-details.module.scss
index 4e781eaf2e..4e6b9cd5a0 100644
--- a/src/renderer/components/+events/kube-event-details.scss
+++ b/src/renderer/components/+events/kube-event-details.module.scss
@@ -22,8 +22,8 @@
       }
     }
   }
-
-  .no-items {
-    text-align: center;
-  }
+}
+
+.empty {
+  opacity: 0.6;
 }
diff --git a/src/renderer/components/+events/kube-event-details.tsx b/src/renderer/components/+events/kube-event-details.tsx
index aef3bf7b10..80c6938630 100644
--- a/src/renderer/components/+events/kube-event-details.tsx
+++ b/src/renderer/components/+events/kube-event-details.tsx
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./kube-event-details.scss";
+import styles from "./kube-event-details.module.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
@@ -57,14 +57,14 @@ class NonInjectedKubeEventDetails extends React.Component<KubeEventDetailsProps
 
     return (
       <div>
-        <DrawerTitle className="flex gaps align-center">
+        <DrawerTitle>
           <span>Events</span>
         </DrawerTitle>
         {events.length > 0 && (
-          <div className="KubeEventDetails">
+          <div className={styles.KubeEventDetails}>
             {events.map(event => (
-              <div className="event" key={event.getId()}>
-                <div className={cssNames("title", { warning: event.isWarning() })}>
+              <div className={styles.event} key={event.getId()}>
+                <div className={cssNames(styles.title, { [styles.warning]: event.isWarning() })}>
                   {event.message}
                 </div>
                 <DrawerItem name="Source">
@@ -85,6 +85,11 @@ class NonInjectedKubeEventDetails extends React.Component<KubeEventDetailsProps
             ))}
           </div>
         )}
+        {events.length === 0 && (
+          <div className={styles.empty}>
+            No events found
+          </div>
+        )}
       </div>
     );
   }