fix(frontend): fix automate page to match new run cli command (#2928)

kubeshop · Jul 12, 2023 · 7b4e042 · 7b4e042
1 parent 36c9939
commit 7b4e042
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 42 deletions.
diff --git 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
@@ -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, string> = {
-  [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<CliCommandOption, IOptionsMetadata> {
+  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<TCliCommandConfig>();
   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) => {
     >
       <S.ControlsContainer>
         <S.OptionsContainer>
-          {Object.entries(optionToText).map(([name, text]) => (
+          {Object.entries(optionsMetadata).map(([name, data]) => (
             <Form.Item name={['options', name]} noStyle>
-              <SwitchControl id={name} text={text} key={name} />
+              <SwitchControl id={name} text={data.label} key={name} disabled={data.disabled} help={data.help} />
             </Form.Item>
           ))}
         </S.OptionsContainer>

diff --git 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 (
-    <S.SwitchContainer>
-      <Switch onChange={onChange} checked={value} id={id} />
-      <S.SwitchLabel htmlFor={id}>{text}</S.SwitchLabel>
-    </S.SwitchContainer>
-  );
-};
+const SwitchControl = ({value = false, onChange = noop, text, id, disabled, help}: IProps) => (
+  <S.SwitchContainer>
+    <Switch onChange={onChange} checked={value} id={id} disabled={disabled} />
+    <S.SwitchLabel htmlFor={id} $disabled={disabled}>
+      {text}
+    </S.SwitchLabel>
+    {!!help && <TooltipQuestion title={help} />}
+  </S.SwitchContainer>
+);
 
 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
@@ -6,24 +6,21 @@ 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,
 };
 
 const useCliCommand = () => {
   const [command, setCommand] = useState<string>('');
 
-  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
@@ -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}`;
   },
 });