fix(frontend): skip polling improvements

web/src/components/RunDetailLayout/HeaderRight.tsx

@@ -14,7 +14,7 @@ import * as S from './RunDetailLayout.styled';
 import EventLogPopover from '../EventLogPopover/EventLogPopover';
 import RunStatusIcon from '../RunStatusIcon/RunStatusIcon';
 import VariableSetSelector from '../VariableSetSelector/VariableSetSelector';
-import TracePollingActions from '../SkipPollingPopover/SkipPollingPopover';
+import SkipPollingPopover from '../SkipPollingPopover';
 import useSkipPolling from './hooks/useSkipPolling';
 
 interface IProps {
@@ -27,7 +27,7 @@ const HeaderRight = ({testId, triggerType}: IProps) => {
   const {isDraftMode: isTestOutputsDraftMode} = useTestOutput();
   const isDraftMode = isTestSpecsDraftMode || isTestOutputsDraftMode;
   const {
-    run: {state, requiredGatesResult, createdAt},
+    run: {state, requiredGatesResult},
     run,
     runEvents,
   } = useTestRun();
@@ -43,7 +43,7 @@ const HeaderRight = ({testId, triggerType}: IProps) => {
           <S.StateText>Test status:</S.StateText>
           <TestState testState={state} />
           {isRunPollingState(state) && (
-            <TracePollingActions startTime={createdAt} isLoading={isLoading} skipPolling={onSkipPolling} />
+            <SkipPollingPopover isLoading={isLoading} skipPolling={onSkipPolling} />
           )}
         </S.StateContainer>
       )}

web/src/components/SkipPollingPopover/Content.tsx

@@ -1,4 +1,5 @@
 import {Button, Checkbox, Typography} from 'antd';
+import {ForwardOutlined} from '@ant-design/icons';
 import {useState} from 'react';
 import * as S from './SkipPollingPopover.styled';
 
@@ -13,14 +14,22 @@ const Content = ({skipPolling, isLoading}: IProps) => {
   return (
     <>
       <Typography.Paragraph>
-        You can skip the <b>awaiting trace</b> step and use the current state to create test specs.
+        Hit &apos;Skip Trace collection&apos; to create a black box test using trigger response. Handy for testing
+        systems like a GET against <i>https://google.com</i> that won&apos;t send Tracetest a trace!
       </Typography.Paragraph>
       <S.Actions>
         <div>
           <Checkbox onChange={() => setShouldSave(prev => !prev)} value={shouldSave} /> Apply to all runs
         </div>
-        <Button loading={isLoading} type="primary" ghost onClick={() => skipPolling(shouldSave)} size="small">
-          Skip awaiting trace
+        <Button
+          icon={<ForwardOutlined />}
+          loading={isLoading}
+          type="primary"
+          ghost
+          onClick={() => skipPolling(shouldSave)}
+          size="small"
+        >
+          Skip Trace collection
         </Button>
       </S.Actions>
     </>

web/src/components/SkipPollingPopover/SkipPollingPopover.styled.ts

@@ -1,4 +1,4 @@
-import {Typography} from 'antd';
+import {Button, Typography} from 'antd';
 import styled, {createGlobalStyle} from 'styled-components';
 
 export const StopContainer = styled.div`
@@ -16,6 +16,7 @@ export const GlobalStyle = createGlobalStyle`
     .ant-popover-inner-content {
       padding: 14px;
       padding-top: 0;
+      max-width: 520px;
     }
   }
 `;
@@ -35,3 +36,23 @@ export const Title = styled(Typography.Title).attrs({
     margin: 0;
   }
 `;
+
+export const ForwardButton = styled(Button)`
+  && {
+    font-size: ${({theme}) => theme.size.xl};
+  }
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const CloseIcon = styled(Typography.Text)`
+  && {
+    cursor: pointer;
+    color: ${({theme}) => theme.color.textSecondary};
+  }
+`;

web/src/components/SkipPollingPopover/SkipPollingPopover.tsx

@@ -1,39 +1,39 @@
-import {Button, Popover} from 'antd';
-import {differenceInSeconds} from 'date-fns';
-import {useEffect, useState} from 'react';
-import {ForwardOutlined} from '@ant-design/icons';
+import {Popover, Tooltip} from 'antd';
+import {useState} from 'react';
+import {CloseOutlined, ForwardOutlined} from '@ant-design/icons';
 import * as S from './SkipPollingPopover.styled';
 import Content from './Content';
 
 interface IProps {
   isLoading: boolean;
   skipPolling(shouldSave: boolean): void;
-  startTime: string;
 }
 
-const TIMEOUT_TO_SHOW = 10; // seconds
-
-const SkipPollingPopover = ({isLoading, skipPolling, startTime}: IProps) => {
+const SkipPollingPopover = ({isLoading, skipPolling}: IProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const diff = differenceInSeconds(new Date(), new Date(startTime));
-
-  useEffect(() => {
-    if (diff > TIMEOUT_TO_SHOW) setIsOpen(true);
-  }, [diff, isOpen]);
 
   return (
     <S.StopContainer>
       <S.GlobalStyle />
       <Popover
         id="skip-trace-popover"
-        title={<S.Title level={3}>Taking too long to get the trace?</S.Title>}
+        title={
+          <S.ContentContainer>
+            <S.Title level={3}>Waiting too long for the trace?</S.Title>
+            <S.CloseIcon onClick={() => setIsOpen(false)}>
+              <CloseOutlined />
+            </S.CloseIcon>
+          </S.ContentContainer>
+        }
         content={<Content isLoading={isLoading} skipPolling={skipPolling} />}
         visible={isOpen}
         placement="bottomRight"
       >
-        <Button loading={isLoading} onClick={() => skipPolling(false)} type="link">
-          <ForwardOutlined />
-        </Button>
+        <Tooltip title="Skip Trace collection" placement="left">
+          <S.ForwardButton size="small" loading={isLoading} onClick={() => setIsOpen(true)} type="link">
+            <ForwardOutlined />
+          </S.ForwardButton>
+        </Tooltip>
       </Popover>
     </S.StopContainer>
   );

web/src/components/SkipPollingPopover/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './SkipPollingPopover';

web/src/services/Triggers/TraceID.service.ts

@@ -6,7 +6,7 @@ const TraceIDTriggerService = (): ITriggerService => ({
   async getRequest(values) {
     const {id} = values as ITraceIDValues;
 
-    return TraceIDRequest({id: id.includes('env:') ? id : `\${env:${id}}`});
+    return TraceIDRequest({id: id.includes('env:') ||  id.includes('var:') ? id : `\${env:${id}}`});
   },
 
   async validateDraft(draft) {