From 7b4e042ff95c9eda61468a5427a4a71b6795b350 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Thu, 13 Jul 2023 05:05:48 +0900 Subject: [PATCH] fix(frontend): fix automate page to match new run cli command (#2928) --- .../methods/CLICommand/CliCommand.styled.ts | 5 ++- .../methods/CLICommand/Controls.tsx | 44 +++++++++++++------ .../methods/CLICommand/SwitchControl.tsx | 20 +++++---- .../methods/CLICommand/hooks/useCliCommand.ts | 17 +++---- web/src/services/CliCommand.service.ts | 20 +++++---- 5 files changed, 64 insertions(+), 42 deletions(-) diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.styled.ts index c912c8d7fe..72b2091495 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.styled.ts +++ b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.styled.ts @@ -34,8 +34,9 @@ export const SwitchContainer = styled.div` margin-bottom: 12px; `; -export const SwitchLabel = styled.label` - cursor: pointer; +export const SwitchLabel = styled.label<{$disabled?: boolean}>` + color: ${({$disabled, theme}) => ($disabled ? theme.color.textLight : theme.color.text)}; + cursor: ${({$disabled}) => ($disabled ? 'not-allowed' : 'pointer')}; `; export const ControlsContainer = styled.div` diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx index d7f05d7e04..8aaf3d0c3a 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx +++ b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx @@ -1,20 +1,37 @@ -import {toUpper} from 'lodash'; -import {useEffect} from 'react'; import {Form, Radio, Typography} from 'antd'; +import {toUpper} from 'lodash'; +import {useEffect, useMemo} from 'react'; +import Test from 'models/Test.model'; import {CliCommandFormat, CliCommandOption, TCliCommandConfig} from 'services/CliCommand.service'; import * as S from './CliCommand.styled'; import SwitchControl from './SwitchControl'; import {defaultOptions} from './hooks/useCliCommand'; -import Test from '../../../../models/Test.model'; -const optionToText: Record = { - [CliCommandOption.Wait]: 'Wait for test to complete', - [CliCommandOption.UseHostname]: 'Specify Tracetest server hostname', - [CliCommandOption.UseCurrentEnvironment]: 'Use current environment', - // [CliCommandOption.UseId]: 'Use file or test id', - [CliCommandOption.GeneratesJUnit]: 'Generate JUnit report', - [CliCommandOption.useDocker]: 'Run CLI via Docker image', -}; +interface IOptionsMetadataParams { + isEnvironmentSelected: boolean; +} +interface IOptionsMetadata { + label: string; + help?: string; + disabled?: boolean; +} + +function getOptionsMetadata({ + isEnvironmentSelected, +}: IOptionsMetadataParams): Record { + return { + [CliCommandOption.UseId]: {label: 'Use test ID instead of file'}, + [CliCommandOption.SkipResultWait]: {label: 'Skip waiting for test to complete'}, + [CliCommandOption.UseHostname]: {label: 'Specify Tracetest server hostname'}, + [CliCommandOption.UseCurrentEnvironment]: { + label: 'Use selected environment', + help: !isEnvironmentSelected ? 'This option is only available when an environment is selected' : undefined, + disabled: !isEnvironmentSelected, + }, + [CliCommandOption.GeneratesJUnit]: {label: 'Generate JUnit report'}, + [CliCommandOption.useDocker]: {label: 'Run CLI via Docker image'}, + }; +} interface IProps { onChange(cmdConfig: TCliCommandConfig): void; @@ -27,6 +44,7 @@ const Controls = ({onChange, test, environmentId, fileName}: IProps) => { const [form] = Form.useForm(); const options = Form.useWatch('options', form); const format = Form.useWatch('format', form); + const optionsMetadata = useMemo(() => getOptionsMetadata({isEnvironmentSelected: !!environmentId}), [environmentId]); useEffect(() => { onChange({ @@ -51,9 +69,9 @@ const Controls = ({onChange, test, environmentId, fileName}: IProps) => { > - {Object.entries(optionToText).map(([name, text]) => ( + {Object.entries(optionsMetadata).map(([name, data]) => ( - + ))} diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/SwitchControl.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/SwitchControl.tsx index 292c1d6489..bf56a89812 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/SwitchControl.tsx +++ b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/SwitchControl.tsx @@ -1,21 +1,25 @@ import {Switch} from 'antd'; import {noop} from 'lodash'; +import {TooltipQuestion} from 'components/TooltipQuestion/TooltipQuestion'; import * as S from './CliCommand.styled'; interface IProps { text: string; value?: boolean; id: string; + disabled?: boolean; + help?: string; onChange?(value: boolean): void; } -const SwitchControl = ({value = false, onChange = noop, text, id}: IProps) => { - return ( - - - {text} - - ); -}; +const SwitchControl = ({value = false, onChange = noop, text, id, disabled, help}: IProps) => ( + + + + {text} + + {!!help && } + +); export default SwitchControl; diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/hooks/useCliCommand.ts b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/hooks/useCliCommand.ts index 9cc4c217be..f987133271 100644 --- a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/hooks/useCliCommand.ts +++ b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/hooks/useCliCommand.ts @@ -6,10 +6,10 @@ import CliCommandService, { } from 'services/CliCommand.service'; export const defaultOptions: TCliCommandEnabledOptions = { - [CliCommandOption.Wait]: false, + [CliCommandOption.UseId]: false, + [CliCommandOption.SkipResultWait]: false, [CliCommandOption.UseHostname]: false, - [CliCommandOption.UseCurrentEnvironment]: true, - // [CliCommandOption.UseId]: true, + [CliCommandOption.UseCurrentEnvironment]: false, [CliCommandOption.GeneratesJUnit]: false, [CliCommandOption.useDocker]: false, }; @@ -17,13 +17,10 @@ export const defaultOptions: TCliCommandEnabledOptions = { const useCliCommand = () => { const [command, setCommand] = useState(''); - const onGetCommand = useCallback( - (config: TCliCommandConfig) => { - const cmd = CliCommandService.getCommand(config); - setCommand(cmd); - }, - [] - ); + const onGetCommand = useCallback((config: TCliCommandConfig) => { + const cmd = CliCommandService.getCommand(config); + setCommand(cmd); + }, []); return {command, onGetCommand}; }; diff --git a/web/src/services/CliCommand.service.ts b/web/src/services/CliCommand.service.ts index 71d491f62f..00a48e943c 100644 --- a/web/src/services/CliCommand.service.ts +++ b/web/src/services/CliCommand.service.ts @@ -2,10 +2,10 @@ import Test from 'models/Test.model'; import {getServerBaseUrl} from 'utils/Common'; export enum CliCommandOption { - Wait = 'wait', + UseId = 'useId', + SkipResultWait = 'skipWait', UseHostname = 'useHostname', UseCurrentEnvironment = 'useCurrentEnvironment', - // UseId = 'useId', GeneratesJUnit = 'generateJUnit', useDocker = 'useDocker', } @@ -30,19 +30,21 @@ type TApplyProps = { test: Test; environmentId?: string; enabled: boolean; + fileName: string; }; type TApplyOption = (props: TApplyProps) => string; const CliCommandService = () => ({ applyOptions: { - [CliCommandOption.Wait]: ({command, enabled}) => (enabled ? `${command} --wait-for-result` : command), + [CliCommandOption.UseId]: ({enabled, command, test: {id}, fileName}) => + `${command} ${enabled ? `--id ${id}` : `--file ${fileName}`}`, + [CliCommandOption.SkipResultWait]: ({command, enabled}) => (enabled ? `${command} --skip-result-wait` : command), [CliCommandOption.UseHostname]: ({command, enabled}) => { const baseUrl = getServerBaseUrl(); - return enabled ? `${command} -s ${baseUrl}` : command; + return enabled ? `${command} --server-url ${baseUrl}` : command; }, [CliCommandOption.UseCurrentEnvironment]: ({command, enabled, environmentId}) => - enabled && environmentId ? `${command} -e ${environmentId}` : command, - // [CliCommandOption.UseId]: ({enabled, command, test: {id}}) => `${command} -d ${enabled ? id : `${id}.yaml`}`, + enabled && environmentId ? `${command} --environment ${environmentId}` : command, [CliCommandOption.GeneratesJUnit]: ({command, enabled}) => (enabled ? `${command} --junit result.junit` : command), [CliCommandOption.useDocker]: ({enabled, command}) => `${ @@ -54,11 +56,11 @@ const CliCommandService = () => ({ getCommand({options, format, test, environmentId, fileName}: TCliCommandConfig) { const command = Object.entries(options).reduce( (acc, [option, enabled]) => - this.applyOptions[option as CliCommandOption]({command: acc, enabled, test, environmentId}), - `run test -f ${fileName}` + this.applyOptions[option as CliCommandOption]({command: acc, enabled, test, environmentId, fileName}), + 'run test' ); - return `${command} -o ${format}`; + return `${command} --output ${format}`; }, });