Skip to content

Commit 73850b5

Browse files
jsajaljsajal
committed
Extract env tab as separate component and integrate actions
1 parent a2c562f commit 73850b5

File tree

6 files changed

+139
-93
lines changed

6 files changed

+139
-93
lines changed

‎src/components/atoms/Tabs.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
33
import { useTabStore } from 'stores/TabStore';
44
import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
55
import { isEqual } from 'lodash';
6+
import { OBJ_TYPES } from 'constants/Common';
67

78
const Tabs = () => {
89
const tabs = useTabStore((state) => state.tabs);
@@ -23,17 +24,16 @@ const Tabs = () => {
2324
const handleCloseTab = (event, tab) => {
2425
event.stopPropagation();
2526
event.preventDefault();
26-
// const tabId = event.currentTarget.dataset.tabId;
27-
// const { isDirty, collectionId } = tabs.find((tab) => {
28-
// if (tab.id === tabId) return tab;
29-
// });
27+
3028
setClosingTabId(tab.id);
3129
setClosingCollectionId(tab.collectionId);
3230

33-
if (tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
34-
console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
35-
setConfirmActionModalOpen(true);
36-
return;
31+
if (tab.type === OBJ_TYPES.flowtest) {
32+
if (tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
33+
console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
34+
setConfirmActionModalOpen(true);
35+
return;
36+
}
3737
}
3838
closeTab(tab.id, tab.collectionId);
3939
};
@@ -59,11 +59,11 @@ const Tabs = () => {
5959
<a>{tab.name}</a>
6060
{/* close needs to be a separate clickable component other wise it gets confused with above */}
6161
<div
62-
className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
62+
className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
6363
data-tab-id={tab.id}
6464
onClick={(e) => handleCloseTab(e, tab)}
6565
>
66-
<XMarkIcon className='h-4 w-4' />
66+
<XMarkIcon className='w-4 h-4' />
6767
</div>
6868
</div>
6969
);

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
3+
const Env = ({ variables }) => {
4+
return (
5+
<div className='p-4'>
6+
<div>Test Tab panel for environment</div>
7+
<div className='overflow-x-auto'>
8+
<table className='table table-zebra'>
9+
{/* head */}
10+
<thead>
11+
<tr>
12+
<th></th>
13+
<th>Key</th>
14+
<th>Value</th>
15+
<th>New Value</th>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<tr>
20+
<th>1</th>
21+
<td>Test variable 1</td>
22+
<td>ABC</td>
23+
<td>
24+
<input
25+
type='text'
26+
className='block w-full rounded-lg 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'
27+
placeholder='label'
28+
required
29+
onChange={(event) => {
30+
const labelValue = event.target.value;
31+
console.log(`New value for ABC: ${labelValue}`);
32+
}}
33+
/>
34+
</td>
35+
</tr>
36+
<tr>
37+
<th>2</th>
38+
<td>Test variable 2</td>
39+
<td>DEF</td>
40+
<td>
41+
<input
42+
type='text'
43+
className='block w-full rounded-lg 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'
44+
placeholder='label'
45+
required
46+
onChange={(event) => {
47+
const labelValue = event.target.value;
48+
console.log(`New value for DEF: ${labelValue}`);
49+
}}
50+
/>
51+
</td>
52+
</tr>
53+
<tr>
54+
<th>3</th>
55+
<td>Test variable 3</td>
56+
<td>ZXE</td>
57+
<td>
58+
<input
59+
type='text'
60+
className='block w-full rounded-lg 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'
61+
placeholder='label'
62+
required
63+
onChange={(event) => {
64+
const labelValue = event.target.value;
65+
console.log(`New value for ZXE: ${labelValue}`);
66+
}}
67+
/>
68+
</td>
69+
</tr>
70+
</tbody>
71+
</table>
72+
</div>
73+
</div>
74+
);
75+
};
76+
77+
export default Env;

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
33
import { ArchiveBoxIcon, DocumentIcon, TrashIcon } from '@heroicons/react/24/outline';
44
import { OBJ_TYPES } from 'constants/Common';
5-
import { deleteEnvironmentFile } from 'service/collection';
5+
import { deleteEnvironmentFile, readEnvironmentFile } from 'service/collection';
66
import EnvOptionsMenu from 'components/atoms/sidebar/environments/EnvOptionsMenu';
77
import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
88
import { toast } from 'react-toastify';
@@ -50,7 +50,16 @@ const Environment = ({ collectionId, collection }) => {
5050
className='before:absolute before:bottom-0 before:top-0 before:w-[1px] before:bg-slate-300 before:opacity-100'
5151
>
5252
<li>
53-
<div className='flex flex-row items-center justify-between gap-2 p-0 transition duration-200 ease-out rounded text-balance text-start hover:bg-slate-100'>
53+
<div
54+
className='flex flex-row items-center justify-between gap-2 p-0 transition duration-200 ease-out rounded text-balance text-start hover:bg-slate-100'
55+
onClick={() => {
56+
try {
57+
readEnvironmentFile(environment.name, collectionId);
58+
} catch (error) {
59+
toast.error(`Error reading environment: ${environment.name}`);
60+
}
61+
}}
62+
>
5463
<div className='flex items-center justify-start gap-2 px-2 py-1 cursor-pointer hover:bg-transparent'>
5564
<DocumentIcon className='w-4 h-4' />
5665
<span>{environment.name}</span>

‎src/components/molecules/workspace/WorkspaceContent.js‎

Lines changed: 18 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Flow, { init } from 'components/molecules/flow';
33
import { useTabStore } from 'stores/TabStore';
44
import useCanvasStore from 'stores/CanvasStore';
55
import TabPanelHeader from '../headers/TabPanelHeader';
6+
import { OBJ_TYPES } from 'constants/Common';
7+
import Env from '../environment';
68

79
const WorkspaceContent = () => {
810
const setNodes = useCanvasStore((state) => state.setNodes);
@@ -17,89 +19,25 @@ const WorkspaceContent = () => {
1719
console.log(`Tab changed to: ${focusTabId}`);
1820
console.log(focusTab);
1921
// perform actions based on the new tabId
20-
const result = init(focusTab.flowDataDraft ? focusTab.flowDataDraft : focusTab.flowData);
21-
setNodes(result.nodes);
22-
setEdges(result.edges);
23-
setLogs([]);
22+
if (focusTab.type === OBJ_TYPES.flowtest) {
23+
const result = init(focusTab.flowDataDraft ? focusTab.flowDataDraft : focusTab.flowData);
24+
setNodes(result.nodes);
25+
setEdges(result.edges);
26+
setLogs([]);
27+
}
2428
}
2529

2630
return (
27-
<div className='flex h-full flex-col'>
28-
<TabPanelHeader />
29-
{focusTab ? (
30-
<Flow collectionId={focusTab.collectionId} />
31-
) : (
32-
// This code will be exported out as its own component
33-
<div className='p-4'>
34-
<div>Test Tab panel for environment</div>
35-
<div className='overflow-x-auto'>
36-
<table className='table table-zebra'>
37-
{/* head */}
38-
<thead>
39-
<tr>
40-
<th></th>
41-
<th>Key</th>
42-
<th>Value</th>
43-
<th>New Value</th>
44-
</tr>
45-
</thead>
46-
<tbody>
47-
<tr>
48-
<th>1</th>
49-
<td>Test variable 1</td>
50-
<td>ABC</td>
51-
<td>
52-
<input
53-
type='text'
54-
className='block w-full rounded-lg 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'
55-
placeholder='label'
56-
required
57-
onChange={(event) => {
58-
const labelValue = event.target.value;
59-
console.log(`New value for ABC: ${labelValue}`);
60-
}}
61-
/>
62-
</td>
63-
</tr>
64-
<tr>
65-
<th>2</th>
66-
<td>Test variable 2</td>
67-
<td>DEF</td>
68-
<td>
69-
<input
70-
type='text'
71-
className='block w-full rounded-lg 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'
72-
placeholder='label'
73-
required
74-
onChange={(event) => {
75-
const labelValue = event.target.value;
76-
console.log(`New value for DEF: ${labelValue}`);
77-
}}
78-
/>
79-
</td>
80-
</tr>
81-
<tr>
82-
<th>3</th>
83-
<td>Test variable 3</td>
84-
<td>ZXE</td>
85-
<td>
86-
<input
87-
type='text'
88-
className='block w-full rounded-lg 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'
89-
placeholder='label'
90-
required
91-
onChange={(event) => {
92-
const labelValue = event.target.value;
93-
console.log(`New value for ZXE: ${labelValue}`);
94-
}}
95-
/>
96-
</td>
97-
</tr>
98-
</tbody>
99-
</table>
100-
</div>
101-
</div>
102-
)}
31+
<div className='flex flex-col h-full'>
32+
{focusTab &&
33+
(focusTab.type === OBJ_TYPES.flowtest ? (
34+
<>
35+
<TabPanelHeader />
36+
<Flow collectionId={focusTab.collectionId} />
37+
</>
38+
) : (
39+
<Env />
40+
))}
10341
</div>
10442
);
10543
};

‎src/service/collection.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { findItemInCollectionByPathname } from 'stores/utils';
44
import { useEventStore } from 'stores/EventListenerStore';
55
import { OBJ_TYPES } from 'constants/Common';
66
import { toast } from 'react-toastify';
7+
import { useTabStore } from 'stores/TabStore';
78

89
export const createCollection = (openAPISpecFilePath, collectionFolderPath) => {
910
const { ipcRenderer } = window;
@@ -120,7 +121,7 @@ export const createEnvironmentFile = (name, collectionId) => {
120121
id: uuidv4(),
121122
type: 'OPEN_NEW_ENVIRONMENT',
122123
collectionId,
123-
name,
124+
name: `${name}.env`,
124125
});
125126
});
126127
}
@@ -132,6 +133,26 @@ export const createEnvironmentFile = (name, collectionId) => {
132133
}
133134
};
134135

136+
export const readEnvironmentFile = (name, collectionId) => {
137+
try {
138+
const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
139+
140+
if (collection) {
141+
const existingEnv = collection.environments.find((e) => e.name === name);
142+
if (existingEnv) {
143+
useTabStore.getState().addEnvTab(existingEnv, collectionId);
144+
return;
145+
} else {
146+
throw new Error('An environment with the name does not exists');
147+
}
148+
} else {
149+
throw new Error('Collection not found');
150+
}
151+
} catch (error) {
152+
toast.error(`Error reading environment: ${name}`);
153+
}
154+
};
155+
135156
export const updateEnvironmentFile = (name, collectionId, variables) => {
136157
try {
137158
const { ipcRenderer } = window;

‎src/stores/TabStore.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export const useTabStore = create((set, get) => ({
6262
collectionId: collectionId,
6363
type: OBJ_TYPES.environment,
6464
name: env.name,
65+
variables: env.variables,
6566
};
6667

6768
set((state) => ({ tabs: [...state.tabs, newTab] }));

0 commit comments

Comments
 (0)