feat(export): MIN-153 select type
Short description:
Added select type in export drawer
Approach:
Select type was created along with fetching and mapping data from the backend. Added the ability to disable the search option in the checkbox filter
Merge request reports
Activity
assigned to @mateusz-winiarczyk
56 57 useEffect(() => { 58 setFilteredOptions(options); 59 }, [options]); 60 61 return ( 62 <div className="relative"> 63 {isSearchEnabled && ( 64 <div className="relative" data-testid="search"> 65 <input 66 name="search-input" 67 aria-label="search-input" 68 value={searchTerm} 69 onChange={handleSearchTermChange} 70 onKeyDown={handleKeyPress} 71 placeholder="Search.." I took the placeholder from the design, that's why there are 2 dots. In that case, I will correct it to 3 dots Link
changed this line in version 2 of the diff
13 render( 14 <Wrapper> 15 <Annotations /> 16 </Wrapper>, 17 ), 18 { 19 store, 20 } 21 ); 22 }; 23 24 describe('Annotations Component', () => { 25 test('renders without crashing', () => { 26 renderComponent(); 27 expect(screen.getByText('Select annotations')).toBeInTheDocument(); 28 }); 6 AccordionItemButton, 7 AccordionItemHeading, 8 AccordionItemPanel, 9 } from '@/shared/Accordion'; 10 import { getElementTypes } from './Types.utils'; 11 import { CheckboxFilter } from '../../CheckboxFilter'; 12 13 export const Types = (): React.ReactNode => { 14 const elementTypes = useAppSelector(elementTypesSelector); 15 const mappedElementTypes = getElementTypes(elementTypes); 16 17 return ( 18 <Accordion allowZeroExpanded> 19 <AccordionItem> 20 <AccordionItemHeading> 21 <AccordionItemButton>Select types</AccordionItemButton> changed this line in version 2 of the diff
I think it's good idea. Done
1 import { elementTypesSelector } from '@/redux/configuration/configuration.selectors'; 2 import { useAppSelector } from '@/redux/hooks/useAppSelector'; 3 import { 4 Accordion, 5 AccordionItem, 6 AccordionItemButton, 7 AccordionItemHeading, 8 AccordionItemPanel, 9 } from '@/shared/Accordion'; 10 import { getElementTypes } from './Types.utils'; 11 import { CheckboxFilter } from '../../CheckboxFilter'; 12 13 export const Types = (): React.ReactNode => { 14 const elementTypes = useAppSelector(elementTypesSelector); 15 const mappedElementTypes = getElementTypes(elementTypes); changed this line in version 2 of the diff
4 name: string; 5 parentClass: string; 6 }[] 7 | undefined; 8 9 type MappedElementTypes = { id: string; label: string }[]; 10 11 export const getElementTypes = (elementTypes: ElementTypes): MappedElementTypes => { 12 if (!elementTypes) return []; 13 14 const excludedTypes: { [key: string]: boolean } = {}; 15 elementTypes?.forEach(type => { 16 excludedTypes[type.parentClass] = true; 17 }); 18 19 const processedNames: { [key: string]: boolean } = {}; changed this line in version 2 of the diff
1 type ElementTypes = 2 | { 3 className: string; 4 name: string; 5 parentClass: string; 6 }[] 7 | undefined; 8 9 type MappedElementTypes = { id: string; label: string }[]; 10 11 export const getElementTypes = (elementTypes: ElementTypes): MappedElementTypes => { -
IMO a lot happens here even if it's probably not needed.
If I understand correctly, this util should get unique names from
elementTypesand then map them to id/label object.Why not just use
Setandmap?const getElementTypes = (elementTypes: ElementTypes): MappedElementTypes => { const elementTypesNames = elementTypes.map(e => e.name); const elementTypesNamesUnique = [...new Set(elementTypesNames)]; return elementTypesNamesUnique.map(name => ({ id: name, label: name })) } changed this line in version 2 of the diff
We need to collect all
parentClassvalues that appear in this array. We need them because the elements have aclassNameproperty, which cannot be one of the collected parentClasses, and we need to store only the first occurrence of the element with thenameproperty (reason - the name value may be repeated). Your solution does not work correctly from what I checked :/ But I managed to reduce one loop.
1 import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; 2 import { displayTabExportDrawer } from '@/redux/drawer/drawer.slice'; 3 import { stepTypeExportDrawerStateSelector } from '@/redux/drawer/drawer.selectors'; 4 import { useAppSelector } from '@/redux/hooks/useAppSelector'; 5 import { TabButton } from '../TabButton'; 6 import { TAB_NAMES } from './TabNavigator.constants'; 7 import { TabNames } from './TabNavigator.types'; 8 9 export const TabNavigator = (): React.ReactNode => { changed this line in version 2 of the diff
1 import { stepTypeExportDrawerStateSelector } from '@/redux/drawer/drawer.selectors'; 2 import { useAppSelector } from '@/redux/hooks/useAppSelector'; 3 import { DrawerHeading } from '@/shared/DrawerHeading'; 4 import { TabNavigator } from './TabNavigator'; 5 import { Elements } from './Elements'; 6 7 export const ExportDrawer = (): React.ReactNode => { - src/models/configurationSchema.ts 0 → 100644
1 import { z } from 'zod'; 2 3 export const configurationSchema = z.object({ 4 elementTypes: z.array( changed this line in version 2 of the diff
added 8 commits
- 248d4bf2 - test(export): add additional tests for checkboxfilter and annotations
- ef3ca496 - refactor(export): move export tabs state to local state
- 26d66b48 - test(export): add tests for export drawer
- 75bc0e17 - Merge remote-tracking branch 'origin/MIN-162-select-annotation' into MIN-153-select-type
- bc1a51ab - refactor(export): change names of utils and extract common types
- 63817472 - refactor(export): extract configuration zod schema elements to separate zod definitions
- 8c10aa32 - refactor(export): refactor getCheckboxElements
- 41d4f97c - refactor(export): extract accordion to reusable component
Toggle commit listadded 3 commits
-
be159d91...5a7c99ce - 2 commits from branch
development - 22af6cea - Merge remote-tracking branch 'origin/development' into MIN-153-select-type
-
be159d91...5a7c99ce - 2 commits from branch
mentioned in commit 60c77c63
