Skip to content

Commit 4b36e8d

Browse files
jsajaljsajal
authored
Merge pull request #56 from FlowTestAI/ui-sidesheet
Adding environment tab panel foundation code along with side sheet
2 parents 1156751 + 0cf1896 commit 4b36e8d

File tree

11 files changed

+241
-92
lines changed

11 files changed

+241
-92
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/Tabs.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Tabs = () => {
1717
const activeTabStyles =
1818
'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
1919
const tabCommonStyles =
20-
'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
20+
'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm flex-nowrap';
2121
const messageForConfirmActionModal = 'You have unsaved changes in the flowtest, are you sure you want to close it?';
2222

2323
const handleCloseTab = (event, tab) => {
@@ -39,9 +39,10 @@ const Tabs = () => {
3939
};
4040

4141
return (
42-
<div role='tablist' className='tabs tabs-lg'>
42+
<div role='tablist' className='overflow-scroll tabs tabs-lg'>
4343
{tabs
4444
// tabs belonging to one collection will be shown at a time
45+
.reverse()
4546
.filter((t) => t.collectionId === focusTab.collectionId)
4647
.map((tab, index) => {
4748
return (
@@ -56,14 +57,14 @@ const Tabs = () => {
5657
data-id={tab.id}
5758
data-collection-id={tab.collectionId}
5859
>
59-
<a>{tab.name}</a>
60+
<a className='text-nowrap'>{tab.name}</a>
6061
{/* close needs to be a separate clickable component other wise it gets confused with above */}
6162
<div
62-
className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
63+
className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
6364
data-tab-id={tab.id}
6465
onClick={(e) => handleCloseTab(e, tab)}
6566
>
66-
<XMarkIcon className='h-4 w-4' />
67+
<XMarkIcon className='w-4 h-4' />
6768
</div>
6869
</div>
6970
);

‎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/headers/WorkspaceHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const WorkspaceHeader = () => {
1515

1616
return (
1717
<div className='flex items-center justify-between gap-8 border-b border-neutral-300 bg-slate-100 pr-4'>
18-
<div className='flex items-center'>
18+
<div className='flex items-center overflow-scroll'>
1919
<Tabs />
2020
<button className='flex cursor-not-allowed flex-col items-center bg-slate-100 p-3.5 text-center text-slate-400'>
2121
<Tippy content='Coming Soon!' placement='right'>

‎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

0 commit comments

Comments
 (0)