From 0b4bdf9d31cd030038b68d63a7a0cecb0536737e Mon Sep 17 00:00:00 2001
From: Mike Han <mike.han@saucelabs.com>
Date: Tue, 2 Jul 2024 08:46:52 -0600
Subject: [PATCH] feat: Add icon denoting action type

---
 webview-ui/test-generation/src/TestStep.scss  |  2 +-
 webview-ui/test-generation/src/TestStep.tsx   | 25 +++++++++++++++----
 .../src/icons/icn-gesture-swipe-fill.svg      | 11 ++++++++
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 webview-ui/test-generation/src/icons/icn-gesture-swipe-fill.svg

diff --git a/webview-ui/test-generation/src/TestStep.scss b/webview-ui/test-generation/src/TestStep.scss
index 7226f048..46ca05e0 100644
--- 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
index 013d7a1c..527a9303 100644
--- 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,6 +49,18 @@ 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]);
@@ -55,9 +68,11 @@ export function TestStep(props: {
   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
new file mode 100644
index 00000000..da2773a0
--- /dev/null
+++ b/webview-ui/test-generation/src/icons/icn-gesture-swipe-fill.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_35)">
+<path d="M5.63161 1.26194C6.89213 0.662474 8.27888 0.280337 10.0088 0.0558801C10.1767 0.034096 10.9885 0.00935975 11.8126 0.00101259C15.3814 -0.0353281 18.4393 0.907901 20.2531 2.60441L20.757 3.07582L21.3916 2.44693C22.0521 1.79219 22.2849 1.70332 22.5978 1.98652C22.7665 2.13921 22.784 2.3487 22.784 4.2202C22.784 6.23899 22.7789 6.28907 22.5577 6.4439C22.3728 6.57348 21.9875 6.6024 20.4427 6.6024C18.898 6.6024 18.5127 6.57348 18.3277 6.4439C17.9123 6.15297 18.0301 5.81369 18.8238 5.0147L19.5461 4.28748L19.2564 4.01233C18.7733 3.55354 18.1339 3.14463 17.3193 2.77339C13.4175 0.995241 7.40456 1.52712 4.71546 3.88835C3.89799 4.60601 2.66239 3.88835 3.25053 2.87345C3.57546 2.48154 4.77704 1.66841 5.63161 1.26194Z" />
+<path d="M9.15275 5.01654C9.35201 4.6052 9.78053 4.22166 10.2101 4.07034C10.306 4.03655 10.6252 4.00493 10.9195 4.00024C11.5143 3.99065 12.0514 4.26484 12.4664 4.78988C12.6993 5.08446 12.712 5.2578 12.7677 7.85697L12.8259 11.6376L13.493 11.6703C14.0847 11.6992 14.5067 11.8661 17.2132 13.1421C19.9784 14.4455 20.2984 14.6248 20.6076 15.044C20.8624 15.3896 20.9612 15.6665 20.9975 16.1378C21.044 16.7401 20.4353 21.4407 20.2038 22.2672C20.0312 22.8832 19.5644 23.4221 18.9627 23.7C18.414 23.9534 18.3473 23.9574 14.2406 23.9894C10.6507 24.0174 9.98398 23.9971 9.41596 23.8426C8.79166 23.6729 8.61402 23.5305 6.04442 21.1392C4.55263 19.7508 3.25777 18.4825 3.16709 18.3206C2.72404 17.5294 3.19964 16.5766 4.15061 16.3499C4.36824 16.2981 7.18105 16.7582 8.66971 17.0892L8.93128 17.1473L8.93384 10.7948C8.93628 5.85665 8.94977 5.43572 9.15275 5.01654Z" />
+</g>
+<defs>
+<clipPath id="clip0_2_35">
+<rect width="24" height="24" />
+</clipPath>
+</defs>
+</svg>