Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-30 23:01:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Sylvie Crowe 2025-01-16 18:33:50 -08:00 committed by GitHub
parent f35375ee1a
commit 618f5f879c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/app/block/block.scss
View File

@ -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;
}
}
}
}

30
frontend/app/block/blockframe.tsx
View File

@ -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