Skip to content

Commit 49723fc

Browse files
danialraza03danialraza03
authored
Merge pull request #100 from zenml-io/dev
UI fixes and filter fuctionality updates
2 parents 8fe91b0 + fe35dfd commit 49723fc

File tree

21 files changed

+663
-233
lines changed

21 files changed

+663
-233
lines changed

‎src/services/locales/zu.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@
306306
"text": "Stacks"
307307
},
308308
"stackComponents": {
309-
"text": "Stack Components"
309+
"text": "Components"
310310
},
311311
"setting": {
312312
"text": "Settings"

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

Lines changed: 113 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { useDispatch, useSelector } from '../../hooks';
2020
import {
2121
organizationSelectors,
2222
pipelineSelectors,
23+
projectSelectors,
2324
stackSelectors,
2425
} from '../../../redux/selectors';
2526
import {
@@ -50,7 +51,7 @@ export const getInitialFilterState = () => {
5051
},
5152
{
5253
value: 'user_id',
53-
label: 'Owner',
54+
label: 'Author',
5455
type: 'string',
5556
},
5657
{
@@ -74,12 +75,12 @@ export const getInitialFilterState = () => {
7475
type: 'string',
7576
},
7677
{
77-
value: 'start_with',
78+
value: 'startswith',
7879
label: 'Start With',
7980
type: 'string',
8081
},
8182
{
82-
value: 'end_with',
83+
value: 'endswith',
8384
label: 'End With',
8485
type: 'string',
8586
},
@@ -343,12 +344,12 @@ export const getInitialFilterStateForRuns = () => {
343344
type: 'string',
344345
},
345346
{
346-
value: 'start_with',
347+
value: 'startswith',
347348
label: 'Start With',
348349
type: 'string',
349350
},
350351
{
351-
value: 'end_with',
352+
value: 'endswith',
352353
label: 'End With',
353354
type: 'string',
354355
},
@@ -432,10 +433,11 @@ const FilterComponent = ({
432433
const dispatch = useDispatch();
433434
const [applyFilter, setApplyFilter] = useState(false);
434435
const [searchText, setSearchText] = useState(false);
435-
436+
const [showInBar, setShowInbar] = useState(false);
436437
const members = useSelector(organizationSelectors.myMembers);
437438
const pipelines = useSelector(pipelineSelectors.myPipelines);
438439
const stacks = useSelector(stackSelectors.mystacks);
440+
const selectedProject = useSelector(projectSelectors.selectedProject);
439441
console.log(members, 'members');
440442
function handleChange(filter: any, key: string, value: string) {
441443
filter[key].selectedValue = filter[key].options.filter(
@@ -497,16 +499,26 @@ const FilterComponent = ({
497499

498500
function callActionForPipelines(name: string) {
499501
if (name) {
500-
dispatch(pipelinesActions.getMy({ name: 'contains:' + name }));
502+
dispatch(
503+
pipelinesActions.getMy({
504+
project: selectedProject,
505+
name: 'contains:' + name,
506+
}),
507+
);
501508
} else {
502-
dispatch(pipelinesActions.getMy({}));
509+
dispatch(pipelinesActions.getMy({ project: selectedProject }));
503510
}
504511
}
505512
function callActionForStacks(name: string) {
506513
if (name) {
507-
stacksActions.getMy({ name: 'contains:' + name });
514+
dispatch(
515+
stacksActions.getMy({
516+
project: selectedProject,
517+
name: 'contains:' + name,
518+
}),
519+
);
508520
} else {
509-
stacksActions.getMy({});
521+
dispatch(stacksActions.getMy({ project: selectedProject }));
510522
}
511523
}
512524

@@ -535,10 +547,56 @@ const FilterComponent = ({
535547
height: '40px',
536548
fontSize: '12px',
537549
display: 'flex',
550+
fontFamily: 'Rubik',
551+
// color: 'red',
552+
538553
// ...base,
539554
}),
540555
};
541556

557+
function checkForName(typeName: string, value: string) {
558+
if (typeName === 'Author') {
559+
const member = members.filter((item) => item.id === value);
560+
561+
return member[0].name;
562+
}
563+
if (typeName === 'Pipeline Name') {
564+
const pipeline = pipelines.filter((item) => item.id === value);
565+
return pipeline[0].name;
566+
}
567+
if (typeName === 'Stack Name') {
568+
const stack = stacks.filter((item) => item.id === value);
569+
return stack[0].name;
570+
} else {
571+
return value;
572+
}
573+
// switch (typeName) {
574+
// case 'Author':
575+
// members.filter((item) => {
576+
// if (item.id === value) {
577+
// return item.name;
578+
// }
579+
// });
580+
// break;
581+
// case 'Pipeline Name':
582+
// pipelines.filter((item) => {
583+
// if (item.id === value) {
584+
// return item.name;
585+
// }
586+
// });
587+
// break;
588+
// case 'Stack Name':
589+
// stacks.filter((item) => {
590+
// if (item.id === value) {
591+
// return item.name;
592+
// }
593+
// });
594+
// break;
595+
596+
// default:
597+
// break;
598+
// }
599+
}
542600
const valueField = (filter: any) => {
543601
switch (filter?.contains.selectedValue.type) {
544602
case 'string':
@@ -650,19 +708,17 @@ const FilterComponent = ({
650708
return (
651709
<FlexBox.Column fullWidth>
652710
<div className={styles.inputRow}>
653-
{!window.location.href?.includes('components') && (
654-
<Box marginRight="md" marginTop="md">
655-
<SearchInputField
656-
placeholder={'Search'}
657-
value={searchText ? filters[0]?.filterValue : ''}
658-
disabled={applyFilter}
659-
onChange={(value: string) => {
660-
setSearchText(value ? true : false);
661-
handleValueFieldChangeOnSearch(value);
662-
}}
663-
/>
664-
</Box>
665-
)}
711+
<Box marginRight="md" marginTop="md">
712+
<SearchInputField
713+
placeholder={'Search'}
714+
value={searchText ? filters[0]?.filterValue : ''}
715+
disabled={applyFilter || showInBar}
716+
onChange={(value: string) => {
717+
setSearchText(value ? true : false);
718+
handleValueFieldChangeOnSearch(value);
719+
}}
720+
/>
721+
</Box>
666722

667723
<FlexBox
668724
fullWidth
@@ -701,18 +757,34 @@ const FilterComponent = ({
701757
<FlexBox.Row key={index} className={styles.tile}>
702758
<Box onClick={() => hanldeDelete(index)}>
703759
{`${filter.column.selectedValue.label} ${
704-
filter.column.selectedValue.label !== 'Shared' &&
705-
filter.column.selectedValue.label !== 'Status'
706-
? filter.contains.selectedValue.label
707-
: ''
760+
filter.column.selectedValue.label === 'Shared' ||
761+
filter.column.selectedValue.label === 'Status'
762+
? 'is'
763+
: filter.column.selectedValue.label ===
764+
'Pipeline Name' ||
765+
filter.column.selectedValue.label ===
766+
'Stack Name' ||
767+
filter.column.selectedValue.label === 'Author'
768+
? 'Equals'
769+
: filter.contains.selectedValue.label
708770
} ${
709771
typeof filter.filterValue === 'string'
710-
? filter.filterValue
772+
? checkForName(
773+
filter.column.selectedValue.label,
774+
filter.filterValue,
775+
)
711776
: formatDateToDisplay(filter.filterValue)
712777
}`}
713778
</Box>
714779

715-
<Box onClick={() => hanldeDelete(index)}>
780+
<Box
781+
onClick={() => {
782+
if (filters.length === 1) {
783+
setShowInbar(false);
784+
}
785+
hanldeDelete(index);
786+
}}
787+
>
716788
<icons.closeWithBorder
717789
style={{ paddingLeft: '7px' }}
718790
size={iconSizes.sm}
@@ -734,6 +806,7 @@ const FilterComponent = ({
734806
<Box
735807
onClick={() => {
736808
setFilter([getInitials()]);
809+
setShowInbar(false);
737810
}}
738811
>
739812
<icons.closeWithBorder
@@ -775,9 +848,10 @@ const FilterComponent = ({
775848
<Box style={{ width: '146px' }}>
776849
<FormDropdownField
777850
label={''}
778-
onChange={(value: string) =>
779-
handleChange(filter, 'column', value)
780-
}
851+
onChange={(value: string) => {
852+
setShowInbar(true);
853+
handleChange(filter, 'column', value);
854+
}}
781855
placeholder={'Column Name'}
782856
value={filter.column.selectedValue.value}
783857
options={filter.column.options}
@@ -787,6 +861,7 @@ const FilterComponent = ({
787861
width: '146px',
788862
fontSize: '12px',
789863
color: '#424240',
864+
fontFamily: 'Rubik',
790865
}}
791866
/>
792867
</Box>
@@ -803,6 +878,7 @@ const FilterComponent = ({
803878
width: '146px',
804879
fontSize: '12px',
805880
color: '#424240',
881+
fontFamily: 'Rubik',
806882
}}
807883
onChange={(value: string) =>
808884
// handleChange(filter, 'contains', value)
@@ -845,6 +921,7 @@ const FilterComponent = ({
845921
width: '146px',
846922
fontSize: '12px',
847923
color: '#424240',
924+
fontFamily: 'Rubik',
848925
}}
849926
onChange={
850927
(value: string) =>
@@ -934,6 +1011,7 @@ const FilterComponent = ({
9341011
width: '146px',
9351012
fontSize: '12px',
9361013
color: '#424240',
1014+
fontFamily: 'Rubik',
9371015
}}
9381016
/>
9391017
{valueField(filter)}
@@ -942,7 +1020,9 @@ const FilterComponent = ({
9421020
)}
9431021

9441022
<Box
945-
onClick={() => hanldeDelete(index)}
1023+
onClick={() => {
1024+
hanldeDelete(index);
1025+
}}
9461026
className={styles.removeIcon}
9471027
>
9481028
<icons.delete

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

Lines changed: 3 additions & 2 deletions
Loading

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

Lines changed: 2 additions & 3 deletions
Loading

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { ReactComponent as Docs } from './assets/Docs.svg';
3535
import { ReactComponent as Example } from './assets/Example.svg';
3636
import { ReactComponent as Pipeline } from './assets/Pipeline.svg';
3737
import { ReactComponent as Stack } from './assets/Stack.svg';
38-
// import { ReactComponent as StackComponent } from './assets/StackComponent.svg';
38+
import { ReactComponent as StackComponent } from './assets/StackComponent.svg';
3939
import { ReactComponent as FunnelFill } from './assets/FunnelFill.svg';
4040
import { ReactComponent as Delete } from './assets/Delete.svg';
4141
import { ReactComponent as SimplePlus } from './assets/SimplePlus.svg';
@@ -46,7 +46,7 @@ import { ReactComponent as Edit } from './assets/Edit.svg';
4646
import { ReactComponent as Search } from './assets/Search.svg';
4747

4848
//icons for stackComponents
49-
import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
49+
// import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
5050
import { ReactComponent as Folders } from './assets/Folders.svg';
5151
import { ReactComponent as BoundingBox } from './assets/BoundingBox.svg';
5252
import { ReactComponent as CloudArrowUp } from './assets/CloudArrowUp.svg';
@@ -165,7 +165,7 @@ const icons = {
165165
example: createIcon({ Component: Example, useStroke: true }),
166166
pipeline: createIcon({ Component: Pipeline, useStroke: true }),
167167
stack: createIcon({ Component: Stack, useStroke: true }),
168-
stackComponent: createIcon({ Component: PuzzlePiece, useStroke: true }),
168+
stackComponent: createIcon({ Component: StackComponent, useStroke: true }),
169169
funnelFill: createIcon({ Component: FunnelFill }),
170170
delete: createIcon({ Component: Delete }),
171171
edit: createIcon({ Component: Edit }),

‎src/ui/layouts/DashBoard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@ import {
4141
import {
4242
showToasterAction,
4343
projectsActions,
44-
pipelinesActions,
44+
// pipelinesActions,
4545
pipelinePagesActions,
4646
runPagesActions,
4747
organizationActions,
4848
} from '../../redux/actions';
4949
import { NotFound } from './NotFound';
5050

51-
import Tour from './Tour';
51+
// import Tour from './Tour';
5252
import { rolesActions } from '../../redux/actions/roles';
5353

5454
export const translate = getTranslateByScope('ui.layouts.Dashboard');
@@ -224,7 +224,7 @@ export const DashBoard: React.FC = () => {
224224
return (
225225
<AuthenticatedLayout>
226226
<SidebarContainer>
227-
<Tour />
227+
{/* <Tour /> */}
228228
<EaseInBox>
229229
<Box marginTop="5xl" marginLeft="xl">
230230
<Row style={{ alignItems: 'center' }}>

‎src/ui/layouts/common/Pagination/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
131131
dispatchStackRunsData(id, page, size, filters as any, activeSorting);
132132
break;
133133
} else {
134-
dispatchStackData(1, 5, filters as any, activeSorting);
134+
dispatchStackData(1, size, filters as any, activeSorting);
135135
break;
136136
}
137137
case 'components':
@@ -145,7 +145,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
145145
);
146146
break;
147147
} else {
148-
dispatchStackComponentsData(1, 5, filters as any, activeSorting);
148+
dispatchStackComponentsData(1, size, filters as any, activeSorting);
149149
break;
150150
}
151151
case 'pipelines':

0 commit comments

Comments
 (0)