feat: DH-22048: Add optional button to dismiss the ErrorView component (#2638)

- add dismiss button to ErrorView
- button is only shown if an optional callback is provided
- parent component must implement logic of callback to dismiss
- show in styleguide

Author: dgodinez-dh

packages/code-studio/src/styleguide/ErrorViews.tsx

@@ -1,9 +1,12 @@
-/* eslint no-alert: "off" */
-import React, { type CSSProperties } from 'react';
-import { ErrorView } from '@deephaven/components';
+import React, { useState, type CSSProperties } from 'react';
+import { Button, ErrorView } from '@deephaven/components';
 import SampleSection from './SampleSection';
 
 function ErrorViews(): React.ReactElement {
+  const [isShortDismissed, setIsShortDismissed] = useState(false);
+  const [isMidDismissed, setIsMidDismissed] = useState(false);
+  const [isLongDismissed, setIsLongDismissed] = useState(false);
+
   const columnStyle: CSSProperties = {
     maxHeight: 500,
     display: 'flex',
@@ -18,6 +21,14 @@ function ErrorViews(): React.ReactElement {
   const midErrorType = 'MidError';
   const longErrorType = 'SuperLongErrorMessageType';
 
+  const hasAnyDismissed = isShortDismissed || isMidDismissed || isLongDismissed;
+
+  const handleReset = () => {
+    setIsShortDismissed(false);
+    setIsMidDismissed(false);
+    setIsLongDismissed(false);
+  };
+
   return (
     <SampleSection name="error-views">
       <h2 className="ui-title" title="Display error messages easily">
@@ -51,6 +62,52 @@ function ErrorViews(): React.ReactElement {
           />
         </div>
       </div>
+      <h3>
+        Dismissable
+        {hasAnyDismissed && (
+          <Button
+            kind="primary"
+            onClick={handleReset}
+            style={{ marginLeft: '1rem' }}
+          >
+            Reset
+          </Button>
+        )}
+      </h3>
+      <div className="row" style={{ maxHeight: 500 }}>
+        <div className="col" style={columnStyle}>
+          {!isShortDismissed && (
+            <ErrorView
+              message={shortErrorMessage}
+              onDismiss={() => {
+                setIsShortDismissed(true);
+              }}
+            />
+          )}
+        </div>
+        <div className="col" style={columnStyle}>
+          {!isMidDismissed && (
+            <ErrorView
+              message={midErrorMessage}
+              type={midErrorType}
+              onDismiss={() => {
+                setIsMidDismissed(true);
+              }}
+            />
+          )}
+        </div>
+        <div className="col" style={columnStyle}>
+          {!isLongDismissed && (
+            <ErrorView
+              message={longErrorMessage}
+              type={longErrorType}
+              onDismiss={() => {
+                setIsLongDismissed(true);
+              }}
+            />
+          )}
+        </div>
+      </div>
     </SampleSection>
   );
 }

packages/components/src/ErrorView.tsx

@@ -1,7 +1,12 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsDiffAdded, vsDiffRemoved, vsWarning } from '@deephaven/icons';
+import {
+  vsClose,
+  vsDiffAdded,
+  vsDiffRemoved,
+  vsWarning,
+} from '@deephaven/icons';
 import {
   useDebouncedCallback,
   useResizeObserver,
@@ -19,6 +24,9 @@ export type ErrorViewerProps = {
 
   /** The type of error message to display in the header. Defaults to Error. */
   type?: string;
+
+  /** Optional callback to dismiss the error. If provided, a Dismiss button will be displayed. It is up to the parent to implement the logic to dismiss the error. */
+  onDismiss?: () => void;
 };
 
 /**
@@ -28,6 +36,7 @@ function ErrorView({
   message,
   isExpanded: isExpandedProp = false,
   type = 'Error',
+  onDismiss,
 }: ErrorViewerProps): JSX.Element {
   const [isExpandable, setIsExpandable] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -79,6 +88,16 @@ function ErrorView({
               {isExpanded ? 'Show Less' : 'Show More'}
             </Button>
           )}
+          {onDismiss != null && (
+            <Button
+              kind="danger"
+              className="error-view-dismiss-button"
+              onClick={onDismiss}
+              icon={vsClose}
+            >
+              Dismiss
+            </Button>
+          )}
         </div>
       </div>
       <pre className="error-view-text" ref={textRef}>