I1529 Frontend Dependancy Update #1555

pushyamig · 2023-12-07T19:02:52Z

Fix the UI changes due to MUI v5 update as it seems to be due to MUI adopting https://emotion.sh/docs/introduction
1. https://mui.com/material-ui/migration/migration-v4/. The documentation is nuanced since it talk all scenarios with upgrade to MUi v5 with React 17, MUi v5 with React 18, MUi v5 supporting JSS etc
2. used CodeMods for updating the MUI to v5. here are the docs what gets updated https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#variant-prop
react-router-dom has some major changes, the nested router path are relative now
1. withRouter higher order hook is removed, so need to write a custom function
React 18 had some changes to how react is initiated. lot of Improvement to async support.
The strategy for package-lock.json was just delete node_module and update the package.json and generate a new lock file. This was simplest!
upgrade to @apollo/client, Assignment planning was crashing so added a configuration option assumeImmutableResults: false, to enable mutable object of response which was allowed as an configuration option.
used npm-check-updates for checking the latest package version in the repo. It is recommended by package dev to install it globally. https://www.npmjs.com/package/npm-check-updates npm install -g npm-check-updates
Three security advisory w.r.t (postcss, graphql, @babel/traverse) are resolved now.
check using the command npm ls <package-name> Eg., npm ls postcss

Todo List:

Test Plan

https://docs.google.com/spreadsheets/d/18c_VDE7wdme8c36Zo5-pjad77Kit8hFz4ylbmFXmLP8/edit#gid=0

Testing should be done from Student, instructor and MyLa Admin role

pushyamig · 2023-12-07T19:04:40Z

This Draft PR is branched out of #1554 since that has major Backend updates. So it make sense to this way until that PR get merged

pushyamig · 2023-12-08T16:11:48Z

used CodeMods for updating the MUI to v5. here are the docs what gets updated https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md

pushyamig · 2023-12-13T15:54:46Z

assets/src/containers/Course.js

-                      /> }
-                    />
-                  </Route>
+                  <Route


react-router-dom v6 had new approach, nested routes became relative than absolute before.

pushyamig · 2023-12-13T15:56:19Z

assets/src/containers/WithRouter.js

+
+export default withRouter


V6 of the react-router-dom removed withRouter, so I have to write this HOC as per the documentation guide, linked in the page

pushyamig · 2023-12-13T15:56:49Z

assets/src/containers/App.js

  return (
    <>
      <Helmet titleTemplate='%s | My Learning Analytics' title='Courses' />
      <GoogleAnalyticsTracking {...{ gaId, cspNonce }} />
      <Routes>
        <Route path='/' element={<CourseList user={user} />} />
-        <Route path='/courses' element={ <CourseList user={user} />} />
-        <Route path='/courses/:courseId/*' element={courseId ? <Course user={user} courseId={Number(courseId)} {...props} /> : <AlertBanner>Application Launch did not happened properely</AlertBanner>} />
+        <Route path='/courses' element={<CourseList user={user} />} />


part of react-router-dom v6 change

pushyamig · 2023-12-13T15:57:00Z

assets/src/components/d3/createResourceAccessChart.js

-          ? [0, 0.1]
-          : event.selection
+        ? [0, 0.1]
+        : event.selection
      : defaultSelection


Spacing issue

pushyamig · 2023-12-13T15:57:46Z

assets/src/components/RangeSlider.js

@@ -35,15 +35,17 @@ const rangeSlider = props => {
        range
        activeDotStyle={activeDotStyle}
        dotStyle={dotStyle}
-        handleStyle={[activeDotStyle, activeDotStyle]}
-        railStyle={unselectedStyle}
-        trackStyle={[selectedStyle]}


These are deprecated in the new version of rc-slider and includes as part of the styles property.

pushyamig · 2023-12-13T15:58:32Z

assets/src/components/RangeSlider.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import 'rc-slider/assets/index.css'
-import Slider, { Range } from 'rc-slider'


rc-slider package has some solid change, but not breaking. I felt the slider looked ok and functioned as before

pushyamig · 2023-12-13T15:58:42Z

assets/src/components/ProgressBarV2.js

+                  <div key={key}>
+                    <Line {...line} barHeight={height} outOf={outOf} />
+                  </div>
+                ))
              : null


Spacing change

pushyamig · 2023-12-13T16:02:45Z

assets/src/components/SurveyModal.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { useLocation } from 'react-router'
+import { useLocation } from 'react-router-dom'
 import Button from '@mui/material/Button'


react-router package is package dependency and we never had in our package.json file. So I changed using the react-router-dom package. properties that are being used here also present in it https://reactrouter.com/en/main/hooks/use-location.

pushyamig · 2023-12-14T20:18:26Z

assets/src/components/SelectCard.js

@@ -235,11 +235,11 @@ const SelectCard = props => {
      </CardContent>
    )

-    return <Root>{cardImage}{cardContent}</Root>
+    return <>{cardImage}{cardContent}</>
  }


This is nice and simple fix. I pulled the latest and things are looking good with this commit.

pushyamig · 2023-12-14T20:23:27Z

assets/src/components/SurveyModal.js

@@ -92,7 +92,7 @@ export default function SurveyModal (props) {
  const toggleOpen = () => setOpen(!open)

  const body = (
-    <Root className={`${classes.paper} ${classes.modal}`}>


@jaydonkrooss I couldn't test this, but I felt this would work. were you able to test this with survey link?

The button looks good, But the modal after clicking is not centered. I added 2 more issue around this.

You can reproduced it locally by going to Admin -> Config -> SURVEY_URL "Give any URL"

pushyamig · 2024-01-04T19:37:36Z

I have built the latest from this repo which is here https://github.com/pushyamig/my-learning-analytics/actions/runs/7413997544

pushyamig · 2024-01-04T20:06:15Z

This PR is now ready for Review, I have added test plan as well

pushyamig · 2024-01-05T19:13:11Z

I pretty much tested/reviewed it from my lense and things are ok .

I have updated things I tested according to test plan
https://docs.google.com/spreadsheets/d/18c_VDE7wdme8c36Zo5-pjad77Kit8hFz4ylbmFXmLP8/edit#gid=0

pushyamig · 2024-01-10T19:10:58Z

I can't approve a PR which is opened by me. But I will approve the Jaydon's work as well

pushyamig force-pushed the i1529_FE_Dep_update branch from 63393a3 to c72d432 Compare December 13, 2023 15:41

pushyamig commented Dec 13, 2023

View reviewed changes

pushyamig commented Dec 14, 2023

View reviewed changes

pushyamig force-pushed the i1529_FE_Dep_update branch from 1e4e971 to af36347 Compare January 3, 2024 21:24

pushyamig and others added 15 commits January 4, 2024 08:13

Upgrade to MUI V5

1753923

Working UI but that completely styled

a5fa680

Fixes around container/body layout

0548f6c

upgrade to router dom

3d0b120

git ignore

223e244

Upgrading to react router dom v6

b0481b4

react router dom and slider update

60f5397

Updating the material UI to latest version 5.15

c873319

Upgrade all-contributors-cli and add Jaydon as contributor

5f44dc8

Update to FE build package

b2ab827

upgrade to latest react-router-dom

3eab5f3

Nice package-lock.json

49e036d

fix usage of styled Root in broken components

57b795a

setting up build process for the branch

6a4fc51

1529 styling adjustments for materialUI upgrade (#11)

57372e4

pushyamig force-pushed the i1529_FE_Dep_update branch from af36347 to 57372e4 Compare January 4, 2024 13:14

jaydonkrooss and others added 2 commits January 4, 2024 14:08

Modal UI update: use typography instead (#13)

e995ad6

Bringing the latest package version and minor formatting

6b911cd

Removing the git build workflow update

d1f0b77

pushyamig marked this pull request as ready for review January 4, 2024 20:05

pushyamig requested a review from jaydonkrooss January 4, 2024 20:05

pushyamig self-assigned this Jan 4, 2024

Bar % value is all black

afef7a3

jaydonkrooss approved these changes Jan 10, 2024

View reviewed changes

pushyamig assigned pushyamig and unassigned pushyamig Jan 10, 2024

pushyamig merged commit dca2734 into tl-its-umich-edu:master Jan 10, 2024
1 check failed

This was referenced Jan 30, 2024

Bump graphql from 16.3.0 to 16.8.1 #1541

Closed

Bump postcss from 8.4.12 to 8.4.31 #1543

Closed

Bump @babel/traverse from 7.17.9 to 7.23.2 #1546

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I1529 Frontend Dependancy Update #1555

I1529 Frontend Dependancy Update #1555

pushyamig commented Dec 7, 2023 •

edited

Loading

pushyamig commented Dec 7, 2023

pushyamig commented Dec 8, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023

pushyamig Dec 13, 2023 •

edited

Loading

pushyamig Dec 14, 2023

pushyamig Dec 14, 2023

pushyamig Dec 14, 2023

pushyamig commented Jan 4, 2024

pushyamig commented Jan 4, 2024

pushyamig commented Jan 5, 2024

pushyamig commented Jan 10, 2024

I1529 Frontend Dependancy Update #1555

I1529 Frontend Dependancy Update #1555

Conversation

pushyamig commented Dec 7, 2023 • edited Loading

Todo List:

Test Plan

pushyamig commented Dec 7, 2023

pushyamig commented Dec 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pushyamig Dec 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pushyamig commented Jan 4, 2024

pushyamig commented Jan 4, 2024

pushyamig commented Jan 5, 2024

pushyamig commented Jan 10, 2024

pushyamig commented Dec 7, 2023 •

edited

Loading

pushyamig Dec 13, 2023 •

edited

Loading