added schema to organization pages (#777)

Added JSON-LD schema to organization pages (SEAB-85)

cypress/integration/group2/organizations.ts

@@ -154,11 +154,12 @@ describe('Dockstore Organizations', () => {
       typeInTextArea('Description', '* fake organization description');
       cy.contains('Preview Mode').click();
       cy.contains('fake organization description');
-      cy.contains('* fake organization description').should('not.exist');
+      // narrowed search to popup window so as to not search the JSON LD containing the description, which doesn't display markdown
+      cy.get('[data-cy=updateOrganizationDescriptionWindow]').contains('* fake organization description').should('not.exist');
       cy.get('#updateOrganizationDescriptionButton').should('be.visible').should('not.be.disabled').click();
       cy.get('#updateOrganizationDescriptionButton').should('not.be.visible');
       cy.contains('fake organization description');
-      cy.contains('* fake organization description').should('not.exist');
+      cy.get('[data-cy=organizationDetails]').contains('* fake organization description').should('not.exist');
     });
   });
 

src/app/organizations/organization/organization.component.html

@@ -43,6 +43,7 @@ <h3>{{ org.displayName }}</h3>
   </div>
   <!-- Organization header -->
   <div class="container" *ngIf="!organizationStarGazersClicked && (organization$ | async) as org" fxLayout="column" fxLayoutGap="10px">
+    <ngx-json-ld [json]="schema$ | async"></ngx-json-ld>
     <mat-card fxFlex class="my-3 alert alert-info" *ngIf="org?.status === 'PENDING'">
       <mat-icon>info</mat-icon> This organization is pending approval by a Dockstore curator.
       <span *ngIf="(isAdmin$ | async) || (isCurator$ | async); else notAdminOrCurator">
@@ -111,7 +112,7 @@ <h1 [matTooltip]="org?.name">{{ org.displayName }}</h1>
     </mat-card>
 
     <!-- Tabs and description -->
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="15px" class="my-3">
+    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="15px" class="my-3" data-cy="organizationDetails">
       <div fxFlex fxGrow="1" fxFlex.lt-md="100%">
         <mat-tab-group>
           <mat-tab label="Collections">

src/app/organizations/organization/organization.component.ts

@@ -25,6 +25,8 @@ import { OrganizationQuery } from '../state/organization.query';
 import { OrganizationService } from '../state/organization.service';
 // tslint:disable-next-line: max-line-length
 import { UpdateOrganizationOrCollectionDescriptionComponent } from './update-organization-description/update-organization-description.component';
+import { OrganizationSchema, OrgSchemaService } from '../../shared/org-schema.service';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'organization',
@@ -40,11 +42,13 @@ export class OrganizationComponent implements OnInit {
   isAdmin$: Observable<boolean>;
   isCurator$: Observable<boolean>;
   gravatarUrl$: Observable<string>;
+  public schema$: Observable<OrganizationSchema>;
   approved = Organization.StatusEnum.APPROVED;
 
   constructor(
     private organizationQuery: OrganizationQuery,
     private organizationService: OrganizationService,
+    private orgschemaService: OrgSchemaService,
     private matDialog: MatDialog,
     private activatedRoute: ActivatedRoute,
     private userQuery: UserQuery
@@ -59,6 +63,7 @@ export class OrganizationComponent implements OnInit {
     this.gravatarUrl$ = this.organizationQuery.gravatarUrl$;
     this.isAdmin$ = this.userQuery.isAdmin$;
     this.isCurator$ = this.userQuery.isCurator$;
+    this.schema$ = this.organization$.pipe(map(organization => this.orgschemaService.getSchema(organization)));
   }
 
   /**

src/app/organizations/organization/update-organization-description.module.ts

@@ -7,13 +7,16 @@ import { RefreshAlertModule } from '../../shared/alert/alert.module';
 import { CustomMaterialModule } from '../../shared/modules/material.module';
 import { StarOrganizationService } from '../../shared/star-organization.service';
 import { OrganizationStarringService } from './organization-starring/organization-starring.service';
+import { NgxJsonLdModule } from '@ngx-lite/json-ld';
 // tslint:disable-next-line: max-line-length
 import { UpdateOrganizationOrCollectionDescriptionComponent } from './update-organization-description/update-organization-description.component';
+import { OrgSchemaService } from '../../shared/org-schema.service';
 
 @NgModule({
-  imports: [CommonModule, FlexLayoutModule, CustomMaterialModule, RefreshAlertModule, ReactiveFormsModule, MarkdownModule],
-  providers: [OrganizationStarringService, StarOrganizationService],
+  imports: [CommonModule, FlexLayoutModule, CustomMaterialModule, RefreshAlertModule, ReactiveFormsModule, MarkdownModule, NgxJsonLdModule],
+  providers: [OrganizationStarringService, StarOrganizationService, OrgSchemaService],
   declarations: [UpdateOrganizationOrCollectionDescriptionComponent],
-  entryComponents: [UpdateOrganizationOrCollectionDescriptionComponent]
+  entryComponents: [UpdateOrganizationOrCollectionDescriptionComponent],
+  exports: [NgxJsonLdModule]
 })
 export class UpdateOrganizationDescriptionModule {}

src/app/organizations/organization/update-organization-description/update-organization-description.component.html

@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>Edit {{ data.type }} description</h1>
-<div mat-dialog-content>
+<div mat-dialog-content data-cy="updateOrganizationDescriptionWindow">
   <app-alert></app-alert>
   <mat-tab-group mat-stretch-tabs>
     <mat-tab label="Edit Mode">

src/app/shared/org-schema.service.spec.ts

@@ -0,0 +1,33 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { Organization } from './openapi';
+import { OrgSchemaService } from './org-schema.service';
+
+describe('OrgSchemaService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [OrgSchemaService]
+    });
+  });
+
+  it('should be created', inject([OrgSchemaService], (service: OrgSchemaService) => {
+    expect(service).toBeTruthy();
+  }));
+  it('should have expected attributes', inject([OrgSchemaService], (service: OrgSchemaService) => {
+    const org: Organization = {
+      name: 'org',
+      link: 'http://org.org',
+      avatarUrl: 'http://org.org/image',
+      email: '[email protected]'
+    };
+    const schema = service.getSchema(org);
+    expect(schema.name).toEqual('org');
+    expect(schema.url).toEqual('http://org.org');
+    expect(schema.logo).toEqual('http://org.org/image');
+    expect(schema.contactPoint).toEqual([{ '@type': 'ContactPoint', email: '[email protected]' }]);
+  }));
+  it('should handle null organization', inject([OrgSchemaService], (service: OrgSchemaService) => {
+    const org: Organization = null;
+    const schema = service.getSchema(org);
+    expect(schema).toBeNull();
+  }));
+});

src/app/shared/org-schema.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Organization } from './openapi';
+
+export interface OrganizationSchema {
+  '@context': string;
+  '@type': string;
+  contactPoint?: Array<ContactPoint>;
+  description?: string;
+  location?: string;
+  logo?: string;
+  name: string;
+  url: string;
+}
+
+export interface ContactPoint {
+  // Represents the contact email displayed on the organization page
+  '@type': string;
+  email: string;
+}
+
+@Injectable()
+export class OrgSchemaService {
+  constructor() {}
+  getSchema(org: Organization): OrganizationSchema | null {
+    if (!org) {
+      return null;
+    }
+    const schema: OrganizationSchema = {
+      '@context': 'http://schema.org',
+      '@type': 'Organization',
+      name: org.name,
+      url: org.link
+    };
+    if (org.avatarUrl) {
+      schema.logo = org.avatarUrl; // image link
+    }
+    if (org.description) {
+      schema.description = org.description;
+    }
+    if (org.email) {
+      schema.contactPoint = [{ '@type': 'ContactPoint', email: org.email }];
+    }
+    if (org.location) {
+      schema.location = org.location;
+    }
+    return schema;
+  }
+}