Feature/discourse topics (#653)

* do not auto generate discourse topics

* better message on no discourse topic

* only show discourse if a topic id is set

cypress/integration/group2/workflowDetails.ts

@@ -101,7 +101,6 @@ describe('Dockstore Workflow Details', () => {
   });
 
   it('Change tab to tools', () => {
-    cy.get('.mat-tab-header-pagination-after').click();
     goToTab('Tools');
     cy.url().should('eq', Cypress.config().baseUrl + '/workflows/github.com/A/l:master?tab=tools');
   });

package.json

@@ -3,7 +3,7 @@
   "version": "2.3.0",
   "license": "Apache License 2.0",
   "config": {
-    "webservice_version": "1.7.0-alpha.1"
+    "webservice_version": "1.7.0-alpha.2"
   },
   "scripts": {
     "ng": "npx ng",

src/app/container/container.component.html

@@ -185,7 +185,15 @@ <h3>
         </mat-tab>
       </mat-tab-group>
     </div>
-    <div *ngIf="publicPage" class="mt-2" id='discourse-comments'></div>
+
+    <div *ngIf="publicPage" class="mt-2 mr-3">
+      <div *ngIf="tool?.topicId !== null else noTopicId" id='discourse-comments'></div>
+      <ng-template #noTopicId>
+        <mat-card class="alert alert-warning" role="alert">
+          <mat-icon>info</mat-icon> No Discourse topic exists for this tool.
+        </mat-card>
+      </ng-template>
+    </div>
   </div>
 
   <div class="side-block col-sm-12 col-md-3 col-lg-3 ng-scope " *ngIf="isToolPublic && tool">

src/app/container/container.component.ts

@@ -16,7 +16,7 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { MatChipInputEvent, MatDialog } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -52,7 +52,7 @@ import { EmailService } from './email.service';
   selector: 'app-container',
   templateUrl: './container.component.html',
 })
-export class ContainerComponent extends Entry {
+export class ContainerComponent extends Entry implements AfterViewInit {
   dockerPullCmd: string;
   privateOnlyRegistry: boolean;
   containerEditData: any;
@@ -98,7 +98,20 @@ export class ContainerComponent extends Entry {
     this.extendedTool$ = this.extendedDockstoreToolQuery.extendedDockstoreTool$;
 
     this._toolType = 'containers';
-    this.redirectAndCallDiscourse('/my-tools');
+    this.redirectToCanonicalURL('/my-tools');
+  }
+
+  ngAfterViewInit() {
+    if (this.publicPage) {
+      this.toolQuery.tool$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(
+        tool => {
+          if (tool && tool.topicId) {
+            this.discourseHelper(tool.topicId);
+          }
+      });
+    }
+
+    this.updateTabSelection();
   }
 
   clearState() {

src/app/shared/entry.ts

@@ -14,14 +14,13 @@
  *    limitations under the License.
  */
 import { Location } from '@angular/common';
-import { AfterViewInit, Injectable, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Injectable, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatChipInputEvent, MatTabChangeEvent } from '@angular/material';
 import { ActivatedRoute, NavigationEnd, Params, Router, RouterEvent } from '@angular/router/';
 import { TabsetComponent } from 'ngx-bootstrap';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
-import { Dockstore } from '../shared/dockstore.model';
 import { Tag } from '../shared/swagger/model/tag';
 import { WorkflowVersion } from '../shared/swagger/model/workflowVersion';
 import { TrackLoginService } from '../shared/track-login.service';
@@ -32,10 +31,10 @@ import { SessionQuery } from './session/session.query';
 import { SessionService } from './session/session.service';
 import { UrlResolverService } from './url-resolver.service';
 import { validationDescriptorPatterns, validationMessages } from './validationMessages.model';
-
+import { Dockstore } from '../shared/dockstore.model';
 
 @Injectable()
-export abstract class Entry implements OnInit, OnDestroy, AfterViewInit {
+export abstract class Entry implements OnInit, OnDestroy {
   @ViewChild('entryTabs') entryTabs: TabsetComponent;
   protected shareURL: string;
   public starGazersClicked = false;
@@ -165,16 +164,7 @@ export abstract class Entry implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  // Embed Discourse comments into page
-  ngAfterViewInit() {
-    if (this.publicPage) {
-      (function () {
-        const d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
-        d.src = (<any>window).DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
-      })();
-    }
-
+  updateTabSelection() {
     this.activatedRoute.queryParams.pipe(takeUntil(this.ngUnsubscribe)).subscribe((params: Params) => {
       const tabIndex = this.validTabs.indexOf(params['tab']);
       if (tabIndex > -1) {
@@ -353,33 +343,35 @@ export abstract class Entry implements OnInit, OnDestroy, AfterViewInit {
   }
 
   /**
-   * Deals with redirecting to canonical URL and running discourse call
+   * Deals with redirecting to canonical URL
    * @return {void}
    */
-  redirectAndCallDiscourse(myPage: string): void {
+  redirectToCanonicalURL(myPage: string): void {
     if (this.getIndexInURL(myPage) === -1) {
-      let trimmedURL = window.location.href;
-
       // Decode the URL
       this.decodeURL(this._toolType);
 
       // Get index of /containers or /workflows
       const pageIndex = this.getPageIndex();
-
-      // Get the URL for discourse
-      const indexOfLastColon = this.getIndexInURLFrom(':', pageIndex);
-      if (indexOfLastColon > 0) {
-        trimmedURL = window.location.href.substring(0, indexOfLastColon);
-      }
-
-      // Initialize discourse urls
-      (<any>window).DiscourseEmbed = {
-        discourseUrl: Dockstore.DISCOURSE_URL,
-        discourseEmbedUrl: decodeURIComponent(trimmedURL)
-      };
     }
   }
 
+  /**
+   * Creates discourse embed based on topic ID
+   * @param topicId The ID of the topic on discourse
+   */
+  discourseHelper(topicId: number): void {
+    (<any>window).DiscourseEmbed = {
+      discourseUrl: Dockstore.DISCOURSE_URL,
+      topicId: topicId
+    };
+    (function () {
+      const d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
+      d.src = (<any>window).DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
+    })();
+  }
+
   /**
    * Gets the index of /containers or /workflows from the URL
    * @return {number}

src/app/workflow/workflow.component.html

@@ -190,7 +190,15 @@ <h3>
       </mat-tab>
     </mat-tab-group>
   </div>
-  <div *ngIf="publicPage" class="mt-2" id='discourse-comments'></div>
+
+  <div *ngIf="publicPage" class="mt-2 mr-3">
+    <div *ngIf="workflow?.topicId !== null else noTopicId" id='discourse-comments'></div>
+    <ng-template #noTopicId>
+      <mat-card class="alert alert-warning" role="alert">
+        <mat-icon>info</mat-icon> No Discourse topic exists for this workflow.
+      </mat-card>
+    </ng-template>
+  </div>
 </div>
 
   <div class="side-block col-md-2 col-lg-3 ng-scope" *ngIf="isWorkflowPublic && workflow">

src/app/workflow/workflow.component.ts

@@ -16,7 +16,7 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Input } from '@angular/core';
+import { Component, Input, AfterViewInit } from '@angular/core';
 import { MatChipInputEvent, MatDialog } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -52,7 +52,7 @@ import RoleEnum = Permission.RoleEnum;
   templateUrl: './workflow.component.html',
   styleUrls: ['./workflow.component.css'],
 })
-export class WorkflowComponent extends Entry {
+export class WorkflowComponent extends Entry implements AfterViewInit {
   workflowEditData: any;
   public isRefreshing$: Observable<boolean>;
   public workflow: ExtendedWorkflow;
@@ -92,13 +92,26 @@ export class WorkflowComponent extends Entry {
       dateService, urlResolverService, activatedRoute, location, sessionService, sessionQuery, gA4GHFilesService);
     this._toolType = 'workflows';
     this.location = location;
-    this.redirectAndCallDiscourse('/my-workflows');
+    this.redirectToCanonicalURL('/my-workflows');
     this.resourcePath = this.location.prepareExternalUrl(this.location.path());
     this.extendedWorkflow$ = this.extendedWorkflowQuery.extendedWorkflow$;
     this.isRefreshing$ = this.alertQuery.showInfo$;
     this.descriptorType$ = this.workflowQuery.descriptorType$;
   }
 
+  ngAfterViewInit() {
+    if (this.publicPage) {
+      this.workflowQuery.workflow$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(
+        workflow => {
+          if (workflow && workflow.topicId) {
+            this.discourseHelper(workflow.topicId);
+          }
+      });
+    }
+
+    this.updateTabSelection();
+  }
+
   clearState() {
     this.workflowService.clearActive();
   }