Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try using svgs as react components #106

Merged
merged 3 commits into from
Jul 15, 2024
Merged

Try using svgs as react components #106

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02cf98b
Try using svgs as react components
mhan83 Jul 12, 2024
50bdcdb
simpler robot color
mhan83 Jul 12, 2024
a77cf9f
Add a set text icon
mhan83 Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
506 changes: 505 additions & 1 deletion webview-ui/test-generation/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion webview-ui/test-generation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@vitejs/plugin-react": "4.3.0",
"sass": "1.77.4",
"typescript": "5.4.5",
"vite": "5.2.11"
"vite": "5.2.11",
"vite-plugin-svgr": "4.2.0"
}
}
25 changes: 4 additions & 21 deletions webview-ui/test-generation/src/TestStep.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,3 @@
.vscode-dark {
--icon-header-filter: invert(70%) sepia(6%) saturate(51%) hue-rotate(169deg)
brightness(150%) contrast(90%);
}

.vscode-high-contrast {
--icon-header-filter: invert(70%) sepia(6%) saturate(51%) hue-rotate(169deg)
brightness(150%) contrast(200%);
}

.vscode-light {
--icon-header-filter: none;
}

section.test-step {
display: flex;
flex-direction: column;
Expand All @@ -29,7 +15,8 @@ section.test-step {
width: 16px;
height: 16px;
&.header {
filter: var(--icon-header-filter);
color: var(--vscode-editor-foreground);
fill: currentColor;
}
}
}
Expand Down Expand Up @@ -130,12 +117,8 @@ section.test-step {

.icon {
width: 12px;
filter: invert(43%) sepia(84%) saturate(1173%) hue-rotate(193deg)
brightness(101%) contrast(101%);

&.up {
transform: rotate(-90deg);
}
fill: currentColor;
color: hsla(152, 69%, 55%, 1);
}
}
}
Expand Down
28 changes: 12 additions & 16 deletions webview-ui/test-generation/src/TestStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import Prism from 'prismjs';

import { vscode } from './utilities/vscode';
import './TestStep.scss';
import tapIconUrl from './icons/icn-gesture-tap.svg';
import swipeIconUrl from './icons/icn-gesture-swipe.svg';
import botIcon from './icons/icn-bot-fill.svg';
import TapIcon from './icons/icn-gesture-tap.svg?react';
import SwipeIcon from './icons/icn-gesture-swipe.svg?react';
import BotIcon from './icons/icn-bot-fill.svg?react';
import { Action, Step } from './state';
import { Screenshot } from './Screenshot';
import { useEffect, useState } from 'react';
Expand Down Expand Up @@ -45,19 +45,19 @@ export function TestStep(props: {

const imgSrc = `${window.historyPath}/${testRecordId}/${screenshot.name}`;

let actionIcon;
let ActionIcon;
switch (action) {
case 'scroll':
actionIcon = <img className="icon header" src={swipeIconUrl} />;
ActionIcon = SwipeIcon;
break;
case 'click':
actionIcon = <img className="icon header" src={tapIconUrl} />;
break;
case 'set_text':
actionIcon = <span className="codicon codicon-edit icon" />;
ActionIcon = TapIcon;
break;
// case 'set_text':
// actionIcon = <span className="codicon codicon-edit icon" />;
// break;
default:
actionIcon = null;
ActionIcon = null;
}

useEffect(() => {
Expand All @@ -67,7 +67,7 @@ export function TestStep(props: {
return (
<section className="test-step">
<header>
{actionIcon && <div className="action-icon">{actionIcon}</div>}
{ActionIcon && <ActionIcon className="icon header" />}
<div className="title">Step {index + 1}</div>
<div className="fullscreen">
<VSCodeButton
Expand Down Expand Up @@ -104,11 +104,7 @@ export function TestStep(props: {
<section className="reasoning">
<header>
<div>
<img
className="icon"
src={botIcon}
alt="Decorative Sauce Labs robot."
/>
<BotIcon className="icon" />
</div>
<div>ScriptIQ Reasoning</div>
<div className="ratings">
Expand Down
4 changes: 2 additions & 2 deletions webview-ui/test-generation/src/icons/icn-gesture-swipe.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions webview-ui/test-generation/src/icons/icn-gesture-tap.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions webview-ui/test-generation/src/vite-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

interface Window {
// window.historyPath is injected into the webview by the WebviewViewProvider
Expand Down
2 changes: 2 additions & 0 deletions webview-ui/test-generation/vite.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import prism from 'vite-plugin-prismjs';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
Expand All @@ -10,6 +11,7 @@ export default defineConfig({
languages: ['java', 'python'],
css: false,
}),
svgr(),
],
mode: 'development',
build: {
Expand Down
Loading