Add ConnectionPanel back action

2 files changed, 30 insertions, 29 deletions

diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index fc11e54699..8ed3caa540 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -25,12 +25,10 @@ export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
     (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         const path = location.pathname as RoutePath;
-        if (!disableDismissForRoutes.includes(path)) {
-          if (event.shiftKey) {
-            history.pop(true);
-          } else {
-            backAction?.();
-          }
+        if (event.shiftKey && !disableDismissForRoutes.includes(path)) {
+          history.pop(true);
+        } else {
+          backAction?.();
         }
       }
     },
diff --git a/gui/src/renderer/components/main-view/ConnectionPanel.tsx b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
index 1d5c549254..8754547e1f 100644
--- a/gui/src/renderer/components/main-view/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { useBoolean } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import CustomScrollbars from '../CustomScrollbars';
+import { BackAction } from '../KeyboardNavigation';
 import ConnectionActionButton from './ConnectionActionButton';
 import ConnectionDetails from './ConnectionDetails';
 import ConnectionPanelChevron from './ConnectionPanelChevron';
@@ -86,28 +87,30 @@ export default function ConnectionPanel() {
   useEffect(collapse, [tunnelState.state, collapse]);
 
   return (
-    <StyledConnectionPanel $expanded={expanded}>
-      {allowExpand && (
-        <StyledConnectionPanelChevron pointsUp={!expanded} onToggle={toggleExpanded} />
-      )}
-      <StyledConnectionStatusContainer
-        $expanded={expanded}
-        $hasFeatureIndicators={hasFeatureIndicators}
-        onClick={toggleExpanded}>
-        <ConnectionStatus />
-        <Location />
-        <Hostname />
-      </StyledConnectionStatusContainer>
-      <StyledCustomScrollbars>
-        <FeatureIndicators expanded={expanded} expandIsland={expand} />
-        <StyledAccordion expanded={expanded}>
-          <ConnectionDetails />
-        </StyledAccordion>
-      </StyledCustomScrollbars>
-      <StyledConnectionButtonContainer>
-        <SelectLocationButton />
-        <ConnectionActionButton />
-      </StyledConnectionButtonContainer>
-    </StyledConnectionPanel>
+    <BackAction disabled={!expanded} action={collapse}>
+      <StyledConnectionPanel $expanded={expanded}>
+        {allowExpand && (
+          <StyledConnectionPanelChevron pointsUp={!expanded} onToggle={toggleExpanded} />
+        )}
+        <StyledConnectionStatusContainer
+          $expanded={expanded}
+          $hasFeatureIndicators={hasFeatureIndicators}
+          onClick={toggleExpanded}>
+          <ConnectionStatus />
+          <Location />
+          <Hostname />
+        </StyledConnectionStatusContainer>
+        <StyledCustomScrollbars>
+          <FeatureIndicators expanded={expanded} expandIsland={expand} />
+          <StyledAccordion expanded={expanded}>
+            <ConnectionDetails />
+          </StyledAccordion>
+        </StyledCustomScrollbars>
+        <StyledConnectionButtonContainer>
+          <SelectLocationButton />
+          <ConnectionActionButton />
+        </StyledConnectionButtonContainer>
+      </StyledConnectionPanel>
+    </BackAction>
   );
 }