Skip to content

Commit 4a2e4bb

Browse files
jsajaljsajal
committed
more real estate for url and render variables in clean table
1 parent e2573b4 commit 4a2e4bb

2 files changed

Lines changed: 133 additions & 70 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ const OutputNode = ({ id, data }) => {
2727
) : (
2828
<></>
2929
)}
30-
<div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-w-72 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
30+
<div className='text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-w-72 max-w-96 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
3131
{data.output ? (
3232
<Editor
3333
name='output-text'
3434
value={JSON.stringify(data.output, null, 2)}
3535
readOnly={true}
36-
classes={'w-96 h-96'}
36+
classes={'w-full max-h-96'}
3737
/>
3838
) : (
3939
<div className='p-2'>{'Run flow to see data'}</div>

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

Lines changed: 131 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,71 @@ const RequestNode = ({ id, data }) => {
5959
setRequestNodeUrl(id, value);
6060
};
6161

62+
const renderNewVars = (vType) => {
63+
const variables = vType === 'pre-request' ? data.preReqVars : data.postRespVars;
64+
return (
65+
<>
66+
{variables && Object.keys(variables).length > 0 ? (
67+
<table className='leading-normal'>
68+
<thead>
69+
<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>
73+
</tr>
74+
</thead>
75+
<tbody>
76+
{Object.keys(variables).map((id, index) => (
77+
<tr key={index} className='text-sm border-b border-gray-200 text-ghost-700 hover:bg-ghost-50'>
78+
<td className='p-1 whitespace-no-wrap'>
79+
<input
80+
type='text'
81+
className='nodrag nowheel block h-9 rounded-bl-md rounded-tl-md p-2.5'
82+
name='variable-name'
83+
value={id}
84+
readOnly
85+
/>
86+
</td>
87+
<td className='p-1 whitespace-no-wrap'>
88+
{variables[id].type === 'Boolean' ? (
89+
<select
90+
onChange={(e) => handleVariableChange(e, vType, id)}
91+
name='boolean-val'
92+
className='nodrag h-9 rounded-br-md rounded-tr-md p-2.5 px-1'
93+
value={variables[id].value}
94+
>
95+
<option value='true'>True</option>
96+
<option value='false'>False</option>
97+
</select>
98+
) : variables[id].type === 'Now' ? (
99+
<div></div>
100+
) : (
101+
<input
102+
type={getInputType(variables[id].type)}
103+
className='nodrag nowheel block h-9 rounded-bl-md rounded-tl-md p-2.5'
104+
name='variable-value'
105+
data-type={getInputType(variables[id].type)}
106+
onChange={(e) => handleVariableChange(e, vType, id)}
107+
value={variables[id].value}
108+
/>
109+
)}
110+
</td>
111+
<td className='p-1 whitespace-no-wrap'>
112+
<div onClick={(e) => handleDeleteVariable(e, vType, id)} className='pl-2 text-neutral-500'>
113+
<TrashIcon className='w-4 h-4' />
114+
</div>
115+
</td>
116+
</tr>
117+
))}
118+
</tbody>
119+
</table>
120+
) : (
121+
''
122+
)}
123+
</>
124+
);
125+
};
126+
62127
const renderVariables = (vType) => {
63128
const variables = vType === 'pre-request' ? data.preReqVars : data.postRespVars;
64129
return (
@@ -124,84 +189,82 @@ const RequestNode = ({ id, data }) => {
124189
return [];
125190
};
126191

192+
const listBox = () => {
193+
return (
194+
<Listbox
195+
value={data.requestType}
196+
onChange={(selectedValue) => {
197+
setRequestNodeType(id, selectedValue);
198+
}}
199+
className='text-xl'
200+
>
201+
<div>
202+
<Listbox.Button className='relative flex text-left cursor-default border-cyan-950'>
203+
<span className='block truncate'>{data.requestType}</span>
204+
<span className='p-1'>
205+
<ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
206+
</span>
207+
</Listbox.Button>
208+
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
209+
<Listbox.Options className='absolute z-50 py-1 mt-1 overflow-auto text-base bg-white max-h-60 w-36 focus:outline-none'>
210+
{requestNodes
211+
.map((el) => el.requestType)
212+
.map((reqType) => (
213+
<Listbox.Option
214+
key={reqType}
215+
className={({ active }) =>
216+
`relative cursor-default select-none py-2 pl-7 pr-4 hover:font-semibold ${
217+
active ? 'bg-background-light text-slate-900' : ''
218+
}`
219+
}
220+
value={reqType}
221+
>
222+
{({ selected }) => (
223+
<>
224+
<span className={`block`}>{reqType}</span>
225+
{selected ? (
226+
<span className='absolute inset-y-0 left-0 flex items-center pl-1 font-semibold'>
227+
<CheckIcon className='w-5 h-5' aria-hidden='true' />
228+
</span>
229+
) : null}
230+
</>
231+
)}
232+
</Listbox.Option>
233+
))}
234+
</Listbox.Options>
235+
</Transition>
236+
</div>
237+
</Listbox>
238+
);
239+
};
240+
127241
return (
128242
<FlowNode
129-
title={data.requestType + ' Request'}
243+
title={listBox()}
130244
handleLeft={true}
131245
handleLeftData={{ type: 'target' }}
132246
handleRight={true}
133247
handleRightData={{ type: 'source' }}
134248
>
135249
<div className='w-96'>
136-
<div className='flex items-center justify-center gap-2 py-4'>
137-
<Listbox
138-
value={data.requestType}
139-
onChange={(selectedValue) => {
140-
setRequestNodeType(id, selectedValue);
141-
}}
142-
className='w-1/4'
143-
>
144-
<div>
145-
<Listbox.Button className='relative w-full p-2 text-left border rounded cursor-default border-cyan-950'>
146-
<span className='block truncate'>{data.requestType}</span>
147-
<span className='absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
148-
<ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
149-
</span>
150-
</Listbox.Button>
151-
<Transition
152-
as={Fragment}
153-
leave='transition ease-in duration-100'
154-
leaveFrom='opacity-100'
155-
leaveTo='opacity-0'
156-
>
157-
<Listbox.Options className='absolute z-50 py-1 mt-1 overflow-auto text-base bg-white max-h-60 w-36 focus:outline-none'>
158-
{requestNodes
159-
.map((el) => el.requestType)
160-
.map((reqType) => (
161-
<Listbox.Option
162-
key={reqType}
163-
className={({ active }) =>
164-
`relative cursor-default select-none py-2 pl-7 pr-4 hover:font-semibold ${
165-
active ? 'bg-background-light text-slate-900' : ''
166-
}`
167-
}
168-
value={reqType}
169-
>
170-
{({ selected }) => (
171-
<>
172-
<span className={`block`}>{reqType}</span>
173-
{selected ? (
174-
<span className='absolute inset-y-0 left-0 flex items-center pl-1 font-semibold'>
175-
<CheckIcon className='w-5 h-5' aria-hidden='true' />
176-
</span>
177-
) : null}
178-
</>
179-
)}
180-
</Listbox.Option>
181-
))}
182-
</Listbox.Options>
183-
</Transition>
184-
</div>
185-
</Listbox>
186-
<TextEditor
187-
placeHolder={`Enter URL for a ${data.requestType} request`}
188-
onChangeHandler={handleUrlInputChange}
189-
name={'url'}
190-
value={data.url ? data.url : ''}
191-
completionOptions={getActiveVariables()}
192-
styles={'w-3/4'}
193-
/>
194-
</div>
250+
<TextEditor
251+
placeHolder={`Enter URL for a ${data.requestType} request`}
252+
onChangeHandler={handleUrlInputChange}
253+
name={'url'}
254+
value={data.url ? data.url : ''}
255+
completionOptions={getActiveVariables()}
256+
styles={'w-full mb-2'}
257+
/>
195258
<NodeHorizontalDivider />
196259
<RequestBody nodeId={id} nodeData={data} />
197260
<NodeHorizontalDivider />
198-
<div className='p-4 bg-background'>
199-
<h3>Variables</h3>
200-
<div className='mt-4'>
261+
<div className='bg-background'>
262+
<h3 className='p-2'>Variables</h3>
263+
<div>
201264
<NodeHorizontalDivider />
202-
<div className='p-2'>
265+
<div>
203266
<div className='flex items-center justify-between'>
204-
<div>Pre Request</div>
267+
<div className='p-2'>Pre Request</div>
205268
<button
206269
onClick={() => {
207270
setModalType('pre-request');
@@ -211,12 +274,12 @@ const RequestNode = ({ id, data }) => {
211274
<PlusIcon className='w-4 h-4' />
212275
</button>
213276
</div>
214-
{renderVariables('pre-request')}
277+
{renderNewVars('pre-request')}
215278
</div>
216279
<NodeHorizontalDivider />
217-
<div className='p-2'>
280+
<div>
218281
<div className='flex items-center justify-between'>
219-
<div>Post Response</div>
282+
<div className='p-2'>Post Response</div>
220283
<button
221284
onClick={() => {
222285
setModalType('post-response');

0 commit comments

Comments
 (0)