From 336bbad922bf92ff9296a74f8ebbfd19663ca904 Mon Sep 17 00:00:00 2001
From: Mike Ellan <52717970+sonicyeti@users.noreply.github.com>
Date: Fri, 18 Sep 2020 16:58:06 -0400
Subject: [PATCH] Section visibility toggle (#2634)

* Moving click handler up to parent item, preventing dupe calls on checkbox

* Alignment and setting CBs to read only

* Label alignment when sibling of input

Co-authored-by: Opender Singh <opender94@gmail.com>
---
 .../components/dropdown/dropdown-item.js      |  6 +-
 .../components/sidebar/index.js               | 60 +++++--------------
 2 files changed, 21 insertions(+), 45 deletions(-)

diff --git a/packages/insomnia-components/components/dropdown/dropdown-item.js b/packages/insomnia-components/components/dropdown/dropdown-item.js
index 8daa27d442..f4245c604d 100644
--- a/packages/insomnia-components/components/dropdown/dropdown-item.js
+++ b/packages/insomnia-components/components/dropdown/dropdown-item.js
@@ -50,10 +50,14 @@ const StyledInner = styled.div`
 
 const StyledText = styled.div`
   white-space: nowrap;
-
+  display: flex;
+  align-items: center;
   & > *:not(:first-child) {
     margin-left: 0.3em;
   }
+  input + label {
+    padding-top: 0px !important;
+  }
 `;
 
 const StyledIconContainer = styled.div`
diff --git a/packages/insomnia-components/components/sidebar/index.js b/packages/insomnia-components/components/sidebar/index.js
index bea0ccd79d..27072f2ca7 100644
--- a/packages/insomnia-components/components/sidebar/index.js
+++ b/packages/insomnia-components/components/sidebar/index.js
@@ -92,64 +92,36 @@ function Sidebar(props: Props) {
           <SidebarHeader headerTitle="INFO" sectionVisible={infoSec} toggleSection={setInfoSec}>
             <Dropdown renderButton={DropdownEllipsis}>
               <DropdownDivider>VISIBILITY</DropdownDivider>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setServersVisible}
-                  defaultChecked={serversVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setServersVisible}>
+                <input type="checkbox" checked={serversVisible} readOnly />
                 <label htmlFor="servers">Servers</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input type="checkbox" onClick={setPathsVisible} defaultChecked={pathsVisible} />
+              <DropdownItem stayOpenAfterClick onClick={setPathsVisible}>
+                <input type="checkbox" checked={pathsVisible} readOnly />
                 <label htmlFor="paths">Paths</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setRequestsVisible}
-                  defaultChecked={requestsVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setRequestsVisible}>
+                <input type="checkbox" checked={requestsVisible} readOnly />
                 <label htmlFor="requests">Requests</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setResponsesVisible}
-                  defaultChecked={responsesVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setResponsesVisible}>
+                <input type="checkbox" checked={responsesVisible} readOnly />
                 <label htmlFor="responses">Responses</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setParametersVisible}
-                  defaultChecked={parametersVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setParametersVisible}>
+                <input type="checkbox" checked={parametersVisible} readOnly />
                 <label htmlFor="parameters">Parameters</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setHeadersVisible}
-                  defaultChecked={headersVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setHeadersVisible}>
+                <input type="checkbox" checked={headersVisible} readOnly />
                 <label htmlFor="headers">Headers</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setSchemasVisible}
-                  defaultChecked={schemasVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setSchemasVisible}>
+                <input type="checkbox" checked={schemasVisible} readOnly />
                 <label htmlFor="schemas">Schemas</label>
               </DropdownItem>
-              <DropdownItem stayOpenAfterClick>
-                <input
-                  type="checkbox"
-                  onClick={setSecurityVisible}
-                  defaultChecked={securityVisible}
-                />
+              <DropdownItem stayOpenAfterClick onClick={setSecurityVisible}>
+                <input type="checkbox" checked={securityVisible} readOnly />
                 <label htmlFor="security">Security</label>
               </DropdownItem>
             </Dropdown>