Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SEAB-5820: Mastodon feed widget #1837

Merged
merged 17 commits into from
Oct 16, 2023
Merged

SEAB-5820: Mastodon feed widget #1837

merged 17 commits into from
Oct 16, 2023

Conversation

denis-yuen
Copy link
Member

@denis-yuen denis-yuen commented Aug 30, 2023

Description
This PR adds a the Mastodon Dockstore feed where the old twitter feed used to be.

Homepage:
Screenshot from 2023-10-12 11-59-44

Dashboard
Screenshot from 2023-10-12 11-59-34

Review Instructions
On qa, verify that the widget loads properly on the homepage and dashboard. Also, the new tests should pass.

Issue
https://ucsc-cgl.atlassian.net/browse/SEAB-5820

Security
If there are any concerns that require extra attention from the security team, highlight them here.

Please make sure that you've checked the following before submitting your pull request. Thanks!

  • Check that your code compiles by running npm run build
  • Ensure that the PR targets the correct branch. Check the milestone or fix version of the ticket.
  • If this is the first time you're submitting a PR or even if you just need a refresher, consider reviewing our style guide
  • Do not bypass Angular sanitization (bypassSecurityTrustHtml, etc.), or justify why you need to do so
  • If displaying markdown, use the markdown-wrapper component, which does extra sanitization
  • Do not use cookies, although this may change in the future
  • Run npm audit and ensure you are not introducing new vulnerabilities
  • Do due diligence on new 3rd party libraries, checking for CVEs
  • Don't allow user-uploaded images to be served from the Dockstore domain
  • If this PR is for a user-facing feature, create and link a documentation ticket for this feature (usually in the same milestone as the linked issue). Style points if you create a documentation PR directly and link that instead.
  • Check whether this PR disables tests. If it legitimately needs to disable a test, create a new ticket to re-enable it in a specific milestone.

@denis-yuen
Copy link
Member Author

Screenshot from 2023-08-31 16-20-48
Screenshot from 2023-08-31 16-20-39

Loads like an 8th of the time, more likely to succeed on initial load, probably an async loading thing.

@hyunnaye hyunnaye self-assigned this Oct 3, 2023
@hyunnaye hyunnaye changed the title initial hack SEAB-5820: Mastodon feed widget Oct 3, 2023
@codecov
Copy link

codecov bot commented Oct 3, 2023

Codecov Report

Attention: 67 lines in your changes are missing coverage. Please review.

Comparison is base (662ffca) 40.70% compared to head (c45b6dd) 40.41%.
Report is 3 commits behind head on develop.

Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #1837      +/-   ##
===========================================
- Coverage    40.70%   40.41%   -0.30%     
===========================================
  Files          364      364              
  Lines        11252    11261       +9     
  Branches      2866     2888      +22     
===========================================
- Hits          4580     4551      -29     
- Misses        4376     4411      +35     
- Partials      2296     2299       +3     
Files Coverage Δ
src/app/home-page/dashboard/dashboard.component.ts 52.00% <ø> (-4.67%) ⬇️
...rc/app/home-page/home-logged-out/home.component.ts 66.66% <0.00%> (-1.76%) ⬇️
src/app/shared/mastodon/mastodon.service.ts 4.34% <4.34%> (ø)

... and 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@hyunnaye hyunnaye marked this pull request as ready for review October 3, 2023 17:55
@hyunnaye hyunnaye requested review from coverbeck, svonworl and kathy-t and removed request for coverbeck and svonworl October 3, 2023 18:11
Copy link
Member Author

@denis-yuen denis-yuen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small comment, looks good in terms of screenshot.
Thanks for fixing this up!
(and thanks Charles for deciphering what happened)

class="footer-link"
fxLayoutGap="0.5rem"
>
<img class="site-icons-tab" src="../../assets/images/dockstore/mastodon.svg" alt="small Twitter logo" /><small
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt text needs update

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt text needs update

Comment still applicable.

Copy link
Contributor

@coverbeck coverbeck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I

  1. Go to home page, Mastodon feed displays
  2. Click on About
  3. Click to go back to home; Mastodon feed is not there.

I think this is best solved by creating an Angular component; see my inline comment.

The major downside is we risk getting out of date with the original source for this, but I think it's worth it.

src/app/shared/twitter.service.ts Outdated Show resolved Hide resolved
src/app/shared/twitter.service.ts Outdated Show resolved Hide resolved
src/app/shared/twitter.service.ts Outdated Show resolved Hide resolved
postDate: string;
postContent: string;
spoilerText: string;
mediaContent: any[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

had to use any[] because we are getting these data from the mastodon api

spoilerText: string;
mediaContent: any[];
previewLink: string;
poll: any[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

@hyunnaye
Copy link
Contributor

@denis-yuen tagging for rereview

@denis-yuen denis-yuen requested review from coverbeck, kathy-t and svonworl and removed request for kathy-t, svonworl and coverbeck October 10, 2023 18:54
Copy link
Contributor

@coverbeck coverbeck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First, thanks for doing all this work! You went beyond what I was expecting, which just a thin wrapper around the existing Mastodon file, as a component.

Two thoughts beyond the more specific comments I left:

  1. It would be good if there were a source code comment linking to the code you adopted your code from, in case it gets updated and we need to port it over.
  2. I feel like the UI needs a box and/or title around it. It's not obvious to me, that it's a Mastodon feed, unless you happen to notice the "See more posts at Mastodon" link at the bottom of the component.

class="footer-link"
fxLayoutGap="0.5rem"
>
<img class="site-icons-tab" src="../../assets/images/dockstore/mastodon.svg" alt="small Twitter logo" /><small
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt text needs update

Comment still applicable.

src/app/home-page/dashboard/dashboard.component.html Outdated Show resolved Hide resolved
src/app/home-page/home-logged-out/home.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.ts Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.ts Outdated Show resolved Hide resolved
src/app/shared/mastodon.service.ts Outdated Show resolved Hide resolved
src/app/shared/mastodon.service.ts Outdated Show resolved Hide resolved
@hyunnaye
Copy link
Contributor

hyunnaye commented Oct 11, 2023

First, thanks for doing all this work! You went beyond what I was expecting, which just a thin wrapper around the existing Mastodon file, as a component.

Two thoughts beyond the more specific comments I left:

  1. It would be good if there were a source code comment linking to the code you adopted your code from, in case it gets updated and we need to port it over.
  2. I feel like the UI needs a box and/or title around it. It's not obvious to me, that it's a Mastodon feed, unless you happen to notice the "See more posts at Mastodon" link at the bottom of the component.

updated the UI by wrapping it with a mat-card. New screenshots posted.

Copy link
Member Author

@denis-yuen denis-yuen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updates look good, cannot technically approve, but otherwise approved

Copy link
Contributor

@kathy-t kathy-t left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! My main question is whether we should show more than 2 posts in the mastodon timeline. Maybe 5 so the user can scroll?

src/app/shared/mastodon/mastodon.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.html Outdated Show resolved Hide resolved
src/app/home-page/home-logged-out/home.component.html Outdated Show resolved Hide resolved
src/app/shared/mastodon/mastodon.component.ts Outdated Show resolved Hide resolved
@hyunnaye hyunnaye requested a review from kathy-t October 12, 2023 17:05
@sonarcloud
Copy link

sonarcloud bot commented Oct 12, 2023

SonarCloud Quality Gate failed.    Quality Gate failed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

14.2% 14.2% Coverage
0.0% 0.0% Duplication

idea Catch issues before they fail your Quality Gate with our IDE extension sonarlint SonarLint

</div>
<mat-divider></mat-divider>
<div class="mt-footer">
<a [href]="mastodonDockstoreLink" class="btn" target="_blank" rel="nofollow noopener noreferrer">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btn class doesn't exist

@hyunnaye hyunnaye merged commit 31921a3 into develop Oct 16, 2023
17 of 20 checks passed
@hyunnaye hyunnaye deleted the feature/mastodon_stub branch October 16, 2023 14:58
@hyunnaye hyunnaye mentioned this pull request Oct 23, 2023
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants