Skip to content

Commit ce5c9a5

Browse files
jsajaljsajal
committed
add object descriptions and improve create and generate flow actions
1 parent 863d25a commit ce5c9a5

7 files changed

Lines changed: 391 additions & 308 deletions

File tree

‎src/components/molecules/headers/WorkspaceHeader.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,21 @@ const WorkspaceHeader = () => {
2222
<div className='flex items-center justify-between pr-4 min-h-12'>
2323
<div className='flex items-center overflow-x-auto'>
2424
<Tabs />
25-
<div className='inline-flex items-center justify-center whitespace-nowrap hover:bg-background-light'>
26-
<Button
27-
btnType={BUTTON_TYPES.tertiary}
28-
classes={'min-h-12'}
29-
isDisabled={false}
30-
onClickHandle={() => setNewFlowTestModal(true)}
31-
fullWidth={true}
32-
>
33-
<PlusIcon className='w-5 h-5 outline-none' />
34-
</Button>
35-
</div>
25+
{collections.length != 0 ? (
26+
<div className='inline-flex items-center justify-center hover:bg-background-light whitespace-nowrap'>
27+
<Button
28+
btnType={BUTTON_TYPES.tertiary}
29+
classes={'min-h-12'}
30+
isDisabled={false}
31+
onClickHandle={() => setNewFlowTestModal(true)}
32+
fullWidth={true}
33+
>
34+
<PlusIcon className='w-5 h-5 outline-none' />
35+
</Button>
36+
</div>
37+
) : (
38+
<></>
39+
)}
3640
</div>
3741
<SelectEnvironment environments={environmentData} />
3842
</div>

‎src/components/molecules/modals/GenerateFlowTestModal.js‎

Lines changed: 302 additions & 226 deletions
Large diffs are not rendered by default.

‎src/components/molecules/modals/ImportCollectionModal.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,13 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
101101
Import a Collection
102102
</Dialog.Title>
103103
{/* ToDo: Add the message of instructions here, if that is not required then we can remove this div */}
104-
<div className='mt-4'>
104+
{/* <div className='mt-4'>
105105
<p> Message or instructions here</p>
106-
</div>
106+
</div> */}
107107
<div className='mt-4'>
108108
<ul className='text-lg font-medium'>
109109
<li
110-
className={`cursor-pointer rounded border border-transparent px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'text-green-500' : ''}`}
110+
className={`hover:bg-background-light cursor-pointer rounded border border-transparent px-2 py-4 ${selectedFilePath ? 'text-green-500' : ''}`}
111111
onClick={handleImportCollectionClick}
112112
data-import-type='yaml'
113113
>
@@ -119,7 +119,7 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
119119
</div>
120120
<div className='flex items-center justify-start'>
121121
{/* <DocumentArrowUpIcon className='w-5 h-5' /> */}
122-
Import an OpenAPI spec to start a new collection
122+
Import an OpenAPI V3 spec
123123
{/* Ref: https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div */}
124124
<div className='hidden'>
125125
<input
@@ -134,14 +134,14 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
134134
</div>
135135
{selectedFilePath ? (
136136
<div className='px-2 py-4 my-4 ml-12 text-green-600 bg-green-100 border border-green-600 rounded'>
137-
Selected file path: ${selectedFilePath}
137+
{selectedFilePath}
138138
</div>
139139
) : (
140140
''
141141
)}
142142
</li>
143143
<li
144-
className={`flex cursor-pointer items-center justify-start gap-4 px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
144+
className={`hover:bg-background-light flex cursor-pointer items-center justify-start gap-4 px-2 py-4 ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
145145
onClick={handleDirectorySelectionClick}
146146
>
147147
<div className='flex items-center justify-center w-8 h-8 border-4 rounded-full border-cyan-900'>
@@ -151,7 +151,7 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
151151
className={`flex items-center justify-start ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed text-gray-400'}`}
152152
>
153153
{/* <FolderPlusIcon className='w-5 h-5' /> */}
154-
Select a directory for your Collection
154+
Select a directory to create your collection
155155
</div>
156156
</li>
157157
</ul>

‎src/components/molecules/modals/OpenCollectionModal.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,13 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
9393
Open a Collection
9494
</Dialog.Title>
9595
{/* ToDo: Add the message of instructions here, if that is not required then we can remove this div */}
96-
<div className='mt-4'>
96+
{/* <div className='mt-4'>
9797
<p> Message or instructions here</p>
98-
</div>
98+
</div> */}
9999
<div className='mt-4'>
100100
<ul className='text-lg font-medium'>
101101
<li
102-
className={`cursor-pointer rounded border border-transparent px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'text-green-500' : ''}`}
102+
className={`hover:bg-background-light cursor-pointer rounded border border-transparent px-2 py-4 ${selectedFilePath ? 'text-green-500' : ''}`}
103103
onClick={handleImportCollectionClick}
104104
data-import-type='yaml'
105105
>
@@ -111,7 +111,7 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
111111
</div>
112112
<div className='flex items-center justify-start'>
113113
{/* <DocumentArrowUpIcon className='w-4 h-4' /> */}
114-
Attach OpenAPI spec with existing collection
114+
Import an OpenAPI V3 spec
115115
{/* Ref: https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div */}
116116
<div className='hidden'>
117117
<input
@@ -127,14 +127,14 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
127127

128128
{selectedFilePath ? (
129129
<div className='px-2 py-4 my-4 ml-12 text-green-600 bg-green-100 border border-green-600 rounded'>
130-
Selected file path: ${selectedFilePath}
130+
{selectedFilePath}
131131
</div>
132132
) : (
133133
''
134134
)}
135135
</li>
136136
<li
137-
className={`flex cursor-pointer items-center justify-start gap-4 px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
137+
className={`hover:bg-background-light flex cursor-pointer items-center justify-start gap-4 px-2 py-4 ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
138138
onClick={handleDirectorySelectionClick}
139139
>
140140
<div className='flex items-center justify-center w-8 h-8 border-4 rounded-full border-cyan-900'>
@@ -144,7 +144,7 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
144144
className={`flex items-center justify-start ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed text-gray-400'}`}
145145
>
146146
{/* <FolderPlusIcon className='w-5 h-5' /> */}
147-
Select a directory for your Collection
147+
Select the directory of an existing collection
148148
</div>
149149
</li>
150150
</ul>

‎src/components/molecules/modals/flow/NewFlowTestModal.js‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,18 @@ import React, { Fragment, useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import { Dialog, Transition, Listbox } from '@headlessui/react';
44
import { createFolder, createFlowTest, createEnvironmentFile } from 'service/collection';
5-
import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
65
import { toast } from 'react-toastify';
76
import Button from 'components/atoms/common/Button';
87
import { BUTTON_INTENT_TYPES, BUTTON_TYPES, OBJ_TYPES } from 'constants/Common';
98
import TextInput from 'components/atoms/common/TextInput';
10-
import Collection from '../../sidebar/content/Collection';
119
import useCollectionStore from 'stores/CollectionStore';
1210
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
1311
import { isEmpty } from 'lodash';
14-
import TimeoutSelector from 'components/atoms/common/TimeoutSelector';
15-
import { timeoutForGraphRun } from 'components/molecules/flow/utils';
12+
import { flattenItems } from 'stores/utils';
1613

1714
const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
15+
const { ipcRenderer } = window;
1816
const collections = useCollectionStore.getState().collections;
19-
console.log(`\n \n Inside NewFlowTestModal :: collections :: ${JSON.stringify(collections)} \n \n `);
2017

2118
const [flowtestName, setFlowtestName] = useState('');
2219
const [selectedCollection, setSelectionCollection] = useState({});
@@ -25,7 +22,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
2522
// Error flags
2623
const [showFlowtestNameError, setShowFlowtestNameError] = useState(false);
2724
const [showCollectionSelectionError, setShowCollectionSelectionError] = useState(false);
28-
const [showFolderSelectionError, setShowFolderSelectionError] = useState(false);
25+
//const [showFolderSelectionError, setShowFolderSelectionError] = useState(false);
2926
const containsFolder = (collection) => {
3027
const items = collection.items;
3128
let haveFolderItem = false;
@@ -44,7 +41,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
4441
setSelectedFolder({});
4542
setShowFlowtestNameError(false);
4643
setShowCollectionSelectionError(false);
47-
setShowFolderSelectionError(false);
44+
//setShowFolderSelectionError(false);
4845
};
4946
return (
5047
<div>
@@ -94,14 +91,14 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
9491
}}
9592
name={'flowtest-name'}
9693
/>
97-
{showFlowtestNameError ? (
94+
{flowtestName.trim() === '' && showFlowtestNameError ? (
9895
<div className='py-2 text-red-600'>Please provide a name for your new flowtest</div>
9996
) : (
10097
''
10198
)}
10299
</div>
103100
<div>
104-
<div className='flex justify-between gap-2 transition border rounded whitespace-nowrap border-cyan-900 bg-background-light text-cyan-900 hover:bg-background'>
101+
<div className='flex justify-between gap-2 transition border rounded bg-background-light hover:bg-background whitespace-nowrap border-cyan-900 text-cyan-900'>
105102
<Listbox
106103
value={selectedCollection}
107104
onChange={(value) => {
@@ -154,7 +151,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
154151
</div>
155152
</Listbox>
156153
</div>
157-
{showCollectionSelectionError ? (
154+
{isEmpty(selectedCollection) && showCollectionSelectionError ? (
158155
<div className='py-2 text-red-600'>
159156
Please provide a collection in which you wants to create your new flowtest
160157
</div>
@@ -165,7 +162,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
165162

166163
{!isEmpty(selectedCollection) && containsFolder(selectedCollection) ? (
167164
<div>
168-
<div className='flex justify-between gap-2 transition border rounded whitespace-nowrap border-cyan-900 bg-background-light text-cyan-900 hover:bg-background'>
165+
<div className='flex justify-between gap-2 transition border rounded bg-background-light hover:bg-background whitespace-nowrap border-cyan-900 text-cyan-900'>
169166
<Listbox
170167
value={selectedFolder}
171168
onChange={(value) => {
@@ -184,7 +181,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
184181
leaveTo='opacity-0'
185182
>
186183
<Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-10 max-h-60 ring-1 ring-black/5'>
187-
{selectedCollection.items.map((collectionItem, index) => {
184+
{flattenItems(selectedCollection.items).map((collectionItem, index) => {
188185
if (collectionItem.type === OBJ_TYPES.folder) {
189186
return (
190187
<Listbox.Option
@@ -201,7 +198,10 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
201198
<span
202199
className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
203200
>
204-
{collectionItem.name}
201+
{ipcRenderer.relative(
202+
selectedCollection.pathname,
203+
collectionItem.pathname,
204+
)}
205205
</span>
206206
{selected ? (
207207
<span className='absolute inset-y-0 left-0 flex items-center pl-3 font-semibold'>
@@ -219,13 +219,13 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
219219
</div>
220220
</Listbox>
221221
</div>
222-
{showFolderSelectionError ? (
222+
{/* {selectedFolder.trim() === '' && showFolderSelectionError ? (
223223
<div className='py-2 text-red-600'>
224-
Please provide a folder in which you wants to create your new flowtest
224+
Please provide a folder in which you want to create your new flowtest
225225
</div>
226226
) : (
227227
''
228-
)}
228+
)} */}
229229
</div>
230230
) : (
231231
''
@@ -249,30 +249,22 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
249249
isDisabled={false}
250250
onClickHandle={() => {
251251
let pathName = '';
252-
if (!flowtestName || flowtestName === '') {
252+
if (!flowtestName || flowtestName.trim() === '') {
253253
setShowFlowtestNameError(true);
254254
return;
255255
}
256256
if (!selectedCollection || !selectedCollection.id || selectedCollection.id === '') {
257257
setShowCollectionSelectionError(true);
258258
return;
259259
}
260-
if (containsFolder(selectedCollection)) {
261-
if (!selectedFolder || !selectedFolder.pathname || selectedFolder.pathname === '') {
262-
setShowFolderSelectionError(true);
263-
return;
264-
} else {
265-
pathName = selectedFolder.pathname;
266-
}
267-
} else {
260+
if (!selectedFolder || !selectedFolder.pathname || selectedFolder.pathname === '') {
268261
pathName = selectedCollection.pathname;
262+
} else {
263+
pathName = selectedFolder.pathname;
269264
}
270265
setShowFlowtestNameError(false);
271266
setShowCollectionSelectionError(false);
272-
setShowFolderSelectionError(false);
273-
console.log(
274-
`\n \n flowtestName :: ${flowtestName} :: pathName :: ${selectedFolder.pathname} :: collectionId :: ${selectedCollection.id} \n \n`,
275-
);
267+
//setShowFolderSelectionError(false);
276268

277269
createFlowTest(flowtestName, pathName, selectedCollection.id)
278270
.then((result) => {

‎src/components/molecules/modals/sidebar/NewEnvironmentFileModal.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { timeoutForGraphRun } from 'components/molecules/flow/utils';
1616

1717
const NewEnvironmentFileModal = ({ closeFn = () => null, open = false }) => {
1818
const collections = useCollectionStore.getState().collections;
19-
console.log(`\n \n Inside NewFlowTestModal :: collections :: ${JSON.stringify(collections)} \n \n `);
2019

2120
const [environmentFileName, setEnvironmentFileName] = useState('');
2221
const [selectedCollection, setSelectionCollection] = useState({});
@@ -78,14 +77,14 @@ const NewEnvironmentFileModal = ({ closeFn = () => null, open = false }) => {
7877
}}
7978
name={'environment-file-name'}
8079
/>
81-
{showEnvironmentFileNameError ? (
80+
{environmentFileName.trim() === '' && showEnvironmentFileNameError ? (
8281
<div className='py-2 text-red-600'>Please provide a name for your new environment file</div>
8382
) : (
8483
''
8584
)}
8685
</div>
8786
<div>
88-
<div className='flex justify-between gap-2 transition border rounded whitespace-nowrap border-cyan-900 bg-background-light text-cyan-900 hover:bg-background'>
87+
<div className='flex justify-between gap-2 transition border rounded bg-background-light hover:bg-background whitespace-nowrap border-cyan-900 text-cyan-900'>
8988
<Listbox
9089
value={selectedCollection}
9190
onChange={(value) => {
@@ -137,7 +136,7 @@ const NewEnvironmentFileModal = ({ closeFn = () => null, open = false }) => {
137136
</div>
138137
</Listbox>
139138
</div>
140-
{showCollectionSelectionError ? (
139+
{isEmpty(selectedCollection) && showCollectionSelectionError ? (
141140
<div className='py-2 text-red-600'>
142141
Please provide a collection in which you wants to create your new environment file
143142
</div>
@@ -163,7 +162,7 @@ const NewEnvironmentFileModal = ({ closeFn = () => null, open = false }) => {
163162
btnType={BUTTON_TYPES.primary}
164163
isDisabled={false}
165164
onClickHandle={() => {
166-
if (!environmentFileName || environmentFileName === '') {
165+
if (!environmentFileName || environmentFileName.trim() === '') {
167166
setShowEnvironmentFileNameError(true);
168167
return;
169168
}

0 commit comments

Comments
 (0)