Raised for testing purpose - Contains all code of GSoC 2024 #5946

omChauhanDev · 2024-08-31T21:24:55Z

What this PR does

This pr is created for testing all training modification features.
Eg: how they work over production server

ragesoss · 2024-09-06T19:52:45Z

This is an impressive set of functionality.

I've done some initial testing, and there are a few UX problems that I think will need to be fixed before this is ready to deploy.

There needs to be a way to edit an existing slide. Since we are not supporting slide deletion, it's important to be able to change the wiki page for an existing slide, so that misconfiguring a new slide will not render the slide slug unusable.
The wiki page field should automatically handle input that is a meta.wikimedia.org full URL instead of just a page name. Copying and pasting the full URL from a wiki is a common pattern in the dashboard, and it's not obvious whether a user ought to use a URL or just a page title.

ragesoss · 2024-09-06T19:53:25Z

I also encountered a JS error when entering 'reorder' mode on an existing module's index page:

TypeError: Cannot read properties of null (reading 'split')
    at DraggableSlide (draggableSlide.jsx:68:1)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20069:13)
    at beginWork (react-dom.development.js:21582:16)
    at beginWork$1 (react-dom.development.js:27421:14)
    at performUnitOfWork (react-dom.development.js:26552:12)
    at workLoopSync (react-dom.development.js:26461:5)
    at renderRootSync (react-dom.development.js:26429:7)
    at recoverFromConcurrentError (react-dom.development.js:25845:20)
    at performSyncWorkOnRoot (react-dom.development.js:26091:20)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at eval (react-dom.development.js:25646:13)

omChauhanDev · 2024-09-07T17:49:10Z

Fixing this error and also reducing some unnecessary lines of code of 'reordering slides' pr. Then will move on to incorporating the listed changes to make it perfect for deployment.

omChauhanDev · 2024-09-17T18:52:00Z

sir, where you found this error as, I tried replicating this error in my browser console but found nothing
kindly have a look : Video

omChauhanDev · 2024-09-20T16:04:58Z

@ragesoss sir, kindly have a look

ragesoss · 2024-09-20T21:27:31Z

Hmm... I still hit that same error. I'm doing this in wiki_education mode, with freshly reloaded training modules, and any time I click 'Change Order' on the index page of one of the YAML-backed modules, it throws a JS error and the React-rendered sidebar disappears.

app/assets/javascripts/training/components/draggableSlide.jsx

… Content

…its rspec test

omChauhanDev · 2024-11-07T10:04:55Z

@ragesoss sir, kindly verify that js error that we have encountered earlier is not happening now ?

ragesoss · 2024-11-07T20:15:13Z

Yep! That fixes the error. Thanks!

I will continue testing from here, this week or next.

ragesoss · 2024-11-26T19:22:16Z

I spotted a layout bug. Some change within the TOC makes the two-digit slide numbers only show the last digit.

ragesoss · 2024-11-26T19:25:03Z

app/assets/javascripts/components/common/text_area_input.jsx

-  invalid
+  invalid,
+  label,
+  spacer


What is this for? It doesn't look like this property gets used in any components that use TextAreaInput.

a custom label that can be be given to text_area component. Sir, we are using this in our modals of 'creating library', 'creating categories' and 'adding modules'.
Whenever there is any error like no text provided by user, or exceeded the max limit of characters, then along with the boundaries of text_area_input.jsx this label also becomes red.
Eg :

ragesoss · 2024-11-26T19:29:15Z

app/assets/javascripts/reducers/training.js

+    case SET_TRAINING_MODE:
+      return {
+        ...state,
+        editMode: JSON.parse(mainDiv.getAttribute('data-training_mode')).editMode


This seems like violation of the Redux state model, as it changes state based on things outside of the current state and the data included in the action object (so it's not a pure function). Although it wouldn't actual be mutable normally, I think it still ought to be refactored so that reading from the DOM happens outside of the reducer and the editMode value is included in the action.

Thank you for catching that Redux violation. I've refactored the code to maintain reducer purity by moving the DOM interaction out of the reducer. The editMode value is now read in the action creator and passed through the action's payload. The reducer now only depends on the state and action parameters, following Redux's pure function principles.

ragesoss · 2024-11-26T19:34:16Z

I found that the Edit Mode button is present and works even for logged out users. It should be limited to admins initially, and we might open it to any logged in user later on, but not logged out users.

ragesoss · 2024-11-26T19:35:55Z

I get this error when clicking Remove Slide from a module index page (of a module that was originally from yaml):

Uncaught TypeError: Cannot read properties of null (reading 'split')
    at SelectableBox (selectable_box.jsx:20:1)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20069:13)
    at beginWork (react-dom.development.js:21582:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (helpers.js:89:23)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27446:7)
    at performUnitOfWork (react-dom.development.js:26552:12)
    at workLoopSync (react-dom.development.js:26461:5)
    at renderRootSync (react-dom.development.js:26429:7)
    at performSyncWorkOnRoot (react-dom.development.js:26080:20)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at eval (react-dom.development.js:25646:13)

omChauhanDev · 2025-01-10T17:25:44Z

@ragesoss Sir, I’ve added these updates :

Slide editing is now enabled to allow changes to the wiki page for existing slides, ensuring misconfigured slides remain usable.
The wiki page field also accepts both full URLs and page titles for better usability.

Kindly review and let me know if there’s anything else we can add or fix before we are ready for deployment.

ragesoss · 2025-01-27T18:58:41Z

I've done some more testing and turned up a few things.

I'm able to reorder slides now, yay!

From the index of a module (which has content from .yml files), I click the edit icon for a slide. If I change the title and do not enter anything for the (blank) wiki_page field, I get a console error upon clicking Update:

edit_slide.jsx:69 slide Changed {slug: '', title: '', wiki_page: ''}
helpers.js:104 Uncaught TypeError: Cannot read properties of null (reading 'trim')
    at validateFields (edit_slide.jsx:83:1)
    at submitHandler (edit_slide.jsx:96:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (helpers.js:89:23)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
    at executeDispatch (react-dom.development.js:9041:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
    at processDispatchQueue (react-dom.development.js:9086:5)
    at dispatchEventsForPlugins (react-dom.development.js:9097:3)
    at eval (react-dom.development.js:9288:12)
    at batchedUpdates$1 (react-dom.development.js:26135:12)
    at batchedUpdates (react-dom.development.js:3991:12)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:3)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:5)
    at dispatchEvent (react-dom.development.js:6457:5)
    at dispatchDiscreteEvent (react-dom.development.js:6430:5)
    at HTMLDivElement.sentryWrapped (helpers.js:89:23)
validateFields @ edit_slide.jsx:83
submitHandler @ edit_slide.jsx:96
callCallback @ react-dom.development.js:4164
sentryWrapped @ helpers.js:89
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
eval @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26135
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
sentryWrapped @ helpers.js:89
helpers.js:104 Uncaught TypeError: Cannot read properties of null (reading 'trim')
    at validateFields (edit_slide.jsx:83:1)
    at submitHandler (edit_slide.jsx:96:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (helpers.js:89:23)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
    at executeDispatch (react-dom.development.js:9041:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
    at processDispatchQueue (react-dom.development.js:9086:5)
    at dispatchEventsForPlugins (react-dom.development.js:9097:3)
    at eval (react-dom.development.js:9288:12)
    at batchedUpdates$1 (react-dom.development.js:26135:12)
    at batchedUpdates (react-dom.development.js:3991:12)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:3)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:5)
    at dispatchEvent (react-dom.development.js:6457:5)
    at dispatchDiscreteEvent (react-dom.development.js:6430:5)
    at HTMLDivElement.sentryWrapped (helpers.js:89:23)
validateFields @ edit_slide.jsx:83
submitHandler @ edit_slide.jsx:96
callCallback @ react-dom.development.js:4164
sentryWrapped @ helpers.js:89
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
eval @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26135
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
sentryWrapped @ helpers.js:89
fetch.js:59

If I add a wiki_slide value to that empty field, the above error does not occur and the content is successfully loaded from the wiki, but the wiki_slide value is not persisted in the database record; it's still wiki_slide: nil.

This might be only an issue because I'm testing in a cross-config way, using wiki_education: false but with some training content loaded in wiki_education: true mode. Even so, it's likely to cause trouble. If editing is not valid for .yml-based slides, then the edit UI should not be available in that situation.

ragesoss marked this pull request as draft September 6, 2024 19:53

omChauhanDev marked this pull request as ready for review September 18, 2024 10:47

omChauhanDev marked this pull request as draft September 18, 2024 11:18

ragesoss reviewed Oct 24, 2024

View reviewed changes

app/assets/javascripts/training/components/draggableSlide.jsx Outdated Show resolved Hide resolved

omChauhanDev added 20 commits November 7, 2024 01:51

Added functionality for creating new Training Libraries

a8481d6

Added rspec test cases

3a0ea9c

Changed the validation pattern

8003ee1

Added more scoping for styles

e553d8c

Developed functionality of adding categories to training libraries

0fff88b

Added functionality of deleting category which are having no modules

105509f

Created rspec tests for adding and removing category in Training Library

53fa746

Improved: Refreshing the page, adjustedtest cases accordingly

a90e2bf

Added Functionality to Switch between Edit and View Mode for Training…

60c10b7

… Content

refactored the code: reduced backend calls

1503912

created-functionality-of-adding-new-training-module

bfdfb20

added feature of transferring modules between categories and created …

fc37eca

…its rspec test

Simplified code and removed redundancy

aa1da72

modified approach: using #react_root instead of parsing data from html

743c8fe

removed unnecessary function

4758364

developed functionality for adding slides to training module

3c22705

added test cases for adding slides to training module

30a3998

added functionality for removing training slides

56c69af

added test case for removing training slide

d337e6f

added functionality for reordering training slides

2ee8287

omChauhanDev and others added 3 commits November 7, 2024 01:51

added rspec tests for reordering of training slides

dc2b3f5

added access rights for modifying training slide

485c01a

fixed js error : null description

9125c59

omChauhanDev force-pushed the feature/ordering-slides-of-training-module branch from 596a1a4 to 9125c59 Compare November 6, 2024 20:42

added feature : automatically handle full url as wiki page

1eb2d9a

ragesoss reviewed Nov 26, 2024

View reviewed changes

Om Chauhan added 2 commits December 4, 2024 12:17

fixed: layout bug in toc

eeb502f

refactored reducer for purity and restricted Edit Mode access

7f5b45a

omChauhanDev force-pushed the feature/ordering-slides-of-training-module branch from bcf80c0 to 7f5b45a Compare December 4, 2024 08:10

Om Chauhan added 2 commits December 4, 2024 13:59

fixed remove slide js error: added null check for description

93338fe

added a way to edit an existing slide

ec37a7a

ragesoss marked this pull request as ready for review January 27, 2025 18:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Raised for testing purpose - Contains all code of GSoC 2024 #5946

Raised for testing purpose - Contains all code of GSoC 2024 #5946

omChauhanDev commented Aug 31, 2024

ragesoss commented Sep 6, 2024

ragesoss commented Sep 6, 2024

omChauhanDev commented Sep 7, 2024

omChauhanDev commented Sep 17, 2024 •

edited

Loading

omChauhanDev commented Sep 20, 2024

ragesoss commented Sep 20, 2024

omChauhanDev commented Nov 7, 2024

ragesoss commented Nov 7, 2024

ragesoss commented Nov 26, 2024 •

edited

Loading

ragesoss Nov 26, 2024

omChauhanDev Dec 4, 2024

ragesoss Nov 26, 2024

omChauhanDev Dec 4, 2024

ragesoss commented Nov 26, 2024

ragesoss commented Nov 26, 2024

omChauhanDev commented Jan 10, 2025

ragesoss commented Jan 27, 2025

Raised for testing purpose - Contains all code of GSoC 2024 #5946

Are you sure you want to change the base?

Raised for testing purpose - Contains all code of GSoC 2024 #5946

Conversation

omChauhanDev commented Aug 31, 2024

What this PR does

ragesoss commented Sep 6, 2024

ragesoss commented Sep 6, 2024

omChauhanDev commented Sep 7, 2024

omChauhanDev commented Sep 17, 2024 • edited Loading

omChauhanDev commented Sep 20, 2024

ragesoss commented Sep 20, 2024

omChauhanDev commented Nov 7, 2024

ragesoss commented Nov 7, 2024

ragesoss commented Nov 26, 2024 • edited Loading

ragesoss Nov 26, 2024

Choose a reason for hiding this comment

omChauhanDev Dec 4, 2024

Choose a reason for hiding this comment

ragesoss Nov 26, 2024

Choose a reason for hiding this comment

omChauhanDev Dec 4, 2024

Choose a reason for hiding this comment

ragesoss commented Nov 26, 2024

ragesoss commented Nov 26, 2024

omChauhanDev commented Jan 10, 2025

ragesoss commented Jan 27, 2025

omChauhanDev commented Sep 17, 2024 •

edited

Loading

ragesoss commented Nov 26, 2024 •

edited

Loading