Skip to content

Commit 6fd9b28

Browse files
jsajaljsajal
authored
Merge pull request #79 from FlowTestAI/timer-graph-run
Add timer option for graph run and couple of minor improvements
2 parents f04ad2f + d65bd87 commit 6fd9b28

File tree

16 files changed

+222
-156
lines changed

16 files changed

+222
-156
lines changed

‎src/components/atoms/common/TimeSelector.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { ClockIcon } from '@heroicons/react/24/outline';
4+
5+
const TimeSelector = ({ optionsData, defaultOptionData, onSelectHandler = () => null }) => {
6+
return (
7+
<div className='flex items-center justify-between gap-2 pl-4 outline-none'>
8+
<ClockIcon className='w-5 h-5' />
9+
<select
10+
onChange={onSelectHandler}
11+
name='timer-selector'
12+
className='w-32 h-12 px-1 py-2 bg-transparent outline-0 focus:ring-0'
13+
>
14+
<option key='default' value={defaultOptionData.value ? defaultOptionData.value : ''}>
15+
{defaultOptionData.label ? defaultOptionData.label : 'None'}
16+
</option>
17+
{optionsData.map((optionData, index) => (
18+
<option key={index} value={optionData.value}>
19+
{optionData.label}
20+
</option>
21+
))}
22+
</select>
23+
</div>
24+
);
25+
};
26+
27+
TimeSelector.propTypes = {};
28+
29+
export default TimeSelector;

‎src/components/molecules/environment/index.js‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,22 @@ const Env = () => {
2121
<div className='p-4'>
2222
<table className='w-full leading-normal'>
2323
<thead>
24-
<tr>
25-
<th className='px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase border-r-0 max-w-4 rounded-tl-xl border-slate-400 bg-slate-200'>
26-
Serial Number
27-
</th>
28-
<th className='px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase border-slate-400 bg-slate-200'>
29-
Key
30-
</th>
31-
<th className='px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase border-slate-400 bg-slate-200 '>
32-
Value
33-
</th>
34-
<th className='px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase rounded-tr-xl border-slate-400 bg-slate-200'>
35-
Action
36-
</th>
24+
<tr className='text-xs font-bold tracking-wider text-left uppercase bg-ghost-50 text-ghost-600'>
25+
<th className='p-5 border max-w-4 border-ghost-200'>S. No.</th>
26+
<th className='p-5 border border-ghost-200 '>Key</th>
27+
<th className='p-5 border border-ghost-200'>Value</th>
28+
<th className='p-5 border border-ghost-200'>Action</th>
3729
</tr>
3830
</thead>
3931
<tbody>
4032
{Object.entries(variables).map(([key, value], index) => (
41-
<tr key={index} className='text-sm hover:bg-slate-100'>
42-
<td className='px-5 py-3 border-b border-gray-200 max-w-4'>
43-
<p className='text-gray-900 whitespace-no-wrap'>{index + 1}</p>
44-
</td>
45-
<td className='px-5 py-3 border-b border-gray-200'>
46-
<p className='text-gray-900 whitespace-no-wrap'>{key}</p>
47-
</td>
48-
<td className='px-5 py-3 border-b border-gray-200'>
49-
<p className='text-gray-900 whitespace-no-wrap'>{value}</p>
50-
</td>
51-
<td className='px-5 py-3 border-b border-gray-200'>
33+
<tr key={index} className='text-sm border-b border-gray-200 text-ghost-700 hover:bg-ghost-50'>
34+
<td className='p-5 whitespace-no-wrap max-w-4'>{index + 1}</td>
35+
<td className='p-5 whitespace-no-wrap'>{key}</td>
36+
<td className='p-5 whitespace-no-wrap'>{value}</td>
37+
<td className='p-5 whitespace-no-wrap'>
5238
<div
53-
className='relative inline-block p-2 text-left transition duration-200 ease-out rounded rounded-l-none cursor-pointer hover:bg-slate-200'
39+
className='relative inline-block p-2 text-left transition duration-200 ease-out rounded-md cursor-pointer hover:bg-ghost-200'
5440
onClick={() => {
5541
setDeleteKey(key);
5642
setConfirmActionModalOpen(true);
@@ -70,7 +56,7 @@ const Env = () => {
7056
onClickHandle={() => setAddVariableModalOpen(true)}
7157
fullWidth={true}
7258
>
73-
<PlusIcon className='w-4 h-4' />
59+
<PlusIcon className='w-5 h-5' />
7460
<span>Add Variable</span>
7561
</Button>
7662
</div>

‎src/components/molecules/flow/graph/Graph.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class Graph {
1414
this.nodes = nodes;
1515
this.edges = edges;
1616
this.logs = initialLogs;
17-
this.timeout = 60000; //ms
17+
this.timeout = useCanvasStore.getState().timeout;
1818
this.startTime = startTime;
1919
this.graphRunNodeOutput = {};
2020
this.auth = undefined;

‎src/components/molecules/flow/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ const Flow = ({ collectionId }) => {
216216
>
217217
<Controls>
218218
<ControlButton
219+
className='p-1'
219220
onClick={async () => {
220221
runnableEdges(true);
221222
const startTime = Date.now();

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

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import * as React from 'react';
1+
import React, { useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import FlowNode from 'components/atoms/flow/FlowNode';
44
import useCanvasStore from 'stores/CanvasStore';
55
import { getAllFlowTests } from 'stores/utils';
66
import useCollectionStore from 'stores/CollectionStore';
7+
import Tippy from '@tippyjs/react';
8+
import 'tippy.js/dist/tippy.css';
79

810
const ComplexNode = ({ id, data }) => {
11+
const [selectedValue, setSelectedValue] = useState('');
912
const { ipcRenderer } = window;
1013

1114
const setFlowForComplexNode = useCanvasStore((state) => state.setFlowForComplexNode);
@@ -34,21 +37,31 @@ const ComplexNode = ({ id, data }) => {
3437
handleRightData={{ type: 'source' }}
3538
>
3639
<div>
37-
<select
38-
onChange={(e) => setFlow(e.target.value)}
39-
name='flow'
40-
value={data.relativePath ? data.relativePath : ''}
41-
className='h-12 outline-none max-w-32'
42-
>
43-
<option key='None' value=''>
44-
None
45-
</option>
46-
{flowTests.map((ft) => (
47-
<option key={ft} value={ft}>
48-
{ft}
40+
<Tippy content={selectedValue !== '' ? selectedValue : 'Select a flow'} placement='top' maxWidth='none'>
41+
<select
42+
onChange={(event) => {
43+
const value = event.target?.value;
44+
setFlow(value);
45+
setSelectedValue(value);
46+
}}
47+
name='flow'
48+
value={data.relativePath ? data.relativePath : ''}
49+
className='h-12 px-1 py-2 border rounded-lg outline-none max-w-48 border-neutral-500 text-neutral-500 outline-0 focus:w-auto focus:ring-0'
50+
>
51+
<option key='None' value=''>
52+
Select a flow
4953
</option>
50-
))}
51-
</select>
54+
{flowTests.map((flowTestPath) => {
55+
return (
56+
<option key={flowTestPath} value={flowTestPath} className='overflow-scroll'>
57+
{flowTestPath}
58+
</option>
59+
);
60+
})}
61+
</select>
62+
</Tippy>
63+
64+
<p className='hidden'></p>
5265
</div>
5366
</FlowNode>
5467
);

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

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -63,68 +63,66 @@ const RequestBody = ({ nodeId, nodeData }) => {
6363

6464
return (
6565
<>
66-
<div className='px-2 py-4 border-t border-neutral-300 bg-slate-100'>
67-
<div className='flex items-center justify-between font-medium'>
68-
<h3>Body</h3>
69-
<Menu as='div' className='relative inline-block text-left'>
70-
<Menu.Button data-click-from='body-type-menu' className='p-2'>
71-
<EllipsisVerticalIcon className='w-4 h-4' aria-hidden='true' data-click-from='body-type-menu' />
72-
</Menu.Button>
73-
<Transition
74-
as={Fragment}
75-
enter='transition ease-out duration-100'
76-
enterFrom='transform opacity-0 scale-95'
77-
enterTo='transform opacity-100 scale-100'
78-
leave='transition ease-in duration-75'
79-
leaveFrom='transform opacity-100 scale-100'
80-
leaveTo='transform opacity-0 scale-95'
66+
<div className='flex items-center justify-between p-4 border-t border-neutral-300 bg-slate-100'>
67+
<h3>Body</h3>
68+
<Menu as='div' className='relative inline-block text-left'>
69+
<Menu.Button data-click-from='body-type-menu'>
70+
<EllipsisVerticalIcon className='w-4 h-4' aria-hidden='true' data-click-from='body-type-menu' />
71+
</Menu.Button>
72+
<Transition
73+
as={Fragment}
74+
enter='transition ease-out duration-100'
75+
enterFrom='transform opacity-0 scale-95'
76+
enterTo='transform opacity-100 scale-100'
77+
leave='transition ease-in duration-75'
78+
leaveFrom='transform opacity-100 scale-100'
79+
leaveTo='transform opacity-0 scale-95'
80+
>
81+
<Menu.Items
82+
className='absolute right-0 z-10 w-56 px-1 py-1 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
83+
data-click-from='body-type-menu'
8184
>
82-
<Menu.Items
83-
className='absolute right-0 z-10 w-56 px-1 py-1 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
84-
data-click-from='body-type-menu'
85-
>
86-
{requestBodyTypeOptions.map((bodyTypeOption, index) => (
87-
<Menu.Item key={index} data-click-from='body-type-menu' onClick={() => handleClose(bodyTypeOption)}>
88-
<button
89-
className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md group hover:bg-slate-100'
90-
data-click-from='body-type-menu'
91-
>
92-
{bodyTypeOption}
93-
</button>
94-
</Menu.Item>
95-
))}
96-
</Menu.Items>
97-
</Transition>
98-
</Menu>
99-
</div>
85+
{requestBodyTypeOptions.map((bodyTypeOption, index) => (
86+
<Menu.Item key={index} data-click-from='body-type-menu' onClick={() => handleClose(bodyTypeOption)}>
87+
<button
88+
className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md group hover:bg-slate-100'
89+
data-click-from='body-type-menu'
90+
>
91+
{bodyTypeOption}
92+
</button>
93+
</Menu.Item>
94+
))}
95+
</Menu.Items>
96+
</Transition>
97+
</Menu>
10098
</div>
10199
{nodeData.requestBody && nodeData.requestBody.type === 'raw-json' && (
102-
<div className='p-2 border border-t border-neutral-300 bg-slate-50'>
100+
<div className='p-4 border-t border-neutral-300 bg-slate-50'>
103101
<textarea
104102
placeholder='Enter json'
105-
className='w-full p-2 nodrag nowheel'
103+
className='w-full p-2 nodrag nowheel min-w-72'
106104
name='username'
107105
onChange={(e) => handleRawJson(e)}
108-
rows={4}
106+
rows={6}
109107
value={nodeData.requestBody.body}
110108
/>
111109
</div>
112110
)}
113111
{nodeData.requestBody && nodeData.requestBody.type === 'form-data' && (
114-
<div className='p-2 border-t border-neutral-300 bg-slate-50'>
115-
<div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
112+
<div className='p-4 border-t border-neutral-300 bg-slate-50'>
113+
<div className='flex items-center justify-between h-full text-sm border rounded-md border-neutral-500 text-neutral-500 '>
116114
<input
117115
placeholder='key'
118-
className='pl-4 nodrag nowheel bg-slate-50'
116+
className='px-4 py-2 bg-transparent nodrag nowheel outline-0 focus:ring-0'
119117
name='variable-value'
120118
onChange={(e) => handleFormDataKey(e)}
121119
value={nodeData.requestBody.body.key}
122120
/>
123-
<div className='px-4 py-2 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>File</div>
121+
<div className='p-4 border-l rounded-br-md rounded-tr-md border-l-neutral-500'>File</div>
124122
</div>
125-
<div className='py-2'>
123+
<div className='pt-4'>
126124
<button
127-
className='flex items-center justify-center w-full gap-2 p-2 border rounded-md cursor-pointer border-neutral-500 bg-slate-100 hover:bg-slate-200'
125+
className='flex items-center justify-center w-full gap-2 px-4 py-2 border rounded-md cursor-pointer border-neutral-500 bg-slate-100 hover:bg-slate-200'
128126
onClick={() => {
129127
uploadFileForRequestNode.current.click();
130128
}}
@@ -136,7 +134,9 @@ const RequestBody = ({ nodeId, nodeData }) => {
136134
<input type='file' id='file' ref={uploadFileForRequestNode} onChange={handleFileUpload} />
137135
</div>
138136
</button>
139-
{nodeData.requestBody.body.name != '' ? nodeData.requestBody.body.name : 'Choose a file to upload'}
137+
<div className='pt-1'>
138+
{nodeData.requestBody.body.name != '' ? nodeData.requestBody.body.name : 'Choose a file to upload'}
139+
</div>
140140
</div>
141141
</div>
142142
)}

0 commit comments

Comments
 (0)