feat: Add icon denoting action type

saucelabs · Jul 2, 2024 · 0b4bdf9 · 0b4bdf9
1 parent aab8bb2
commit 0b4bdf9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/webview-ui/test-generation/src/TestStep.scss b/webview-ui/test-generation/src/TestStep.scss
@@ -15,7 +15,7 @@ section.test-step {
     .icon {
       width: 16px;
       height: 16px;
-      &.button {
+      &.header {
         filter: invert(92%) sepia(1%) saturate(103%) hue-rotate(314deg)
           brightness(88%) contrast(98%);
       }

diff --git a/webview-ui/test-generation/src/TestStep.tsx b/webview-ui/test-generation/src/TestStep.tsx
@@ -8,7 +8,8 @@ import Prism from 'prismjs';
 
 import { vscode } from './utilities/vscode';
 import './TestStep.scss';
-// import tapIconUrl from './icons/icn-gesture-tap-fill.svg';
+import tapIconUrl from './icons/icn-gesture-tap-fill.svg';
+import swipeIconUrl from './icons/icn-gesture-swipe-fill.svg';
 import fullScreenIcon from './icons/icn-fullscreen-fill.svg';
 import botIcon from './icons/icn-bot-fill.svg';
 import thumbsUpIcon from './icons/icn-thumbs-up.svg';
@@ -48,16 +49,30 @@ export function TestStep(props: {
 
   const imgSrc = `${window.historyPath}/${testRecordId}/${screenshot.name}`;
 
+  let actionIcon;
+  switch (action) {
+    case 'scroll':
+      actionIcon = swipeIconUrl;
+      break;
+    case 'click':
+      actionIcon = tapIconUrl;
+      break;
+    default:
+      actionIcon = null;
+  }
+
   useEffect(() => {
     Prism.highlightAll();
   }, [language, showAlternatives]);
 
   return (
     <section className="test-step">
       <header>
-        {/* <div className="action-icon">
-          <img className="icon" src={tapIconUrl} />
-        </div> */}
+        {actionIcon && (
+          <div className="action-icon">
+            <img className="icon header" src={actionIcon} />
+          </div>
+        )}
         <div className="title">Step {index + 1}</div>
         <div className="fullscreen">
           <VSCodeButton
@@ -74,7 +89,7 @@ export function TestStep(props: {
             }}
           >
             <img
-              className="icon button"
+              className="icon header"
               src={fullScreenIcon}
               alt="Open image in full screen."
             />

diff --git a/webview-ui/test-generation/src/icons/icn-gesture-swipe-fill.svg b/webview-ui/test-generation/src/icons/icn-gesture-swipe-fill.svg