From 0e93f1d5116ca6cd8dbdb83f8c7f35b70620fa76 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 23 Feb 2023 09:09:21 -0800
Subject: [PATCH] chore(trace): render error background (#21135)

---
 packages/trace-viewer/src/ui/actionList.css | 12 ------------
 packages/trace-viewer/src/ui/actionList.tsx |  3 +--
 packages/trace-viewer/src/ui/callTab.css    | 11 ++++++++++-
 packages/web/src/components/listView.css    |  6 ++++++
 packages/web/src/components/listView.tsx    | 11 ++++++++---
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.css b/packages/trace-viewer/src/ui/actionList.css
index ca4a2e81d6..3332e0a7fd 100644
--- a/packages/trace-viewer/src/ui/actionList.css
+++ b/packages/trace-viewer/src/ui/actionList.css
@@ -68,15 +68,3 @@
   padding-left: 5px;
   color: var(--blue);
 }
-
-.action-entry .codicon {
-  padding: 0 2px;
-}
-
-.action-entry .codicon-error, .action-entry .codicon-issues {
-  color: red;
-}
-
-.action-entry .codicon-warning {
-  color: darkorange;
-}
diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index 6037bead92..94989648e5 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -46,6 +46,7 @@ export const ActionList: React.FC<ActionListProps> = ({
     onSelected={(action: ActionTraceEvent) => onSelected(action)}
     onHighlighted={(action: ActionTraceEvent) => onHighlighted(action)}
     itemKey={(action: ActionTraceEvent) => action.metadata.id}
+    itemType={(action: ActionTraceEvent) => action.metadata.error?.error?.message ? 'error' : undefined}
     itemRender={(action: ActionTraceEvent) => renderAction(action, sdkLanguage, setSelectedTab)}
     showNoItemsMessage={true}
   ></ListView>;
@@ -57,7 +58,6 @@ const renderAction = (
   setSelectedTab: (tab: string) => void
 ) => {
   const { metadata } = action;
-  const error = metadata.error?.error?.message;
   const { errors, warnings } = modelUtil.stats(action);
   const locator = metadata.params.selector ? asLocator(sdkLanguage || 'javascript', metadata.params.selector) : undefined;
 
@@ -72,6 +72,5 @@ const renderAction = (
       {!!errors && <div className='action-icon'><span className={'codicon codicon-error'}></span><span className="action-icon-value">{errors}</span></div>}
       {!!warnings && <div className='action-icon'><span className={'codicon codicon-warning'}></span><span className="action-icon-value">{warnings}</span></div>}
     </div>
-    {error && <div className='codicon codicon-issues' title={error} />}
   </>;
 };
diff --git a/packages/trace-viewer/src/ui/callTab.css b/packages/trace-viewer/src/ui/callTab.css
index d36e150a14..032c97b165 100644
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/packages/trace-viewer/src/ui/callTab.css
@@ -19,7 +19,6 @@
   line-height: 24px;
   white-space: pre;
   overflow: auto;
-  padding: 6px 0;
   user-select: text;
 }
 
@@ -94,3 +93,13 @@
 .call-value.object {
   color: var(--blue);
 }
+
+.call-error-message {
+  font-family: var(--vscode-editor-font-family);
+  font-weight: var(--vscode-editor-font-weight);
+  font-size: var(--vscode-editor-font-size);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  white-space: pre;
+  overflow: auto;
+  padding: 5px;
+}
diff --git a/packages/web/src/components/listView.css b/packages/web/src/components/listView.css
index a0bb1a9a76..3263dd1fc4 100644
--- a/packages/web/src/components/listView.css
+++ b/packages/web/src/components/listView.css
@@ -59,3 +59,9 @@
   align-items: center;
   justify-content: center;
 }
+
+.list-view-entry.error:not(.selected) {
+  color: var(--vscode-list-errorForeground);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  outline: 1px solid var(--vscode-inputValidation-errorBorder);
+}
diff --git a/packages/web/src/components/listView.tsx b/packages/web/src/components/listView.tsx
index 1d3c6aaf0d..72d11bec7b 100644
--- a/packages/web/src/components/listView.tsx
+++ b/packages/web/src/components/listView.tsx
@@ -23,6 +23,7 @@ export type ListViewProps = {
   itemRender: (item: any) => React.ReactNode,
   itemIcon?: (item: any) => string | undefined,
   itemIndent?: (item: any) => number | undefined,
+  itemType: (item: any) => 'error' | undefined,
   selectedItem?: any,
   onAccepted?: (item: any) => void,
   onSelected?: (item: any) => void,
@@ -35,6 +36,7 @@ export const ListView: React.FC<ListViewProps> = ({
   itemKey,
   itemRender,
   itemIcon,
+  itemType,
   itemIndent,
   selectedItem,
   onAccepted,
@@ -83,6 +85,7 @@ export const ListView: React.FC<ListViewProps> = ({
       {items.map(item => <ListItemView
         key={itemKey(item)}
         icon={itemIcon?.(item)}
+        type={itemType?.(item)}
         indent={itemIndent?.(item)}
         isHighlighted={item === highlightedItem}
         isSelected={item === selectedItem}
@@ -105,6 +108,7 @@ export const ListView: React.FC<ListViewProps> = ({
 const ListItemView: React.FC<{
   key: string,
   icon: string | undefined,
+  type: 'error' | undefined,
   indent: number | undefined,
   isHighlighted: boolean,
   isSelected: boolean,
@@ -112,9 +116,10 @@ const ListItemView: React.FC<{
   onMouseEnter: () => void,
   onMouseLeave: () => void,
   children: React.ReactNode | React.ReactNode[],
-}> = ({ key, icon, indent, onSelected, onMouseEnter, onMouseLeave, isHighlighted, isSelected, children }) => {
+}> = ({ key, icon, type, indent, onSelected, onMouseEnter, onMouseLeave, isHighlighted, isSelected, children }) => {
   const selectedSuffix = isSelected ? ' selected' : '';
   const highlightedSuffix = isHighlighted ? ' highlighted' : '';
+  const errorSuffix = type === 'error' ? ' error' : '';
   const divRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
@@ -124,14 +129,14 @@ const ListItemView: React.FC<{
 
   return <div
     key={key}
-    className={'list-view-entry' + selectedSuffix + highlightedSuffix}
+    className={'list-view-entry' + selectedSuffix + highlightedSuffix + errorSuffix}
     onClick={onSelected}
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
     ref={divRef}
   >
     {indent ? <div style={{ minWidth: indent * 16 }}></div> : undefined}
-    <div className={'codicon ' + icon} style={{ minWidth: 16, marginRight: 4 }}></div>
+    <div className={'codicon ' + (icon || 'blank')} style={{ minWidth: 16, marginRight: 4 }}></div>
     {typeof children === 'string' ? <div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{children}</div> : children}
   </div>;
 };