Skip to content

Commit 66264b1

Browse files
rachitkrsinghrachitkrsingh
committed
Adding functionality for envrionments directory rendering
1 parent 86cc859 commit 66264b1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1603
-592
lines changed

‎src/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import './App.css';
3-
import FlowRoutes from './routes';
3+
import Routes from './routes';
44
import { HashRouter } from 'react-router-dom';
55

66
function App() {
77
return (
88
<HashRouter>
9-
<FlowRoutes />
9+
<Routes />
1010
</HashRouter>
1111
);
1212
}

‎src/components/atoms/SelectEnvironment.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Fragment, useState } from 'react';
2+
import { PropTypes } from 'prop-types';
23
import { Listbox, Transition } from '@headlessui/react';
34
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
45
import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
@@ -53,4 +54,8 @@ const SelectEnvironment = ({ environments }) => {
5354
);
5455
};
5556

57+
SelectEnvironment.propTypes = {
58+
environments: PropTypes.Array.isRequired,
59+
};
60+
5661
export default SelectEnvironment;

‎src/components/atoms/Tabs.js‎

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,82 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { XMarkIcon } from '@heroicons/react/24/outline';
33
import { useTabStore } from 'stores/TabStore';
4+
import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
45

56
const Tabs = () => {
67
const tabs = useTabStore((state) => state.tabs);
78
const setFocusTab = useTabStore((state) => state.setFocusTab);
89
const focusTabId = useTabStore((state) => state.focusTabId);
910
const focusTab = tabs.find((t) => t.id === focusTabId);
11+
const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
1012
const closeTab = useTabStore((state) => state.closeTab);
13+
const [closingTabId, setClosingTabId] = useState('');
14+
const [closingCollectionId, setClosingCollectionId] = useState('');
1115
const activeTabStyles =
1216
'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
1317
const tabCommonStyles =
1418
'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';
19+
const messageForConfirmActionModal =
20+
'Changes for the flow test are not saved, are you sure that you wants to close it?';
21+
const handleCloseTab = (event) => {
22+
event.stopPropagation();
23+
event.preventDefault();
24+
const tabId = event.currentTarget.dataset.tabId;
25+
const { isDirty, collectionId } = tabs.find((tab) => {
26+
if (tab.id === tabId) return tab;
27+
});
28+
setClosingTabId(tabId);
29+
setClosingCollectionId(collectionId);
30+
31+
if (isDirty) {
32+
console.log(`\n \n BHUT HI SAHIIII tabId: ${tabId} : collectionId: ${collectionId}\n \n`);
33+
setConfirmActionModalOpen(true);
34+
return;
35+
}
36+
closeTab(tabId, collectionId);
37+
};
1538
return (
1639
<div role='tablist' className='tabs tabs-lg'>
1740
{tabs
1841
// tabs belonging to one collection will be shown at a time
1942
.filter((t) => t.collectionId === focusTab.collectionId)
2043
.map((tab, index) => {
2144
return (
22-
<>
23-
<a
24-
role='tab'
25-
className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
26-
key={index}
27-
data-id={tab.id}
28-
data-collection-id={tab.collectionId}
29-
onClick={() => {
30-
setFocusTab(tab.id);
31-
console.log(`CLICKED THE ${tab.id}`);
32-
}}
33-
>
34-
{tab.name}
35-
</a>
45+
<div
46+
key={index}
47+
className={`${tabCommonStyles} ${focusTabId === tab.id ? activeTabStyles : ''}`}
48+
role='tab'
49+
onClick={() => {
50+
setFocusTab(tab.id);
51+
console.log(`CLICKED THE ${tab.id}`);
52+
}}
53+
data-id={tab.id}
54+
data-collection-id={tab.collectionId}
55+
>
56+
<a>{tab.name}</a>
3657
{/* close needs to be a separate clickable component other wise it gets confused with above */}
3758
<div
38-
className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
39-
onClick={() => {
40-
closeTab(tab.id, tab.collectionId);
41-
}}
59+
className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
60+
data-tab-id={tab.id}
61+
onClick={handleCloseTab}
4262
>
43-
<XMarkIcon className='h-4 w-4' />
63+
<XMarkIcon className='w-4 h-4' />
4464
</div>
45-
</>
65+
</div>
4666
);
4767
})}
68+
<ConfirmActionModal
69+
closeFn={() => setConfirmActionModalOpen(false)}
70+
open={confirmActionModalOpen}
71+
message={messageForConfirmActionModal}
72+
actionFn={() => {
73+
console.log(
74+
`I AHVEN BEEN CLICIKED : closingTabId: ${closingTabId} : closingCollectionId: ${closingCollectionId}`,
75+
);
76+
closeTab(closingTabId, closingCollectionId);
77+
setConfirmActionModalOpen(false);
78+
}}
79+
/>
4880
</div>
4981
);
5082
};

‎src/components/atoms/ThemeController.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import Tippy from '@tippyjs/react';
3+
import 'tippy.js/dist/tippy.css';
4+
5+
const ThemeController = () => {
6+
return (
7+
<Tippy content='Coming Soon!' placement='bottom'>
8+
<label className='flex items-center gap-2 cursor-pointer'>
9+
<svg
10+
xmlns='http://www.w3.org/2000/svg'
11+
width='16'
12+
height='16'
13+
viewBox='0 0 24 24'
14+
fill='none'
15+
stroke='currentColor'
16+
strokeWidth='2'
17+
strokeLinecap='round'
18+
strokeLinejoin='round'
19+
>
20+
<circle cx='12' cy='12' r='5' />
21+
<path d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4' />
22+
</svg>
23+
<input type='checkbox' value='synthwave' className='theme-controller toggle toggle-xs' disabled />
24+
<svg
25+
xmlns='http://www.w3.org/2000/svg'
26+
width='16'
27+
height='16'
28+
viewBox='0 0 24 24'
29+
fill='none'
30+
stroke='currentColor'
31+
strokeWidth='2'
32+
strokeLinecap='round'
33+
strokeLinejoin='round'
34+
>
35+
<path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
36+
</svg>
37+
</label>
38+
</Tippy>
39+
);
40+
};
41+
42+
export default ThemeController;

‎src/components/atoms/flow/FlowNode.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { PropTypes } from 'prop-types';
23
import { Handle, Position } from 'reactflow';
34

45
const FlowNode = ({ children, title, handleLeft, handleLeftData, handleRight, handleRightData }) => {
@@ -27,4 +28,13 @@ const FlowNode = ({ children, title, handleLeft, handleLeftData, handleRight, ha
2728
);
2829
};
2930

31+
FlowNode.propTypes = {
32+
children: PropTypes.node.isRequired,
33+
title: PropTypes.string.isRequired,
34+
handleLeft: PropTypes.node.isRequired,
35+
handleLeftData: PropTypes.object.isRequired,
36+
handleRight: PropTypes.node.isRequired,
37+
handleRightData: PropTypes.object.isRequired,
38+
};
39+
3040
export default FlowNode;

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, { Fragment } from 'react';
2+
import { PropTypes } from 'prop-types';
3+
import { Menu, Transition } from '@headlessui/react';
4+
import { FolderPlusIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
5+
import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
6+
import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
7+
8+
const OptionsMenu = ({ directory, itemType }) => {
9+
const menuItemsStyles =
10+
'group flex w-full items-center rounded px-2 py-2 text-sm text-gray-900 transition duration-200 ease-out hover:bg-slate-100';
11+
return (
12+
<Menu
13+
as='div'
14+
className='relative inline-block text-left transition duration-200 ease-out rounded rounded-l-none hover:bg-slate-200'
15+
>
16+
<Menu.Button data-click-from='options-menu' className='p-2' data-item-type={itemType}>
17+
<EllipsisVerticalIcon
18+
className='w-4 h-4'
19+
aria-hidden='true'
20+
data-click-from='options-menu'
21+
data-item-type={itemType}
22+
/>
23+
</Menu.Button>
24+
<Transition
25+
as={Fragment}
26+
enter='transition ease-out duration-100'
27+
enterFrom='transform opacity-0 scale-95'
28+
enterTo='transform opacity-100 scale-100'
29+
leave='transition ease-in duration-75'
30+
leaveFrom='transform opacity-100 scale-100'
31+
leaveTo='transform opacity-0 scale-95'
32+
>
33+
<Menu.Items
34+
className='absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
35+
data-click-from='options-menu'
36+
data-item-type={itemType}
37+
>
38+
<div className='px-1 py-1' data-click-from='options-menu' data-item-type={itemType}>
39+
<Menu.Item data-click-from='options-menu' data-item-type={itemType}>
40+
<button
41+
className={menuItemsStyles}
42+
data-click-from='options-menu'
43+
data-options-menu-item={DirectoryOptionsActions.addNewFolder.value}
44+
data-path-name={directory.pathname}
45+
data-item-type={itemType}
46+
>
47+
<FolderPlusIcon
48+
className='w-4 h-4 mr-2'
49+
aria-hidden='true'
50+
data-click-from='options-menu'
51+
data-item-type={itemType}
52+
/>
53+
{DirectoryOptionsActions.addNewFolder.displayValue}
54+
</button>
55+
</Menu.Item>
56+
<Menu.Item data-click-from='options-menu' data-item-type={itemType}>
57+
<button
58+
className={menuItemsStyles}
59+
data-click-from='options-menu'
60+
data-options-menu-item={DirectoryOptionsActions.addNewFlow.value}
61+
data-path-name={directory.pathname}
62+
data-item-type={itemType}
63+
>
64+
<PencilSquareIcon
65+
className='w-4 h-4 mr-2'
66+
aria-hidden='true'
67+
data-click-from='options-menu'
68+
data-item-type={itemType}
69+
/>
70+
{DirectoryOptionsActions.addNewFlow.displayValue}
71+
</button>
72+
</Menu.Item>
73+
</div>
74+
<div className='px-1 py-1' data-click-from='options-menu' data-item-type={itemType}>
75+
<Menu.Item data-click-from='options-menu' data-item-type={itemType}>
76+
<button
77+
className={menuItemsStyles}
78+
data-click-from='options-menu'
79+
data-options-menu-item={DirectoryOptionsActions.delete.value}
80+
data-path-name={directory.pathname}
81+
data-item-type={itemType}
82+
>
83+
<TrashIcon
84+
className='w-4 h-4 mr-2'
85+
aria-hidden='true'
86+
data-click-from='options-menu'
87+
data-item-type={itemType}
88+
/>
89+
{DirectoryOptionsActions.delete.displayValue}
90+
</button>
91+
</Menu.Item>
92+
</div>
93+
</Menu.Items>
94+
</Transition>
95+
</Menu>
96+
);
97+
};
98+
99+
OptionsMenu.propTypes = {
100+
directory: PropTypes.object.isRequired,
101+
itemType: PropTypes.string.isRequired,
102+
};
103+
104+
export default OptionsMenu;

‎src/components/atoms/sidebar/environments/EnvOptionsMenu.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { Fragment } from 'react';
2+
import { PropTypes } from 'prop-types';
3+
import { Menu, Transition } from '@headlessui/react';
4+
import { PencilSquareIcon } from '@heroicons/react/24/outline';
5+
import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
6+
import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
7+
8+
// ToDo: Combine this component with OptionsMenu in sidebar atoms to make it generic
9+
const EnvOptionsMenu = ({ pathName, itemType }) => {
10+
const menuItemsStyles =
11+
'group flex w-full items-center rounded px-2 py-2 text-sm text-gray-900 transition duration-200 ease-out hover:bg-slate-100';
12+
return (
13+
<Menu
14+
as='div'
15+
className='relative inline-block text-left transition duration-200 ease-out rounded rounded-l-none hover:bg-slate-200'
16+
>
17+
<Menu.Button data-click-from='env-options-menu' className='p-2' data-item-type={itemType}>
18+
<EllipsisVerticalIcon
19+
className='w-4 h-4'
20+
aria-hidden='true'
21+
data-click-from='env-options-menu'
22+
data-item-type={itemType}
23+
/>
24+
</Menu.Button>
25+
<Transition
26+
as={Fragment}
27+
enter='transition ease-out duration-100'
28+
enterFrom='transform opacity-0 scale-95'
29+
enterTo='transform opacity-100 scale-100'
30+
leave='transition ease-in duration-75'
31+
leaveFrom='transform opacity-100 scale-100'
32+
leaveTo='transform opacity-0 scale-95'
33+
>
34+
<Menu.Items
35+
className='absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none'
36+
data-click-from='env-options-menu'
37+
data-item-type={itemType}
38+
>
39+
<div className='px-1 py-1' data-click-from='env-options-menu' data-item-type={itemType}>
40+
<Menu.Item data-click-from='env-options-menu' data-item-type={itemType}>
41+
<button
42+
className={menuItemsStyles}
43+
data-click-from='env-options-menu'
44+
data-options-menu-item={DirectoryOptionsActions.addNewEnvironment.value}
45+
data-path-name={pathName}
46+
>
47+
<PencilSquareIcon
48+
className='w-4 h-4 mr-2'
49+
aria-hidden='true'
50+
data-click-from='env-options-menu'
51+
data-item-type={itemType}
52+
/>
53+
New Environment
54+
</button>
55+
</Menu.Item>
56+
</div>
57+
</Menu.Items>
58+
</Transition>
59+
</Menu>
60+
);
61+
};
62+
63+
EnvOptionsMenu.propTypes = {
64+
pathName: PropTypes.string.isRequired,
65+
itemType: PropTypes.string.isRequired,
66+
};
67+
68+
export default EnvOptionsMenu;

‎src/components/layouts/SplitPane.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { Allotment } from 'allotment';
33
import 'allotment/dist/style.css';
44
import Workspace from '../organisms/workspace/Workspace';
5-
import AppNavBar from 'components/molecules/appNavBar';
6-
import WorkspaceDirectory from '../organisms/workspaceDirectory/WorkspaceDirectory';
5+
import AppNavBar from 'components/organisms/appNavBar';
6+
import SideBar from 'components/organisms/SideBar';
77

88
const SplitPane = () => {
99
return (
@@ -12,7 +12,7 @@ const SplitPane = () => {
1212
<Allotment.Pane preferredSize={'450px'} minSize={450}>
1313
<div className='flex text-xs'>
1414
<AppNavBar />
15-
<WorkspaceDirectory />
15+
<SideBar />
1616
</div>
1717
</Allotment.Pane>
1818
<Allotment.Pane>

0 commit comments

Comments
 (0)