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

Prevent tour step adding unnecessary break tags to the content

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-74350-master
    • Hide

      Initial setup

      1. Create a new instance without the patch.
      2. Login as admin.
      3. Navigate to Site Administration > Appearance > User tours > Import tour.
      4. Import the Usertour backup file called MDL-74350_test_311.json.
      5. Navigate to Site Administration > Appearance > User tour.
      6. Enable the Test MDL-74350 upgrade tour.

      Pre-4.0 tours

      1. Login as admin.
      2. Navigate to the User Profile page. (Profile menu -> Profile).
      3. Verify that you will see a tour called: Test upgrade content.
      4. Verify that you will see three separate paragraphs.
      5. Remember or capture the display layout.
      6. Apply the Patch and do the upgrade.
      7. Navigate to the User Profile page. (Profile menu -> Profile).
      8. Reset the tour to display if necessary (Footer help menu -> Reset user tour on this page).
      9. Verify that you will see a tour called: Test upgrade content.
      10. Verify that you will see three separate paragraphs.
      11. Verify that the tour step will be displayed the same as before the patch.

      4.0 tours

      1. Login as admin.
      2. Navigate to Site Administration > Appearance > User tours > Import tour.
      3. Imported the Usertour backup file called MDL-74350_test_40.json.
      4. Navigate to Site Administration > Appearance > User tour.
      5. Delete or disable the previous imported tour (Test MDL-74350 upgrade).
      6. Enable the Test MDL-74350 HTML Table tour.
      7. Navigate to the User Profile page. (Profile menu -> Profile).
      8. Reset the tour to display if necessary (Footer help menu -> Reset user tour on this page).
      9. Verify that you will see a tour called: HTML Table.
      10. Verify that you will see an HTML table.
      11. Turn on the Web developer tool of the browser.
      12. Inspect and find the div.modal-body element.
      13. Verify that the div.modal-body element only contain <table> tag.
      14. Verify that there is no <br> tags before the <table> tag.

      Database default value

      1. Login as admin.
      2. Navigate to Site Administration > Development > XMLDB editor.
      3. Click Load next to the admin/tool/usertours/db.
      4. Click on the admin/tool/usertours/db link.
      5. Click on the tool_usertours_steps link.
      6. Verify that you will see "int (4) not null default 0" in the contentformat row.

      Formatting text

      1. Login as admin.
      2. Navigate to Site Administrator > Plugins > Filters > Manage filters.
      3. Make sure Display emoticons as images is turned on.
      4. Navigate to User preference > Editor preferences.
      5. Set Text editor to Plain text area and Save.
      6. Navigate to Site Administration > Appearance > User tours.
      7. Create a tour called "Test format tour". Make sure the "Applies to" is set to "/user/profile.php%"
      8. Click on the Test format tour.
      9. Click the New step link.
      10. Verify you could choose and change the format of the content using the dropdown under the 'Content' textarea.
      11. Try to create tour steps with 4 formats as below (making sure to set the "Target type" to "Display in middle of page" for each one):
        • HTML format:
          • Image to verify: html_format
          • Title: HTML format
          • Content:  

            <h1>HTML format</h1>
            		 
            <span style="font-size: 24px;">Click <a href="https://moodle.com/">here</a> to go to our homepage</span>

        • Moodle auto-format:
          • Image to verify: moodle_format
          • Title: Moodle auto-format
          • Content: 

            Test Moodle auto-format. <b>Verify</b> that you can see the emoticons below
            		 
             
            		 
            :-) :-D }-]

        • Plain text format:
          • Image to verify: plain_format
          • Title: Plain text format
          • Content: 

            This is a multi-line lang string
            		 
             
            		 
            which was created to test the formatting change
            		 
             
            		 
            made in MDL-74350.

        • Markdown format:
          • Image to verify: markdown_format
          • Title: Markdown format
          • Content: 

            ***Verify this text is bold and italic***
            		 
             
            		 
            * First point
            		 
            * Second point
            		 
            * Third point

      12. Navigate to the page that matches the created tour to make the tour display.
      13. Verify that both 4 steps will be displayed the same as the "image to verify"  (see attached images for the respective formats)

      Language string

      1. Open admin/tool/usertours/lang/en/tool_usertours.php.
      2. Add below to the end of the file and save it. 

        • $string['zzz'] = 'This is a multi-line lang string
          		 
           
          		 
          which was created to test the formatting change
          		 
           
          		 
          made in MDL-74350.'

      3. Login as admin.
      4. Navigate to Site Administration > Appearance > User tours.
      5. Create a tour called "Test language string tour".
      6. Click on the Test language string tour.
      7. Click the New step link.
      8. Change the content type to Language string ID.
      9. Change Language string ID to zzz,tool_usertours
      10. Press Save changes.
      11. Navigate to the page that matches the created tour to make the tour display.
      12. Verify that the tour will be displayed the same as the "language_id_content" image.
      Show
      Initial setup Create a new instance without the patch. Login as admin. Navigate to Site Administration > Appearance > User tours > Import tour. Import the Usertour backup file called MDL-74350 _test_311.json . Navigate to Site Administration > Appearance > User tour. Enable the Test MDL-74350 upgrade tour. Pre-4.0 tours Login as admin. Navigate to the User Profile page. (Profile menu -> Profile). Verify that you will see a tour called: Test upgrade content. Verify that you will see three separate paragraphs. Remember or capture the display layout. Apply the Patch and do the upgrade. Navigate to the User Profile page. (Profile menu -> Profile). Reset the tour to display if necessary (Footer help menu -> Reset user tour on this page). Verify that you will see a tour called: Test upgrade content. Verify that you will see three separate paragraphs. Verify that the tour step will be displayed the same as before the patch. 4.0 tours Login as admin. Navigate to Site Administration > Appearance > User tours > Import tour. Imported the Usertour backup file called MDL-74350 _test_40.json . Navigate to Site Administration > Appearance > User tour. Delete or disable the previous imported tour (Test MDL-74350 upgrade). Enable the Test MDL-74350 HTML Table tour. Navigate to the User Profile page. (Profile menu -> Profile). Reset the tour to display if necessary (Footer help menu -> Reset user tour on this page). Verify that you will see a tour called: HTML Table. Verify that you will see an HTML table. Turn on the Web developer tool of the browser. Inspect and find the div.modal-body element. Verify that the div.modal-body element only contain <table> tag. Verify that there is no <br> tags before the <table> tag. Database default value Login as admin. Navigate to Site Administration > Development > XMLDB editor. Click Load next to the admin/tool/usertours/db. Click on the admin/tool/usertours/db link. Click on the tool_usertours_steps link. Verify that you will see "int (4) not null default 0" in the contentformat row. Formatting text Login as admin. Navigate to Site Administrator > Plugins > Filters > Manage filters. Make sure Display emoticons as images is turned on. Navigate to User preference > Editor preferences. Set Text editor to Plain text area and Save. Navigate to Site Administration > Appearance > User tours. Create a tour called "Test format tour". Make sure the "Applies to" is set to "/user/profile.php%" Click on the Test format tour. Click the New step link. Verify you could choose and change the format of the content using the dropdown under the 'Content' textarea. Try to create tour steps with 4 formats as below (making sure to set the "Target type" to "Display in middle of page" for each one): HTML format: Image to verify: html_format Title: HTML format Content:  <h1>HTML format</h1> <span style= "font-size: 24px;" >Click <a href= "https://moodle.com/" >here</a> to go to our homepage</span> Moodle auto-format: Image to verify: moodle_format Title: Moodle auto-format Content: Test Moodle auto-format. <b>Verify</b> that you can see the emoticons below   :-) :-D }-] Plain text format: Image to verify: plain_format Title: Plain text format Content: This is a multi-line lang string   which was created to test the formatting change   made in MDL- 74350 . Markdown format: Image to verify: markdown_format Title: Markdown format Content: ***Verify this text is bold and italic***   * First point * Second point * Third point Navigate to the page that matches the created tour to make the tour display. Verify that both 4 steps will be displayed the same as the "image to verify"  (see attached images for the respective formats) Language string Open admin/tool/usertours/lang/en/tool_usertours.php. Add below to the end of the file and save it. $string[ 'zzz' ] = 'This is a multi-line lang string   which was created to test the formatting change   made in MDL- 74350 .' Login as admin. Navigate to Site Administration > Appearance > User tours. Create a tour called "Test language string tour". Click on the Test language string tour. Click the New step link. Change the content type to Language string ID. Change Language string ID to zzz,tool_usertours Press Save changes. Navigate to the page that matches the created tour to make the tour display. Verify that the tour will be displayed the same as the "language_id_content" image.
    • 2
    • HQ Team International CIH2-221

      The tour step is replacing the linebreak with br tag here.

      Since the tour step content can be generated by HTML editor like Atto for TinyMCE now, the br tag is not a valid tag in some cases. For example: br tag inside the table tag.

      Since the external_format_text and format_text will check the suitable format and use nl2br if necessary.
      It's safe to remove this line.

      For pre-4.0 tours, we can create an upgrade step to update all the tour formats to FORMAT_MOODLE instead of FORMAT_HTML. FORMAT_MOODLE will force the format_text to use nl2br to convert the line breaks into <br> tags

       

      Steps to replicate:

      1. Login as admin.
      2. Navigate to Site Administration > Appearance > User tours.
      3. Create a new User tour.
      4. Click on create a new step for the User tour.
      5. In the step content, click on the HTML table button in the Atto editor toolbar.
      6. Try to insert the HTML table.
      7. Save the tour.
      8. Navigate to the URL that matches the created tour to make the tour display.

      Actual result:

      1. There are a lot of newlines before the HTML table when the tour is displayed.
      2. Turn on the Web developer tool and inspect the div.modal-body element, a lot of <br> tags were added before the <table> tag.

      Expected result:

      1. HTML table is aligned on top of the modal.
      2. The div.modal-body HTML content is equal to Atto editor HTML content (Click on the show HTML code in the atto editor toolbar).

        1. 4.0 tours_Screenshot.png
          4.0 tours_Screenshot.png
          91 kB
        2. Database default value_Screenshot.PNG
          Database default value_Screenshot.PNG
          6 kB
        3. Formatting Text_Screenshot.png
          Formatting Text_Screenshot.png
          91 kB
        4. html_format.png
          html_format.png
          52 kB
        5. language_id_content.png
          language_id_content.png
          51 kB
        6. Language string_Screenshot.PNG
          Language string_Screenshot.PNG
          13 kB
        7. markdown_format.png
          markdown_format.png
          47 kB
        8. MDL-74350_test_311.json
          3 kB
        9. MDL-74350_test_40.json
          2 kB
        10. moodle_format.png
          moodle_format.png
          54 kB
        11. plain_format.png
          plain_format.png
          57 kB
        12. Pre-4.0 tours_Screenshot.png
          Pre-4.0 tours_Screenshot.png
          231 kB

            huongn@moodle.com Huong Nguyen
            huongn@moodle.com Huong Nguyen
            Simey Lameze Simey Lameze
            Jake Dallimore Jake Dallimore
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 1 hour, 42 minutes
                3d 1h 42m

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