Skip to content

Commit 57dd33a

Browse files
rachitkrsinghrachitkrsingh
committed
Adding environment tab panel foundation code along with side sheet
1 parent 1156751 commit 57dd33a

File tree

9 files changed

+234
-86
lines changed

9 files changed

+234
-86
lines changed

‎src/components/atoms/SelectEnvironment.js‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,45 @@ const SelectEnvironment = ({ environments }) => {
1616
return (
1717
<Listbox value={selected} onChange={setSelected}>
1818
<div className='relative flex h-full pl-4 border-l border-neutral-300'>
19-
<Listbox.Button className='flex items-center justify-between gap-4 cursor-default sm:text-sm'>
19+
<Listbox.Button
20+
className={`flex items-center justify-between gap-4 sm:text-sm ${environments.length ? 'cursor-default' : 'cursor-not-allowed'}`}
21+
>
2022
<Square3Stack3DIcon className='w-4 h-4' />
2123
<div className='min-w-32'>{selected ? selected : 'Select environment'}</div>
2224
<ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
2325
</Listbox.Button>
24-
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
25-
<Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-12 max-h-60 ring-1 ring-black/5 sm:text-sm'>
26-
{environments.map((environment, environmentIndex) => (
27-
<Listbox.Option
28-
key={environmentIndex}
29-
className={({ active }) =>
30-
`relative cursor-default select-none py-2 pl-10 pr-4 ${
31-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
32-
}`
33-
}
34-
value={environment.name}
35-
>
36-
{({ selected }) => (
37-
<>
38-
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
39-
{environment.name}
40-
</span>
41-
{selected ? (
42-
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
43-
<CheckIcon className='w-5 h-5' aria-hidden='true' />
26+
{environments.length ? (
27+
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
28+
<Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-12 max-h-60 ring-1 ring-black/5 sm:text-sm'>
29+
{environments.map((environment, environmentIndex) => (
30+
<Listbox.Option
31+
key={environmentIndex}
32+
className={({ active }) =>
33+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
34+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
35+
}`
36+
}
37+
value={environment.name}
38+
>
39+
{({ selected }) => (
40+
<>
41+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
42+
{environment.name}
4443
</span>
45-
) : null}
46-
</>
47-
)}
48-
</Listbox.Option>
49-
))}
50-
</Listbox.Options>
51-
</Transition>
44+
{selected ? (
45+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
46+
<CheckIcon className='w-5 h-5' aria-hidden='true' />
47+
</span>
48+
) : null}
49+
</>
50+
)}
51+
</Listbox.Option>
52+
))}
53+
</Listbox.Options>
54+
</Transition>
55+
) : (
56+
''
57+
)}
5258
</div>
5359
</Listbox>
5460
);

‎src/components/atoms/sidebar/collections/OptionsMenu.js‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Fragment } from 'react';
22
import { PropTypes } from 'prop-types';
33
import { Menu, Transition } from '@headlessui/react';
4-
import { FolderPlusIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
4+
import { FolderPlusIcon, PencilSquareIcon, TrashIcon, XMarkIcon } from '@heroicons/react/24/outline';
55
import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
66
import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
77
import { OBJ_TYPES } from 'constants/Common';
@@ -84,15 +84,27 @@ const OptionsMenu = ({ collectionId, directory, itemType }) => {
8484
data-item-type={itemType}
8585
data-collection-id={collectionId}
8686
>
87-
<TrashIcon
88-
className='w-4 h-4 mr-2'
89-
aria-hidden='true'
90-
data-click-from='options-menu'
91-
data-item-type={itemType}
92-
/>
93-
{itemType === OBJ_TYPES.collection
94-
? DirectoryOptionsActions.remove.displayValue
95-
: DirectoryOptionsActions.delete.displayValue}
87+
{itemType === OBJ_TYPES.collection ? (
88+
<>
89+
<XMarkIcon
90+
className='w-4 h-4 mr-2'
91+
aria-hidden='true'
92+
data-click-from='options-menu'
93+
data-item-type={itemType}
94+
/>
95+
{DirectoryOptionsActions.remove.displayValue}
96+
</>
97+
) : (
98+
<>
99+
<TrashIcon
100+
className='w-4 h-4 mr-2'
101+
aria-hidden='true'
102+
data-click-from='options-menu'
103+
data-item-type={itemType}
104+
/>
105+
{DirectoryOptionsActions.delete.displayValue}
106+
</>
107+
)}
96108
</button>
97109
</Menu.Item>
98110
</div>

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

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React, { useState } from 'react';
2-
import { DocumentArrowDownIcon, DocumentArrowUpIcon } from '@heroicons/react/20/solid';
2+
import {
3+
DocumentArrowDownIcon,
4+
DocumentArrowUpIcon,
5+
SparklesIcon,
6+
DocumentTextIcon,
7+
} from '@heroicons/react/24/outline';
38
import Tippy from '@tippyjs/react';
49
import 'tippy.js/dist/tippy.css';
510
import SaveFlowModal from '../modals/SaveFlowModal';
@@ -17,31 +22,56 @@ const TabPanelHeader = () => {
1722
const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
1823

1924
return (
20-
<div className='flex items-center justify-between gap-4 border-b border-neutral-300 px-6 py-2'>
25+
<div className='flex items-center justify-between gap-4 px-6 py-2 border-b border-neutral-300'>
2126
{focusTab ? (
2227
<>
2328
<div className='text-base tracking-[0.15em]'>{focusTab.name}</div>
24-
<div className='flex items-center justify-between gap-x-4 border-l border-neutral-300'>
25-
<div className='flex items-center justify-between gap-x-4 pl-4'>
29+
<div className='flex items-center justify-between border-l gap-x-4 border-neutral-300'>
30+
<div className='flex items-center justify-between pl-4 gap-x-4'>
2631
<SaveFlowModal tab={focusTab} />
32+
{/* ToDo: Create our own side sheet component */}
33+
<div className='drawer drawer-end'>
34+
<input id='graph-logs-side-sheet' type='checkbox' className='drawer-toggle' />
35+
<div className='cursor-pointer drawer-content'>
36+
<Tippy content='Logs' placement='top'>
37+
<label htmlFor='graph-logs-side-sheet'>
38+
<DocumentTextIcon className='w-5 h-5' />
39+
</label>
40+
</Tippy>
41+
</div>
42+
43+
<div className='z-50 drawer-side'>
44+
<label htmlFor='graph-logs-side-sheet' aria-label='close sidebar' className='drawer-overlay'></label>
45+
<ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
46+
<li>
47+
<a>Sidebar Item 1</a>
48+
</li>
49+
<li>
50+
<a>Sidebar Item 2</a>
51+
</li>
52+
</ul>
53+
</div>
54+
</div>
2755
<button>
2856
<Tippy content='Coming Soon!' placement='top'>
29-
<DocumentArrowDownIcon className='h-5 w-5' />
57+
<DocumentArrowDownIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
3058
</Tippy>
3159
</button>
3260
<button>
3361
<Tippy content='Coming Soon!' placement='top'>
34-
<DocumentArrowUpIcon className='h-5 w-5' />
62+
<DocumentArrowUpIcon className='w-5 h-5 fill-neutral-200 text-neutral-400' />
3563
</Tippy>
3664
</button>
3765
</div>
38-
<div className='gen_ai_button border-l border-neutral-300 pl-4'>
66+
<div className='pl-4 border-l gen_ai_button border-neutral-300'>
3967
<Button
4068
btnType={BUTTON_TYPES.tertiary}
4169
isDisabled={false}
4270
onClickHandle={() => setGenerateFlowTestModalOpen(true)}
4371
fullWidth={true}
72+
className='flex items-center justify-between gap-x-4'
4473
>
74+
<SparklesIcon className='w-5 h-5' />
4575
Generate
4676
</Button>
4777
<GenerateFlowTestModal
@@ -52,7 +82,7 @@ const TabPanelHeader = () => {
5282
</div>
5383
</>
5484
) : (
55-
<div className='text-base tracking-[0.15em]'></div>
85+
<div className='text-base tracking-[0.15em]'> Please select a flow test from the sidebar </div>
5686
)}
5787
</div>
5888
);

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Fragment, useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import { Dialog, Transition } from '@headlessui/react';
4-
import { InboxArrowDownIcon } from '@heroicons/react/20/solid';
4+
import { InboxArrowDownIcon } from '@heroicons/react/24/outline';
55
import Tippy from '@tippyjs/react';
66
import 'tippy.js/dist/tippy.css';
77
import { updateFlowTest } from 'service/collection';
@@ -36,7 +36,7 @@ const SaveFlowModal = ({ tab }) => {
3636
<div className='flex items-center justify-center'>
3737
<button type='button' onClick={saveHandle}>
3838
<Tippy content='Save' placement='top'>
39-
<InboxArrowDownIcon className='h-5 w-5' />
39+
<InboxArrowDownIcon className='w-5 h-5' />
4040
</Tippy>
4141
</button>
4242
</div>
@@ -56,7 +56,7 @@ const SaveFlowModal = ({ tab }) => {
5656
</Transition.Child>
5757

5858
<div className='fixed inset-0 overflow-y-auto'>
59-
<div className='flex min-h-full items-center justify-center p-4 text-center'>
59+
<div className='flex items-center justify-center min-h-full p-4 text-center'>
6060
<Transition.Child
6161
as={Fragment}
6262
enter='ease-out duration-300'
@@ -66,8 +66,8 @@ const SaveFlowModal = ({ tab }) => {
6666
leaveFrom='opacity-100 scale-100'
6767
leaveTo='opacity-0 scale-95'
6868
>
69-
<Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
70-
<Dialog.Title as='h3' className='text-centre text-lg font-medium leading-6 text-gray-900'>
69+
<Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
70+
<Dialog.Title as='h3' className='text-lg font-medium leading-6 text-gray-900 text-centre'>
7171
Save New Flow Test
7272
</Dialog.Title>
7373
<div className='mt-2'>
@@ -79,17 +79,17 @@ const SaveFlowModal = ({ tab }) => {
7979
required
8080
/>
8181
</div>
82-
<div className='mt-4 flex items-center gap-2'>
82+
<div className='flex items-center gap-2 mt-4'>
8383
<button
8484
type='button'
85-
className='inline-flex w-full grow basis-0 justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
85+
className='inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md grow basis-0 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
8686
onClick={closeModal}
8787
>
8888
Cancel
8989
</button>
9090
<button
9191
type='button'
92-
className='inline-flex w-full grow basis-0 justify-center rounded-md border border-transparent bg-green-100 px-4 py-2 text-sm font-medium text-green-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
92+
className='inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-green-900 bg-green-100 border border-transparent rounded-md grow basis-0 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
9393
onClick={handleSave}
9494
>
9595
Save

‎src/components/molecules/sidebar/content/Collection.js‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
import React, { useState } from 'react';
22
import { PropTypes } from 'prop-types';
3-
import { ArchiveBoxIcon, FolderIcon, DocumentIcon } from '@heroicons/react/24/outline';
3+
import { ArchiveBoxIcon, FolderIcon, DocumentIcon, TrashIcon } from '@heroicons/react/24/outline';
44
import { FLOW_FILE_SUFFIX_REGEX, OBJ_TYPES } from 'constants/Common';
55
import { readFlowTest } from 'service/collection';
66
import OptionsMenu from 'components/atoms/sidebar/collections/OptionsMenu';
77
import { toast } from 'react-toastify';
88
import Tippy from '@tippyjs/react';
99
import 'tippy.js/dist/tippy.css';
10+
import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
11+
import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
12+
import { deleteFlowTest } from 'service/collection';
1013

1114
const Collection = ({ collectionId, item, depth }) => {
1215
const [isExpanded, setIsExpanded] = useState(false);
16+
const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
17+
const [flowTestPathToDelete, setFlowTestPathToDelete] = useState('');
18+
const messageForConfirmActionModal =
19+
'Do you wish to delete this flowtest? This action deletes it from disk and cannot be undone';
1320
const getListDisplayTitle = () => {
1421
if (item.type === OBJ_TYPES.collection) {
1522
// this is for collections tab thus we have archive box icon
1623
return (
1724
<div
18-
className='flex items-center justify-between gap-2 text-balance rounded p-0 text-start transition duration-200 ease-out hover:bg-slate-100'
25+
className='flex items-center justify-between gap-2 p-0 transition duration-200 ease-out rounded text-balance text-start hover:bg-slate-100'
1926
onClick={(event) => {
2027
const clickFromElementDataSet = event.target.dataset;
2128
const clickFrom = clickFromElementDataSet?.clickFrom;
@@ -26,7 +33,7 @@ const Collection = ({ collectionId, item, depth }) => {
2633
>
2734
<Tippy content={item.pathname} placement='top'>
2835
<div className='flex items-center justify-start gap-2 px-2 py-1'>
29-
<ArchiveBoxIcon className='h-4 w-4' />
36+
<ArchiveBoxIcon className='w-4 h-4' />
3037
<span>{item.name}</span>
3138
</div>
3239
</Tippy>
@@ -45,7 +52,7 @@ const Collection = ({ collectionId, item, depth }) => {
4552
if (item.type === OBJ_TYPES.flowtest && item.name.match(FLOW_FILE_SUFFIX_REGEX)) {
4653
return (
4754
<div
48-
className='flex items-center justify-between gap-2 text-balance rounded p-0 text-start transition duration-200 ease-out hover:bg-slate-100'
55+
className='flex items-center justify-between gap-2 p-0 transition duration-200 ease-out rounded text-balance text-start hover:bg-slate-100'
4956
onClick={() => {
5057
readFlowTest(item.pathname, collectionId)
5158
.then((result) => {
@@ -60,24 +67,26 @@ const Collection = ({ collectionId, item, depth }) => {
6067
}}
6168
>
6269
<div className='flex items-center justify-start gap-2 px-2 py-1'>
63-
<DocumentIcon className='h-4 w-4' />
70+
<DocumentIcon className='w-4 h-4' />
6471
<span>{item.name}</span>
6572
</div>
66-
<OptionsMenu
67-
data-click-from='options-menu'
68-
directory={item}
69-
data-item-type={OBJ_TYPES.flowtest}
70-
itemType={OBJ_TYPES.flowtest}
71-
collectionId={collectionId}
72-
/>
73+
<div
74+
className='relative inline-block p-2 text-left transition duration-200 ease-out rounded rounded-l-none hover:bg-slate-200'
75+
onClick={() => {
76+
setFlowTestPathToDelete(item.pathname);
77+
setConfirmActionModalOpen(true);
78+
}}
79+
>
80+
<TrashIcon className='w-4 h-4' aria-hidden='true' />
81+
</div>
7382
</div>
7483
);
7584
}
7685

7786
if (item.type === OBJ_TYPES.folder) {
7887
return (
7988
<div
80-
className='flex items-center justify-between gap-2 text-balance rounded p-0 text-start transition duration-200 ease-out hover:bg-slate-100'
89+
className='flex items-center justify-between gap-2 p-0 transition duration-200 ease-out rounded text-balance text-start hover:bg-slate-100'
8190
onClick={(event) => {
8291
const clickFrom = event.target.dataset?.clickFrom;
8392
if (!clickFrom || clickFrom !== 'options-menu') {
@@ -86,7 +95,7 @@ const Collection = ({ collectionId, item, depth }) => {
8695
}}
8796
>
8897
<div className='flex items-center justify-start gap-2 px-2 py-1'>
89-
<FolderIcon className='h-4 w-4' />
98+
<FolderIcon className='w-4 h-4' />
9099
<span data-type-name={item.type}>{item.name}</span>
91100
</div>
92101
<OptionsMenu
@@ -117,6 +126,24 @@ const Collection = ({ collectionId, item, depth }) => {
117126
</>
118127
)}
119128
</li>
129+
<ConfirmActionModal
130+
closeFn={() => setConfirmActionModalOpen(false)}
131+
open={confirmActionModalOpen}
132+
message={messageForConfirmActionModal}
133+
actionFn={() => {
134+
deleteFlowTest(flowTestPathToDelete, collectionId)
135+
.then((result) => {
136+
console.log(
137+
`Deleted flowtest: path = ${flowTestPathToDelete}, collectionId = ${collectionId}, result: ${result}`,
138+
);
139+
})
140+
.catch((error) => {
141+
console.log(`Error deleting flowtest = ${flowTestPathToDelete}: ${error}`);
142+
toast.error(`Error deleting flowtest`);
143+
});
144+
setConfirmActionModalOpen(false);
145+
}}
146+
/>
120147
</>
121148
);
122149
};

‎src/components/molecules/sidebar/content/Collections.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@ const Collections = ({ collections }) => {
6969
const pathName = clickFromElementDataSet?.pathName;
7070
const collectionId = clickFromElementDataSet?.collectionId;
7171

72-
console.log(clickFromElementDataSet);
73-
7472
setSelectedPathName(pathName);
7573
setSelectedCollectionId(collectionId);
7674
setSelectedMenuItem(optionsMenuItem);
@@ -93,7 +91,7 @@ const Collections = ({ collections }) => {
9391
}
9492
}}
9593
>
96-
<ul className='menu w-full'>
94+
<ul className='w-full menu'>
9795
{collections.map((collection) => (
9896
<Collection key={collection.id} collectionId={collection.id} item={collection} depth={1} />
9997
))}

0 commit comments

Comments
 (0)