From 3939afe468670ca0d8d445e98427defed42c998c Mon Sep 17 00:00:00 2001 From: mikebender Date: Fri, 26 Apr 2024 11:02:23 -0400 Subject: [PATCH] Make it so the error is expanded by default - Will fill the contents of the panel if necessary --- plugins/ui/src/js/src/styles.scss | 113 +++++++++++------- plugins/ui/src/js/src/widget/ErrorView.tsx | 80 ++++++++++--- .../ui/src/js/src/widget/WidgetErrorView.tsx | 4 +- 3 files changed, 136 insertions(+), 61 deletions(-) diff --git a/plugins/ui/src/js/src/styles.scss b/plugins/ui/src/js/src/styles.scss index 520d6b62c..fc690d2dc 100644 --- a/plugins/ui/src/js/src/styles.scss +++ b/plugins/ui/src/js/src/styles.scss @@ -36,6 +36,13 @@ flex-direction: column; gap: $spacer-1; flex-grow: 1; + max-height: 100%; + + .widget-error-view-content { + position: relative; + flex-shrink: 1; + overflow: hidden; + } .widget-error-view-footer { display: flex; @@ -43,11 +50,12 @@ align-items: center; gap: $spacer-1; flex-wrap: wrap; + flex-shrink: 0; } } // TODO: Remove once using the @deephaven/components ErrorView: https://github.com/deephaven/web-client-ui/pull/1965 -.error-view { +.ui-error-view { position: relative; color: $danger; border-radius: $border-radius; @@ -55,60 +63,83 @@ display: flex; flex-direction: column; flex-grow: 0; + font-family: $font-family-monospace; + transition: all $transition ease-in-out; + max-height: 150px; + &.expanded { - flex-grow: 1; + max-height: 100%; } - transition: flex-grow $transition ease-in-out; - font-family: $font-family-monospace; + .error-view-header { + display: flex; + flex-direction: row; + justify-content: space-between; + text-wrap: nowrap; + width: 100%; - label { - display: block; - padding: $spacer; - font-weight: bold; + .error-view-header-text { + display: flex; + flex-direction: row; + align-items: center; + padding-left: $spacer; + padding-right: $spacer; + font-weight: bold; + text-overflow: ellipsis; + flex-shrink: 1; + overflow: hidden; + white-space: nowrap; + + span { + flex-shrink: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-left: $spacer-1; + } + } + + .error-view-buttons { + display: flex; + flex-direction: row; + gap: 1px; + overflow: hidden; + border-radius: 0 $border-radius 0 0; + flex-shrink: 0; + + .btn-danger { + border-radius: 0; + color: $black; + opacity: 0.8; + padding: $spacer-1; + &:active { + color: $black; + } + } + + .error-view-copy-button { + min-width: 3rem; + } + + .error-view-expand-button { + svg { + margin-right: $spacer-1; + } + } + } } - textarea { + .error-view-text { width: 100%; padding: $spacer; + margin-bottom: 0; color: $danger; background-color: transparent; border: 0; resize: none; outline: none; - min-height: 100px; - transition: height $transition ease-in-out; white-space: pre; flex-grow: 1; - } - - .error-view-buttons { - display: flex; - flex-direction: row; - gap: 1px; - position: absolute; - top: 0; - right: 0; - - .btn-danger { - color: $black; - opacity: 0.8; - padding: $spacer-1; - &:active { - color: $black; - } - } - - .error-view-copy-button { - border-radius: 0; - min-width: 3rem; - } - - .error-view-expand-button { - border-radius: 0 $border-radius 0 0; - svg { - margin-right: $spacer-1; - } - } + overflow: auto; } } diff --git a/plugins/ui/src/js/src/widget/ErrorView.tsx b/plugins/ui/src/js/src/widget/ErrorView.tsx index 1a39ba763..ae6347855 100644 --- a/plugins/ui/src/js/src/widget/ErrorView.tsx +++ b/plugins/ui/src/js/src/widget/ErrorView.tsx @@ -1,27 +1,65 @@ -import React, { useState } from 'react'; +import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; import classNames from 'classnames'; -import { Button, CopyButton } from '@deephaven/components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { vsDiffAdded, vsDiffRemoved, vsWarning } from '@deephaven/icons'; +import { + useDebouncedCallback, + useResizeObserver, +} from '@deephaven/react-hooks'; +import { Button, CopyButton } from '@deephaven/components'; export type ErrorViewerProps = { + /** The message to display in the error view */ message: string; + + /** Set to true if you want the error view to display expanded. Will not show the Show More/Less buttons if true. Defaults to false. */ + isExpanded?: boolean; + + /** The type of error message to display in the header. Defaults to Error. */ type?: string; }; /** * Component that displays an error message in a textarea so user can scroll and a copy button. - * TODO: Use the one from @deephaven/components when it's merged: https://github.com/deephaven/web-client-ui/pull/1965 + * TODO: Remove once using the @deephaven/components ErrorView: https://github.com/deephaven/web-client-ui/pull/1965 */ -function ErrorView({ message, type = 'Error' }: ErrorViewerProps): JSX.Element { +function ErrorView({ + message, + isExpanded: isExpandedProp = false, + type = 'Error', +}: ErrorViewerProps): JSX.Element { + const [isExpandable, setIsExpandable] = useState(false); const [isExpanded, setIsExpanded] = useState(false); + const viewRef = useRef(null); + const textareaRef = useRef(null); + + const handleResize = useCallback(() => { + if (isExpanded || textareaRef.current == null) { + return; + } + const newIsExpandable = + textareaRef.current.scrollHeight > textareaRef.current.clientHeight; + setIsExpandable(newIsExpandable); + }, [isExpanded]); + + const debouncedHandleResize = useDebouncedCallback(handleResize, 100); + + useResizeObserver(viewRef.current, debouncedHandleResize); + + useLayoutEffect(debouncedHandleResize, [debouncedHandleResize]); return ( -
+
- +
+ + {type} +
- + {(isExpandable || isExpanded) && !isExpandedProp && ( + + )}
-