From 1601f1117dd19083d19f4528329e1edbbe1ed684 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 17 Jun 2022 11:11:48 -0400
Subject: [PATCH] Fix pod-details-tolerations

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../drawer-param-toggler.test.tsx.snap        | 26 ++++++++++++-------
 ....module.scss => drawer-param-toggler.scss} | 14 ++++++----
 .../drawer/drawer-param-toggler.tsx           | 19 +++++++-------
 3 files changed, 34 insertions(+), 25 deletions(-)
 rename src/renderer/components/drawer/{drawer-param-toggler.module.scss => drawer-param-toggler.scss} (68%)

diff --git a/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap b/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap
index 3740e22567..7b4c9c22e4 100644
--- a/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap
+++ b/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap
@@ -10,16 +10,16 @@ exports[`<DrawerParamToggler /> after clicking the toggle after clicking the tog
         class="flex gaps align-center params"
       >
         <div
-          class="label"
+          class="param-label"
         >
           Foo
         </div>
         <div
-          class="link"
+          class="param-link"
           data-testid="drawer-param-toggler"
         >
           <span
-            class="linkText"
+            class="param-link-text"
           >
             Show
           </span>
@@ -35,6 +35,9 @@ exports[`<DrawerParamToggler /> after clicking the toggle after clicking the tog
           </i>
         </div>
       </div>
+      <div
+        class="param-content"
+      />
     </div>
   </div>
 </body>
@@ -50,16 +53,16 @@ exports[`<DrawerParamToggler /> after clicking the toggle renders 1`] = `
         class="flex gaps align-center params"
       >
         <div
-          class="label"
+          class="param-label"
         >
           Foo
         </div>
         <div
-          class="link"
+          class="param-link"
           data-testid="drawer-param-toggler"
         >
           <span
-            class="linkText"
+            class="param-link-text"
           >
             Hide
           </span>
@@ -76,7 +79,7 @@ exports[`<DrawerParamToggler /> after clicking the toggle renders 1`] = `
         </div>
       </div>
       <div
-        class="content"
+        class="param-content open"
       >
         <div
           data-testid="drawer-child"
@@ -97,16 +100,16 @@ exports[`<DrawerParamToggler /> renders 1`] = `
         class="flex gaps align-center params"
       >
         <div
-          class="label"
+          class="param-label"
         >
           Foo
         </div>
         <div
-          class="link"
+          class="param-link"
           data-testid="drawer-param-toggler"
         >
           <span
-            class="linkText"
+            class="param-link-text"
           >
             Show
           </span>
@@ -122,6 +125,9 @@ exports[`<DrawerParamToggler /> renders 1`] = `
           </i>
         </div>
       </div>
+      <div
+        class="param-content"
+      />
     </div>
   </div>
 </body>
diff --git a/src/renderer/components/drawer/drawer-param-toggler.module.scss b/src/renderer/components/drawer/drawer-param-toggler.scss
similarity index 68%
rename from src/renderer/components/drawer/drawer-param-toggler.module.scss
rename to src/renderer/components/drawer/drawer-param-toggler.scss
index f992c9ffb1..a090575e5b 100644
--- a/src/renderer/components/drawer/drawer-param-toggler.module.scss
+++ b/src/renderer/components/drawer/drawer-param-toggler.scss
@@ -4,20 +4,24 @@
  */
 
 .DrawerParamToggler {
-  .label {
+  .param-label {
     flex-grow: 2
   }
 
-  .link {
+  .param-link {
     cursor: pointer;
 
-    .linkText {
+    .param-link-text {
       color: var(--blue);
       text-decoration: underline;
     }
   }
 
-  .content {
-    display: block;
+  .param-content {
+    &.open {
+      display: block;
+    }
+
+    display: none;
   }
 }
diff --git a/src/renderer/components/drawer/drawer-param-toggler.tsx b/src/renderer/components/drawer/drawer-param-toggler.tsx
index ddd502efcd..42d4c056e9 100644
--- a/src/renderer/components/drawer/drawer-param-toggler.tsx
+++ b/src/renderer/components/drawer/drawer-param-toggler.tsx
@@ -3,9 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import styles from "./drawer-param-toggler.module.scss";
+import "./drawer-param-toggler.scss";
 import React from "react";
 import { Icon } from "../icon";
+import { cssNames } from "../../utils";
 
 export interface DrawerParamTogglerProps {
   label: string | number;
@@ -29,23 +30,21 @@ export class DrawerParamToggler extends React.Component<DrawerParamTogglerProps,
     const link = open ? `Hide` : `Show`;
 
     return (
-      <div className={styles.DrawerParamToggler}>
+      <div className="DrawerParamToggler">
         <div className="flex gaps align-center params">
-          <div className={styles.label}>{label}</div>
+          <div className="param-label">{label}</div>
           <div
-            className={styles.link}
+            className="param-link"
             onClick={this.toggle}
             data-testid="drawer-param-toggler"
           >
-            <span className={styles.linkText}>{link}</span>
+            <span className="param-link-text">{link}</span>
             <Icon material={icon}/>
           </div>
         </div>
-        {open && (
-          <div className={styles.content}>
-            {children}
-          </div>
-        )}
+        <div className={cssNames("param-content", { open })}>
+          {open && children}
+        </div>
       </div>
     );
   }