Skip to content

Commit 6dc3d1d

Browse files
jsajaljsajal
committed
render pre request and post response variables in a table
1 parent 96fe282 commit 6dc3d1d

1 file changed

Lines changed: 42 additions & 63 deletions

File tree

‎src/components/molecules/flow/nodes/RequestNode.js‎

Lines changed: 42 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { TextEditor } from 'components/atoms/common/TextEditor';
1616
import useCollectionStore from 'stores/CollectionStore';
1717
import { useTabStore } from 'stores/TabStore';
1818
import { cloneDeep } from 'lodash';
19+
import Tippy from '@tippyjs/react';
20+
import 'tippy.js/dist/tippy.css';
1921

2022
const RequestNode = ({ id, data }) => {
2123
const setRequestNodeUrl = useCanvasStore((state) => state.setRequestNodeUrl);
@@ -59,17 +61,38 @@ const RequestNode = ({ id, data }) => {
5961
setRequestNodeUrl(id, value);
6062
};
6163

62-
const renderNewVars = (vType) => {
64+
const Tooltip = ({ text }) => {
65+
return (
66+
<Tippy content={text} placement='top' maxWidth='none'>
67+
<svg
68+
tabIndex='-1'
69+
id='tooltipId'
70+
xmlns='http://www.w3.org/2000/svg'
71+
width='14'
72+
height='14'
73+
fill='currentColor'
74+
className='inline-block ml-2 cursor-pointer'
75+
viewBox='0 0 16 16'
76+
style={{ marginTop: 1 }}
77+
>
78+
<path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' />
79+
<path d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z' />
80+
</svg>
81+
</Tippy>
82+
);
83+
};
84+
85+
const renderVariables = (vType) => {
6386
const variables = vType === 'pre-request' ? data.preReqVars : data.postRespVars;
6487
return (
65-
<>
88+
<div>
6689
{variables && Object.keys(variables).length > 0 ? (
6790
<table className='leading-normal'>
6891
<thead>
6992
<tr className='text-xs font-bold tracking-wider text-left bg-ghost-50 text-ghost-600'>
70-
<th className='p-1 border border-ghost-200'>Name</th>
71-
<th className='p-1 border border-ghost-200 '>Value</th>
72-
<th className='p-1 border border-ghost-200 '></th>
93+
<th className='w-2/6 p-1 border border-ghost-200'>Name</th>
94+
<th className='w-4/6 p-1 border border-ghost-200 '>Value</th>
95+
<th className='w-1/6 p-1 border border-ghost-200 '></th>
7396
</tr>
7497
</thead>
7598
<tbody>
@@ -78,7 +101,7 @@ const RequestNode = ({ id, data }) => {
78101
<td className='p-1 whitespace-no-wrap'>
79102
<input
80103
type='text'
81-
className='nodrag nowheel block h-9 rounded-bl-md rounded-tl-md p-2.5'
104+
className='nodrag nowheel block h-9 w-full p-2.5'
82105
name='variable-name'
83106
value={id}
84107
readOnly
@@ -89,26 +112,33 @@ const RequestNode = ({ id, data }) => {
89112
<select
90113
onChange={(e) => handleVariableChange(e, vType, id)}
91114
name='boolean-val'
92-
className='nodrag h-9 rounded-br-md rounded-tr-md p-2.5 px-1'
115+
className=' nodrag nowheel h-9 w-full p-2.5 px-1'
93116
value={variables[id].value}
94117
>
95118
<option value='true'>True</option>
96119
<option value='false'>False</option>
97120
</select>
98121
) : variables[id].type === 'Now' ? (
99-
<div></div>
122+
<input
123+
type='text'
124+
className='nodrag nowheel block h-9 w-full p-2.5'
125+
name='variable-name'
126+
value='Date.now()'
127+
readOnly
128+
/>
100129
) : (
101130
<input
102131
type={getInputType(variables[id].type)}
103-
className='nodrag nowheel block h-9 rounded-bl-md rounded-tl-md p-2.5'
132+
className='nodrag nowheel block h-9 w-full p-2.5'
104133
name='variable-value'
105134
data-type={getInputType(variables[id].type)}
106135
onChange={(e) => handleVariableChange(e, vType, id)}
107136
value={variables[id].value}
108137
/>
109138
)}
110139
</td>
111-
<td className='p-1 whitespace-no-wrap'>
140+
<td className='flex p-1 whitespace-no-wrap'>
141+
<Tooltip text={variables[id].type} />
112142
<div onClick={(e) => handleDeleteVariable(e, vType, id)} className='pl-2 text-neutral-500'>
113143
<TrashIcon className='w-4 h-4' />
114144
</div>
@@ -120,58 +150,7 @@ const RequestNode = ({ id, data }) => {
120150
) : (
121151
''
122152
)}
123-
</>
124-
);
125-
};
126-
127-
const renderVariables = (vType) => {
128-
const variables = vType === 'pre-request' ? data.preReqVars : data.postRespVars;
129-
return (
130-
<>
131-
{variables && Object.keys(variables).length > 0 ? (
132-
<div className='p-2 pt-4 border-t border-neutral-300 bg-slate-50'>
133-
{Object.keys(variables).map((id) => (
134-
<div className='flex items-center justify-between pb-2' key={id}>
135-
<div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
136-
<label className='w-1/4 px-4 py-2 border-r rounded-bl-md rounded-tl-md border-r-neutral-500'>
137-
{id}
138-
</label>
139-
{variables[id].type === 'Boolean' ? (
140-
<select
141-
onChange={(e) => handleVariableChange(e, vType, id)}
142-
name='boolean-val'
143-
className='nodrag h-9 w-2/4 min-w-40 rounded-br-md rounded-tr-md p-2.5 px-1'
144-
value={variables[id].value}
145-
>
146-
<option value='true'>True</option>
147-
<option value='false'>False</option>
148-
</select>
149-
) : variables[id].type === 'Now' ? (
150-
<div></div>
151-
) : (
152-
<input
153-
type={getInputType(variables[id].type)}
154-
className='nodrag nowheel block h-9 w-2/4 min-w-40 rounded-bl-md rounded-tl-md p-2.5'
155-
name='variable-value'
156-
data-type={getInputType(variables[id].type)}
157-
onChange={(e) => handleVariableChange(e, vType, id)}
158-
value={variables[id].value}
159-
/>
160-
)}
161-
<div className='w-1/4 px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>
162-
{variables[id].type}
163-
</div>
164-
</div>
165-
<div onClick={(e) => handleDeleteVariable(e, vType, id)} className='pl-2 text-neutral-500'>
166-
<TrashIcon className='w-4 h-4' />
167-
</div>
168-
</div>
169-
))}
170-
</div>
171-
) : (
172-
''
173-
)}
174-
</>
153+
</div>
175154
);
176155
};
177156

@@ -274,7 +253,7 @@ const RequestNode = ({ id, data }) => {
274253
<PlusIcon className='w-4 h-4' />
275254
</button>
276255
</div>
277-
{renderNewVars('pre-request')}
256+
{renderVariables('pre-request')}
278257
</div>
279258
<NodeHorizontalDivider />
280259
<div>

0 commit comments

Comments
 (0)