Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-65539

Keyboard drag and drop ordering of sections in courses is broken and confusing

XMLWordPrintable

    • MOODLE_36_STABLE
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • Hide

      These test should be run against the following themes:

      1. Boost
      2. Classic (Moodle 3.7 and above)

      They should also be run in as many supported browsers as possible.

      Setup

      1. Create a course (Topics course) using the Topics format that has the following structure:
        • Topic 1
          • Activity 1
          • Activity 2
        • Topic 2
          • Activity 3
        • Custom name
          • Activity 4
        • Topic 4
          • Activity 5
      2. Create a course (Weekly course) using the Weekly format and with a start date of 1st November 2018 that has the following structure:
        • 1 November - 7 November
          • Activity 1
          • Activity 2
        • 8 November - 14 November
          • Activity 3
        • Custom name
          • Activity 4
        • 22 November - 28 November
          • Activity 5

      Topics course format section ordering (Keyboard)

      1. Turn on editing in Topics course
      2. Click in the drag handle for Topic 2
      3. Verify that all the Topics are listed in the drop menu in the same order as they are on the course page
      4. Click on To item "Custom name" in the drop menu
      5. Verify that the new structure is:
        • Topic 1
          • Activity 1
          • Activity 2
        • Custom name
          • Activity 4
        • Topic 3
          • Activity 3
        • Topic 4
          • Activity 5
      6. Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed
      7. Verify that if you hover over the drag handle for the Topic 3 topic that Move section 3 is displayed
      8. Click in the drag handle for Topic 3
      9. Verify that the title of the drag menu is Move Topic 3
      10. Verify that all the Topics are listed in the drop menu in the same order as they are on the course page
      11. Click on To item "Custom name" in the drop menu
      12. Verify that the new structure is:
        • Topic 1
          • Activity 1
          • Activity 2
        • Topic 2
          • Activity 3
        • Custom name
          • Activity 4
        • Topic 4
          • Activity 5
      13. Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed
      14. Verify that if you hover over the drag handle for the Topic 2 topic that Move section 2 is displayed
      15. Refresh the browser and verify that the order of sections is unchanged

      Topics course format section ordering (Mouse)

      1. Drag Topic 2 onto Custom name while dragging verify you can see the contents of Topic 2
      2. Verify that the new structure is:
        • Topic 1
          • Activity 1
          • Activity 2
        • Custom name
          • Activity 4
        • Topic 3
          • Activity 3
        • Topic 4
          • Activity 5
      3. Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed
      4. Verify that if you hover over the drag handle for the Topic 3 topic that Move section 3 is displayed
      5. Drag Topic 3 onto Custom name
      6. Verify that the new structure is:
        • Topic 1
          • Activity 1
          • Activity 2
        • Topic 2
          • Activity 3
        • Custom name
          • Activity 4
        • Topic 4
          • Activity 5
      7. Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed
      8. Verify that if you hover over the drag handle for the Topic 2 topic that Move section 2 is displayed
      9. Refresh the browser and verify that the order of sections is unchanged

      Activity ordering

      1. Click in the drag handle for Activity 2
      2. Verify that the drop menu looks has the following structure of links (type will be the type of activity for example forum):
        • To the top of section "General"
        • After resource "Announcements Forum"
        • To the top of section "Topic 1"
        • To the top of section "Topic 2"
        • After resource "Activity 3 type"
        • To the top of section "Custom name"
        • After resource "Activity 4 type"
        • To the top of section "Topic 4"
        • After resource "Activity 5 type"
      3. Click on After resource "Activity 5 type" in the drop menu
      4. Verify that the new structure is:
        • Topic 1
          • Activity 1
        • Topic 2
          • Activity 3
        • Custom name
          • Activity 4
        • Topic 4
          • Activity 5
          • Activity 2
      5. Drag Activity 5 to be above Activity 1
      6. Verify that the new structure is:
        • Topic 1
          • Activity 5
          • Activity 1
        • Topic 2
          • Activity 3
        • Custom name
          • Activity 4
        • Topic 4
          • Activity 2
      7. Refresh the browser and verify that the order of activities is unchanged

      Weekly course format section ordering (Keyboard)

      1. Turn on editing in Weekly course
      2. Click in the drag handle for 8 November - 14 November
      3. Verify that all the Topics are listed in the drop menu in the same order as they are on the course page
      4. Click on To item "Custom name" in the drop menu
      5. Verify that the new structure is:
        • 1 November - 7 November
          • Activity 1
          • Activity 2
        • Custom name
          • Activity 4
        • 15 November - 21 November
          • Activity 3
        • 22 November - 28 November
          • Activity 5
      6. Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed
      7. Verify that if you hover over the drag handle for the 15 November - 21 November topic that Move section 3 is displayed
      8. Click in the drag handle for 15 November - 21 November
      9. Verify that the title of the drag menu is Move 15 November - 21 November
      10. Verify that all the Topics are listed in the drop menu in the same order as they are on the course page
      11. Click on To item "Custom name" in the drop menu
      12. Verify that the new structure is:
        • 1 November - 7 November
          • Activity 1
          • Activity 2
        • 8 November - 14 November
          • Activity 3
        • Custom name
          • Activity 4
        • 22 November - 28 November
          • Activity 5
      13. Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed
      14. Verify that if you hover over the drag handle for the 8 November - 14 November topic that Move section 2 is displayed
      15. Refresh the browser and verify that the order of sections is unchanged

      Weekly course format section ordering (Mouse)

      1. Drag 8 November - 14 November onto Custom name while dragging verify you can see the contents of 1 November - 7 November
      2. Verify that the new structure is:
        • 1 November - 7 November
          • Activity 1
          • Activity 2
        • Custom name
          • Activity 4
        • 15 November - 21 November
          • Activity 3
        • 22 November - 28 November
          • Activity 5
      3. Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed
      4. Verify that if you hover over the drag handle for the 15 November - 21 November topic that Move section 3 is displayed
      5. Drag 8 November - 14 November onto Custom name
      6. Verify that the new structure is:
        • 1 November - 7 November
          • Activity 1
          • Activity 2
        • 8 November - 14 November
          • Activity 3
        • Custom name
          • Activity 4
        • 22 November - 28 November
          • Activity 5
      7. Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed
      8. Verify that if you hover over the drag handle for the 8 November - 14 November topic that Move section 2 is displayed
      9. Refresh the browser and verify that the order of sections is unchanged

      Block ordering

      1. Go to your Dashboard page
      2. Delete all blocks in the Right block region
      3. Add three HTML blocks at the Top of the Right column in the following order:
        • HTML block title and content: Block 1
        • HTML block title and content: Block 2
        • HTML block title and content: Block 3
      4. Click on the drag icon for Block 2
      5. Click on To item "Block 1" in the drop menu
      6. Verify that the order of the blocks is now:
        • Block 2
        • Block 1
        • Block 3
      7. Click on the drag icon for Block 1
      8. Click on To item "Block 3" in the drop menu
      9. Verify that the order of the blocks is now:
        • Block 2
        • Block 3
        • Block 1
      10. Refresh the page and verify that the order of blocks remains the same
      Show
      These test should be run against the following themes: Boost Classic (Moodle 3.7 and above) They should also be run in as many supported browsers as possible. Setup Create a course ( Topics course ) using the Topics format that has the following structure: Topic 1 Activity 1 Activity 2 Topic 2 Activity 3 Custom name Activity 4 Topic 4 Activity 5 Create a course ( Weekly course ) using the Weekly format and with a start date of 1st November 2018 that has the following structure: 1 November - 7 November Activity 1 Activity 2 8 November - 14 November Activity 3 Custom name Activity 4 22 November - 28 November Activity 5 Topics course format section ordering (Keyboard) Turn on editing in Topics course Click in the drag handle for Topic 2 Verify that all the Topics are listed in the drop menu in the same order as they are on the course page Click on To item "Custom name" in the drop menu Verify that the new structure is: Topic 1 Activity 1 Activity 2 Custom name Activity 4 Topic 3 Activity 3 Topic 4 Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed Verify that if you hover over the drag handle for the Topic 3 topic that Move section 3 is displayed Click in the drag handle for Topic 3 Verify that the title of the drag menu is Move Topic 3 Verify that all the Topics are listed in the drop menu in the same order as they are on the course page Click on To item "Custom name" in the drop menu Verify that the new structure is: Topic 1 Activity 1 Activity 2 Topic 2 Activity 3 Custom name Activity 4 Topic 4 Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed Verify that if you hover over the drag handle for the Topic 2 topic that Move section 2 is displayed Refresh the browser and verify that the order of sections is unchanged Topics course format section ordering (Mouse) Drag Topic 2 onto Custom name while dragging verify you can see the contents of Topic 2 Verify that the new structure is: Topic 1 Activity 1 Activity 2 Custom name Activity 4 Topic 3 Activity 3 Topic 4 Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed Verify that if you hover over the drag handle for the Topic 3 topic that Move section 3 is displayed Drag Topic 3  onto Custom name Verify that the new structure is: Topic 1 Activity 1 Activity 2 Topic 2 Activity 3 Custom name Activity 4 Topic 4 Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed Verify that if you hover over the drag handle for the Topic 2 topic that Move section 2 is displayed Refresh the browser and verify that the order of sections is unchanged Activity ordering Click in the drag handle for Activity 2 Verify that the drop menu looks has the following structure of links ( type will be the type of activity for example forum): To the top of section "General" After resource "Announcements Forum" To the top of section "Topic 1" To the top of section "Topic 2" After resource "Activity 3 type " To the top of section "Custom name" After resource "Activity 4 type " To the top of section "Topic 4" After resource "Activity 5 type " Click on After resource "Activity 5 type" in the drop menu Verify that the new structure is: Topic 1 Activity 1 Topic 2 Activity 3 Custom name Activity 4 Topic 4 Activity 5 Activity 2 Drag Activity 5 to be above Activity 1 Verify that the new structure is: Topic 1 Activity 5 Activity 1 Topic 2 Activity 3 Custom name Activity 4 Topic 4 Activity 2 Refresh the browser and verify that the order of activities is unchanged Weekly course format section ordering (Keyboard) Turn on editing in Weekly course Click in the drag handle for 8 November - 14 November Verify that all the Topics are listed in the drop menu in the same order as they are on the course page Click on To item "Custom name" in the drop menu Verify that the new structure is: 1 November - 7 November Activity 1 Activity 2 Custom name Activity 4 15 November - 21 November Activity 3 22 November - 28 November Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed Verify that if you hover over the drag handle for the 15 November - 21 November topic that Move section 3 is displayed Click in the drag handle for 15 November - 21 November Verify that the title of the drag menu is Move 15 November - 21 November Verify that all the Topics are listed in the drop menu in the same order as they are on the course page Click on To item "Custom name" in the drop menu Verify that the new structure is: 1 November - 7 November Activity 1 Activity 2 8 November - 14 November Activity 3 Custom name Activity 4 22 November - 28 November Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed Verify that if you hover over the drag handle for the 8 November - 14 November topic that Move section 2 is displayed Refresh the browser and verify that the order of sections is unchanged Weekly course format section ordering (Mouse) Drag 8 November - 14 November  onto Custom name while dragging verify you can see the contents of 1 November - 7 November Verify that the new structure is: 1 November - 7 November Activity 1 Activity 2 Custom name Activity 4 15 November - 21 November Activity 3 22 November - 28 November Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 2 is displayed Verify that if you hover over the drag handle for the 15 November - 21 November topic that Move section 3 is displayed Drag 8 November - 14 November onto Custom name Verify that the new structure is: 1 November - 7 November Activity 1 Activity 2 8 November - 14 November Activity 3 Custom name Activity 4 22 November - 28 November Activity 5 Verify that if you hover over the drag handle for the Custom name topic that Move section 3 is displayed Verify that if you hover over the drag handle for the 8 November - 14 November topic that Move section 2 is displayed Refresh the browser and verify that the order of sections is unchanged Block ordering Go to your Dashboard page Delete all blocks in the Right block region Add three HTML blocks at the Top of the Right column in the following order: HTML block title and content: Block 1 HTML block title and content: Block 2 HTML block title and content: Block 3 Click on the drag icon for Block 2 Click on To item "Block 1" in the drop menu Verify that the order of the blocks is now: Block 2 Block 1 Block 3 Click on the drag icon for Block 1 Click on To item "Block 3" in the drop menu Verify that the order of the blocks is now: Block 2 Block 3 Block 1 Refresh the page and verify that the order of blocks remains the same

      For example if you have a course with the following structure (topics format, with no custom section names):

      • Topic 1
        • Activity 1
        • Activity 2
        • Activity 3
      • Topic 2
        • Activity 4
      • Topic 3
        • Activity 5
      • Topic 4

      If you click on the drag and drop handle for Topic 2 you will only be able to move to Topic 3 or Topic 4 and not Topic 1

      If you click on the drag and drop handle for Topic 3 you will only see items for Topic 1 and Topic 4

      In all the above cases it will move the current item below the names section, so not displaying the section above it make sense, however it does mean that it is impossible to move a section to the top of the page in a single action using it.

      I would expect either:

      1. The To item text is changed to Below item and a new To the top option is included for all but the top item - this is how activities work.
      2. All items other than the clicked one are displayed and the action changes based on the direction of movement, i.e. if I select the Topic 2 drag handler and select Topic 1 it would appear above it, while if I clicked on Topic 3 it would appear below it. - This seems to be how the documentation in code implies it should work, although that does not match what it is doing.

      Additionally if stops working after one drag and drop action has been taken, the list does not appear to be updated correctly.

      1. Select the Drag and drop handle for Topic 1 and move it to Topic 4. The items move as expected, and the topic names are updated in the visual display
      2. Select the Drag and drop handle for current Topic 1 and the new drop menu is non-nonsensical. All the items are still using their original names.
      3. If I now select the Topic 1 entry the item is moved to the bottom of the course and given a title of undefined and the items that should now be Topic 3 is still labelled as Topic 4 (if refreshed at this point the sections are labelled correctly and in the correct order)

      After this further moves without refreshing can result in even more strange behaviour and the results on refreshing the page are unpredictable.

      Similar results can be obtained in the Weeks course format. It does not seem to matter if the theme is Boost or Clean

        1. activity-ordering.png
          activity-ordering.png
          44 kB
        2. Activity Ordering Boost.png
          Activity Ordering Boost.png
          84 kB
        3. Activity Ordering Classic.png
          Activity Ordering Classic.png
          74 kB
        4. Block ordering.png
          Block ordering.png
          45 kB
        5. broken-drop-menu.png
          broken-drop-menu.png
          8 kB
        6. section-after-a-keyboard-drag-and-drop.png
          section-after-a-keyboard-drag-and-drop.png
          78 kB
        7. Topics course format section ordering (Keyboard) - Boost.png
          Topics course format section ordering (Keyboard) - Boost.png
          95 kB
        8. Topics course format section ordering (Keyboard) - Classic.png
          Topics course format section ordering (Keyboard) - Classic.png
          94 kB
        9. Topics course format section ordering (Mouse) - Boost.png
          Topics course format section ordering (Mouse) - Boost.png
          83 kB
        10. Topics course format section ordering (Mouse) - Classic.png
          Topics course format section ordering (Mouse) - Classic.png
          86 kB
        11. Weekly course format section ordering (Keyboard) Boost.png
          Weekly course format section ordering (Keyboard) Boost.png
          130 kB
        12. Weekly course format section ordering (Keyboard) - classic.png
          Weekly course format section ordering (Keyboard) - classic.png
          128 kB
        13. Weekly course format section ordering (Mouse) - Boost.png
          Weekly course format section ordering (Mouse) - Boost.png
          81 kB
        14. Weekly course format section ordering (Mouse) Classic.png
          Weekly course format section ordering (Mouse) Classic.png
          81 kB

            nmagill Neill Magill
            nmagill Neill Magill
            Victor Déniz Falcón Victor Déniz Falcón
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 6 hours, 33 minutes
                1d 6h 33m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.