SEAB-5820: Mastodon feed widget

angular.json

@@ -30,7 +30,7 @@
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/academicons/css/academicons.css",
               "src/styles.scss",
-              "src/material.scss",
+              "src/material.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
@@ -50,7 +50,7 @@
               "node_modules/ace-builds/src-min-noconflict/mode-perl.js",
               "node_modules/ace-builds/src-min-noconflict/theme-idle_fingers.js",
               "node_modules/ace-builds/src-min-noconflict/ext-searchbox.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules/bootstrap/dist/js/bootstrap.js"
             ]
           },
           "configurations": {

cypress/e2e/group1/dashboard.ts

@@ -20,6 +20,7 @@ import {
   verifyGithubLinkDashboard,
   checkFeaturedContent,
   checkNewsAndUpdates,
+  checkMastodonFeed,
 } from '../../support/commands';
 
 describe('Dockstore dashboard', () => {
@@ -67,6 +68,11 @@ describe('Dockstore dashboard', () => {
     cy.visit('/dashboard');
     checkNewsAndUpdates();
   });
+
+  it('mastodon feed should be visible', () => {
+    cy.visit('/dashboard');
+    checkMastodonFeed();
+  });
 });
 
 describe('should display added notebook correctly', () => {

cypress/e2e/immutableDatabaseTests/app-spec.ts

@@ -27,9 +27,9 @@ describe('Logged in Dockstore Home', () => {
     // expect(browser.getLocationAbsUrl()).toMatch("/");
   });
 
-  it('should have the twitter timeline', () => {
+  it('should have the mastodon timeline', () => {
     cy.scrollTo('bottom');
-    cy.get('.twitter-timeline').should('be.visible');
+    cy.get('[data-cy=mt-toot]').should('be.visible');
   });
 
   function starColumn(url: string, type: string) {
@@ -65,9 +65,9 @@ describe('Logged out Dockstore Home', () => {
       cy.get('#youtubeModal').should('not.exist');
     });
 
-    it('should have the twitter timeline', () => {
+    it('should have the mastodon timeline', () => {
       cy.scrollTo('bottom');
-      cy.get('.twitter-timeline').should('be.visible');
+      cy.get('[data-cy=mt-toot]').should('be.visible');
     });
   });
 });

cypress/e2e/smokeTests/sharedTests/basic-enduser.ts

@@ -1,6 +1,6 @@
 import { ga4ghPath } from '../../../../src/app/shared/constants';
 import { ToolDescriptor } from '../../../../src/app/shared/openapi';
-import { goToTab, checkFeaturedContent, checkNewsAndUpdates } from '../../../support/commands';
+import { goToTab, checkFeaturedContent, checkNewsAndUpdates, checkMastodonFeed } from '../../../support/commands';
 
 // Test an entry, these should be ambiguous between tools, workflows, and notebooks.
 describe('run stochastic smoke test', () => {
@@ -372,6 +372,11 @@ describe('Check extra content', () => {
     cy.visit('/');
     checkNewsAndUpdates();
   });
+
+  it('mastodon feed should be visible', () => {
+    cy.visit('/');
+    checkMastodonFeed();
+  });
 });
 
 // TODO: uncomment after tooltester logs are fixed

cypress/support/commands.ts

@@ -277,3 +277,7 @@ export function checkNewsAndUpdates() {
     cy.get('.news-entry').first().contains('a').should('have.attr', 'href');
   });
 }
+
+export function checkMastodonFeed() {
+  cy.get('[data-cy=mt-toot]').should('exist');
+}

src/app/app.module.ts

@@ -102,7 +102,6 @@ import { RefreshService } from './shared/refresh.service';
 import { ApiModule } from './shared/openapi/api.module';
 import { Configuration } from './shared/openapi/configuration';
 import { TrackLoginService } from './shared/track-login.service';
-import { TwitterService } from './shared/twitter.service';
 import { UrlResolverService } from './shared/url-resolver.service';
 import { VerifiedByService } from './shared/verified-by.service';
 import { SitemapComponent } from './sitemap/sitemap.component';
@@ -230,7 +229,6 @@ export function initializerFactory(
     RegisterCheckerWorkflowService,
     RefreshService,
     PagenumberService,
-    TwitterService,
     GA4GHV20Service,
     DescriptorLanguageService,
     UrlResolverService,

src/app/footer/footer.component.html

@@ -196,6 +196,19 @@
                 >
               </a>
             </li>
+            <li class="m-0">
+              <a
+                href="https://genomic.social/@dockstore"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="footer-link"
+                fxLayoutGap="0.5rem"
+              >
+                <img class="site-icons-tab" src="../../assets/images/dockstore/mastodon.svg" alt="small Twitter logo" /><small
+                  >@dockstore</small
+                >
+              </a>
+            </li>
             <li class="m-0">
               <a
                 href="https://www.youtube.com/channel/UCFWNYqxQvVLAuZq8rdOSE4g"

src/app/home-page/dashboard/dashboard.component.html

@@ -18,8 +18,10 @@
         <div fxFlex.md="65" fxFlex.gt-md="65" fxFlex.lt-md="100" class="py-4">
           <app-news-box></app-news-box>
         </div>
-        <div fxFlex.md="35" fxFlex.gt-md="35" fxFlex.lt-md="100">
-          <div class="my-3 twitter" #twitter></div>
+        <div class="mt-timeline">
+          <div id="mt-body" class="mt-body" role="feed">
+            <app-mastodon-timeline></app-mastodon-timeline>
+          </div>
         </div>
       </div>
       <div class="w-100">

src/app/home-page/dashboard/dashboard.component.spec.ts

@@ -4,13 +4,13 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TwitterService } from '../../shared/twitter.service';
 import { DashboardComponent } from './dashboard.component';
 import { RegisterToolService } from 'app/container/register-tool/register-tool.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ContainerService } from '../../shared/container.service';
 import { ContainerStubService } from '../../test/service-stubs';
+import { MastodonService } from '../../shared/mastodon.service';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
@@ -22,7 +22,7 @@ describe('DashboardComponent', () => {
         declarations: [DashboardComponent],
         schemas: [NO_ERRORS_SCHEMA],
         imports: [RouterTestingModule, MatButtonModule, MatIconModule, MatDialogModule, HttpClientTestingModule, MatSnackBarModule],
-        providers: [TwitterService, RegisterToolService, { provide: ContainerService, useClass: ContainerStubService }],
+        providers: [MastodonService, RegisterToolService, { provide: ContainerService, useClass: ContainerStubService }],
       }).compileComponents();
     })
   );

src/app/home-page/dashboard/dashboard.component.ts

@@ -5,7 +5,6 @@ import { RegisterToolService } from 'app/container/register-tool/register-tool.s
 import { MatDialog } from '@angular/material/dialog';
 import { RegisterToolComponent } from 'app/container/register-tool/register-tool.component';
 import { AlertService } from 'app/shared/alert/state/alert.service';
-import { TwitterService } from 'app/shared/twitter.service';
 import { Dockstore } from 'app/shared/dockstore.model';
 import { EntryType } from '../../shared/openapi';
 
@@ -17,17 +16,11 @@ import { EntryType } from '../../shared/openapi';
 export class DashboardComponent extends Base implements OnInit {
   public Dockstore = Dockstore;
   @ViewChild('twitter') twitterElement: ElementRef;
-  constructor(
-    private registerToolService: RegisterToolService,
-    private dialog: MatDialog,
-    private alertService: AlertService,
-    private twitterService: TwitterService
-  ) {
+  constructor(private registerToolService: RegisterToolService, private dialog: MatDialog, private alertService: AlertService) {
     super();
   }
 
   ngOnInit() {
-    this.loadTwitterWidget();
     this.registerToolService.isModalShown.pipe(takeUntil(this.ngUnsubscribe)).subscribe((isModalShown: boolean) => {
       if (isModalShown) {
         const dialogRef = this.dialog.open(RegisterToolComponent, { width: '500px' });
@@ -44,17 +37,5 @@ export class DashboardComponent extends Base implements OnInit {
     });
   }
 
-  private loadTwitterWidget() {
-    this.twitterService
-      .loadScript()
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(
-        () => {
-          this.twitterService.createTimeline(this.twitterElement, 2);
-        },
-        (error) => console.error(error)
-      );
-  }
-
   protected readonly EntryType = EntryType;
 }

src/app/home-page/home-logged-out/home.component.html

@@ -320,8 +320,10 @@ <h5 class="mb-0">
           <span>Discourse forum about helpful Dockstore topics.</span>
         </div>
       </div>
-      <div fxFlex.md="33" fxFlex.gt-md="33" fxFlex.lt-md="100">
-        <div class="my-3 twitter" #twitter></div>
+      <div class="mt-timeline">
+        <div id="mt-body" class="mt-body" role="feed">
+          <app-mastodon-timeline></app-mastodon-timeline>
+        </div>
       </div>
     </div>
   </div>

src/app/home-page/home-logged-out/home.component.spec.ts

@@ -20,8 +20,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { DescriptorLanguageService } from 'app/shared/entry/descriptor-language.service';
 import { CustomMaterialModule } from 'app/shared/modules/material.module';
-import { TwitterService } from '../../shared/twitter.service';
 import { HomeComponent } from './home.component';
+import { MastodonService } from '../../shared/mastodon.service';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -33,7 +33,7 @@ describe('HomeComponent', () => {
         declarations: [HomeComponent],
         schemas: [NO_ERRORS_SCHEMA],
         imports: [CustomMaterialModule, RouterTestingModule, HttpClientTestingModule, BrowserAnimationsModule],
-        providers: [TwitterService, DescriptorLanguageService],
+        providers: [MastodonService, DescriptorLanguageService],
       }).compileComponents();
     })
   );

src/app/home-page/home-logged-out/home.component.ts

@@ -22,7 +22,6 @@ import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Dockstore } from '../../shared/dockstore.model';
 import { User } from '../../shared/openapi/model/user';
-import { TwitterService } from '../../shared/twitter.service';
 import { UserQuery } from '../../shared/user/user.query';
 import { Category } from '../../shared/openapi';
 import { AllCategoriesService } from '../../categories/state/all-categories.service';
@@ -61,7 +60,6 @@ export class HomeComponent extends Base implements OnInit, AfterViewInit {
 
   constructor(
     private dialog: MatDialog,
-    private twitterService: TwitterService,
     private userQuery: UserQuery,
     private homePageService: HomePageService,
     private allCategoriesService: AllCategoriesService
@@ -77,21 +75,7 @@ export class HomeComponent extends Base implements OnInit, AfterViewInit {
     this.orgSchema = this.homePageService.hpOrgSchema;
     this.websiteSchema = this.homePageService.hpWebsiteSchema;
   }
-  ngAfterViewInit() {
-    this.loadTwitterWidget();
-  }
-
-  loadTwitterWidget() {
-    this.twitterService
-      .loadScript()
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(
-        () => {
-          this.twitterService.createTimeline(this.twitterElement, 2);
-        },
-        (err) => console.error(err)
-      );
-  }
+  ngAfterViewInit() {}
 
   goToSearch(searchValue: string) {
     this.homePageService.goToSearch(searchValue);

src/app/home-page/home-page.module.ts

@@ -35,6 +35,7 @@ import { HeaderModule } from 'app/shared/modules/header.module';
 import { NewsBoxComponent } from './widget/news-box/news-box.component';
 import { MarkdownWrapperModule } from '../shared/modules/markdown-wrapper.module';
 import { PreviewWarningModule } from '../shared/modules/preview-warning.module';
+import { MastodonComponent } from '../shared/mastodon/mastodon.component';
 
 @NgModule({
   imports: [
@@ -69,6 +70,7 @@ import { PreviewWarningModule } from '../shared/modules/preview-warning.module';
     OrganizationBoxComponent,
     StarredBoxComponent,
     NewsBoxComponent,
+    MastodonComponent,
   ],
   providers: [
     MytoolsService,