Add a Scrollbar to the SSH Error Popup (#1741)

This modifies the SSH error popup in the following ways: - adds a scrollbar to the error message so it is easily viewed - overlays a copy button so it's easy to copy
wavetermdev · Jan 17, 2025 · 618f5f8 · 618f5f8
1 parent f35375e
commit 618f5f8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss
@@ -309,7 +309,6 @@
                 width: 100%;
                 font: var(--base-font);
                 color: var(--secondary-text-color);
-                gap: 12px;
 
                 .connstatus-status-icon-wrapper {
                     display: flex;
@@ -338,7 +337,6 @@
                         width: 100%;
 
                         .connstatus-status-text {
-                            @include mixins.ellipsis();
                             max-width: 100%;
                             font-size: 11px;
                             font-style: normal;
@@ -349,13 +347,36 @@
                         }
 
                         .connstatus-error {
-                            @include mixins.ellipsis();
-                            width: 94%;
                             font-size: 11px;
                             font-style: normal;
                             font-weight: 400;
                             line-height: 15px;
                             letter-spacing: 0.11px;
+                            text-wrap: wrap;
+                            max-height: 80px;
+                            border-radius: 8px;
+                            padding: 5px;
+                            padding-left: 0;
+                            position: relative;
+
+                            .copy-button {
+                                visibility: hidden;
+                                display: flex;
+                                position: sticky;
+                                top: 0;
+                                right: 4px;
+                                float: right;
+                                border-radius: 4px;
+                                backdrop-filter: blur(8px);
+                                padding: 0.286em;
+                                align-items: center;
+                                justify-content: flex-end;
+                                gap: 0.286em;
+                            }
+
+                            &:hover .copy-button {
+                                visibility: visible;
+                            }
                         }
                     }
                 }

diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
@@ -38,7 +38,9 @@ import * as keyutil from "@/util/keyutil";
 import * as util from "@/util/util";
 import clsx from "clsx";
 import * as jotai from "jotai";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import * as React from "react";
+import { CopyButton } from "../element/copybutton";
 import { BlockFrameProps } from "./blocktypes";
 
 const NumActiveConnColors = 8;
@@ -420,6 +422,22 @@ const ConnStatusOverlay = React.memo(
             setShowWshError(showWshErrorTemp);
         }, [connStatus, wshConfigEnabled]);
 
+        const errorText = React.useMemo(() => {
+            const errTexts = [];
+            if (showError) {
+                errTexts.push(`error: ${connStatus.error}`);
+            }
+            if (showWshError) {
+                errTexts.push(`unable to use wsh: ${connStatus.error}`);
+            }
+            return errTexts.join("\n");
+        }, [showError, connStatus.error, showWshError, connStatus.wsherror]);
+
+        const handleCopy = async (e: React.MouseEvent) => {
+            let textToCopy = errorText;
+            await navigator.clipboard.writeText(textToCopy);
+        };
+
         if (!showWshError && (isLayoutMode || connStatus.status == "connected" || connModalOpen)) {
             return null;
         }
@@ -431,10 +449,14 @@ const ConnStatusOverlay = React.memo(
                         {showIcon && <i className="fa-solid fa-triangle-exclamation"></i>}
                         <div className="connstatus-status">
                             <div className="connstatus-status-text">{statusText}</div>
-                            {showError ? <div className="connstatus-error">error: {connStatus.error}</div> : null}
-                            {showWshError ? (
-                                <div className="connstatus-error">unable to use wsh: {connStatus.wsherror}</div>
-                            ) : null}
+                            <OverlayScrollbarsComponent
+                                className="connstatus-error"
+                                options={{ scrollbars: { autoHide: "leave" } }}
+                            >
+                                <CopyButton className="copy-button" onClick={handleCopy} title="Copy" />
+                                {showError ? <div>error: {connStatus.error}</div> : null}
+                                {showWshError ? <div>unable to use wsh: {connStatus.wsherror}</div> : null}
+                            </OverlayScrollbarsComponent>
                             {showWshError && (
                                 <Button className={reconClassName} onClick={handleDisableWsh}>
                                     always disable wsh