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

VE-221 Migrate deprecated APIs #989

Merged
merged 16 commits into from
Dec 10, 2024

Conversation

m4manjesh
Copy link
Contributor

@m4manjesh m4manjesh commented Nov 27, 2024

Closes VE-221

Changes

During the RUI migration to MUI v6 here, we noticed it is good to handle deprecations now before they become breaking changes. This PR focuses on migrating recently deprecated APIs to stay up-to-date and improve the developer experience.

A brief description of what this pull request solves / introduces.

  • Many system props such as mt, bgColor and more are deprecated in Box, Typography, Link, Grid, and Stack components. So here we are moving the most of the of the system props to sx props. See below example
    Screenshot 2024-11-27 122048

  • Hidden component was already deprecated. Remove it and use useMediaQuery to achieve the same behaviour as follows
    Screenshot 2024-11-27 122202

  • In ThemeProvider.tsx i have added mixins.toolbar.minHeight to 64 to fix AppLauncherover overlapping issue with AppHeader in VIRTO apps. Also changed using custom 64px in VirtoAppLayout and AppLayout to calculate height and top, instead of using theme.mixins.toolbar.minHeight.

Before
Screenshot 2024-11-27 123832

After
Screenshot 2024-11-27 123839

  • All the analogous APIs such as components and componentProps are deprecated and eventually removed. Using standardized slots and slotProps instead
    Screenshot 2024-11-27 124200
    Screenshot 2024-11-27 124654

Dependencies

This needs to wait to merge until this PR gets merged

UI/UX

There are some small UI changes related to AppLauncher top spacing as mentioned above. It would be good to get reviewed by you @Sowbhagya-ipg.

Testing notes

Most of the components touched and most of the changes are identical in this PR. But still, make sure all stories are still working the same as before. Check that the changes i made in VirtoAppLayout and AppLayout didn't break the behaviour we have.

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.

@m4manjesh m4manjesh added the enhancement New feature or request label Nov 27, 2024
@m4manjesh m4manjesh self-assigned this Nov 27, 2024
@m4manjesh m4manjesh changed the title VE-221 Migrate depricated APIs to v6 VE-221 Migrate deprecated APIs Nov 27, 2024
Copy link

github-actions bot commented Nov 27, 2024

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 69.27% (🎯 66%) 9893 / 14281
🟢 Statements 69.27% (🎯 66%) 9893 / 14281
🟢 Functions 72.23% (🎯 70%) 398 / 551
🟢 Branches 85.87% (🎯 80%) 991 / 1154
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
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 93.41% 79.31% 100% 93.41% 64-66, 68, 113, 162-167
src/Card/DetailCard/DetailCard.tsx 0% 0% 0% 0% 1-194
src/Card/SummaryCard/SummaryCard.tsx 0% 0% 0% 0% 1-165
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/Color/Color.jsx 97.75% 96.77% 90% 97.75% 68-69, 82-84
src/EditLabelDialog/EditLabelDialog.jsx 92% 100% 41.66% 92% 42-48, 127-138
src/FeedbackForm/FeedbackForm.jsx 98.72% 100% 91.66% 98.72% 67-71
src/FileUploader/FileUploader.tsx 99.38% 92.3% 50% 99.38% 98
src/Filter/LabelFilter/LabelFilter.jsx 96.61% 94.11% 92.85% 96.61% 110-113
src/Filter/RangeFilter/RangeFilter.jsx 100% 83.33% 100% 100%
src/Filter/SidebarFilter/SidebarFilter.tsx 100% 100% 75% 100%
src/FontPicker/FontPicker.jsx 93.65% 62.5% 66.66% 93.65% 159-165, 173, 207-211
src/ImageUploader/ImageUploader.tsx 99.22% 95.45% 100% 99.22% 81
src/LabelSelector/LabelSelector.jsx 98.16% 96.15% 77.77% 98.16% 139-143, 262-263
src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx 30.46% 83.33% 20% 30.46% 52-79, 94-104, 121-175, 189-231
src/LinePlot/LinePlot.tsx 0% 0% 0% 0% 1-190
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/MultiColor/MultiColor.jsx 63.87% 80% 25% 63.87% 40, 52-59, 85-88, 92-93, 97-101, 105-109, 113-116, 153-186
src/MultiLabelPopover/MultiLabelPopover.jsx 97.61% 100% 66.66% 97.61% 22-23
src/MultiText/MultiText.jsx 95.69% 100% 71.42% 95.69% 74-77
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.34% 72.72% 100% 95.34% 102, 142-144, 147-149, 248
src/PasswordChangeForm/PasswordChangeForm.jsx 100% 84.61% 100% 100%
src/PasswordResetForm/PasswordResetForm.jsx 100% 66.66% 100% 100%
src/RegistrationForm/RegistrationForm.jsx 100% 76.47% 100% 100%
src/RoadPreview/RoadPreview.tsx 100% 85.71% 100% 100%
src/Sidebar/Sidebar.tsx 100% 85.71% 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/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/SurfacePlot/SurfacePlot.tsx 0% 0% 0% 0% 1-158
src/TabPanel/TabPanel.tsx 0% 0% 0% 0% 1-127
src/TextField/TextField.tsx 89.83% 100% 66.66% 89.83% 8-13
src/ThemeProvider/ThemeProvider.tsx 98.71% 93.75% 66.66% 98.71% 107, 194-195
src/TransferList/TransferList.tsx 100% 100% 100% 100%
src/Uploader/UploaderHeader.tsx 88.05% 83.33% 100% 88.05% 30-33, 35-38
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.5% 71.42% 40% 87.5% 40-47, 51-54, 93
src/VehicleSelector/VehicleSelector.tsx 57.14% 92.68% 16.66% 57.14% 96-106, 131-141, 168-224, 256-300
src/VirtoAppHeader/VirtoAppHeader.tsx 100% 100% 76.92% 100%
src/VirtoAppLayout/VirtoAppLayout.tsx 100% 78.57% 63.63% 100%
src/Wizard/WizardActions/WizardActions.tsx 100% 100% 100% 100%
Unchanged Files
src/ActionDialog/ActionDialog.tsx 98.36% 66.66% 100% 98.36% 64
src/AlignHorizontal/AlignHorizontal.tsx 100% 100% 100% 100%
src/AlignVertical/AlignVertical.tsx 100% 100% 100% 100%
src/Breadcrumbs/Breadcrumbs.tsx 98% 66.66% 100% 98% 31
src/BulletGauge/BulletGauge.tsx 0% 0% 0% 0% 1-85
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/TableCard/TableCard.tsx 0% 0% 0% 0% 1-75
src/Checkbox/Checkbox.jsx 100% 100% 50% 100%
src/ClientOnly/ClientOnly.tsx 0% 0% 0% 0% 1-17
src/ConditionalDialog/ConditionalDialog.tsx 0% 0% 0% 0% 1-29
src/ConfirmProvider/ConfirmContext.tsx 100% 100% 100% 100%
src/ConfirmProvider/ConfirmProvider.tsx 97.16% 100% 100% 97.16% 93, 112-113
src/ConfirmProvider/ConfirmationDialog.tsx 100% 75% 100% 100%
src/ConfirmProvider/useConfirm.tsx 100% 100% 100% 100%
src/Copyright/Copyright.jsx 100% 100% 100% 100%
src/DeletableList/DeletableList.tsx 100% 100% 66.66% 100%
src/DialogTitle/DialogTitle.tsx 100% 100% 100% 100%
src/Figure/Figure.tsx 0% 0% 0% 0% 1-46
src/Figure/FigureClientOnly.tsx 0% 0% 0% 0% 1-16
src/FileUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
src/Filter/AlwaysOpenAutocomplete.tsx 100% 100% 100% 100%
src/Filter/sortFilterOptions.ts 82.75% 75% 100% 82.75% 13-14, 24-25, 45
src/Filter/CheckboxFilter/CheckboxFilter.tsx 96.29% 78.57% 100% 96.29% 59, 131-133
src/Filter/ClearFilterButton/ClearFilterButton.tsx 100% 100% 100% 100%
src/Filter/SetFilterButton/SetFilterButton.tsx 100% 100% 100% 100%
src/FontStyle/FontStyle.jsx 100% 100% 50% 100%
src/ImageUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
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/sortLabelChips.ts 100% 100% 100% 100%
src/LazyLoadImage/LazyLoadImage.tsx 0% 0% 0% 0% 1-97
src/LinePlot/LinePlotClientOnly.tsx 0% 0% 0% 0% 1-19
src/ModelButton/ModelButton.tsx 97.16% 85.41% 75% 97.16% 119, 166, 168-169, 219-220, 222-223, 261
src/ModelButtonImage/ModelButtonImage.tsx 100% 100% 100% 100%
src/ModelButtonImage/color2filter.ts 95.6% 100% 95.83% 95.6% 60-71
src/NoWrapTypography/NoWrapTypography.tsx 100% 100% 100% 100%
src/RadioButtons/RadioButtons.jsx 100% 100% 50% 100%
src/RoadMarking/RoadMarking.tsx 0% 0% 0% 0% 1-50
src/RoadMarking/RoadMarkingClientOnly.tsx 0% 0% 0% 0% 1-16
src/RoadSurface/RoadSurface.tsx 0% 0% 0% 0% 1-20
src/RoadSurface/RoadSurfaceClientOnly.tsx 0% 0% 0% 0% 1-16
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/SidebarDivider/SidebarDivider.tsx 100% 100% 100% 100%
src/Snackbar/Snackbar.tsx 100% 90% 85.71% 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/StatusIcon/StatusIcon.tsx 100% 100% 100% 100%
src/Status/StatusLabel/StatusLabel.tsx 100% 100% 100% 100%
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/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.jsx 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 93.84% 90.9% 100% 93.84% 112-115
src/ThemeProvider/ThemeContext.tsx 100% 100% 100% 100%
src/ThemeProvider/useTheme.ts 77.77% 50% 100% 77.77% 10-11
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 91.76% 64.7% 75% 91.76% 61-62, 64-65, 83-84, 86
src/Uploader/useUploader.ts 89.28% 78.26% 100% 89.28% 39-41, 58, 63-67, 103, 174-175
src/UserAvatar/UserAvatar.tsx 100% 90.9% 100% 100%
src/UserAvatar/colorMap.tsx 12.5% 100% 0% 12.5% 15-41
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/VersionChip/VersionChip.tsx 88.7% 70% 100% 88.7% 12, 46, 50, 77-80
src/ViewToggleButton/ViewToggleButton.jsx 100% 100% 66.66% 100%
src/Wizard/Wizard.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 #3145 for commit ea7abbb by the Vitest Coverage Report Action

@Sowbhagya-ipg
Copy link

The app layout changes looks good @m4manjesh

@m4manjesh m4manjesh requested a review from nikitharani December 4, 2024 09:22
Base automatically changed from migrate-to-MUI6 to release/v10.0.0 December 5, 2024 09:01
@nikitharani
Copy link
Contributor

nikitharani commented Dec 5, 2024

image
image

Sidebar item text not visible in darkmode

Copy link
Contributor

@nikitharani nikitharani left a comment

Choose a reason for hiding this comment

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

The changes are mostly good, with only a few minor adjustments needed.

/>
</Grid>
</Grid>
)}
{status === "success" && (
<Alert severity="success" style={{ marginBottom: 16 }}>
<Alert severity="success" sx={{ marginBottom: 1 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

is marginBottom: 1 intentional?

Copy link
Contributor

Choose a reason for hiding this comment

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

In the MUI spacing convention 1 unit is 8px, so the correct replacement would be sx={{ mb: 2 }}

alignItems: "center",
display: "flex",
justifyContent: "space-between",
p: theme => theme.spacing(2)
Copy link
Contributor

Choose a reason for hiding this comment

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

p:2

@@ -159,7 +185,7 @@ function VirtoAppHeader({
onClose={() => setAppOpen(false)}
sx={theme => ({
"& .MuiDrawer-paper": {
height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px) `,
Copy link
Contributor

Choose a reason for hiding this comment

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

remove space

@mattcorner mattcorner self-requested a review December 9, 2024 09:18
Copy link
Contributor

@mattcorner mattcorner left a comment

Choose a reason for hiding this comment

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

Looks good to me. Tested the AppLayout changes and works well. Reran the mui deprecation codemod and picked up no other changes. Just Nikithas feedback to address.

@m4manjesh
Copy link
Contributor Author

image image

Sidebar item text not visible in darkmode

Good catch. Seems like this is working fine with VirtoAppLayout. But still this is an issue in this PR, we have similar kind of issues with storybook mode switching in few places, this will be addressed with a PR coming for VE-252

Copy link
Contributor

@nikitharani nikitharani left a comment

Choose a reason for hiding this comment

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

Please change mb in passwordChangeDialog otherwise everything lgtm.

/>
</Grid>
</Grid>
)}
{status === "success" && (
<Alert severity="success" style={{ marginBottom: 16 }}>
<Alert severity="success" sx={{ mb: 1 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

This should be mb:2 to match the marginBottom: 16, as mb:1 equals 8px.

@m4manjesh m4manjesh merged commit 412db32 into release/v10.0.0 Dec 10, 2024
3 checks passed
@m4manjesh m4manjesh deleted the migrate-depricated-apis-to-v6 branch December 10, 2024 17:07
This was referenced Jan 6, 2025
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