feat(frontend): UI updates to test trigger tab

web/src/components/Fields/KeyValueList/KeyValueList.styled.ts

@@ -3,9 +3,7 @@ import styled from 'styled-components';
 
 export const KeyValueContainer = styled.div`
   align-items: start;
-  display: grid;
-  justify-content: center;
-  grid-template-columns: 40% 40% 19%;
+  display: flex;
   margin-bottom: 8px;
 `;
 

web/src/components/Fields/KeyValueList/KeyValueList.tsx

@@ -29,11 +29,11 @@ const KeyValueList = ({
         <>
           {fields.map((field, index) => (
             <S.KeyValueContainer key={field.name}>
-              <Form.Item name={[field.name, 'key']} style={{marginBottom: 0, marginRight: '2px'}}>
+              <Form.Item name={[field.name, 'key']} noStyle>
                 <Editor type={SupportedEditors.Interpolation} placeholder={`${keyPlaceholder} ${index + 1}`} />
               </Form.Item>
 
-              <Form.Item name={[field.name, 'value']} style={{marginBottom: 0}}>
+              <Form.Item name={[field.name, 'value']} noStyle>
                 <Editor type={SupportedEditors.Interpolation} placeholder={`${valuePlaceholder} ${index + 1}`} />
               </Form.Item>
 

web/src/components/Fields/MultiURL/MultiURL.styled.ts

@@ -1,11 +1,9 @@
 import {DeleteOutlined} from '@ant-design/icons';
 import styled from 'styled-components';
 
-export const BrokerURLInputContainer = styled.div`
-  display: grid;
-  align-items: flex-start;
-  grid-template-columns: 90% 10%;
-  margin-bottom: 8px;
+export const URLContainer = styled.div`
+  align-items: start;
+  display: flex;
 
   .ant-form-item {
     margin: 0;
@@ -16,3 +14,9 @@ export const DeleteIcon = styled(DeleteOutlined)`
   color: ${({theme}) => theme.color.textSecondary};
   font-size: ${({theme}) => theme.size.md};
 `;
+
+export const AddURLContainer = styled.div`
+  position: absolute;
+  right: 8px;
+  top: 4px;
+`;

web/src/components/Fields/MultiURL/MultiURL.tsx

@@ -14,41 +14,37 @@ function isFirstItem(index: number) {
 
 const MultiURL = ({name = ['brokerUrls']}: IProps) => (
   <Form.Item
-    className="input-url"
-    rules={[{required: true, min: 1, message: 'Please enter a Broker URL'}]}
+    rules={[{required: true, min: 1, message: 'Please enter a valid URL'}]}
     shouldUpdate
+    style={{marginBottom: 0}}
   >
     <Form.List name={name.length === 1 ? name[0] : name} initialValue={['']}>
       {(fields, {add, remove}) => (
         <>
           {fields.map((field, index) => (
-            <S.BrokerURLInputContainer key={field.name}>
+            <S.URLContainer key={field.name}>
               <Form.Item name={[field.name]} noStyle>
-                <Editor type={SupportedEditors.Interpolation} placeholder={`Enter a broker URL (${index + 1})`} />
+                <Editor type={SupportedEditors.Interpolation} placeholder={`Enter broker URL (${index + 1})`} />
               </Form.Item>
 
-              {(!isFirstItem(index) && (
+              {!isFirstItem(index) && (
                 <Form.Item noStyle>
-                  <Button
-                    icon={<S.DeleteIcon />}
-                    onClick={() => remove(field.name)}
-                    style={{marginLeft: 12}}
-                    type="link"
-                  />
+                  <Button icon={<S.DeleteIcon />} onClick={() => remove(field.name)} type="link" />
                 </Form.Item>
-              )) || <div />}
-            </S.BrokerURLInputContainer>
+              )}
+            </S.URLContainer>
           ))}
 
-          <Button
-            data-cy="add-broker-url"
-            icon={<PlusOutlined />}
-            onClick={() => add()}
-            style={{fontWeight: 600, height: 'auto', padding: 0}}
-            type="link"
-          >
-            Add URL
-          </Button>
+          <S.AddURLContainer>
+            <Button
+              icon={<PlusOutlined />}
+              onClick={() => add()}
+              style={{fontWeight: 600, height: 'auto', padding: 0}}
+              type="link"
+            >
+              New URL
+            </Button>
+          </S.AddURLContainer>
         </>
       )}
     </Form.List>

web/src/components/Fields/PlainAuth/Fields.tsx

@@ -10,26 +10,25 @@ interface IProps {
 const Fields = ({baseName}: IProps) => (
   <S.Row>
     <S.FlexContainer>
-      <S.PlainFieldUsername>
-        <Form.Item
-          name={[...baseName, 'plain', 'username']}
-          data-cy="plain-username"
-          label="Username"
-          rules={[{required: true}]}
-        >
-          <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Username" />
-        </Form.Item>
-      </S.PlainFieldUsername>
-      <S.PlainFieldPassword>
-        <Form.Item
-          name={[...baseName, 'plain', 'password']}
-          label="Password"
-          data-cy="plain-password"
-          rules={[{required: true}]}
-        >
-          <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Password" />
-        </Form.Item>
-      </S.PlainFieldPassword>
+      <Form.Item
+        name={[...baseName, 'plain', 'username']}
+        data-cy="plain-username"
+        label="Username"
+        rules={[{required: true}]}
+        style={{flexBasis: '50%'}}
+      >
+        <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Username" />
+      </Form.Item>
+
+      <Form.Item
+        name={[...baseName, 'plain', 'password']}
+        label="Password"
+        data-cy="plain-password"
+        rules={[{required: true}]}
+        style={{flexBasis: '50%'}}
+      >
+        <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Password" />
+      </Form.Item>
     </S.FlexContainer>
   </S.Row>
 );

web/src/components/Fields/PlainAuth/PlainAuth.tsx

@@ -1,14 +1,14 @@
 import {Form} from 'antd';
 import Fields from './Fields';
-import TypeInput from './Input';
+import PlainAuthType from './PlainAuthType';
 
 interface IProps {
   name?: string[];
 }
 
 const PlainAuth = ({name = ['authentication']}: IProps) => (
-  <div>
-    <TypeInput baseName={name} />
+  <>
+    <PlainAuthType baseName={name} />
     <Form.Item noStyle shouldUpdate style={{marginBottom: 0, width: '100%'}}>
       {({getFieldValue}) => {
         const method = getFieldValue(name)?.type;
@@ -20,7 +20,7 @@ const PlainAuth = ({name = ['authentication']}: IProps) => (
         }
       }}
     </Form.Item>
-  </div>
+  </>
 );
 
 export default PlainAuth;

web/src/components/Fields/PlainAuth/Input.tsx → web/src/components/Fields/PlainAuth/PlainAuthType.tsx

@@ -16,9 +16,9 @@ interface IProps {
   baseName: string[];
 }
 
-const TypeInput = ({baseName}: IProps) => (
+const PlainAuthType = ({baseName}: IProps) => (
   <S.Row>
-    <Form.Item shouldUpdate style={{minWidth: '100%'}} label="Authentication Type" name={[...baseName, 'type']}>
+    <Form.Item shouldUpdate style={{minWidth: '100%'}} name={[...baseName, 'type']}>
       <Select
         className="select-auth-method"
         data-cy="auth-type-select"
@@ -35,4 +35,4 @@ const TypeInput = ({baseName}: IProps) => (
   </S.Row>
 );
 
-export default TypeInput;
+export default PlainAuthType;

web/src/components/Fields/SSL/SSL.tsx

@@ -2,9 +2,13 @@ import {Form, Switch} from 'antd';
 import {TooltipQuestion} from 'components/TooltipQuestion/TooltipQuestion';
 import * as S from './SSL.styled';
 
-const SSL = () => (
+interface IProps {
+  formID?: string;
+}
+
+const SSL = ({formID}: IProps) => (
   <S.SSLVerificationContainer>
-    <label htmlFor="sslVerification">Enable SSL certificate verification</label>
+    <label htmlFor={`${formID}_sslVerification`}>Enable SSL certificate verification</label>
     <Form.Item name="sslVerification" valuePropName="checked" style={{marginBottom: 0}}>
       <Switch />
     </Form.Item>

web/src/components/Fields/URL/URL.tsx

@@ -11,14 +11,12 @@ const URL = ({showMethodSelector = true}: IProps) => (
   <>
     <Row>
       {showMethodSelector && (
-        <Col span={2}>
+        <Col span={3}>
           <Form.Item name="method" initialValue={HTTP_METHOD.GET} valuePropName="value" style={{marginBottom: 0}}>
             <Select
-              showSearch
-              className="select-method"
               data-cy="method-select"
-              dropdownClassName="select-dropdown-method"
               filterOption={(input, option) => option?.key?.toLowerCase().includes(input.toLowerCase())}
+              showSearch
             >
               {Object.keys(HTTP_METHOD).map(method => {
                 return (
@@ -32,14 +30,14 @@ const URL = ({showMethodSelector = true}: IProps) => (
         </Col>
       )}
 
-      <Col span={showMethodSelector ? 22 : 24}>
+      <Col span={showMethodSelector ? 21 : 24}>
         <Form.Item
           data-cy="url"
           name="url"
-          rules={[{required: true, message: 'Please enter a request url'}]}
+          rules={[{required: true, message: 'Please enter a valid URL'}]}
           style={{marginBottom: 0}}
         >
-          <Editor type={SupportedEditors.Interpolation} placeholder="Enter request url" />
+          <Editor type={SupportedEditors.Interpolation} placeholder="Enter URL" />
         </Form.Item>
       </Col>
     </Row>

web/src/components/Fields/VariableName/VariableName.tsx

@@ -0,0 +1,15 @@
+import {Form} from 'antd';
+import {Editor} from 'components/Inputs';
+import {SupportedEditors} from 'constants/Editor.constants';
+
+const VariableName = () => (
+  <Form.Item
+    name="id"
+    rules={[{required: true, message: 'Please enter a valid variable name'}]}
+    style={{marginBottom: 0}}
+  >
+    <Editor type={SupportedEditors.Interpolation} placeholder="Enter variable name" />
+  </Form.Item>
+);
+
+export default VariableName;

web/src/components/Fields/index.ts

@@ -1,10 +1,11 @@
-import URL from './URL/URL';
 import Auth from './Auth/Auth';
-import SSL from './SSL/SSL';
 import Headers from './Headers/Headers';
+import KeyValueList from './KeyValueList/KeyValueList';
 import Metadata from './Metadata/Metadata';
 import MultiURL from './MultiURL/MultiURL';
 import PlainAuth from './PlainAuth/PlainAuth';
-import KeyValueList from './KeyValueList/KeyValueList';
+import SSL from './SSL/SSL';
+import URL from './URL/URL';
+import VariableName from './VariableName/VariableName';
 
-export {URL, Auth, SSL, Headers, Metadata, MultiURL, PlainAuth, KeyValueList};
+export {URL, Auth, SSL, Headers, Metadata, MultiURL, PlainAuth, KeyValueList, VariableName};

web/src/components/Inputs/Body/Body.tsx

@@ -1,4 +1,4 @@
-import {Radio, Select} from 'antd';
+import {Radio, Select, Typography} from 'antd';
 import {noop} from 'lodash';
 import {Editor} from 'components/Inputs';
 import {SupportedEditors} from 'constants/Editor.constants';
@@ -36,7 +36,7 @@ const Body = ({value = '', onChange = noop}: IProps) => {
       </S.RadioContainer>
       {hasNoBody && (
         <div>
-          <h4>This request has no body {bodyMode}</h4>
+          <Typography.Text type="secondary">This request does not have a body</Typography.Text>
         </div>
       )}
       <S.BodyFieldContainer $isDisplaying={hasNoBody} data-cy="body">

web/src/components/TestPlugins/EntryPoint/TraceID/TraceID.tsx

@@ -1,5 +1,5 @@
-import VariableNameForm from 'components/TestPlugins/Forms/TraceID/TraceID';
+import {VariableName} from 'components/Fields';
 
-const TraceID = () => <VariableNameForm />;
+const TraceID = () => <VariableName />;
 
 export default TraceID;

web/src/components/TestPlugins/FormFactory.tsx

@@ -1,14 +1,13 @@
-import {TriggerTypes} from 'constants/Test.constants';
-import {TDraftTestForm} from 'types/Test.types';
 import Rest from 'components/TestPlugins/Forms/Rest';
 import Grpc from 'components/TestPlugins/Forms/Grpc';
-import TraceID from 'components/TestPlugins/Forms/TraceID';
 import Kafka from 'components/TestPlugins/Forms/Kafka';
+import {TriggerTypes} from 'constants/Test.constants';
+import {TDraftTestForm} from 'types/Test.types';
 
 const FormFactoryMap = {
   [TriggerTypes.http]: Rest,
   [TriggerTypes.grpc]: Grpc,
-  [TriggerTypes.traceid]: TraceID,
+  [TriggerTypes.traceid]: () => null,
   [TriggerTypes.kafka]: Kafka,
 };
 

web/src/components/TestPlugins/Forms/Grpc/Grpc.tsx

@@ -31,7 +31,7 @@ const RequestDetailsForm = () => {
         <Auth />
       </Tabs.TabPane>
 
-      <Tabs.TabPane forceRender tab="Setup" key="setup">
+      <Tabs.TabPane forceRender tab="Service definition" key="service-definition">
         <Form.Item data-cy="protoFile" name="protoFile" label="Upload Protobuf File">
           <FileUpload />
         </Form.Item>