fix(frontend): fixing multiple UX/UI issues

web/src/components/AttributeRow/AttributeRow.styled.ts

@@ -2,11 +2,11 @@ import {InfoCircleOutlined} from '@ant-design/icons';
 import {Tag as AntdTag, Typography} from 'antd';
 import styled from 'styled-components';
 import TestOutputMark from 'components/TestOutputMark';
+import moreIcon from 'assets/more.svg';
 
 export {default as AttributeTitle} from './AttributeTitle';
 
 export const Container = styled.div`
-  align-items: center;
   background-color: ${({theme}) => theme.color.white};
   display: flex;
   margin-bottom: 4px;
@@ -74,3 +74,7 @@ export const OutputsMark = styled(TestOutputMark)`
     margin: 4px;
   }
 `;
+
+export const MoreIcon = styled.img.attrs({
+  src: moreIcon,
+})``;

web/src/components/AttributeRow/AttributeRow.tsx

@@ -1,4 +1,3 @@
-import {MoreOutlined} from '@ant-design/icons';
 import {Dropdown, Menu, Popover} from 'antd';
 import parse from 'html-react-parser';
 import MarkdownIt from 'markdown-it';
@@ -125,8 +124,8 @@ const AttributeRow = ({
       </S.Header>
 
       <Dropdown overlay={menu}>
-        <a onClick={e => e.preventDefault()}>
-          <MoreOutlined />
+        <a onClick={e => e.preventDefault()} style={{height: 'fit-content'}}>
+          <S.MoreIcon />
         </a>
       </Dropdown>
     </S.Container>

web/src/components/CreateTestPlugins/Default/steps/BasicDetails/BasicDetailsForm.tsx

@@ -31,6 +31,7 @@ const BasicDetailsForm = ({
         <Form.Item
           className="input-name"
           data-cy="create-test-name-input"
+          data-tour={StepsID.Trigger}
           label="Name"
           name="name"
           rules={[{required: true, message: 'Please enter a test name'}]}
@@ -41,7 +42,6 @@ const BasicDetailsForm = ({
         <Form.Item
           className="input-description"
           data-cy="create-test-description-input"
-          data-tour={StepsID.Trigger}
           label="Description"
           name="description"
           style={{marginBottom: 0}}

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

@@ -1,7 +1,6 @@
 import {PlusOutlined} from '@ant-design/icons';
 import {Button, Form} from 'antd';
 import {DEFAULT_HEADERS, IKeyValue} from 'constants/Test.constants';
-import React from 'react';
 import Editor from 'components/Editor';
 import {SupportedEditors} from 'constants/Editor.constants';
 import * as S from './RequestDetails.styled';
@@ -11,14 +10,16 @@ interface IProps {
   name?: string[];
   unit?: string;
   label?: string;
+  className?: string;
 }
-const RequestDetailsHeadersInput: React.FC<IProps> = ({
+const RequestDetailsHeadersInput = ({
   unit = 'Header',
   name = ['headers'],
   initialValue = DEFAULT_HEADERS,
   label = 'Header',
-}) => (
-  <Form.Item className="input-headers" label={`${label} list`} shouldUpdate>
+  className = '',
+}: IProps) => (
+  <Form.Item className={`input-headers ${className}`} label={`${label} list`} shouldUpdate>
     <Form.List name={name.length === 1 ? name[0] : name} initialValue={initialValue}>
       {(fields, {add, remove}) => (
         <>
@@ -50,7 +51,7 @@ const RequestDetailsHeadersInput: React.FC<IProps> = ({
             style={{fontWeight: 600, height: 'auto', padding: 0}}
             type="link"
           >
-            {`Add ${label}`}
+            Add {label}
           </Button>
         </>
       )}

web/src/components/GuidedTour/testRunSteps.ts

@@ -9,13 +9,6 @@ export enum StepsID {
 }
 
 const Steps: Step[] = [
-  {
-    title: 'Response',
-    target: GuidedTourService.getStepSelector(StepsID.Response),
-    content: 'View various responses here. When the test is finished, you will get the following results.',
-    placement: 'left',
-    disableBeacon: true,
-  },
   {
     title: 'Trigger',
     target: GuidedTourService.getStepSelector(StepsID.Trigger),
@@ -24,6 +17,13 @@ const Steps: Step[] = [
       'You can change the trigger by altering the details and saving. This will rerun the test with the updated trigger.',
     disableBeacon: true,
   },
+  {
+    title: 'Response',
+    target: GuidedTourService.getStepSelector(StepsID.Response),
+    content: 'View various responses here. When the test is finished, you will get the following results.',
+    placement: 'left',
+    disableBeacon: true,
+  },
   {
     title: 'Mode Switcher',
     target: '.ant-tabs-nav-wrap',

web/src/components/Settings/DataStorePlugin/DataStorePluginForm.styled.ts

@@ -1,6 +1,7 @@
 import {DeleteOutlined} from '@ant-design/icons';
 import {Button, Typography} from 'antd';
 import styled from 'styled-components';
+import RequestDetailsHeadersInput from 'components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsHeadersInput';
 
 export const FormContainer = styled.div`
   display: grid;
@@ -59,3 +60,7 @@ export const Title = styled(Typography.Title)`
     margin: 0;
   }
 `;
+
+export const HeadersInput = styled(RequestDetailsHeadersInput)`
+  max-width: 1000px;
+`;

web/src/components/Settings/DataStorePlugin/forms/GrpcClient/GrpcClient.tsx

@@ -1,9 +1,8 @@
 import {Checkbox, Col, Form, Input, Row, Select, Space, Switch} from 'antd';
-
-import RequestDetailsHeadersInput from 'components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsHeadersInput';
 import {SupportedDataStoresToDefaultEndpoint} from 'constants/DataStore.constants';
 import {SupportedDataStores, TDraftDataStore} from 'types/DataStore.types';
 import * as S from './GrcpClient.styled';
+import * as FS from '../../DataStorePluginForm.styled';
 import GrpcClientSecure from './GrpcClientSecure';
 
 const COMPRESSION_LIST = [
@@ -78,7 +77,7 @@ const GrpcClient = () => {
 
       <Row gutter={[16, 16]}>
         <Col span={12}>
-          <RequestDetailsHeadersInput initialValue={HEADER_DEFAULT_VALUES} name={[...baseName, 'rawHeaders']} />
+          <FS.HeadersInput initialValue={HEADER_DEFAULT_VALUES} name={[...baseName, 'rawHeaders']} />
         </Col>
       </Row>
 

web/src/components/Settings/DataStorePlugin/forms/HttpClient/HttpClient.tsx

@@ -1,7 +1,7 @@
 import {Checkbox, Col, Form, Input, Row, Space, Switch} from 'antd';
-import RequestDetailsHeadersInput from 'components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsHeadersInput';
 import {TDraftDataStore} from 'types/DataStore.types';
 import GrpcClientSecure from '../GrpcClient/GrpcClientSecure';
+import * as S from '../../DataStorePluginForm.styled';
 
 const HEADER_DEFAULT_VALUES = [{key: '', value: ''}];
 
@@ -23,7 +23,7 @@ const HttpClient = () => {
 
       <Row gutter={[16, 16]}>
         <Col span={12}>
-          <RequestDetailsHeadersInput initialValue={HEADER_DEFAULT_VALUES} name={[...baseName, 'rawHeaders']} />
+          <S.HeadersInput initialValue={HEADER_DEFAULT_VALUES} name={[...baseName, 'rawHeaders']} />
         </Col>
       </Row>