feat(frontend): add variable set help info (#3707)

web/src/components/ImportModal/ImportModal.tsx

@@ -58,7 +58,6 @@ const ImportModal = ({isOpen, onClose}: IProps) => {
       onCancel={onClose}
       title={<S.Title level={2}>Import a test</S.Title>}
       visible={isOpen}
-      centered
     >
       <Form<TDraftTest>
         form={form}

web/src/components/ImportModal/Tip.tsx

@@ -1,12 +1,11 @@
-import {BulbOutlined} from '@ant-design/icons';
 import {Typography} from 'antd';
 
 const Tip = () => (
   <>
-    <Typography.Title level={3} type="secondary">
-      <BulbOutlined /> What are the supported formats?
-    </Typography.Title>
-    <Typography.Text type="secondary">We support Tracetest Definition, cURL & Postman. OpenAPI is coming soon!</Typography.Text>
+    <Typography.Title level={3}>💡 What are the supported formats?</Typography.Title>
+    <Typography.Text type="secondary">
+      We support Tracetest Definition, cURL & Postman. OpenAPI is coming soon!
+    </Typography.Text>
   </>
 );
 

web/src/components/VariableSetModal/Tip.tsx

@@ -0,0 +1,19 @@
+import {Typography} from 'antd';
+import {VARIABLE_SET_DOCUMENTATION_URL} from 'constants/Common.constants';
+import * as S from './VariableSetModal.styled';
+
+const Tip = () => (
+  <S.TipContainer>
+    <Typography.Title level={3}>💡 What are Variable Sets?</Typography.Title>
+    <Typography.Paragraph>
+      <Typography.Text type="secondary">
+        {`Variable sets are groups of variables that can be referenced by tests using this syntax: http://\${var:HOSTNAME}/api/users. `}
+      </Typography.Text>
+      <Typography.Link href={VARIABLE_SET_DOCUMENTATION_URL} target="_blank">
+        Read more
+      </Typography.Link>
+    </Typography.Paragraph>
+  </S.TipContainer>
+);
+
+export default Tip;

web/src/components/VariableSetModal/VariableSetModal.styled.ts

@@ -17,7 +17,10 @@ export const Modal = styled(AntModal)`
 
 export const Title = styled(Typography.Title)`
   && {
-    font-size: ${({theme}) => theme.size.lg};
     margin: 0;
   }
 `;
+
+export const TipContainer = styled.div`
+  margin-top: 24px;
+`;

web/src/components/VariableSetModal/VariableSetModal.tsx

@@ -6,6 +6,7 @@ import VariableSet from 'models/VariableSet.model';
 import VariableSetService from 'services/VariableSet.service';
 import * as S from './VariableSetModal.styled';
 import VariableSetModalFooter from './VariableSetModalFooter';
+import Tip from './Tip';
 
 interface IProps {
   variableSet?: VariableSet;
@@ -52,7 +53,7 @@ const VariableSetModal = ({variableSet, isOpen, onClose, onSubmit, isLoading}: I
         />
       }
       onCancel={onClose}
-      title={<S.Title>{isEditing ? 'Edit variable set' : 'Create a new variable set'}</S.Title>}
+      title={<S.Title level={2}>{isEditing ? 'Edit variable set' : 'Create a new variable set'}</S.Title>}
       visible={isOpen}
     >
       <VariableSetForm
@@ -61,6 +62,8 @@ const VariableSetModal = ({variableSet, isOpen, onClose, onSubmit, isLoading}: I
         onSubmit={handleOnSubmit}
         onValidate={handleOnValidate}
       />
+
+      <Tip />
     </S.Modal>
   );
 };