From c20f74f58260581772690f44196012cdb5409661 Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Mon, 10 Jan 2022 10:01:52 +0200
Subject: [PATCH] mizu enterprise ui bugs (#597)

---
 .../components/SettingsModal/SettingModal.tsx |  4 ++-
 ui/src/components/UI/StatusBar.tsx            | 12 ++++-----
 ui/src/components/UI/style/StatusBar.sass     | 27 +++++++++++++------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx
index a139a4678..cec95f88c 100644
--- a/ui/src/components/SettingsModal/SettingModal.tsx
+++ b/ui/src/components/SettingsModal/SettingModal.tsx
@@ -24,8 +24,10 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
     const [searchValue, setSearchValue] = useState("");
 
     useEffect(() => {
+        if(!isOpen) return;
         (async () => {
             try {
+                setSearchValue("");
                 setIsLoading(true);
                 const tapConfig = await api.getTapConfig()
                 if(isFirstLogin) {
@@ -43,7 +45,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                 setIsLoading(false);
             }
         })()
-    }, [isFirstLogin])
+    }, [isFirstLogin, isOpen])
 
     const setAllNamespacesTappedValue = (isTap: boolean) => {
         const newNamespaces = {};
diff --git a/ui/src/components/UI/StatusBar.tsx b/ui/src/components/UI/StatusBar.tsx
index d8f71b48b..f34ad0d12 100644
--- a/ui/src/components/UI/StatusBar.tsx
+++ b/ui/src/components/UI/StatusBar.tsx
@@ -39,16 +39,16 @@ export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
             <table>
                 <thead>
                     <tr>
-                        <th>Pod name</th>
-                        <th>Namespace</th>
-                        <th style={{marginLeft: 10}}>Tapping</th>
+                        <th style={{width: "40%"}}>Pod name</th>
+                        <th style={{width: "40%"}}>Namespace</th>
+                        <th style={{width: "20%", textAlign: "center"}}>Tapping</th>
                     </tr>
                 </thead>
                 <tbody>
                     {tappingStatus.map(pod => <tr key={pod.name}>
-                        <td>{pod.name}</td>
-                        <td>{pod.namespace}</td>
-                        <td style={{textAlign: "center"}}><img style={{height: 20}} alt="status" src={pod.isTapped ? successIcon : failIcon}/></td>
+                        <td style={{width: "40%"}}>{pod.name}</td>
+                        <td style={{width: "40%"}}>{pod.namespace}</td>
+                        <td style={{width: "20%", textAlign: "center"}}><img style={{height: 20}} alt="status" src={pod.isTapped ? successIcon : failIcon}/></td>
                     </tr>)}
                 </tbody>
             </table>
diff --git a/ui/src/components/UI/style/StatusBar.sass b/ui/src/components/UI/style/StatusBar.sass
index f6e66624c..043a8b2e7 100644
--- a/ui/src/components/UI/style/StatusBar.sass
+++ b/ui/src/components/UI/style/StatusBar.sass
@@ -11,7 +11,7 @@
     border-bottom-left-radius: 8px
     border-bottom-right-radius: 8px
     top: 0
-    padding: 2px 10px
+    padding: 10px
     font-size: 14px
     transition: max-height 2s ease-out
     width: auto
@@ -21,19 +21,30 @@
     .podsCount
         display: flex
         justify-content: center
-        padding: 8px
         font-weight: 600
 
         img
             margin-right: 10px
             height: 22px
 
-    th
-        text-align: left
-        padding-right: 15px
-    td
-        padding-right: 15px
-        padding-top: 5px
+    table
+        width: 100%
+        margin-top: 20px
+        
+        tbody
+            max-height: 70vh
+            overflow-y: auto
+            display: block
+        tr
+            display: table
+            table-layout: fixed
+            width: 100%
+        th
+            text-align: left
+            padding-right: 5%
+        td
+            text-align: left
+            padding-right: 5%
 
 .expandedStatusBar
     max-height: 100vh