From 9e199aaacb1192650b05a4db62f31030d0eed9b4 Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Wed, 15 Jan 2025 10:33:07 -0800 Subject: [PATCH 1/4] fix: allow the ssh error popup to scroll Previously, the ssh error popup would show a small portion of the error message ending in ellipses. This extends it so it can cover multiple lines. Additionally, it puts a max height on the component and allow the text to be scrolled if it exceeds that. --- frontend/app/block/block.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index 87c5c645b7..6c4ea9238c 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -336,9 +336,11 @@ gap: 4px; flex-grow: 1; width: 100%; + text-wrap: wrap; + overflow: auto; + max-height: 80px; .connstatus-status-text { - @include mixins.ellipsis(); max-width: 100%; font-size: 11px; font-style: normal; @@ -349,7 +351,6 @@ } .connstatus-error { - @include mixins.ellipsis(); width: 94%; font-size: 11px; font-style: normal; From 681229659d208d3c9c2890ef62599214d7491a29 Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Wed, 15 Jan 2025 16:57:04 -0800 Subject: [PATCH 2/4] fix: add copy button for connection error --- frontend/app/block/block.scss | 29 ++++++++++++++++++++++++----- frontend/app/block/blockframe.tsx | 24 +++++++++++++++--------- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index 6c4ea9238c..eb91943a0f 100644 --- 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; @@ -336,9 +335,6 @@ gap: 4px; flex-grow: 1; width: 100%; - text-wrap: wrap; - overflow: auto; - max-height: 80px; .connstatus-status-text { max-width: 100%; @@ -351,12 +347,35 @@ } .connstatus-error { - 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; + 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 index e9f997e5ea..7fd5e3272c 100644 --- 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; @@ -431,15 +433,19 @@ const ConnStatusOverlay = React.memo( {showIcon && }
{statusText}
- {showError ?
error: {connStatus.error}
: null} - {showWshError ? ( -
unable to use wsh: {connStatus.wsherror}
- ) : null} - {showWshError && ( - - )} + + {}} title="Copy" /> + {showError ?
error: {connStatus.error}
: null} + {showWshError ?
unable to use wsh: {connStatus.wsherror}
: null} + {showWshError && ( + + )} +
{showReconnect ? ( From 6f084b2a423ff960c0f9540edebe574f70fa2d5a Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Wed, 15 Jan 2025 17:34:21 -0800 Subject: [PATCH 3/4] feat: implement copy behavior --- frontend/app/block/blockframe.tsx | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index 7fd5e3272c..2a14446b74 100644 --- a/frontend/app/block/blockframe.tsx +++ b/frontend/app/block/blockframe.tsx @@ -422,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; } @@ -437,15 +453,15 @@ const ConnStatusOverlay = React.memo( className="connstatus-error" options={{ scrollbars: { autoHide: "leave" } }} > - {}} title="Copy" /> + {showError ?
error: {connStatus.error}
: null} {showWshError ?
unable to use wsh: {connStatus.wsherror}
: null} - {showWshError && ( - - )} + {showWshError && ( + + )} {showReconnect ? ( From f029d9a742f4419746053dfb21e813d8262dbb59 Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Thu, 16 Jan 2025 18:29:13 -0800 Subject: [PATCH 4/4] fix: error message alignment with title --- frontend/app/block/block.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index eb91943a0f..4096e2acc8 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -356,6 +356,7 @@ max-height: 80px; border-radius: 8px; padding: 5px; + padding-left: 0; position: relative; .copy-button {