Skip to content

Commit 8321498

Browse files
AhsanKhan7AhsanKhan7
committed
stack components sidebar update
1 parent 2aa9b6a commit 8321498

File tree

9 files changed

+269
-100
lines changed

9 files changed

+269
-100
lines changed

‎src/ui/components/buttons/index.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
&:hover {
28-
background: #E8A562;
28+
background: #A8A8A8;
2929
}
3030
}
3131

‎src/ui/components/forms/index.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,43 @@ export const CopyField = (
166166
);
167167
};
168168

169+
export const SearchInputField = (
170+
props: {
171+
label?: string;
172+
labelColor?: any;
173+
placeholder: any;
174+
onChange?: any;
175+
value: string;
176+
} & any,
177+
): JSX.Element => {
178+
return (
179+
<FlexBox.Column fullWidth style={{ height: '100px' }}>
180+
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
181+
182+
<LinkBox style={{ position: 'absolute', left: '7px', top: '30px' }} onClick={() => {}}>
183+
<icons.search color={iconColors.grey} />
184+
</LinkBox>
185+
186+
<InputWithLabel
187+
name={props.name}
188+
label={props.label}
189+
labelColor={props.labelColor}
190+
InputComponent={
191+
<TextInput
192+
{...props}
193+
style={{ paddingLeft: '40px' }}
194+
value={props.value}
195+
onChangeText={props.onChange}
196+
placeholder={props.placeholder}
197+
/>
198+
}
199+
/>
200+
201+
</FlexBox>
202+
</FlexBox.Column>
203+
);
204+
};
205+
169206
export const FormPasswordField = (
170207
props: {
171208
label: string;

‎src/ui/components/icons/assets/Search.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/ui/components/icons/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { ReactComponent as Inprogress } from './assets/InProgress.svg';
4343
import { ReactComponent as Cached } from './assets/Cached.svg';
4444
import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
4545
import { ReactComponent as Edit } from './assets/Edit.svg';
46+
import { ReactComponent as Search } from './assets/Search.svg';
4647

4748
//icons for stackComponents
4849
import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
@@ -161,6 +162,7 @@ const icons = {
161162
funnelFill: createIcon({ Component: FunnelFill }),
162163
delete: createIcon({ Component: Delete }),
163164
edit: createIcon({ Component: Edit }),
165+
search: createIcon({ Component: Search }),
164166

165167
//icons for stackComponents
166168
artifact_store: createIcon({ Component: Folders, useStroke: true }),

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,25 +135,24 @@ export const AuthenticatedHeader: React.FC<{
135135
dispatch(stackPagesActions.setFetching({ fetching: false }));
136136
};
137137

138-
const onChange = (e: any) => {
139-
e.preventDefault();
138+
const onChange = async (e: any) => {
140139
startLoad();
141140

142-
history.push(routePaths.dashboard(e?.name));
143-
dispatch(
141+
await history.push(routePaths.dashboard(e?.name));
142+
await dispatch(
144143
projectsActions.getSelectedProject({
145144
allProjects: projects,
146145
seletecdProject: e?.name,
147146
}),
148147
);
149-
dispatch(
148+
await dispatch(
150149
pipelinesActions.getMy({
151150
project: e?.name,
152151
onSuccess: () => stopLoad(),
153152
onFailure: () => stopLoad(),
154153
}),
155154
);
156-
dispatch(projectsActions.getMy({ selectDefault: false, selectedProject }))
155+
await dispatch(projectsActions.getMy({ selectDefault: false, selectedProject }))
157156
};
158157

159158
return (
@@ -236,7 +235,7 @@ export const AuthenticatedHeader: React.FC<{
236235
<Box marginTop='md'>
237236
<Paragraph color='grey'>Select Project</Paragraph>
238237
{projects.slice(0, 10).map((option, index) => (
239-
<Box marginTop='sm' onClick={(option) => onChange(option) } key={index} >
238+
<Box marginTop='sm' onClick={() => onChange(option) } key={index} >
240239
<Paragraph style={{ fontSize: '16px', color: '#424240', cursor: 'pointer' }} >{option.name.substring(0, 10)}</Paragraph>
241240
</Box>
242241
))}

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx‎

Lines changed: 87 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import {
88
DEFAULT_PROJECT_NAME,
99
} from '../../../../../../../constants';
1010
import { translate } from '../translate';
11-
import { useLocationPath } from '../../../../../../hooks';
12-
// import { matchPath } from 'react-router-dom';
1311
import { useSelector } from './../../../../../../../ui/hooks';
1412
import {
1513
projectSelectors,
@@ -18,8 +16,7 @@ import {
1816
// import { matchPath } from 'react-router-dom';
1917

2018
export const Menu: React.FC = () => {
21-
const locationPath = useLocationPath();
22-
19+
2320
const stackComponentsTypes: any[] = useSelector(
2421
stackComponentSelectors.stackComponentTypes,
2522
);
@@ -94,92 +91,92 @@ export const Menu: React.FC = () => {
9491
)}
9592
text={translate('menu.stackComponents.text')}
9693
/>
97-
{console.log(stackComponentsTypes, 'test')}
98-
99-
{locationPath.includes('components') &&
100-
stackComponentsTypes?.map((item: any) => (
101-
<MenuItem
102-
// isActive={() => {
103-
// return !!matchPath(locationPath, {
104-
// path: routePaths.stackComponents.base(item, selectedProject),
105-
// exact: false,
106-
// });
107-
// }}
108-
109-
isActive={() => window.location.href?.includes(item)}
110-
subItem={true}
111-
Icon={() => (
112-
<>
113-
{item === 'artifact_store' && (
114-
<icons.artifact_store
115-
color={iconColors.white}
116-
size={iconSizes.md}
117-
/>
118-
)}
119-
{item === 'alerter' && (
120-
<icons.alerter color={iconColors.white} size={iconSizes.md} />
121-
)}
122-
{item === 'annotator' && (
123-
<icons.annotator
124-
color={iconColors.white}
125-
size={iconSizes.md}
126-
/>
127-
)}
128-
{item === 'container_registry' && (
129-
<icons.container_registry
130-
color={iconColors.white}
131-
size={iconSizes.md}
132-
/>
133-
)}
134-
{item === 'experiment_tracker' && (
135-
<icons.experiment_tracker
136-
color={iconColors.white}
137-
size={iconSizes.md}
138-
/>
139-
)}
140-
141-
{item === 'feature_store' && (
142-
<icons.feature_store
143-
color={iconColors.white}
144-
size={iconSizes.md}
145-
/>
146-
)}
147-
{item === 'model_deployer' && (
148-
<icons.model_deployer
149-
color={iconColors.white}
150-
size={iconSizes.md}
151-
/>
152-
)}
153-
{item === 'secrets_manager' && (
154-
<icons.secrets_manager
155-
color={iconColors.white}
156-
size={iconSizes.md}
157-
/>
158-
)}
159-
{item === 'orchestrator' && (
160-
<icons.orchestrator
161-
color={iconColors.white}
162-
size={iconSizes.md}
163-
/>
164-
)}
165-
{item === 'step_operator' && (
166-
<icons.step_operator
167-
color={iconColors.white}
168-
size={iconSizes.md}
169-
/>
170-
)}
171-
{item === 'data_validator' && (
172-
<icons.data_validator
173-
color={iconColors.white}
174-
size={iconSizes.md}
175-
/>
176-
)}
177-
</>
178-
)}
179-
to={routePaths.stackComponents.base(item, selectedProject)}
180-
text={item}
181-
/>
182-
))}
18394
</>
18495
);
18596
};
97+
98+
99+
// {locationPath.includes('components') &&
100+
// stackComponentsTypes?.map((item: any) => (
101+
// <MenuItem
102+
// // isActive={() => {
103+
// // return !!matchPath(locationPath, {
104+
// // path: routePaths.stackComponents.base(item, selectedProject),
105+
// // exact: false,
106+
// // });
107+
// // }}
108+
109+
// isActive={() => window.location.href?.includes(item)}
110+
// subItem={true}
111+
// Icon={() => (
112+
// <>
113+
// {item === 'artifact_store' && (
114+
// <icons.artifact_store
115+
// color={iconColors.white}
116+
// size={iconSizes.md}
117+
// />
118+
// )}
119+
// {item === 'alerter' && (
120+
// <icons.alerter color={iconColors.white} size={iconSizes.md} />
121+
// )}
122+
// {item === 'annotator' && (
123+
// <icons.annotator
124+
// color={iconColors.white}
125+
// size={iconSizes.md}
126+
// />
127+
// )}
128+
// {item === 'container_registry' && (
129+
// <icons.container_registry
130+
// color={iconColors.white}
131+
// size={iconSizes.md}
132+
// />
133+
// )}
134+
// {item === 'experiment_tracker' && (
135+
// <icons.experiment_tracker
136+
// color={iconColors.white}
137+
// size={iconSizes.md}
138+
// />
139+
// )}
140+
141+
// {item === 'feature_store' && (
142+
// <icons.feature_store
143+
// color={iconColors.white}
144+
// size={iconSizes.md}
145+
// />
146+
// )}
147+
// {item === 'model_deployer' && (
148+
// <icons.model_deployer
149+
// color={iconColors.white}
150+
// size={iconSizes.md}
151+
// />
152+
// )}
153+
// {item === 'secrets_manager' && (
154+
// <icons.secrets_manager
155+
// color={iconColors.white}
156+
// size={iconSizes.md}
157+
// />
158+
// )}
159+
// {item === 'orchestrator' && (
160+
// <icons.orchestrator
161+
// color={iconColors.white}
162+
// size={iconSizes.md}
163+
// />
164+
// )}
165+
// {item === 'step_operator' && (
166+
// <icons.step_operator
167+
// color={iconColors.white}
168+
// size={iconSizes.md}
169+
// />
170+
// )}
171+
// {item === 'data_validator' && (
172+
// <icons.data_validator
173+
// color={iconColors.white}
174+
// size={iconSizes.md}
175+
// />
176+
// )}
177+
// </>
178+
// )}
179+
// to={routePaths.stackComponents.base(item, selectedProject)}
180+
// text={item}
181+
// />
182+
// ))}

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ $bgColor: rgba(201, 203, 208, 0.2);
1919
}
2020

2121
.sidebar {
22-
width: 70vw;
22+
// width: 70vw;
2323
height: 100vh;
2424
position: fixed;
2525
z-index: 9999;

‎src/ui/layouts/stackComponents/BasePage.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { SidebarContainer } from '../common/layouts/SidebarContainer';
77
import { Tabs } from '../common/Tabs';
88
import Header from './Header';
99
import Stacks from './Stacks';
10+
import Component from './Component';
1011

1112
export const BasePage: React.FC<{
1213
tabPages: TabPage[];
@@ -22,9 +23,12 @@ export const BasePage: React.FC<{
2223
headerWithButtons,
2324
children,
2425
}) => {
26+
2527
return (
2628
<AuthenticatedLayout>
27-
<SidebarContainer>
29+
<Component />
30+
31+
<SidebarContainer>
2832
<IfElse
2933
condition={!!headerWithButtons}
3034
renderWhenTrue={() => (

0 commit comments

Comments
 (0)