Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TD-3368 - Enhanced Vehicle Selector #1039

Open
wants to merge 8 commits into
base: release/v11.2.0
Choose a base branch
from

Conversation

stevenmcsorleyipg
Copy link
Contributor

@stevenmcsorleyipg stevenmcsorleyipg commented Feb 5, 2025

Closes/Contributes TD-3368

Changes

  • auto selection extending in component
    Added auto selection by extending the current functionality without breaking or modifying the current code, all tests and
    storybook passed and worked after the auto selection logic was added, more data has been added to the storybook file to
    demonstrate the levels of auto selection versus manual selection where it arises.
  • isolated repeat code abstraction and tests
    Over abstraction is easy, so in this we have abstracted logic that makes sense to abstract with purpose and is repeated and
    makes sense to turn into easy to read
    functions with intention names ie: shouldAutoSelect, createVehicleRecord and filterVehicles
    These are specific to VehicleSelector so are not globally used functions, they just make the VehicleSelector component easier
    to read, easier to test and help document the logic in the component.
  • Updated tests to test auto selection

Dependencies

N/A

UI/UX

tagging Ux @Sowbhagya-ipg

td-3368.mp4

Testing notes

Test in story book

Author checklist

Before I request a review:

  • I have reviewed my own code-diff.
    - [ ] I have tested the changes in Docker / a deploy-preview.
  • I have assigned the PR to myself or an appropriate delegate.
  • I have added the relevant labels to the PR.
  • I have included appropriate tests.
  • I have checked that the Lint and Test workflows pass on Github.
    - [ ] I have populated the deploy-preview with relevant test data.
  • I have tagged a UI/UX designer for review if this PR includes UI/UX changes.

- auto selection extending in component
- isolated repeat code abstraction and tests
- Updated tests to test auto selection
@stevenmcsorleyipg stevenmcsorleyipg self-assigned this Feb 5, 2025
Copy link

github-actions bot commented Feb 5, 2025

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 71.03% (🎯 66%) 10687 / 15044
🟢 Statements 71.03% (🎯 66%) 10687 / 15044
🟢 Functions 71.78% (🎯 70%) 430 / 599
🟢 Branches 86.19% (🎯 80%) 1080 / 1253
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/TransferList/TransferList.tsx 100% 100% 100% 100%
src/VehicleSelector/VehicleSelector.tsx 81.12% 89.33% 80% 81.12% 35-36, 50-51, 276-283, 298-309, 358-401
src/VehicleSelector/VehicleSelector.utils.ts 100% 100% 100% 100%
Unchanged Files
src/ActionDialog/ActionDialog.tsx 98.33% 50% 100% 98.33% 63
src/AlignHorizontal/AlignHorizontal.tsx 100% 100% 100% 100%
src/AlignVertical/AlignVertical.tsx 100% 100% 100% 100%
src/AppHeader/AppHeader.tsx 100% 83.33% 100% 100%
src/AppLauncher/AppLauncher.tsx 98.84% 90.9% 83.33% 98.84% 79-80
src/AppLayout/AppLayout.tsx 100% 66.66% 87.5% 100%
src/Autocomplete/Autocomplete.tsx 94.9% 82.92% 100% 94.9% 75-77, 79, 123, 180-185
src/Breadcrumbs/Breadcrumbs.tsx 98% 66.66% 100% 98% 31
src/BulletGauge/BulletGauge.tsx 0% 0% 0% 0% 1-84
src/BulletGauge/BulletGaugeClientOnly.tsx 0% 0% 0% 0% 1-19
src/Canvas/Canvas.jsx 93% 33.33% 0% 93% 49-51, 59-62
src/Canvas/Grid.jsx 100% 100% 100% 100%
src/Canvas/ResizeHandle.jsx 100% 100% 100% 100%
src/Canvas/SelectionRectangle.jsx 31.03% 100% 0% 31.03% 10-30
src/Canvas/useResize.jsx 37.14% 100% 25% 37.14% 18-26, 30-33, 37-45
src/Canvas/useSelectionRectangle.jsx 30.15% 50% 25% 30.15% 36-103
src/CanvasItem/CanvasItem.jsx 44.11% 100% 25% 44.11% 35-58, 71-104, 112-120
src/CanvasItem/Rect.jsx 38.12% 25% 40% 38.12% 37-102, 112-176, 184-232, 260-269
src/CanvasItem/ResizeHandle.jsx 10.97% 100% 0% 10.97% 10-89
src/CanvasItem/RotateHandle.jsx 12.76% 100% 0% 12.76% 9-51
src/CanvasItem/utils.jsx 21.03% 100% 9.09% 21.03% 16-20, 48-59, 69-80, 94-269, 318-322, 330-341
src/Card/DetailCard/DetailCard.tsx 0% 0% 0% 0% 1-182
src/Card/SummaryCard/SummaryCard.tsx 0% 0% 0% 0% 1-168
src/Card/TableCard/TableCard.tsx 0% 0% 0% 0% 1-75
src/CardContent/FileDetails/FileDetails.tsx 98.27% 100% 80% 98.27% 43-45
src/CardContent/Infographic/Infographic.tsx 0% 0% 0% 0% 1-125
src/Checkbox/Checkbox.jsx 100% 100% 50% 100%
src/ClientOnly/ClientOnly.tsx 0% 0% 0% 0% 1-17
src/Color/Color.jsx 97.75% 96.87% 90.9% 97.75% 68-69, 82-84
src/ConditionalDialog/ConditionalDialog.tsx 0% 0% 0% 0% 1-29
src/ConfirmProvider/ConfirmContext.tsx 100% 100% 100% 100%
src/ConfirmProvider/ConfirmProvider.tsx 97.05% 100% 100% 97.05% 88, 107-108
src/ConfirmProvider/ConfirmationDialog.tsx 100% 77.77% 100% 100%
src/ConfirmProvider/useConfirm.tsx 100% 100% 100% 100%
src/Copyright/Copyright.jsx 100% 100% 100% 100%
src/DateLabel/DateLabel.tsx 100% 100% 100% 100%
src/DeletableList/DeletableList.tsx 100% 100% 66.66% 100%
src/DialogTitle/DialogTitle.tsx 100% 100% 100% 100%
src/EditLabelDialog/EditLabelDialog.jsx 92% 100% 41.66% 92% 40-46, 125-136
src/FeedbackForm/FeedbackForm.jsx 98.72% 100% 73.33% 98.72% 67-71
src/Figure/Figure.tsx 0% 0% 0% 0% 1-46
src/Figure/FigureClientOnly.tsx 0% 0% 0% 0% 1-16
src/FileLabel/FileLabel.tsx 100% 100% 100% 100%
src/FileUploader/FileUploader.tsx 99.38% 92.3% 50% 99.38% 98
src/FileUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
src/Filter/sortFilterOptions.ts 82.75% 76.92% 100% 82.75% 13-14, 24-25, 45
src/Filter/sortLabelOptions.ts 82.75% 76.92% 100% 82.75% 15-16, 26-27, 47
src/Filter/CheckboxFilter/CheckboxFilter.tsx 95.89% 83.33% 100% 95.89% 75-77
src/Filter/ClearFilterButton/ClearFilterButton.tsx 100% 100% 100% 100%
src/Filter/LabelFilter/LabelFilter.tsx 94.44% 90% 80% 94.44% 85-90
src/Filter/RangeFilter/RangeFilter.jsx 100% 83.33% 100% 100%
src/Filter/SetFilterButton/SetFilterButton.tsx 100% 100% 100% 100%
src/Filter/SidebarFilter/SidebarFilter.tsx 100% 100% 75% 100%
src/FontPicker/FontPicker.jsx 92.34% 62.5% 66.66% 92.34% 160-166, 174, 209-217
src/FontStyle/FontStyle.jsx 100% 100% 50% 100%
src/FormatLabel/FormatLabel.tsx 100% 100% 100% 100%
src/FormatVersionLabel/FormatVersionLabel.tsx 100% 100% 100% 100%
src/IconWithLabel/IconWithLabel.tsx 100% 100% 100% 100%
src/ImageUploader/ImageUploader.tsx 99.24% 95.45% 100% 99.24% 85
src/ImageUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
src/LabelSelector/LabelSelector.jsx 98.19% 96.15% 77.77% 98.19% 141-145, 266-267
src/LabelSelector/DeleteLabelDialog/DeleteLabelDialog.jsx 89.36% 100% 40% 89.36% 23-29
src/LabelSelector/LabelChip/LabelChip.tsx 100% 100% 100% 100%
src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx 30.46% 83.33% 20% 30.46% 52-79, 94-104, 121-175, 189-231
src/LabelSelector/LabelChipGroup/sortLabelChips.ts 100% 100% 100% 100%
src/LazyLoadImage/LazyLoadImage.tsx 0% 0% 0% 0% 1-97
src/LinePlot/LinePlot.tsx 0% 0% 0% 0% 1-190
src/LinePlot/LinePlotClientOnly.tsx 0% 0% 0% 0% 1-19
src/LinkWithPreview/LinkWithPreview.tsx 78.86% 90.9% 37.5% 78.86% 37-38, 43-46, 75-87, 91-102
src/LoadErrorMessage/LoadErrorMessage.tsx 0% 0% 0% 0% 1-182
src/Loading/Loading.jsx 96.77% 50% 100% 96.77% 31
src/LoginForm/LoginForm.jsx 100% 66.66% 50% 100%
src/ModelButton/ModelButton.tsx 97.7% 89.13% 75% 97.7% 163, 165-166, 216-217, 219-220
src/ModelButtonImage/ModelButtonImage.tsx 100% 100% 100% 100%
src/ModelButtonImage/color2filter.ts 95.6% 100% 95.83% 95.6% 60-71
src/MultiColor/MultiColor.jsx 62.91% 80% 25% 62.91% 40, 52-59, 84-87, 91-92, 96-100, 104-108, 112-115, 148-181
src/MultiLabelPopover/MultiLabelPopover.jsx 97.61% 100% 66.66% 97.61% 22-23
src/MultiText/MultiText.jsx 95.5% 100% 71.42% 95.5% 73-76
src/NumberField/NumberField.tsx 96.52% 87.87% 100% 96.52% 99-102
src/PartSelector/PartSelector.tsx 0% 0% 0% 0% 1-111
src/PasswordChangeDialog/PasswordChangeDialog.jsx 95.32% 71.42% 100% 95.32% 102, 142-144, 147-149, 247
src/PasswordChangeForm/PasswordChangeForm.jsx 100% 84.61% 100% 100%
src/PasswordResetForm/PasswordResetForm.jsx 100% 66.66% 100% 100%
src/PrototypePreview/PrototypePreview.tsx 99.54% 76.47% 100% 99.54% 191
src/RadioButtons/RadioButtons.jsx 100% 100% 50% 100%
src/RegistrationForm/RegistrationForm.jsx 100% 76.47% 100% 100%
src/RoadLabel/RoadLabel.tsx 100% 100% 100% 100%
src/RoadMarking/RoadMarking.tsx 0% 0% 0% 0% 1-50
src/RoadMarking/RoadMarkingClientOnly.tsx 0% 0% 0% 0% 1-16
src/RoadPreview/RoadPreview.tsx 100% 84.61% 100% 100%
src/RoadSurface/RoadSurface.tsx 0% 0% 0% 0% 1-20
src/RoadSurface/RoadSurfaceClientOnly.tsx 0% 0% 0% 0% 1-16
src/ScenarioPreview/ScenarioPreview.tsx 96.6% 71.42% 100% 96.6% 33-36, 226-228
src/SearchBar/SearchBar.tsx 100% 100% 100% 100%
src/Select/Select.jsx 100% 100% 50% 100%
src/SelectorButton/SelectorButton.tsx 100% 100% 100% 100%
src/Sidebar/Sidebar.tsx 100% 85.71% 100% 100%
src/Sidebar/SidebarDivider/SidebarDivider.tsx 100% 100% 100% 100%
src/Sidebar/SidebarItem/SidebarItem.tsx 67.39% 80.95% 66.66% 67.39% 63, 101-144, 162-165
src/Slider/Slider.jsx 92.8% 36.84% 60% 92.8% 56-57, 66-70, 102, 106
src/Snackbar/Snackbar.tsx 100% 91.66% 66.66% 100%
src/SnackbarProvider/SnackbarContext.tsx 100% 100% 100% 100%
src/SnackbarProvider/SnackbarProvider.tsx 60.46% 100% 50% 60.46% 32-35, 42-55
src/SnackbarProvider/useSnackbar.ts 22.22% 100% 0% 22.22% 7-13
src/Status/statuses.ts 100% 100% 100% 100%
src/Status/StatusCard/StatusCard.tsx 100% 100% 100% 100%
src/Status/StatusCountBar/StatusCountBar.tsx 94.11% 80% 66.66% 94.11% 63-65
src/Status/StatusCountTable/StatusCountTable.tsx 100% 100% 100% 100%
src/Status/StatusIcon/StatusIcon.tsx 100% 100% 100% 100%
src/Status/StatusLabel/StatusLabel.tsx 100% 100% 100% 100%
src/SurfacePlot/SurfacePlot.tsx 0% 0% 0% 0% 1-149
src/SurfacePlot/SurfacePlotClientOnly.tsx 0% 0% 0% 0% 1-19
src/SvgIcons/AsamLogo/AsamLogo.tsx 100% 100% 100% 100%
src/SvgIcons/CarMakerLogo/CarMakerLogo.tsx 100% 100% 100% 100%
src/SvgIcons/IpgLogo/IpgLogo.tsx 100% 100% 100% 100%
src/SvgIcons/RoadOutlined/RoadOutlined.tsx 100% 100% 100% 100%
src/SvgIcons/TruckMakerLogo/TruckMakerLogo.tsx 100% 100% 100% 100%
src/SvgIcons/VirtoBuild/VirtoBuild.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoData/VirtoData.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoFleet/VirtoFleet.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoID/VirtoID.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoLogo/VirtoLogo.tsx 100% 100% 100% 100%
src/SvgIcons/VirtoMascots/VirtoHeadScratching/VirtoHeadScratching.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoShrugging/VirtoShrugging.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoThinking/VirtoThinking.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoThumbsUpLeft/VirtoThumbsUpLeft.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoModel/VirtoModel.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoResult/VirtoResult.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoScene/VirtoScene.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoTest/VirtoTest.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoVehicle/VirtoVehicle.jsx 100% 100% 100% 100%
src/SwitchField/SwitchField.jsx 94.44% 90.9% 100% 94.44% 121-124
src/TabPanel/TabPanel.tsx 0% 0% 0% 0% 1-127
src/TextField/TextField.tsx 88.13% 100% 50% 88.13% 8-15
src/ThemeProvider/ThemeProvider.tsx 88.15% 100% 20% 88.15% 99-100, 102-103, 105-113, 119-120, 157-158, 169-170, 194-195, 201-204
src/ToggleColorMode/ToggleColorMode.jsx 100% 100% 100% 100%
src/TrafficLight/TrafficLight.tsx 0% 0% 0% 0% 1-107
src/TrafficLight/TrafficLightClientOnly.tsx 0% 0% 0% 0% 1-16
src/TrafficLight/TrafficLightSelector.tsx 0% 0% 0% 0% 1-780
src/TrafficLight/trafficLightUtils.ts 0% 100% 100% 0% 2-40
src/TrafficSign/TrafficSign.tsx 0% 0% 0% 0% 1-33
src/TrafficSign/TrafficSignClientOnly.tsx 0% 0% 0% 0% 1-16
src/TrafficSign/TrafficSignHelper.ts 0% 0% 0% 0% 1-333
src/TreeViewList/TreeViewList.tsx 0% 0% 0% 0% 1-513
src/TruncatedTooltip/TruncatedTooltip.tsx 92.04% 64.7% 75% 92.04% 65-66, 68-69, 87-88, 90
src/Uploader/UploaderHeader.tsx 88.05% 83.33% 100% 88.05% 30-33, 35-38
src/Uploader/useUploader.ts 89.74% 79.16% 100% 89.74% 39-41, 58, 63-67, 103, 181-182
src/UserAvatar/UserAvatar.tsx 100% 90.9% 100% 100%
src/UserAvatar/colorMap.tsx 100% 100% 100% 100%
src/UserLabel/UserLabel.tsx 100% 100% 100% 100%
src/UserMenu/UserMenu.tsx 100% 100% 100% 100%
src/VehiclePath/Marker.tsx 0% 0% 0% 0% 1-15
src/VehiclePath/Vehicle.tsx 0% 0% 0% 0% 1-59
src/VehiclePath/VehiclePath.tsx 0% 0% 0% 0% 1-55
src/VehiclePath/VehiclePathClientOnly.tsx 0% 0% 0% 0% 1-16
src/VehicleSelect/VehicleSelect.tsx 55.5% 88.46% 28.57% 55.5% 90-100, 116-126, 143-187, 204-234
src/VehicleSelectDialog/VehicleSelectDialog.tsx 87.37% 66.66% 25% 87.37% 40-47, 51-54, 92
src/VersionChip/VersionChip.tsx 88.7% 70% 100% 88.7% 12, 46, 50, 77-80
src/VersionLabel/VersionLabel.tsx 100% 100% 100% 100%
src/ViewToggleButton/ViewToggleButton.jsx 100% 100% 66.66% 100%
src/VirtoAppHeader/VirtoAppHeader.tsx 100% 100% 71.42% 100%
src/VirtoAppLayout/VirtoAppLayout.tsx 100% 72.72% 70% 100%
src/Wizard/Wizard.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/WizardActions.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/BackButton/BackButton.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/CancelButton/CancelButton.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/NextButton/NextButton.tsx 100% 100% 100% 100%
src/Wizard/WizardContent/WizardContent.tsx 100% 100% 100% 100%
src/Wizard/WizardSteps/WizardSteps.tsx 100% 75% 100% 100%
src/Wizard/WizardSteps/WizardStep/WizardStep.tsx 92.15% 71.42% 100% 92.15% 49-52
src/hover/useDelayedHover.ts 60% 100% 100% 60% 26-40, 50-54
src/utils/common.ts 100% 83.33% 100% 100%
src/utils/form.jsx 100% 100% 100% 100%
src/utils/plotlyConfig.ts 0% 100% 100% 0% 2-34
src/utils/readAsDataURL.ts 80% 100% 66.66% 80% 20-22
Generated in workflow #3342 for commit d7a0442 by the Vitest Coverage Report Action

@stevenmcsorleyipg stevenmcsorleyipg added the enhancement New feature or request label Feb 5, 2025
Copy link
Contributor

@m4manjesh m4manjesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionality works fine. See suggestions to seperate types

src/VehicleSelector/VehicleSelector.utils.ts Outdated Show resolved Hide resolved
src/VehicleSelector/VehicleSelector.utils.ts Outdated Show resolved Hide resolved
@m4manjesh
Copy link
Contributor

@stevenmcsorleyipg why it this PR pointing to main? Did you test this in VIRTO?

@stevenmcsorleyipg
Copy link
Contributor Author

@stevenmcsorleyipg why it this PR pointing to main? Did you test this in VIRTO?

there will be a pre-release for this PR

@m4manjesh
Copy link
Contributor

@stevenmcsorleyipg why it this PR pointing to main? Did you test this in VIRTO?

there will be a pre-release for this PR

Ok but this should be targetting to a release branch not main

- moved props to types
- fixed function calls
- fixed tests
@stevenmcsorleyipg stevenmcsorleyipg changed the base branch from main to release/v11.1.0 February 5, 2025 16:57
Copy link
Contributor

@m4manjesh m4manjesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we normally dont follow two .test.tsx files for a single component. I understand why you created it but i'm not sure whether this is a good practice or not, @mattcorner what you think about having VehicleSelector.test.tsx for main component and VehicleSelector.autoSelect.test.tsx for some functionality?

src/VehicleSelector/VehicleSelector.types.ts Show resolved Hide resolved
@stevenmcsorleyipg
Copy link
Contributor Author

I think we normally dont follow two .test.tsx files for a single component. I understand why you created it but i'm not sure whether this is a good practice or not, @mattcorner what you think about having VehicleSelector.test.tsx for main component and VehicleSelector.autoSelect.test.tsx for some functionality?

Its fine I can move all the tests into one file

- moved all tests into one file
- applied suggestion to types to lessen duplication
@mattcorner
Copy link
Contributor

I think we normally dont follow two .test.tsx files for a single component. I understand why you created it but i'm not sure whether this is a good practice or not, @mattcorner what you think about having VehicleSelector.test.tsx for main component and VehicleSelector.autoSelect.test.tsx for some functionality?

Its fine I can move all the tests into one file

Yes please stick with one test file per component. If you want to group different tests by the behaviour that they are testing then you can use describe blocks in vitest.

Copy link
Contributor

@m4manjesh m4manjesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, Please gets it approved by @Sowbhagya-ipg as well.

@m4manjesh m4manjesh self-requested a review February 6, 2025 12:06
@m4manjesh
Copy link
Contributor

@stevenmcsorleyipg I will do the final approval once @Sowbhagya-ipg is happy and you have done testing in VIRTO with a pre-release.

@Sowbhagya-ipg
Copy link

Looks good. No issues @stevenmcsorleyipg

@mattcorner mattcorner mentioned this pull request Feb 10, 2025
@mattcorner mattcorner changed the base branch from release/v11.1.0 to release/v11.2.0 February 12, 2025 10:50
mattcorner and others added 4 commits February 12, 2025 10:53
* Changed the TransferList to have combined search and check functionality and added one more test

* 11.1.0-0

* Addressed the PR feedback, added a few tests

* Added another test to check simultaneously checked

---------

Co-authored-by: IvanLazarov-TVM <i.lazarov@tvm-engineering.com>
Co-authored-by: lukemojo <143453762+lukemojo@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants