Skip to content

Commit 48d565b

Browse files
jsajaljsajal
committed
patch ui changes
1 parent f1b1d8f commit 48d565b

File tree

16 files changed

+278
-87
lines changed

16 files changed

+278
-87
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-router": "^6.15.0",
3030
"react-router-dom": "^6.22.2",
3131
"react-scripts": "5.0.1",
32+
"react-toastify": "^10.0.5",
3233
"react-tooltip": "^5.26.2",
3334
"reactflow": "^11.8.3",
3435
"socket.io-client": "^4.7.4",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { PropTypes } from 'prop-types';
33
import ReactFlow, { useNodesState, useEdgesState, addEdge, Controls, Background, ControlButton } from 'reactflow';
44
import 'reactflow/dist/style.css';
55
import { cloneDeep, isEqual } from 'lodash';
6+
import { toast } from 'react-toastify';
67

78
// css
89
import './index.css';
@@ -278,6 +279,7 @@ const Flow = ({ collectionId }) => {
278279
.catch((error) => {
279280
// TODO: show error in UI
280281
console.log(error);
282+
toast.error(`Error while generating flow data`);
281283
});
282284
}}
283285
>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useState } from 'react';
2+
import { DocumentArrowDownIcon, DocumentArrowUpIcon } from '@heroicons/react/20/solid';
3+
import Tippy from '@tippyjs/react';
4+
import 'tippy.js/dist/tippy.css';
5+
import SaveFlowModal from '../modals/SaveFlowModal';
6+
7+
import { useTabStore } from 'stores/TabStore';
8+
import Button from 'components/atoms/common/Button';
9+
import { BUTTON_TYPES } from 'constants/Common';
10+
import GenerateFlowTestModal from '../modals/GenerateFlowTestModal';
11+
12+
const TabPanelHeader = () => {
13+
const focusTabId = useTabStore.getState().focusTabId;
14+
const tabs = useTabStore.getState().tabs;
15+
const focusTab = tabs.find((t) => t.id === focusTabId);
16+
17+
const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
18+
19+
return (
20+
<div className='flex items-center justify-between gap-4 border-b border-neutral-300 px-6 py-2'>
21+
{focusTab ? (
22+
<>
23+
<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'>
26+
<SaveFlowModal tab={focusTab} />
27+
<button>
28+
<Tippy content='Coming Soon!' placement='top'>
29+
<DocumentArrowDownIcon className='h-5 w-5' />
30+
</Tippy>
31+
</button>
32+
<button>
33+
<Tippy content='Coming Soon!' placement='top'>
34+
<DocumentArrowUpIcon className='h-5 w-5' />
35+
</Tippy>
36+
</button>
37+
</div>
38+
<div className='gen_ai_button border-l border-neutral-300 pl-4'>
39+
<Button
40+
btnType={BUTTON_TYPES.tertiary}
41+
isDisabled={false}
42+
onClickHandle={() => setGenerateFlowTestModalOpen(true)}
43+
fullWidth={true}
44+
>
45+
Generate
46+
</Button>
47+
<GenerateFlowTestModal
48+
closeFn={() => setGenerateFlowTestModalOpen(false)}
49+
open={generateFlowTestModalOpen}
50+
/>
51+
</div>
52+
</div>
53+
</>
54+
) : (
55+
<div className='text-base tracking-[0.15em]'></div>
56+
)}
57+
</div>
58+
);
59+
};
60+
61+
TabPanelHeader.propTypes = {};
62+
63+
export default TabPanelHeader;

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

Lines changed: 0 additions & 42 deletions
This file was deleted.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ const WorkspaceHeader = () => {
1414
const environmentData = focusTab ? collections.find((c) => c.id === focusTab.collectionId)?.environments : [];
1515

1616
return (
17-
<div className='flex items-center justify-between gap-8 pr-4 border-b border-neutral-300 bg-slate-100'>
17+
<div className='flex items-center justify-between gap-8 border-b border-neutral-300 bg-slate-100 pr-4'>
1818
<div className='flex items-center'>
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'>
22-
<PlusIcon className='w-5 h-5' />
22+
<PlusIcon className='h-5 w-5' />
2323
</Tippy>
2424
</button>
2525
</div>

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { Fragment, useState } from 'react';
2+
import { PropTypes } from 'prop-types';
3+
import { Dialog, Transition, Listbox } from '@headlessui/react';
4+
import Button from 'components/atoms/common/Button';
5+
import { BUTTON_TYPES } from 'constants/Common';
6+
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
7+
import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
8+
9+
const GenerateFlowTestModal = ({ closeFn = () => null, open = false }) => {
10+
const [selectedModel, setSelectedModel] = useState(null);
11+
const [textareaValue, setTextareaValue] = useState('');
12+
13+
return (
14+
<Transition appear show={open} as={Fragment}>
15+
<Dialog as='div' className='relative z-10' onClose={closeFn}>
16+
<Transition.Child
17+
as={Fragment}
18+
enter='ease-out duration-300'
19+
enterFrom='opacity-0'
20+
enterTo='opacity-100'
21+
leave='ease-in duration-200'
22+
leaveFrom='opacity-100'
23+
leaveTo='opacity-0'
24+
>
25+
<div className='fixed inset-0 bg-black/25' />
26+
</Transition.Child>
27+
28+
<div className='fixed inset-0 overflow-y-auto'>
29+
<div className='flex min-h-full items-center justify-center p-4 text-center'>
30+
<Transition.Child
31+
as={Fragment}
32+
enter='ease-out duration-300'
33+
enterFrom='opacity-0 scale-95'
34+
enterTo='opacity-100 scale-100'
35+
leave='ease-in duration-200'
36+
leaveFrom='opacity-100 scale-100'
37+
leaveTo='opacity-0 scale-95'
38+
>
39+
<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'>
40+
<Dialog.Title
41+
as='h3'
42+
className='border-b border-neutral-300 pb-4 text-center text-lg font-semibold text-gray-900'
43+
>
44+
Use our AI to generate the flowtest
45+
</Dialog.Title>
46+
<div className='mt-6'>
47+
<Listbox value={selectedModel} onChange={setSelectedModel}>
48+
<div className='relative flex h-full w-full'>
49+
<Listbox.Button className='flex w-full cursor-default items-center justify-between gap-4 rounded border border-neutral-300 py-4'>
50+
<div className='min-w-32 pl-2 text-left'>{selectedModel ? selectedModel : 'Select model'}</div>
51+
<ChevronUpDownIcon className='h-5 w-5' aria-hidden='true' />
52+
</Listbox.Button>
53+
<Transition
54+
as={Fragment}
55+
leave='transition ease-in duration-100'
56+
leaveFrom='opacity-100'
57+
leaveTo='opacity-0'
58+
>
59+
<Listbox.Options className='absolute right-0 top-6 z-10 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow-lg ring-1 ring-black/5'>
60+
<Listbox.Option
61+
className={({ active }) =>
62+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
63+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
64+
}`
65+
}
66+
value={'Model 1'}
67+
>
68+
{({ selected }) => (
69+
<>
70+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
71+
Model 1
72+
</span>
73+
{selected ? (
74+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
75+
<CheckIcon className='h-5 w-5' aria-hidden='true' />
76+
</span>
77+
) : null}
78+
</>
79+
)}
80+
</Listbox.Option>
81+
<Listbox.Option
82+
className={({ active }) =>
83+
`relative cursor-default select-none py-2 pl-10 pr-4 ${
84+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
85+
}`
86+
}
87+
value={'Model 2'}
88+
>
89+
{({ selected }) => (
90+
<>
91+
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
92+
Model 2
93+
</span>
94+
{selected ? (
95+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
96+
<CheckIcon className='h-5 w-5' aria-hidden='true' />
97+
</span>
98+
) : null}
99+
</>
100+
)}
101+
</Listbox.Option>
102+
</Listbox.Options>
103+
</Transition>
104+
</div>
105+
</Listbox>
106+
<div className='mt-4'>
107+
<textarea
108+
id='gen-ai-text'
109+
className='block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
110+
placeholder='Text'
111+
onChange={(event) => setTextareaValue(event.target.value)}
112+
/>
113+
</div>
114+
</div>
115+
<div className='mt-6 flex items-center gap-2'>
116+
<Button btnType={BUTTON_TYPES.error} isDisabled={false} onClickHandle={closeFn} fullWidth={true}>
117+
Cancel
118+
</Button>
119+
<Button
120+
btnType={BUTTON_TYPES.info}
121+
isDisabled={false}
122+
fullWidth={true}
123+
onClickHandle={() => {
124+
console.log(`\n Model selected : ${selectedModel} \n`);
125+
console.log(`\n Model Text : ${textareaValue} \n`);
126+
}}
127+
>
128+
Generate
129+
</Button>
130+
</div>
131+
</Dialog.Panel>
132+
</Transition.Child>
133+
</div>
134+
</div>
135+
</Dialog>
136+
</Transition>
137+
);
138+
};
139+
140+
GenerateFlowTestModal.propTypes = {
141+
closeFn: PropTypes.func.isRequired,
142+
open: PropTypes.boolean.isRequired,
143+
};
144+
export default GenerateFlowTestModal;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Dialog, Transition } from '@headlessui/react';
44
import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
55
import ImportCollectionTypes from 'constants/ImportCollectionTypes';
66
import { createCollection } from 'service/collection';
7+
import { toast } from 'react-toastify';
78

89
const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
910
const importYamlFile = useRef(null);
@@ -44,10 +45,12 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
4445
// if user presses cancel in choosing directory dialog, this is returned undefined
4546
if (dirPath) {
4647
createCollection(yamlPath, dirPath);
48+
toast.success('Successfully created the collection');
4749
}
4850
})
4951
.catch((error) => {
5052
console.log(`Failed to create collection: ${error}`);
53+
toast.error('Failed to create the collection');
5154
});
5255
};
5356

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { PropTypes } from 'prop-types';
33
import { Dialog, Transition } from '@headlessui/react';
44
import { DocumentArrowUpIcon } from '@heroicons/react/24/outline';
55
import ImportCollectionTypes from 'constants/ImportCollectionTypes';
6-
import { createCollection, openCollection } from 'service/collection';
6+
import { openCollection } from 'service/collection';
7+
import { toast } from 'react-toastify';
78

89
const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
910
const importYamlFile = useRef(null);
@@ -45,11 +46,13 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
4546
if (dirPath) {
4647
openCollection(yamlPath, dirPath).catch((error) => {
4748
console.log(`Failed to open collection: ${error}`);
49+
toast.error('Failed to create the collection');
4850
});
4951
}
5052
})
5153
.catch((error) => {
5254
console.log(`Failed to open collection: ${error}`);
55+
toast.error('Failed to open the collection');
5356
});
5457
};
5558

0 commit comments

Comments
 (0)