feat(frontend): UI updates to test trigger tab

web/src/components/CreateTest/TraceID/TraceID.tsx

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

web/src/components/CreateTestPlugins/Grpc/steps/RequestDetails/RequestDetailsForm.tsx

@@ -35,7 +35,7 @@ const RequestDetailsForm = ({form}: IProps) => {
         <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>

web/src/components/CreateTestPlugins/Kafka/steps/RequestDetails/RequestDetailsForm.tsx

@@ -3,54 +3,48 @@ import KeyValueListInput from 'components/Fields/KeyValueList';
 import {PlainAuth, SSL} from 'components/Fields';
 import {Editor} from 'components/Inputs';
 import {SupportedEditors} from 'constants/Editor.constants';
+import {FORM_ID} from 'pages/CreateTest/Content';
 
-const RequestDetailsForm = () => {
-  return (
-    <Tabs defaultActiveKey="auth">
-      <Tabs.TabPane forceRender tab="Auth" key="auth">
-        <PlainAuth />
-      </Tabs.TabPane>
+const RequestDetailsForm = () => (
+  <Tabs defaultActiveKey="auth">
+    <Tabs.TabPane forceRender tab="Auth" key="auth">
+      <PlainAuth />
+    </Tabs.TabPane>
 
-      <Tabs.TabPane forceRender tab="Message" key="message">
-        <Form.Item
-          label="Topic"
-          data-cy="topic"
-          name="topic"
-          rules={[{required: true, message: 'Please enter a topic'}]}
-        >
-          <Editor type={SupportedEditors.Interpolation} placeholder="my-topic" />
-        </Form.Item>
+    <Tabs.TabPane forceRender tab="Message" key="message">
+      <Form.Item label="Topic" data-cy="topic" name="topic" rules={[{required: true, message: 'Please enter a topic'}]}>
+        <Editor type={SupportedEditors.Interpolation} placeholder="my-topic" />
+      </Form.Item>
 
-        <Form.Item label="Key" data-cy="message-key" name="messageKey">
-          <Editor type={SupportedEditors.Interpolation} placeholder="my-message-name" />
-        </Form.Item>
+      <Form.Item label="Key" data-cy="message-key" name="messageKey">
+        <Editor type={SupportedEditors.Interpolation} placeholder="my-message-name" />
+      </Form.Item>
 
-        <Form.Item
-          label="Value"
-          data-cy="message-value"
-          name="messageValue"
-          rules={[{required: true, message: 'Please enter a message value'}]}
-        >
-          <Editor type={SupportedEditors.Interpolation} placeholder="my-message-value" />
-        </Form.Item>
-      </Tabs.TabPane>
+      <Form.Item
+        label="Value"
+        data-cy="message-value"
+        name="messageValue"
+        rules={[{required: true, message: 'Please enter a message value'}]}
+      >
+        <Editor type={SupportedEditors.Interpolation} placeholder="my-message-value" />
+      </Form.Item>
+    </Tabs.TabPane>
 
-      <Tabs.TabPane forceRender tab="Headers" key="headers">
-        <KeyValueListInput
-          name="headers"
-          label="Message Headers"
-          addButtonLabel="Add Header"
-          keyPlaceholder="Header Key"
-          valuePlaceholder="Header Value"
-          initialValue={[{key: '', value: ''}]}
-        />
-      </Tabs.TabPane>
+    <Tabs.TabPane forceRender tab="Headers" key="headers">
+      <KeyValueListInput
+        name="headers"
+        label="Message Headers"
+        addButtonLabel="Add Header"
+        keyPlaceholder="Header Key"
+        valuePlaceholder="Header Value"
+        initialValue={[{key: '', value: ''}]}
+      />
+    </Tabs.TabPane>
 
-      <Tabs.TabPane forceRender tab="Settings" key="settings">
-        <SSL />
-      </Tabs.TabPane>
-    </Tabs>
-  );
-};
+    <Tabs.TabPane forceRender tab="Settings" key="settings">
+      <SSL formID={FORM_ID} />
+    </Tabs.TabPane>
+  </Tabs>
+);
 
 export default RequestDetailsForm;

web/src/components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsForm.tsx

@@ -3,8 +3,7 @@ import {DEFAULT_HEADERS} from 'constants/Test.constants';
 import KeyValueListInput from 'components/Fields/KeyValueList';
 import {Body} from 'components/Inputs';
 import {Auth, SSL} from 'components/Fields';
-
-export const FORM_ID = 'create-test';
+import {FORM_ID} from 'pages/CreateTest/Content';
 
 const RequestDetailsForm = () => (
   <Tabs defaultActiveKey="auth">
@@ -30,7 +29,7 @@ const RequestDetailsForm = () => (
     </Tabs.TabPane>
 
     <Tabs.TabPane forceRender tab="Settings" key="settings">
-      <SSL />
+      <SSL formID={FORM_ID} />
     </Tabs.TabPane>
   </Tabs>
 );

web/src/components/CreateTestPlugins/TraceID/TraceID.ts

@@ -1,11 +1,9 @@
 import {IPluginComponentMap} from 'types/Plugins.types';
-import VariableName from './steps/VariableName';
 import Default from '../Default';
 
 export const PluginComponentMap: IPluginComponentMap = {
   SelectPlugin: Default.SelectPlugin,
   BasicDetails: Default.BasicDetails,
-  TraceIdVariableName: VariableName,
 };
 
 export default PluginComponentMap;

web/src/components/EditTestForm/EditRequestDetails/Kafka/Kafka.tsx

@@ -1,5 +1,5 @@
-import BasicDetailsForm from 'components/CreateTestPlugins/Kafka/steps/RequestDetails/RequestDetailsForm';
+import RequestDetailsForm from 'components/CreateTestPlugins/Kafka/steps/RequestDetails/RequestDetailsForm';
 
-const EditRequestDetailsKafka = () => <BasicDetailsForm />;
+const EditRequestDetailsKafka = () => <RequestDetailsForm />;
 
 export default EditRequestDetailsKafka;

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;