feat(frontend): add required gates to cli automate page (#2948)

Author: jorgeepc

web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.styled.ts

@@ -42,5 +42,9 @@ export const SwitchLabel = styled.label<{$disabled?: boolean}>`
 export const ControlsContainer = styled.div`
   margin-top: 16px;
 `;
-export const OptionsContainer = styled.div``;
+
+export const OptionsContainer = styled.div`
+  margin-bottom: 24px;
+`;
+
 export const FormatContainer = styled.div``;

web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx

@@ -1,6 +1,8 @@
 import {Form, Radio, Typography} from 'antd';
 import {toUpper} from 'lodash';
 import {useEffect, useMemo} from 'react';
+import RequiredGatesInput from 'components/Settings/TestRunner/RequiredGatesInput';
+import {TooltipQuestion} from 'components/TooltipQuestion/TooltipQuestion';
 import {CliCommandFormat, CliCommandOption, TCliCommandConfig} from 'services/CliCommand.service';
 import {ResourceType} from 'types/Resource.type';
 import * as S from './CliCommand.styled';
@@ -47,6 +49,7 @@ const Controls = ({onChange, id, environmentId, fileName, resourceType}: IProps)
   const [form] = Form.useForm<TCliCommandConfig>();
   const options = Form.useWatch('options', form);
   const format = Form.useWatch('format', form);
+  const requiredGates = Form.useWatch('required-gates', form);
   const optionsMetadata = useMemo(
     () => getOptionsMetadata({isEnvironmentSelected: !!environmentId, resourceType}),
     [environmentId, resourceType]
@@ -56,12 +59,13 @@ const Controls = ({onChange, id, environmentId, fileName, resourceType}: IProps)
     onChange({
       options: options ?? defaultOptions,
       format: format ?? CliCommandFormat.Pretty,
+      requiredGates,
       id,
       environmentId,
       fileName,
       resourceType,
     });
-  }, [environmentId, fileName, format, onChange, options, id, resourceType]);
+  }, [environmentId, fileName, format, requiredGates, onChange, options, id, resourceType]);
 
   return (
     <Form<TCliCommandConfig>
@@ -82,6 +86,21 @@ const Controls = ({onChange, id, environmentId, fileName, resourceType}: IProps)
             </Form.Item>
           ))}
         </S.OptionsContainer>
+
+        <Form.Item name="required-gates">
+          <RequiredGatesInput
+            title={
+              <Typography.Paragraph>
+                Override default Required Gates:{' '}
+                <TooltipQuestion
+                  margin={6}
+                  title="Required Gates are used by the test runner to evaluate if a test is failed or not. You can override the default Required Gates for this run"
+                />
+              </Typography.Paragraph>
+            }
+          />
+        </Form.Item>
+
         <S.FormatContainer>
           <Typography.Paragraph>Output Format:</Typography.Paragraph>
           <Form.Item name="format" noStyle>

web/src/components/RunDetailAutomateMethods/methods/CLICommand/SwitchControl.tsx

@@ -18,7 +18,7 @@ const SwitchControl = ({value = false, onChange = noop, text, id, disabled, help
     <S.SwitchLabel htmlFor={id} $disabled={disabled}>
       {text}
     </S.SwitchLabel>
-    {!!help && <TooltipQuestion title={help} />}
+    {!!help && <TooltipQuestion margin={6} title={help} />}
   </S.SwitchContainer>
 );
 

web/src/components/Settings/TestRunner/RequiredGatesInput.tsx

@@ -9,11 +9,12 @@ import * as S from '../common/Settings.styled';
 interface IProps {
   value?: string[];
   onChange?(value: string[]): void;
+  title?: React.ReactNode;
 }
 
 const supportedGates = Object.values(SupportedRequiredGates);
 
-const RequiredGatesInput = ({value = [], onChange = noop}: IProps) => {
+const RequiredGatesInput = ({value = [], onChange = noop, title}: IProps) => {
   const handleChange = useCallback(
     (gate: SupportedRequiredGates, isChecked: boolean) => {
       const newValue = isChecked ? [...value, gate] : value.filter(g => g !== gate);
@@ -24,10 +25,10 @@ const RequiredGatesInput = ({value = [], onChange = noop}: IProps) => {
 
   return (
     <>
-      <Typography.Title level={3}>Required Gates</Typography.Title>
+      {title || <Typography.Title level={3}>Required Gates</Typography.Title>}
       <S.SwitchListContainer>
         {supportedGates.map(gate => (
-          <S.SwitchContainer>
+          <S.SwitchContainer key={gate}>
             <Switch checked={value.includes(gate)} onChange={isChecked => handleChange(gate, isChecked)} id={gate} />
             <label htmlFor={gate}>
               <Typography.Text>

web/src/models/TestRunner.model.ts

@@ -15,8 +15,8 @@ export const SupportedRequiredGatesDescription = {
   [SupportedRequiredGates.AnalyzerScore]:
     'Test Runs will be marked as failed if the Analyzer Score is below the configured threshold',
   [SupportedRequiredGates.AnalyzerRules]:
-    'Test Runs will be marked as failed if one the Error Level Analyzer Rules are not met',
-  [SupportedRequiredGates.TestSpecs]: 'Test Runs will be marked as failed if on of the defined Test Specs fail',
+    'Test Runs will be marked as failed if one the Error Level Analyzer Rules fails',
+  [SupportedRequiredGates.TestSpecs]: 'Test Runs will be marked as failed if one of the defined Test Specs fails',
 } as const;
 
 const TestRunner = ({spec: rawTestRunner = {}}: TRawTestRunnerResource = {}): TestRunner =>

web/src/pages/TransactionRunAutomate/TransactionRunAutomate.styled.ts

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const Container = styled.div`
   background: ${({theme}) => theme.color.white};
   display: flex;
-  height: 100%;
+  flex: auto;
+  min-height: 0;
   width: 100%;
 `;
 

web/src/pages/TransactionRunOverview/TransactionRunOverview.styled.ts

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const Container = styled.div`
   background: ${({theme}) => theme.color.white};
   display: flex;
-  height: 100%;
+  flex: auto;
+  min-height: 0;
   width: 100%;
 `;
 

web/src/services/CliCommand.service.ts

@@ -23,6 +23,7 @@ export type TCliCommandConfig = {
   environmentId?: string;
   fileName: string;
   format: CliCommandFormat;
+  requiredGates: string[];
   resourceType: ResourceType;
 };
 
@@ -54,13 +55,19 @@ const CliCommandService = () => ({
           : 'tracetest'
       } ${command}`,
   } as Record<CliCommandOption, TApplyOption>,
-  getCommand({options, format, id, environmentId, fileName, resourceType}: TCliCommandConfig) {
-    const command = Object.entries(options).reduce(
+
+  applyRequiredGates: (command: string, requiredGates: string[]) =>
+    requiredGates?.length ? `${command} --required-gates ${requiredGates.join(',')}` : command,
+
+  getCommand({options, format, id, environmentId, fileName, requiredGates, resourceType}: TCliCommandConfig) {
+    let command = Object.entries(options).reduce(
       (acc, [option, enabled]) =>
         this.applyOptions[option as CliCommandOption]({command: acc, enabled, id, environmentId, fileName}),
       `run ${resourceType}`
     );
 
+    command = this.applyRequiredGates(command, requiredGates);
+
     return `${command} --output ${format}`;
   },
 });