Skip to content

Commit e1aeaae

Browse files
jsajaljsajal
authored
Merge pull request #68 from FlowTestAI/ui-improvements-2
Adding UI improvements for new select elements in tabs panel
2 parents b054b29 + 5b2ad00 commit e1aeaae

File tree

6 files changed

+94
-112
lines changed

6 files changed

+94
-112
lines changed

‎src/components/atoms/Logo.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
2-
import FlowTestAI from 'assets/icons/FlowTestAI-black.png';
2+
import FlowTriangle from 'assets/icons/flow-triangle.png';
3+
// import FlowTestAI from 'assets/icons/FlowTestAI-black.png';
4+
// import FlowGPU from 'assets/icons/flow-GPU.png';
5+
// import FlowTriangle from 'assets/icons/flow-triangle.png';
36

47
const AppLogo = ({ styleClasses }) => {
58
return (
69
<div className={styleClasses}>
7-
<img src={FlowTestAI} alt='FlowTestAI app logo' />
10+
<img src={FlowTriangle} alt='FlowTestAI app logo' />
811
</div>
912
);
1013
};

‎src/components/atoms/common/HomeLoadingScreen.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
2+
// import PropTypes from 'prop-types';
33
import FlowGPU from 'assets/icons/Flow-GPU-text-no-background-white.png';
44

5-
const HomeLoadingScreen = (props) => {
5+
const HomeLoadingScreen = () => {
66
return (
77
<div className='absolute z-50 flex flex-col items-center justify-center w-full h-full p-4 bg-slate-500/50'>
88
<div className='h-72 w-72'>
99
<img src={FlowGPU} alt='FlowTestAI app logo' />
1010
</div>
11-
<span className='mt-8 text-white loading loading-spinner loading-lg'></span>
11+
<span className='mt-8 text-w hite loading loading-spinner loading-lg'></span>
1212
</div>
1313
);
1414
};
1515

16-
HomeLoadingScreen.propTypes = {};
16+
// HomeLoadingScreen.propTypes = {};
1717

1818
export default HomeLoadingScreen;

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React from 'react';
22
import ThemeController from 'components/atoms/ThemeController';
33
import AppLogo from 'components/atoms/Logo';
4-
import FlowGPU from 'assets/icons/flow-GPU.png';
5-
import FlowTriangle from 'assets/icons/flow-triangle.png';
64

75
const MainHeader = () => {
86
return (
97
<header className='flex items-center justify-between px-4 py-2 font-semibold tracking-widest border-b border-neutral-300'>
10-
<div className='flex items-center gap-4'>
8+
<div className='flex items-center gap-2'>
119
<AppLogo styleClasses='w-6 h-6' />
12-
<div className='w-6 h-6'>
13-
<img src={FlowGPU} alt='FlowTestAI app logo' />
14-
</div>
15-
<div className='w-6 h-6'>
16-
<img src={FlowTriangle} alt='FlowTestAI app logo' />
17-
</div>
1810
<h2>FlowTestAI</h2>
1911
</div>
2012
<ThemeController />

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

Lines changed: 78 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -47,92 +47,87 @@ const TabPanelHeader = () => {
4747
{focusTab ? (
4848
<>
4949
<div className='text-base tracking-[0.15em]'>{focusTab.name}</div>
50-
<div className='flex items-center justify-between border-l gap-x-4 border-neutral-300'>
51-
<div className='flex items-center justify-between pl-4 gap-x-4'>
52-
<div className='pl-4 border-l border-neutral-300'>
53-
<select
54-
onChange={(e) => setPreFlow(e.target.value)}
55-
name='pre-flow'
56-
value={preFlow}
57-
className='nodrag h-12 w-full max-w-[30%] rounded-br-md rounded-tr-md border-l border-l-neutral-500 p-0 px-1'
58-
>
59-
<option key='None' value=''>
60-
None
50+
<div className='flex items-center justify-between gap-4 border-l border-neutral-300'>
51+
<div className='flex items-center justify-between gap-4 px-4 border-r border-neutral-300'>
52+
<select
53+
onChange={(e) => setPreFlow(e.target.value)}
54+
name='pre-flow'
55+
value={preFlow}
56+
className='h-12 outline-none max-w-32'
57+
>
58+
<option key='None' value=''>
59+
None
60+
</option>
61+
{flowTests.map((ft) => (
62+
<option key={ft} value={ft}>
63+
{ft}
6164
</option>
62-
{flowTests.map((ft) => (
63-
<option key={ft} value={ft}>
64-
{ft}
65-
</option>
66-
))}
67-
</select>
68-
<select
69-
onChange={(e) => setPostFlow(e.target.value)}
70-
name='post-flow'
71-
value={postFlow}
72-
className='nodrag h-12 w-full max-w-[30%] rounded-br-md rounded-tr-md border-l border-l-neutral-500 p-0 px-1'
73-
>
74-
<option key='None' value=''>
75-
None
65+
))}
66+
</select>
67+
<select
68+
onChange={(e) => setPostFlow(e.target.value)}
69+
name='post-flow'
70+
value={postFlow}
71+
className='h-12 pl-4 border-l outline-none max-w-32 border-neutral-300'
72+
>
73+
<option key='None' value=''>
74+
None
75+
</option>
76+
{flowTests.map((ft) => (
77+
<option key={ft} value={ft}>
78+
{ft}
7679
</option>
77-
{flowTests.map((ft) => (
78-
<option key={ft} value={ft}>
79-
{ft}
80-
</option>
81-
))}
82-
</select>
83-
</div>
84-
<SaveFlowModal tab={focusTab} />
85-
{focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
86-
<>
87-
<div
88-
id='graph-logs-side-sheet'
89-
onClick={() =>
90-
setSlidingPaneState({
91-
isPaneOpen: true,
92-
isPaneOpenLeft: false,
93-
})
94-
}
95-
>
96-
<Tippy content='Logs' placement='top'>
97-
<label htmlFor='graph-logs-side-sheet'>
98-
<DocumentTextIcon className='w-5 h-5' />
99-
</label>
100-
</Tippy>
101-
</div>
102-
<SlidingPane
103-
className='side-sheet'
104-
overlayClassName='side-sheet-overlay'
105-
isOpen={slidingPaneState.isPaneOpen}
106-
title={focusTab.name}
107-
width='45%'
108-
onRequestClose={() => {
109-
// triggered on "<" on left top click or on outside click
110-
setSlidingPaneState({
111-
isPaneOpen: false,
112-
isPaneOpenLeft: false,
113-
title: 'closed',
114-
subtitle: 'closed',
115-
});
116-
}}
117-
>
118-
<label
119-
htmlFor='graph-logs-side-sheet'
120-
aria-label='close sidebar'
121-
className='drawer-overlay'
122-
></label>
123-
<ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
124-
{graphRunLogs.map((item, index) => (
125-
<li key={index}>
126-
<a>{item}</a>
127-
</li>
128-
))}
129-
</ul>
130-
</SlidingPane>
131-
</>
132-
) : (
133-
<></>
134-
)}
80+
))}
81+
</select>
13582
</div>
83+
<SaveFlowModal tab={focusTab} />
84+
{focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
85+
<>
86+
<div
87+
id='graph-logs-side-sheet'
88+
className='flex items-center justify-between h-12 pl-4 border-l outline-none max-w-32 border-neutral-300'
89+
onClick={() =>
90+
setSlidingPaneState({
91+
isPaneOpen: true,
92+
isPaneOpenLeft: false,
93+
})
94+
}
95+
>
96+
<Tippy content='Logs' placement='top'>
97+
<label htmlFor='graph-logs-side-sheet'>
98+
<DocumentTextIcon className='w-5 h-5' />
99+
</label>
100+
</Tippy>
101+
</div>
102+
<SlidingPane
103+
className='side-sheet'
104+
overlayClassName='side-sheet-overlay'
105+
isOpen={slidingPaneState.isPaneOpen}
106+
title={focusTab.name}
107+
width='45%'
108+
onRequestClose={() => {
109+
// triggered on "<" on left top click or on outside click
110+
setSlidingPaneState({
111+
isPaneOpen: false,
112+
isPaneOpenLeft: false,
113+
title: 'closed',
114+
subtitle: 'closed',
115+
});
116+
}}
117+
>
118+
<label htmlFor='graph-logs-side-sheet' aria-label='close sidebar' className='drawer-overlay'></label>
119+
<ul className='min-h-full p-4 menu w-80 bg-base-200 text-base-content'>
120+
{graphRunLogs.map((item, index) => (
121+
<li key={index}>
122+
<a>{item}</a>
123+
</li>
124+
))}
125+
</ul>
126+
</SlidingPane>
127+
</>
128+
) : (
129+
<></>
130+
)}
136131
{focusTab.type === OBJ_TYPES.flowtest && (
137132
<div className='pl-4 border-l gen_ai_button border-neutral-300'>
138133
<Button

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SaveFlowModal = ({ tab }) => {
4747
}
4848

4949
return (
50-
<div>
50+
<>
5151
<div className='flex items-center justify-center'>
5252
<button type='button' onClick={saveHandle}>
5353
<Tippy content='Save' placement='top'>
@@ -116,7 +116,7 @@ const SaveFlowModal = ({ tab }) => {
116116
</div>
117117
</Dialog>
118118
</Transition>
119-
</div>
119+
</>
120120
);
121121
};
122122

‎src/components/pages/Home.js‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,17 @@ import { ToastContainer, toast } from 'react-toastify';
77
import 'react-toastify/dist/ReactToastify.css';
88
import useCommonStore from 'stores/CommonStore';
99
import LoadingSpinner from 'components/atoms/common/LoadingSpinner';
10-
import HomeLoadingScreen from 'components/atoms/common/HomeLoadingScreen';
1110

1211
const Home = () => {
1312
const showLoader = useCommonStore((state) => state.showLoader);
1413
registerMainEventHandlers();
15-
const [showHomeLoadingScreen, setShowHomeLoadingScreen] = useState(true);
1614
return (
1715
<div className='relative flex flex-col h-full'>
18-
<>
19-
<MainHeader />
20-
<SplitPane />
21-
<MainFooter />
22-
<ToastContainer position='bottom-left' />
23-
</>
16+
<MainHeader />
17+
<SplitPane />
18+
<MainFooter />
19+
<ToastContainer position='bottom-left' />
2420
{showLoader ? <LoadingSpinner spinnerColor={'text-cyan-950'} /> : ''}
25-
{setTimeout(() => {
26-
setShowHomeLoadingScreen(false);
27-
}, 2000)}
28-
{showHomeLoadingScreen ? <HomeLoadingScreen /> : ''}
2921
</div>
3022
);
3123
};

0 commit comments

Comments
 (0)