From caa7bb62e0db5840ea279b57f3dd40c6c7af41ef Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Tue, 5 Mar 2024 11:08:45 -0500
Subject: [PATCH] feat(frontend): add variable set help info (#3707)

---
 .../components/ImportModal/ImportModal.tsx    |  1 -
 web/src/components/ImportModal/Tip.tsx        |  9 ++++-----
 web/src/components/VariableSetModal/Tip.tsx   | 19 +++++++++++++++++++
 .../VariableSetModal.styled.ts                |  5 ++++-
 .../VariableSetModal/VariableSetModal.tsx     |  5 ++++-
 5 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/VariableSetModal/Tip.tsx

diff --git a/web/src/components/ImportModal/ImportModal.tsx b/web/src/components/ImportModal/ImportModal.tsx
index cf1e4aa8de..7b23c50de6 100644
--- a/web/src/components/ImportModal/ImportModal.tsx
+++ b/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}
diff --git a/web/src/components/ImportModal/Tip.tsx b/web/src/components/ImportModal/Tip.tsx
index 09349350a5..511c6ef7f7 100644
--- a/web/src/components/ImportModal/Tip.tsx
+++ b/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>
   </>
 );
 
diff --git a/web/src/components/VariableSetModal/Tip.tsx b/web/src/components/VariableSetModal/Tip.tsx
new file mode 100644
index 0000000000..e8b33ef1e9
--- /dev/null
+++ b/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;
diff --git a/web/src/components/VariableSetModal/VariableSetModal.styled.ts b/web/src/components/VariableSetModal/VariableSetModal.styled.ts
index 5d79805798..019ed8b291 100644
--- a/web/src/components/VariableSetModal/VariableSetModal.styled.ts
+++ b/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;
+`;
diff --git a/web/src/components/VariableSetModal/VariableSetModal.tsx b/web/src/components/VariableSetModal/VariableSetModal.tsx
index 929eef50af..2953997f09 100644
--- a/web/src/components/VariableSetModal/VariableSetModal.tsx
+++ b/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>
   );
 };