feat(frontend): Typescript Test Run Automate Tab (#3576)

web/src/components/RunDetailAutomate/RunDetailAutomate.tsx

@@ -1,13 +1,15 @@
 import {snakeCase} from 'lodash';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import RunDetailAutomateDefinition from 'components/RunDetailAutomateDefinition';
 import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
 import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
 import Cypress from 'components/RunDetailAutomateMethods/methods/Cypress';
 import DeepLink from 'components/RunDetailAutomateMethods/methods/DeepLink';
 import Playwright from 'components/RunDetailAutomateMethods/methods/Playwright';
+import Typescript from 'components/RunDetailAutomateMethods/methods/Typescript';
 import GithubActions from 'components/RunDetailAutomateMethods/methods/GithubActions';
 import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
+import useDefinitionFile from 'hooks/useDefinitionFile';
 import {TriggerTypes} from 'constants/Test.constants';
 import Test from 'models/Test.model';
 import TestRun from 'models/TestRun.model';
@@ -50,6 +52,11 @@ function getMethods(triggerType: TriggerTypes) {
           label: 'GitHub Actions',
           component: GithubActions,
         },
+        {
+          id: 'typescript',
+          label: 'Typescript',
+          component: Typescript,
+        },
       ];
   }
 }
@@ -61,14 +68,18 @@ interface IProps {
 
 const RunDetailAutomate = ({test, run}: IProps) => {
   const [fileName, setFileName] = useState<string>(`${snakeCase(test.name)}.yaml`);
+  const {definition, loadDefinition} = useDefinitionFile();
   const {selectedVariableSet: {id: variableSetId} = {}} = useVariableSet();
 
+  useEffect(() => {
+    loadDefinition(ResourceType.Test, test.id, test.version);
+  }, [loadDefinition, test.id, test.version]);
+
   return (
     <S.Container>
       <S.SectionLeft>
         <RunDetailAutomateDefinition
-          id={test.id}
-          version={test.version}
+          definition={definition}
           resourceType={ResourceType.Test}
           fileName={fileName}
           onFileNameChange={setFileName}
@@ -88,6 +99,7 @@ const RunDetailAutomate = ({test, run}: IProps) => {
                 resourceType={ResourceType.Test}
                 run={run}
                 test={test}
+                definition={definition}
                 variableSetId={variableSetId}
               />
             ),

web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx

@@ -1,32 +1,24 @@
 import {DownloadOutlined} from '@ant-design/icons';
 import {Button} from 'antd';
-import {useCallback, useEffect} from 'react';
+import {useCallback} from 'react';
 import {FramedCodeBlock} from 'components/CodeBlock';
 import {Overlay} from 'components/Inputs';
-import useDefinitionFile from 'hooks/useDefinitionFile';
 import {ResourceName, ResourceType} from 'types/Resource.type';
 import {downloadFile} from 'utils/Common';
 import * as S from './RunDetailAutomateDefinition.styled';
 
 interface IProps {
-  id: string;
-  version: number;
   resourceType: ResourceType;
   fileName: string;
+  definition: string;
   onFileNameChange(value: string): void;
 }
 
-const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFileNameChange}: IProps) => {
-  const {definition, loadDefinition} = useDefinitionFile();
-
+const RunDetailAutomateDefinition = ({resourceType, fileName, definition, onFileNameChange}: IProps) => {
   const onDownload = useCallback(() => {
     downloadFile(definition, fileName);
   }, [definition, fileName]);
 
-  useEffect(() => {
-    loadDefinition(resourceType, id, version);
-  }, [id, loadDefinition, resourceType, version]);
-
   return (
     <S.Container>
       <S.Title>{ResourceName[resourceType]} Definition</S.Title>

web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx

@@ -20,6 +20,7 @@ export interface IMethodChildrenProps {
   id: string;
   resourceType: ResourceType;
   variableSetId?: string;
+  definition?: string;
 }
 
 const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => {

web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.styled.ts

@@ -0,0 +1,22 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+export const Title = styled(Typography.Title).attrs({
+  level: 3,
+})`
+  && {
+    font-size: ${({theme}) => theme.size.md};
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Container = styled.div`
+  margin: 16px 0;
+`;

web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.tsx

@@ -0,0 +1,14 @@
+import {Typography} from 'antd';
+import {withCustomization} from 'providers/Customization';
+import * as S from './Typescript.styled';
+
+const Typescript = () => (
+  <S.Container>
+    <S.TitleContainer>
+      <S.Title>Typescript Integration</S.Title>
+    </S.TitleContainer>
+    <Typography.Paragraph>* this capability is limited to the commercial version of Tracetest.</Typography.Paragraph>
+  </S.Container>
+);
+
+export default withCustomization(Typescript, 'typescript');

web/src/components/RunDetailAutomateMethods/methods/Typescript/index.ts

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

web/src/pages/TestSuiteRunAutomate/Content.tsx

@@ -1,5 +1,5 @@
 import {snakeCase} from 'lodash';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import RunDetailAutomateDefinition from 'components/RunDetailAutomateDefinition';
 import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
 import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
@@ -9,19 +9,24 @@ import {useVariableSet} from 'providers/VariableSet';
 import {useTestSuite} from 'providers/TestSuite';
 import {ResourceType} from 'types/Resource.type';
 import * as S from './TestSuiteRunAutomate.styled';
+import useDefinitionFile from '../../hooks/useDefinitionFile';
 
 const Content = () => {
   const {testSuite} = useTestSuite();
   useDocumentTitle(`${testSuite.name} - Automate`);
   const [fileName, setFileName] = useState<string>(`${snakeCase(testSuite.name)}.yaml`);
   const {selectedVariableSet: {id: variableSetId} = {}} = useVariableSet();
+  const {definition, loadDefinition} = useDefinitionFile();
+
+  useEffect(() => {
+    loadDefinition(ResourceType.TestSuite, testSuite.id, testSuite.version);
+  }, [loadDefinition, testSuite.id, testSuite.version]);
 
   return (
     <S.Container>
       <S.SectionLeft>
         <RunDetailAutomateDefinition
-          id={testSuite.id}
-          version={testSuite.version}
+          definition={definition}
           resourceType={ResourceType.TestSuite}
           fileName={fileName}
           onFileNameChange={setFileName}