Git Merge Request #328: Implemented user card for user mention links (merged)

Merging...

Merged

Something went wrong. Please, merge manually

Checking if merge is possible...

Something went wrong. Please, merge manually

Shalitha Suranga wants to merge 2 commits from /u/shalithasuranga/allura/ to master, 2019-06-17

Fix for [#8283]

Commit Date  
[078b33] (gsoc19-c3) by Shalitha Suranga Shalitha Suranga

[#8283] Construct user card html in serverside using jinja

2019-06-15 16:16:27 Tree
[65b444] by Shalitha Suranga Shalitha Suranga

[#8283] Implement user card for user mention hyper links

2019-06-08 12:07:21 Tree

Discussion

  • Shalitha Suranga

    Hi..

    I have added the user card (Please check the attachment for the preview). For now I have added display_name, city, country with an icon, avatar image. What else we can add into the user card. User card will be attached to the links which have user-mention css class and it will use href to catch the user.

    Btw. I am getting a lot of test case failures with the latest commit from the upstream. Is there an issue?

    Please advice. Thanks

     
    • Dave Brondsema

      Dave Brondsema - 2019-06-10

      For the test failures, I have been upgrading some packages lately. If you update packages to match pip install -r requirements.txt that should help. Also you may need to run python setup.py develop in the Allura directory (with your virtualenv active). If you're still getting failures, post the details on the mailing list and we can look into it more.

      I'll take a look at this merge request soon, like tomorrow.

       
      👍
      1
  • Dave Brondsema

    Dave Brondsema - 2019-06-10

    I think including the user's webpage could be nice.

    The default content of content: 'test' shows up briefly, while its loading. Maybe make that empty, or 'Loading...'

    I think it'd be better to use User.icon_url method instead of g.gravatar, since it will also support locally uploaded profile images.

    Constructing HTML directly in JS isn't ideal, as it can be a risk for XSS injection attacks, and this code is. A templating language like Handlebars could be used instead, but we don't have any in place in Allura yet. (And handlebars can be annoyingly restrictive sometimes). I'm not finding any real templating or lightweight frontend library in Allura yet, which is too bad. The best I can find as a better recommendation is to use jquery to call .text(...) and .attr(... Here's a random example I found, to illustrate:

          $('<span>')
            .text('▼')
            .attr('tabIndex', -1)
            .attr('title', 'Show all options')
            .appendTo(wrapper)
            .addClass('ui-combobox-toggle')
            .click(openDropdown);
    

    Perhaps even better, although it changes the implementation a fair bit, would be to have the /user_card URL endpoint return HTML using a server-side jinja template. Then you get the templating & escaping from Jinja. And the JS would just cache + tooltip that html directly. I think that would be the best way to go.

    If in the future there's some need to build it in JS, like if was going to be more dynamic & changing (although I can't imagine what that would be) then we could figure that out then. We'd want to add a good JS library for that into Allura. @kentontaylor and I have been pretty interested in Svelte lately; its a very lightweight frontend framework.

     
  • Shalitha Suranga

    Hi..

    Yes I also agree, returning HTML using jinja is the best choice for now. I will update with required changes

    Thanks

     
  • Shalitha Suranga

    Hi.. @brondsem I've updated with following modifications

    • Used jinja html template for user card (Added Apache license header)
    • Changed json endpoint to html
    • Displayed website if set
    • Updated unit test cases
    • Added Loading... text to user card

    Thanks

     
  • Dave Brondsema

    Dave Brondsema - 2019-06-17
    • Status: open --> merged
     
  • Dave Brondsema

    Dave Brondsema - 2019-06-17

    Looks good now!

     
    🎉
    1

Log in to post a comment.