From f8aa881c0884912f3e93bb1d24b1082021a21e4b Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Mon, 29 Jan 2024 15:44:44 -0600 Subject: [PATCH] feat(frontend): Typescript Test Run Automate Tab (#3576) --- .../RunDetailAutomate/RunDetailAutomate.tsx | 18 ++++++++++++--- .../RunDetailAutomateDefinition.tsx | 14 +++--------- .../RunDetailAutomateMethods.tsx | 1 + .../methods/Typescript/Typescript.styled.ts | 22 +++++++++++++++++++ .../methods/Typescript/Typescript.tsx | 14 ++++++++++++ .../methods/Typescript/index.ts | 2 ++ .../pages/TestSuiteRunAutomate/Content.tsx | 11 +++++++--- 7 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.styled.ts create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.tsx create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Typescript/index.ts diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx index 526eeb5df7..28f827c2ec 100644 --- a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx +++ b/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(`${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 ( { resourceType={ResourceType.Test} run={run} test={test} + definition={definition} variableSetId={variableSetId} /> ), diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx index d1f37a4e73..dd79aec0f0 100644 --- a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx +++ b/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 ( {ResourceName[resourceType]} Definition diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx index 19827a2cf0..72d8ce21a1 100644 --- a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx +++ b/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) => { diff --git a/web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.styled.ts new file mode 100644 index 0000000000..96afc21ad8 --- /dev/null +++ b/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; +`; diff --git a/web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.tsx b/web/src/components/RunDetailAutomateMethods/methods/Typescript/Typescript.tsx new file mode 100644 index 0000000000..f0caa0e140 --- /dev/null +++ b/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 = () => ( + + + Typescript Integration + + * this capability is limited to the commercial version of Tracetest. + +); + +export default withCustomization(Typescript, 'typescript'); diff --git a/web/src/components/RunDetailAutomateMethods/methods/Typescript/index.ts b/web/src/components/RunDetailAutomateMethods/methods/Typescript/index.ts new file mode 100644 index 0000000000..014e2a727a --- /dev/null +++ b/web/src/components/RunDetailAutomateMethods/methods/Typescript/index.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line no-restricted-exports +export {default} from './Typescript'; diff --git a/web/src/pages/TestSuiteRunAutomate/Content.tsx b/web/src/pages/TestSuiteRunAutomate/Content.tsx index cd6e59a727..b1f557fb5e 100644 --- a/web/src/pages/TestSuiteRunAutomate/Content.tsx +++ b/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(`${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 (