Make it so the error is expanded by default

- Will fill the contents of the panel if necessary
deephaven · Apr 26, 2024 · 3939afe · 3939afe
1 parent fbb58d3
commit 3939afe
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 61 deletions.
diff --git a/plugins/ui/src/js/src/styles.scss b/plugins/ui/src/js/src/styles.scss
@@ -36,79 +36,110 @@
   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;
     justify-content: flex-end;
     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;
   background-color: negative-opacity($exception-transparency);
   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
@@ -1,47 +1,89 @@
-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<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLPreElement>(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 (
-    <div className={classNames('error-view', { expanded: isExpanded })}>
+    <div
+      className={classNames('ui-error-view', {
+        expanded: isExpanded || isExpandedProp,
+      })}
+      ref={viewRef}
+    >
       <div className="error-view-header">
-        <label className="text-danger">
-          <FontAwesomeIcon icon={vsWarning} /> {type}
-        </label>
+        <div className="error-view-header-text">
+          <FontAwesomeIcon icon={vsWarning} />
+          <span>{type}</span>
+        </div>
         <div className="error-view-buttons">
           <CopyButton
             kind="danger"
             className="error-view-copy-button"
             tooltip="Copy exception contents"
             copy={`${type}: ${message}`.trim()}
           />
-          <Button
-            kind="danger"
-            className="error-view-expand-button"
-            onClick={() => {
-              setIsExpanded(!isExpanded);
-            }}
-            icon={isExpanded ? vsDiffRemoved : vsDiffAdded}
-          >
-            {isExpanded ? 'Show Less' : 'Show More'}
-          </Button>
+          {(isExpandable || isExpanded) && !isExpandedProp && (
+            <Button
+              kind="danger"
+              className="error-view-expand-button"
+              onClick={() => {
+                setIsExpanded(!isExpanded);
+              }}
+              icon={isExpanded ? vsDiffRemoved : vsDiffAdded}
+            >
+              {isExpanded ? 'Show Less' : 'Show More'}
+            </Button>
+          )}
         </div>
       </div>
-      <textarea readOnly value={message} />
+      <pre className="error-view-text" ref={textareaRef}>
+        {message}
+      </pre>
     </div>
   );
 }

diff --git a/plugins/ui/src/js/src/widget/WidgetErrorView.tsx b/plugins/ui/src/js/src/widget/WidgetErrorView.tsx
@@ -14,7 +14,9 @@ function WidgetErrorView({
   const displayMessage = `${error.message}\n\n${error.stack ?? ''}`.trim();
   return (
     <div className="widget-error-view">
-      <ErrorView message={displayMessage} type={error.type} />
+      <div className="widget-error-view-content">
+        <ErrorView message={displayMessage} type={error.type} isExpanded />
+      </div>
       <div className="widget-error-view-footer">
         <Button kind="tertiary" onClick={onReset}>
           Reload