Mod Center: clicking on article title opens a in new tab

[PrimeNoodles]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Was able to create a clickable title on the modCenter page where clicking on the article title would open a new tab to the the article. Clicking on the label will bring up the original inline article mod.

Related Tickets & Documents

Closes #8976

I was also able to get a clickable link on the author to work, which seemed to have no errors on my local host end. However, when trying to commit and run the test cases on singleArticle.text.jsx, it wasn't able to pass one of the test on line 73 to 77 where it renders the author's name. I have commented the code out if anyone can look and see what the problem is.

I also wasn't able to implement @jacobherrington suggestion of having a external link icon simply because I wasn't able to import the externalicon.svg, maybe it's connect to the crayon system?

QA Instructions, Screenshots, Recordings

Added tests?

• yes
• no, because they aren't needed
• no, because I need help

Added to documentation?

• docs.dev.to
• readme
• no documentation needed

[jacobherrington]

Thanks for making a PR! This looks good! 🎉

I noticed a commented out line and had a question about it.

[nickytonline]

Looks good. It just needs a test for this change.

[PrimeNoodles]

I made a test case to see if the article title matches the title given in the href tag, but I'm not sure if this would be valid enough for a test case.

[Zhao-Andy]

Thanks for the PR! Looks like you have merge conflicts now unfortunately.

@lisasy, do you think the link color should be there? Or should it be the color of regular text? I think it probably makes sense to have the link color now that the title has become a link.

Also @PrimeNoodles do you mind checking if the titles look okay with different themes?

[PrimeNoodles]

@Zhao-Andy I've updated the original post with examples of every theme, seems to be working fine, also some themes seem to have their own link color. I'm trying to fix this problem with codeclimate and the merge conflicts.

[thomasbnt]

Oh very useful thank you! 🙌🏼🌱

[jacobherrington]

I think this is a good change! Great first PR! 🎉

Thanks for tackling this @PrimeNoodles ❤️

[lisasy]

This looks good to me!

[nickytonline]

Thanks for adding some tests @PrimeNoodles. Left a suggestion.

[nickytonline]

refactor (non-blocking): You can use preact-testing-library's getByText instead of using DOM APIs directly.

question: Is the <div /> in the render necessary for the test?

<div
    data-testid="flag-user-modal"
    class="flag-user-modal-container hidden"
/>

[rhymes]

@nickytonline as the OP hasn't responded in a week and as this PR is months old, do you want to finalize this change or shall we merge as is?

[nickytonline]

We can merge it as it's non-blocking.