Refactor MultiPaneLayout with K*components

[sairina]

Observed behavior

Currently, there is some tech debt related to the lack of K*components in the MultiPaneLayout. One such example is from a scrolling issue mentioned in #6945 as well as a lack of responsive sizing when the width is changed.

Other components that are mentioned in #6945 do not seem to have the issues that PlanQuizPreview have, and one major difference is that the other components do not use MultiPaneLayout. I believe that refactoring it with K*components will solve the scrolling issue, as well as help with decreasing tech debt.

Responsiveness (excuse the border colors - that's just to show what has/has not changed):

Errors and logs

…

Expected behavior

As this is a refactor, the expected behavior would be for the component to have the same behavior that it had before (with the exception of fixing the formatting issues from #6945 and following these specs:

User-facing consequences

Future components using MultiPaneLayout will have the ability to take advantage of the K*components and functionality.

Steps to reproduce

See #6945 to reproduce behavior for scrolling.

To see responsiveness behavior:

1. Log in as Coach
2. Click on "Plan" > "Quizzes" > "New quiz"
3. Plan a new quiz with practice questions/exercises
4. Resize the window to see that the change is not the same as that described in the spec here and shown above.

Context

[indirectlylit]

all sounds good

Just flagging though that for most quizzes and exercises, the names of the questions are not particularly meaningful. That's why on small screens for the learner view we replaced the question list with just 'previous' and 'next' buttons.

[ShivangRawat30]

I would like to work on this issue.

[thanksameeelian]

thanks, @ShivangRawat30!

i've assigned you, but it appears that the main part of this issue - refactoring MultiPaneLayout to use K* components - has already been accomplished in a prior PR.

however, this issue description also includes layout behavior that we would love to double-check is working as expected. if you're interested, it would be helpful if you could check in on that layout behavior. for example: ensuring that in the narrowest screen view, the order of the elements is laid out in the same way it is on the far right of the image below (also shared in the issue description) - header, rendered material, then the questions list.

if everything is behaving as expected, your confirmation of the behavior will be very helpful and we can close out this issue. and if the layout isn't behaving as expected, we'd definitely appreciate your fix for the issue! if you're no longer interested in this issue as it has changed, that's perfectly understandable - please feel free to unassign 🙂

[ShivangRawat30]

@thanksameeelian When I am trying to make a new quiz, the page goes to an infinite loading phase.

Screen.Recording.2023-10-26.at.5.03.17.PM.mov

[MisRob]

@ShivangRawat30 I'm sorry for late reply, it seems we missed this comment. Will follow-up soon.

[MisRob]

@ShivangRawat30 I can confirm this is still an issue on the latest develop. Let me check on this with the team.

[MisRob]

@ShivangRawat30 So we have a fix underway for this but it will take some time. Also, as we've just discussed this again, in the light of some recent updates going on in these places, we will address this issue as part of a new feature. Thank you for looking into it and reporting the problem.