Uploaded image for project: 'Minimal Marketable Features'
  1. Minimal Marketable Features
  2. MMF-703

More efficient UX for issue multiple locations

    Details

    • Type: MMF
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Labels:

      Description

      Context

      SonarQube currently knows how to display multiple locations for an issue - which is already good.

      But it has some limitations:

      • When 2 locations are far away from each other, it's not easy to find one from the other (no visualisation nor navigation feature)
        • It's all the more important with cross-procedural analysis
        • And will become even more critical with cross-file analysis
      • When 2 locations are on the same line, it's not easy to know which is where
      • The message for a given location is usually short/not clear - mainly because there's little place for it
      • There are 2 ways to see multiple locations on an issue:
        • On the "Issues" page, it's automatically shown when an issue is selected
        • On the permalink of a given file, the user has to click on an icon to activate the display of those multiple locations
      • If an issue's secondary location set spans the "More Code" boundary, you lose the issue context when you load the next page of code.
      • Secondary issue location message placement is dependent on the length of the longest line in the file. Unfortunately, there are files where one screen just isn't enough to contain the full width of the line.

      Now that our language analyzers provide more and more smart rules that detect tricky bugs, this must be improved to make it simple and straightforward to understand the messages provided by the language analyzers - in order to help the user know very quickly what to do to fix the bug.

      Use Cases

      Use case #1 - In the "Issues" page
      As a developer, after an analysis:

      • I check the issues that were found on the "Issues" page
      • I move from one issue to the next one to assess what has to be done
      • When I arrive on a bug, I expect to immediately see that it involves multiple locations

      Obviously, I expect to be able to do the navigation between issue location with keyboard shortcuts - the same way I do for other actions.

      Use case #2 - Elsewhere

      As a developer, I might end up on a file in the following cases:

      • Using the Global Search
      • Using the "Code" on a project
      • By drilling down on measures in a project

      In all those cases, the file is displayed with collapsed issues, and I need to expand them: we need to know how to cover this use case correctly. (// to be continued...)

      Design propositions

      Use case #1 - In the "Issues" page

      • When pressing the “Alt” key and then using the up and down arrows, users will navigate secondary locations (if there are any). There is a little disclaimer in the interface to teach that keyboard trick to users.
      • There is a bottom panel with the list of secondary locations. It expands to the full width of the code viewer, so that there is enough space to display a helpful message. If a location is outside the viewport, a little arrow indicates if the user should scroll up or down to find it.
      • When browsing secondary locations, we highlight the code that relates to the precise location in a darker shade. This will especially be useful when 2 locations are on the same line.

      Here's how it looks when browsing ordered secondary locations using alt+up/down

      Here's how it looks for unordered secondary locations

      When opening the rules panel, the locations panel will stick to the bottom

      Use case #2 - Elsewhere

      • Right after clicking on the issue icon in the margin of the code viewer, the issue box should appear selected, and the secondary locations are shown in the code and in the bottom panel. There is no little icon anymore to show the locations, they are shown instantly as you display the issue box. Then users have the same keyboard navigation features than in the issues page.

      The perfect solution requires MMF-763 to be implemented after.

        Attachments

        1. Alternative_panel_position_01.png
          Alternative_panel_position_01.png
          190 kB
        2. Alternative_panel_position_02.png
          Alternative_panel_position_02.png
          184 kB
        3. Alternative_panel_position_03.png
          Alternative_panel_position_03.png
          191 kB
        4. Alternative_panel_position_04.png
          Alternative_panel_position_04.png
          194 kB
        5. File_Viewer_01.png
          File_Viewer_01.png
          204 kB
        6. File_Viewer_02.png
          File_Viewer_02.png
          204 kB
        7. File_Viewer_03.png
          File_Viewer_03.png
          205 kB
        8. File_Viewer_04.png
          File_Viewer_04.png
          206 kB
        9. Multiple_Unordered_Locations _01.png
          Multiple_Unordered_Locations _01.png
          210 kB
        10. Multiple_Unordered_Locations _02.png
          Multiple_Unordered_Locations _02.png
          210 kB
        11. Multiple_Unordered_Locations _03.png
          Multiple_Unordered_Locations _03.png
          209 kB
        12. Ordered_Locations_01.png
          Ordered_Locations_01.png
          190 kB
        13. Ordered_Locations_02.png
          Ordered_Locations_02.png
          191 kB
        14. Ordered_Locations_03.png
          Ordered_Locations_03.png
          191 kB
        15. Ordered_Locations_04.png
          Ordered_Locations_04.png
          191 kB
        16. Ordered_Locations_05.png
          Ordered_Locations_05.png
          203 kB
        17. Ordered_Locations_06.png
          Ordered_Locations_06.png
          158 kB
        18. V2_File_Viewer_01.png
          V2_File_Viewer_01.png
          204 kB
        19. V2_File_Viewer_02.png
          V2_File_Viewer_02.png
          204 kB
        20. V2_File_Viewer_03.png
          V2_File_Viewer_03.png
          205 kB
        21. V2_File_Viewer_04.png
          V2_File_Viewer_04.png
          206 kB
        22. V2_Multiple_Unordered_Locations _01.png
          V2_Multiple_Unordered_Locations _01.png
          206 kB
        23. V2_Multiple_Unordered_Locations _02.png
          V2_Multiple_Unordered_Locations _02.png
          206 kB
        24. V2_Multiple_Unordered_Locations _03.png
          V2_Multiple_Unordered_Locations _03.png
          206 kB
        25. V2_Ordered_Locations_01.png
          V2_Ordered_Locations_01.png
          190 kB
        26. V2_Ordered_Locations_02.png
          V2_Ordered_Locations_02.png
          189 kB
        27. V2_Ordered_Locations_03.png
          V2_Ordered_Locations_03.png
          190 kB
        28. V2_Ordered_Locations_04.png
          V2_Ordered_Locations_04.png
          190 kB
        29. V2_Ordered_Locations_05.png
          V2_Ordered_Locations_05.png
          200 kB
        30. V2_Ordered_Locations_06.png
          V2_Ordered_Locations_06.png
          175 kB

          Issue Links

            Activity

              People

              • Assignee:
                fabrice.bellingard Fabrice Bellingard
                Reporter:
                fabrice.bellingard Fabrice Bellingard
              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: