Feat/skip trace collection 2

server/http/mappings/tests.go

@@ -64,6 +64,7 @@ func (m OpenAPI) Test(in test.Test) openapi.Test {
 		Version:     int32(*in.Version),
 		CreatedAt:   *in.CreatedAt,
 		Outputs:     m.Outputs(in.Outputs),
+		SkipTraceCollection: in.SkipTraceCollection,
 		Summary: openapi.TestSummary{
 			Runs: int32(in.Summary.Runs),
 			LastRun: openapi.TestSummaryLastRun{

web/src/components/Fields/SSL/SSL.tsx

@@ -10,7 +10,7 @@ const SSL = ({formID}: IProps) => (
   <S.SSLVerificationContainer>
     <label htmlFor={`${formID}_sslVerification`}>Enable SSL certificate verification</label>
     <Form.Item name="sslVerification" valuePropName="checked" style={{marginBottom: 0}}>
-      <Switch />
+      <Switch id={`${formID}_sslVerification`} />
     </Form.Item>
     <TooltipQuestion title="Verify SSL certificates when sending the request. Verification failures will result in the request being aborted." />
   </S.SSLVerificationContainer>

web/src/components/Fields/SkipTraceCollection/SkipTraceCollection.tsx

@@ -0,0 +1,17 @@
+import {Form, Switch} from 'antd';
+import {TooltipQuestion} from 'components/TooltipQuestion/TooltipQuestion';
+import * as S from '../SSL/SSL.styled';
+
+const SkipTraceCollection = () => {
+  return (
+    <S.SSLVerificationContainer>
+      <label htmlFor="skipTraceCollection">Skip Trace Collection</label>
+      <Form.Item name="skipTraceCollection" valuePropName="checked" style={{marginBottom: 0}}>
+        <Switch id="skipTraceCollection" />
+      </Form.Item>
+      <TooltipQuestion title="Skips Trace Collection for all runs. You can still create and run tests." />
+    </S.SSLVerificationContainer>
+  );
+};
+
+export default SkipTraceCollection;

web/src/components/Fields/index.ts

@@ -4,8 +4,9 @@ import KeyValueList from './KeyValueList/KeyValueList';
 import Metadata from './Metadata/Metadata';
 import MultiURL from './MultiURL/MultiURL';
 import PlainAuth from './PlainAuth/PlainAuth';
+import SkipTraceCollection from './SkipTraceCollection/SkipTraceCollection';
 import SSL from './SSL/SSL';
 import URL from './URL/URL';
 import VariableName from './VariableName/VariableName';
 
-export {URL, Auth, SSL, Headers, Metadata, MultiURL, PlainAuth, KeyValueList, VariableName};
+export {URL, Auth, SSL, Headers, Metadata, MultiURL, PlainAuth, KeyValueList, SkipTraceCollection, VariableName};

web/src/components/RunDetailLayout/HeaderRight.tsx

@@ -1,11 +1,9 @@
-import {CloseCircleOutlined} from '@ant-design/icons';
-import {Button, Tooltip} from 'antd';
 import CreateButton from 'components/CreateButton';
 import RunActionsMenu from 'components/RunActionsMenu';
 import TestActions from 'components/TestActions';
 import TestState from 'components/TestState';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';
-import {isRunStateFinished, isRunStateStopped, isRunStateSucceeded} from 'models/TestRun.model';
+import {isRunPollingState, isRunStateFinished, isRunStateStopped, isRunStateSucceeded} from 'models/TestRun.model';
 import {useTest} from 'providers/Test/Test.provider';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider';
@@ -14,6 +12,8 @@ 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 useSkipPolling from './hooks/useSkipPolling';
 
 interface IProps {
   testId: string;
@@ -24,33 +24,23 @@ const HeaderRight = ({testId}: IProps) => {
   const {isDraftMode: isTestOutputsDraftMode} = useTestOutput();
   const isDraftMode = isTestSpecsDraftMode || isTestOutputsDraftMode;
   const {
-    isLoadingStop,
-    run: {state, requiredGatesResult},
+    run: {state, requiredGatesResult, createdAt},
     run,
-    stopRun,
     runEvents,
   } = useTestRun();
   const {onRun} = useTest();
 
+  const {onSkipPolling, isLoading} = useSkipPolling();
+
   return (
     <S.Section $justifyContent="flex-end">
       {isDraftMode && <TestActions />}
       {!isDraftMode && state && state !== TestStateEnum.FINISHED && (
         <S.StateContainer data-cy="test-run-result-status">
           <S.StateText>Test status:</S.StateText>
           <TestState testState={state} />
-          {state === TestStateEnum.AWAITING_TRACE && (
-            <S.StopContainer>
-              <Tooltip title="Stop test execution">
-                <Button
-                  disabled={isLoadingStop}
-                  icon={<CloseCircleOutlined />}
-                  onClick={stopRun}
-                  shape="circle"
-                  type="link"
-                />
-              </Tooltip>
-            </S.StopContainer>
+          {isRunPollingState(state) && (
+            <TracePollingActions startTime={createdAt} isLoading={isLoading} skipPolling={onSkipPolling} />
           )}
         </S.StateContainer>
       )}

web/src/components/RunDetailLayout/RunDetailLayout.styled.ts

@@ -103,10 +103,6 @@ export const StateContainer = styled.div`
   justify-self: flex-end;
 `;
 
-export const StopContainer = styled.div`
-  margin-left: 12px;
-`;
-
 export const StateText = styled(Typography.Text)`
   && {
     margin-right: 8px;

web/src/components/RunDetailLayout/hooks/useSkipPolling.ts

@@ -0,0 +1,47 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import {useAppDispatch} from 'redux/hooks';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
+import TestSpecsActions from 'redux/actions/TestSpecs.actions';
+import {isRunStateFinished} from 'models/TestRun.model';
+import {useTest} from 'providers/Test/Test.provider';
+
+const useSkipPolling = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [shouldSave, setShouldSave] = useState(false);
+  const {
+    run: {id: runId, state},
+    skipPolling,
+  } = useTestRun();
+  const {test} = useTest();
+
+  const dispatch = useAppDispatch();
+  const {navigate} = useDashboard();
+
+  const onSkipPolling = useCallback(
+    async (save: boolean) => {
+      setIsLoading(true);
+      skipPolling();
+      setShouldSave(save);
+    },
+    [skipPolling]
+  );
+
+  const editAndReRun = useCallback(async () => {
+    setShouldSave(false);
+    const newRun = await dispatch(
+      TestSpecsActions.publish({test: {...test, skipTraceCollection: true}, testId: test.id, runId})
+    ).unwrap();
+    setIsLoading(false);
+    navigate(`/test/${test.id}/run/${newRun.id}`);
+  }, [dispatch, navigate, runId, test]);
+
+  useEffect(() => {
+    if (isRunStateFinished(state) && shouldSave) editAndReRun();
+    else if (isRunStateFinished(state)) setIsLoading(false);
+  }, [dispatch, editAndReRun, shouldSave, state, test]);
+
+  return {onSkipPolling, isLoading};
+};
+
+export default useSkipPolling;

web/src/components/SkipPollingPopover/Content.tsx

@@ -0,0 +1,28 @@
+import {Button, Checkbox, Typography} from 'antd';
+import {useState} from 'react';
+import * as S from './SkipPollingPopover.styled';
+
+interface IProps {
+  skipPolling(shouldSave: boolean): void;
+  isLoading: boolean;
+}
+
+const Content = ({skipPolling, isLoading}: IProps) => {
+  const [shouldSave, setShouldSave] = useState(false);
+
+  return (
+    <>
+      <Typography.Paragraph>Skip the Trace Collection step to use current state to create tests</Typography.Paragraph>
+      <S.Actions>
+        <div>
+          <Checkbox onChange={() => setShouldSave(prev => !prev)} value={shouldSave} /> Apply to all runs
+        </div>
+        <Button loading={isLoading} type="primary" onClick={() => skipPolling(shouldSave)}>
+          Skip
+        </Button>
+      </S.Actions>
+    </>
+  );
+};
+
+export default Content;

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

@@ -0,0 +1,37 @@
+import {Typography} from 'antd';
+import styled, {createGlobalStyle} from 'styled-components';
+
+export const StopContainer = styled.div`
+  margin-left: 12px;
+`;
+
+export const GlobalStyle = createGlobalStyle`
+  #skip-trace-popover {
+    .ant-popover-title {
+      padding: 14px;
+      border: 0;
+      padding-bottom: 0;
+    }
+
+    .ant-popover-inner-content {
+      padding: 5px 14px;
+      padding-top: 0;
+    }
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+  margin-top: 24px;
+`;
+
+export const Title = styled(Typography.Title).attrs({
+  level: 3,
+})`
+  && {
+    margin: 0;
+  }
+`;