Merge remote-tracking branch 'origin/release/15.0.0' into mabel/issue-10425-studio-redesign

mabela416 · mabela416 · commit 283c70339991 · 2025-07-17T12:29:27.000-04:00
diff --git a/packages/reporter/package.json b/packages/reporter/package.json
@@ -18,7 +18,7 @@
     "@cypress-design/constants-button": "^1.9.0",
     "@cypress-design/css": "1.2.0",
     "@cypress-design/react-button": "^1.10.1",
-    "@cypress-design/react-icon": "^1.27.0",
+    "@cypress-design/react-icon": "1.30.0",
     "@cypress/react-tooltip": "0.5.3",
     "@fontsource/mulish": "4.3.0",
     "@fontsource/open-sans": "4.3.0",
diff --git a/packages/reporter/src/components/LaunchStudioIcon.tsx b/packages/reporter/src/components/LaunchStudioIcon.tsx
@@ -1,27 +1,26 @@
 import React, { MouseEvent } from 'react'
 
-// @ts-ignore
 import Tooltip from '@cypress/react-tooltip'
-import WandIcon from '@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+import { IconChevronRightMedium } from '@cypress-design/react-icon'
 
 interface LaunchStudioIconProps {
-  title: string
+  content: React.ReactNode
   onClick: (e: MouseEvent) => void
 }
 
-export const LaunchStudioIcon: React.FC<LaunchStudioIconProps> = ({ title, onClick }) => {
+export const LaunchStudioIcon: React.FC<LaunchStudioIconProps> = ({ content, onClick }) => {
   return (
     <Tooltip
-      title={title}
       placement='right'
       className='cy-tooltip'
+      title={content}
     >
       <a
         onClick={onClick}
         className='runnable-controls-studio'
         data-cy='launch-studio'
       >
-        <WandIcon />
+        <IconChevronRightMedium style={{ marginTop: '-1px' }} />
       </a>
     </Tooltip>
   )
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -41,32 +41,36 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
     eventManager.emit('studio:init:suite', model.id)
   }, [eventManager, model.id])
 
+  const headerIconStyle = {
+    marginTop: '1px',
+  }
+
   const getHeaderIcon = useCallback((isOpen: boolean) => {
     let headerIcon
 
     switch (model.state) {
       case 'active':
-        headerIcon = <IconObjectStackRunning {...headerIconDefaultProps} />
+        headerIcon = <IconObjectStackRunning {...headerIconDefaultProps} style={headerIconStyle} />
         break
       case 'passed':
-        headerIcon = <IconObjectStackPassed {...headerIconDefaultProps} secondaryStrokeColor='jade-400' />
+        headerIcon = <IconObjectStackPassed {...headerIconDefaultProps} secondaryStrokeColor='jade-400' style={headerIconStyle} />
         break
       case 'failed':
-        headerIcon = <IconObjectStackFailed {...headerIconDefaultProps} secondaryStrokeColor='red-400' />
+        headerIcon = <IconObjectStackFailed {...headerIconDefaultProps} secondaryStrokeColor='red-400' style={headerIconStyle} />
         break
       case 'pending':
-        headerIcon = <IconObjectStackSkipped {...headerIconDefaultProps} />
+        headerIcon = <IconObjectStackSkipped {...headerIconDefaultProps} style={headerIconStyle} />
         break
       case 'processing':
-        headerIcon = <IconObjectStackQueued {...headerIconDefaultProps} />
+        headerIcon = <IconObjectStackQueued {...headerIconDefaultProps} style={headerIconStyle} />
         break
       default:
         headerIcon = <></>
         break
     }
 
     return <>
-      {isOpen ? <IconChevronDownMedium className='header-collapsible-indicator' strokeColor='gray-700' /> : <IconChevronRightMedium size='16' className='header-collapsible-indicator' strokeColor='gray-700' />}
+      {isOpen ? <IconChevronDownMedium className='header-collapsible-indicator' strokeColor='gray-700' style={headerIconStyle} /> : <IconChevronRightMedium size='16' className='header-collapsible-indicator' strokeColor='gray-700' style={headerIconStyle} />}
       {headerIcon}
     </>
   }, [model.state])
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
@@ -269,12 +269,6 @@ $dotted-line-left-padding: 19px;
         border-radius: 0;
         background-color: $gray-1100;
 
-        .collapsible-header-text {
-          svg {
-            margin-top: 1px;
-          }
-        }
-
         .collapsible-header-inner {
           padding: 9px 11px;
           background-color: $gray-1100;
@@ -341,12 +335,6 @@ $dotted-line-left-padding: 19px;
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
 
-            .collapsible-header-text {
-              svg {
-                margin-top: 1px;
-              }
-            }
-
             &:focus-visible {
               border-top: 1px solid $gray-800;
               border-bottom: 1px solid $gray-800;
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
@@ -1,5 +1,7 @@
 import { observer } from 'mobx-react'
 import React, { MouseEvent, useCallback } from 'react'
+import IconCypressStudio from '@cypress-design/react-icon'
+
 import events, { Events } from '../lib/events'
 import appState, { AppState } from '../lib/app-state'
 import Collapsible from '../collapsible/collapsible'
@@ -54,7 +56,12 @@ const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = event
       controls.push(
         <LaunchStudioIcon
           key={`studio-command-${model}`}
-          title='Add Commands to Test'
+          content={
+            <div className='flex items-center py-[8px] px-[8px]'>
+              <div><IconCypressStudio strokeColor="gray-500" className="mr-[10px]" /></div>
+              <div className='text-sm text-gray-700'>Edit in Studio</div>
+            </div>
+          }
           onClick={_launchStudio}
         />,
       )
diff --git a/yarn.lock b/yarn.lock
@@ -2686,10 +2686,10 @@
     tailwindcss "^3.4.3"
     tailwindcss-hocus "^0.0.7"
 
-"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.18.0", "@cypress-design/icon-registry@^1.27.0", "@cypress-design/icon-registry@^1.5.1":
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.27.0.tgz#a657acc40cc6b43e14ebf1a0e19eb65f43e08a76"
-  integrity sha512-2/jlv/0RsCwwZpovIk8sjXsbqnnNgmpYiaQUl9XUoZ45rurhr2PuOwYk1HMAkrBcv05adzWLfiEtfzb5TwUG1w==
+"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.18.0", "@cypress-design/icon-registry@^1.30.0", "@cypress-design/icon-registry@^1.5.1":
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.30.0.tgz#169f61fddb0baad1e7297487eab4eec68fc7537e"
+  integrity sha512-4DSHYeSo6gnsnKrufTxgAn3c/1ORGCoDeXOLypoatfNtmlbSyB6jdsQ4wIJmuM6lR9wDtkwziPHCsilNVPFy2Q==
   dependencies:
     "@cypress-design/color-constants" "^1.1.0"
 
@@ -2700,12 +2700,12 @@
   dependencies:
     clsx "^2.1.1"
 
-"@cypress-design/react-icon@^1.27.0":
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/react-icon/-/react-icon-1.27.0.tgz#e34952329887deb614b78b66d0357b7a4049cbe8"
-  integrity sha512-r8tu7JFwJWwsKSRMJ83ocSb6zfM0Hjnf2DTH5CEhlVxo/QHMOVk85zQSqxVHlX9p11C7jomUeMkoalD6dpKXTg==
+"@cypress-design/react-icon@1.30.0":
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/react-icon/-/react-icon-1.30.0.tgz#2ac51db1ce2941dc012481c883e053c3bc8223c1"
+  integrity sha512-ooF9WpHvnW4A4SEh3/1aXs1lBqmCfIB2Ioca1dg+/uL22ALYgyji7xcAStm/BzMo/nGTelqx2GcDWzMqOjFnGw==
   dependencies:
-    "@cypress-design/icon-registry" "^1.27.0"
+    "@cypress-design/icon-registry" "^1.30.0"
     clsx "^2.1.1"
 
 "@cypress-design/vue-button@^1.1.0", "@cypress-design/vue-button@^1.6.0":
