Merge pull request #1108 from griffithlab/comment-fixes

Improvements to commenting

client/src/app/components/comments/comment-display/comment-display.component.html

@@ -1,3 +1,5 @@
+@let viewer = viewer$ | ngrxPush;
+
 <nz-comment
   [nzAuthor]="comment.commenter.displayName"
   [nzDatetime]="comment.createdAt | timeAgo">
@@ -10,16 +12,43 @@
       nz-comment-avatar
       nzIcon="civic:curator"></nz-avatar>
   </ng-template>
+  @if (
+    viewer &&
+    viewer.signedIn &&
+    viewer.id == comment.commenter.id &&
+    comment.id &&
+    !comment.deleted
+  ) {
+    <nz-comment-action>
+      <span
+        nz-tooltip
+        nz-popconfirm
+        nzPopconfirmPlacement="right"
+        nzPopconfirmTitle="Delete This Comment?"
+        (nzOnConfirm)="deleteComment(comment.id, viewer.mostRecentOrg?.id)"
+        nzTooltipTitle="Delete"
+        nz-icon
+        nzType="delete"></span>
+    </nz-comment-action>
+  }
   <nz-comment-content>
-    @if (comment.parsedComment.length == 0) {
+    @if (comment.deleted) {
       <span
         nz-typography
         nzType="secondary">
-        <i>No Comment Provided</i>
+        <i> This comment has been deleted. </i>
       </span>
     } @else {
-      <cvc-comment-body
-        [commentBodySegments]="comment.parsedComment"></cvc-comment-body>
+      @if (comment.parsedComment.length == 0) {
+        <span
+          nz-typography
+          nzType="secondary">
+          <i>No Comment Provided</i>
+        </span>
+      } @else {
+        <cvc-comment-body
+          [commentBodySegments]="comment.parsedComment"></cvc-comment-body>
+      }
     }
   </nz-comment-content>
 </nz-comment>

client/src/app/components/comments/comment-display/comment-display.component.ts

@@ -1,15 +1,28 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { CommentBodySegment, Maybe } from '@app/generated/civic.apollo'
+import { NetworkErrorsService } from '@app/core/services/network-errors.service'
+import { Viewer, ViewerService } from '@app/core/services/viewer/viewer.service'
+import { MutatorWithState } from '@app/core/utilities/mutation-state-wrapper'
+import {
+  CommentBodySegment,
+  DeleteCommentGQL,
+  DeleteCommentMutation,
+  DeleteCommentMutationVariables,
+  Maybe,
+} from '@app/generated/civic.apollo'
+import { Observable } from 'rxjs'
 
 export interface CommenterInterface {
+  id: number
   displayName: string
   profileImagePath: Maybe<string>
 }
 
 export interface CommentInterface {
+  id?: number
   createdAt: string | number
   parsedComment: CommentBodySegment[]
   commenter: CommenterInterface
+  deleted?: boolean
 }
 
 @Component({
@@ -19,9 +32,34 @@ export interface CommentInterface {
 export class CvcCommentDisplayComponent implements OnInit {
   @Input() comment!: CommentInterface
 
+  viewer$: Observable<Viewer>
+
+  constructor(
+    private viewerService: ViewerService,
+    private networkErrorService: NetworkErrorsService,
+    private deleteCommentGql: DeleteCommentGQL
+  ) {
+    this.viewer$ = this.viewerService.viewer$
+  }
+
   ngOnInit() {
     if (this.comment === undefined) {
       throw new Error('Must pass a comment into comment display component.')
     }
   }
+
+  deleteComment(commentId: number, orgId?: number) {
+    let mutator = new MutatorWithState<
+      DeleteCommentGQL,
+      DeleteCommentMutation,
+      DeleteCommentMutationVariables
+    >(this.networkErrorService)
+
+    let deleteCommentInput = {
+      commentId: commentId,
+      organizationId: orgId,
+    }
+
+    mutator.mutate(this.deleteCommentGql, { input: deleteCommentInput })
+  }
 }

client/src/app/components/comments/comment-display/comment-display.module.ts

@@ -6,6 +6,10 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar'
 import { CvcCommentBodyModule } from '../comment-body/comment-body.module'
 import { CvcPipesModule } from '@app/core/pipes/pipes.module'
 import { NzTypographyModule } from 'ng-zorro-antd/typography'
+import { PushPipe } from '@ngrx/component'
+import { NzIconModule } from 'ng-zorro-antd/icon'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'
 
 @NgModule({
   declarations: [CvcCommentDisplayComponent],
@@ -14,6 +18,10 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography'
     NzCommentModule,
     NzAvatarModule,
     NzTypographyModule,
+    NzIconModule,
+    NzToolTipModule,
+    NzPopconfirmModule,
+    PushPipe,
     CvcCommentBodyModule,
     CvcPipesModule,
   ],

client/src/app/components/comments/comment-display/delete-comment.query.gql

@@ -0,0 +1,7 @@
+mutation DeleteComment($input: DeleteCommentInput!) {
+  deleteComment(input: $input) {
+    comment {
+      ...commentListNode
+    }
+  }
+}

client/src/app/components/comments/comment-list/comment-list.component.html

@@ -7,7 +7,8 @@
         <nz-card
           nzTitle="Submission Comment"
           *nzSpaceItem>
-          <cvc-comment-display [comment]="creationComment"></cvc-comment-display>
+          <cvc-comment-display
+            [comment]="creationComment"></cvc-comment-display>
         </nz-card>
       </nz-space>
     </nz-col>
@@ -53,15 +54,16 @@
           </nz-list>
         </nz-card>
         <cvc-comment-add-form
-                  id="addComment"
-                  [subject]="commentable"
-                  (commentAddedEvent)="refreshList()"
-                  *nzSpaceItem></cvc-comment-add-form>
+          id="addComment"
+          [subject]="commentable"
+          (commentAddedEvent)="refreshList()"
+          *nzSpaceItem></cvc-comment-add-form>
       </nz-space>
     </nz-col>
     <nz-col nzSpan="6">
       <nz-space nzDirection="vertical">
-        <cvc-participant-list *nzSpaceItem
+        <cvc-participant-list
+          *nzSpaceItem
           listTitle="Commenters"
           [participantList]="(commenters$ | ngrxPush) || []"
           (participantSelectedEvent)="onCommenterSelected($event)">
@@ -81,7 +83,8 @@
             <span>{{ user.displayName }}</span>
           </ng-template>
         </cvc-participant-list>
-        <cvc-participant-list *nzSpaceItem
+        <cvc-participant-list
+          *nzSpaceItem
           listTitle="Mentioned Users"
           [participantList]="(mentionedUsers$ | ngrxPush) || []"
           (participantSelectedEvent)="onMentionedUserSelected($event)">
@@ -101,7 +104,8 @@
             <span>{{ user.displayName }}</span>
           </ng-template>
         </cvc-participant-list>
-        <cvc-participant-list *nzSpaceItem
+        <cvc-participant-list
+          *nzSpaceItem
           listTitle="Mentioned Roles"
           [participantList]="(mentionedRoles$ | ngrxPush) || []"
           (participantSelectedEvent)="onMentionedRoleSelected($event)">
@@ -112,7 +116,8 @@
             <span>{{ role.tag.displayName }}s</span>
           </ng-template>
         </cvc-participant-list>
-        <cvc-participant-list *nzSpaceItem
+        <cvc-participant-list
+          *nzSpaceItem
           listTitle="Mentioned Entities"
           [participantList]="(mentionedEntities$ | ngrxPush) || []"
           (participantSelectedEvent)="onMentionedEntitySelected($event)">

client/src/app/components/comments/comment-list/comment-list.query.gql

@@ -68,6 +68,8 @@ fragment commentListNode on Comment {
   title
   comment
   createdAt
+  deleted
+  deletedAt
   commenter {
     id
     username

client/src/app/core/pipes/event-verbiage-pipe.ts

@@ -74,6 +74,8 @@ export class EventVerbiagePipe implements PipeTransform {
         return 'created feature'
       case EventAction.ComplexMolecularProfileCreated:
         return 'created complex molecular profile'
+      case EventAction.CommentDeleted:
+        return 'deleted comment'
       default:
         return a
     }
@@ -127,6 +129,8 @@ export class EventVerbiagePipe implements PipeTransform {
         return 'variant created'
       case EventAction.ComplexMolecularProfileCreated:
         return 'complex molecular profile created'
+      case EventAction.CommentDeleted:
+        return 'comment deleted'
       default:
         return a
     }

client/src/app/core/pipes/icon-name-for-event-action-pipe.ts

@@ -10,6 +10,8 @@ export class IconNameForEventActionPipe implements PipeTransform {
     switch (a) {
       case EventAction.Commented:
         return 'civic-comment'
+      case EventAction.CommentDeleted:
+        return 'civic-comment'
       case EventAction.RevisionSuggested:
         return 'civic-revision'
       case EventAction.RevisionAccepted:

client/src/app/forms/components/comment-input/comment-input.form.html

@@ -12,7 +12,7 @@
           [placeholder]="(viewer && viewer.canCurate) ? 'Enter comment (minimum length 10. Use @ to mention users; # to link entities)' : 'Please sign in'"
           nzMentionTrigger
           nz-input
-          rows="4"
+          [nzAutosize]="{ minRows: 4, maxRows: 100 }"
           style="width: 100%"
           [attr.disabled]="(viewer && viewer.canCurate) ? null : true"
           [(ngModel)]="commentText"

client/src/app/forms/components/comment-input/comment-input.module.ts

@@ -13,6 +13,7 @@ import { LetDirective, PushPipe } from '@ngrx/component'
 import { CvcCommentBodyModule } from '@app/components/comments/comment-body/comment-body.module'
 import { NzSpinModule } from 'ng-zorro-antd/spin'
 import { NzMentionModule } from 'ng-zorro-antd/mention'
+import { NzInputModule } from 'ng-zorro-antd/input'
 
 @NgModule({
   declarations: [CvcCommentInputForm],
@@ -27,6 +28,7 @@ import { NzMentionModule } from 'ng-zorro-antd/mention'
     NzFormModule,
     NzSpinModule,
     NzMentionModule,
+    NzInputModule,
     FormsModule,
     CvcFormErrorsAlertModule,
     CvcFormButtonsModule,

client/src/app/generated/civic.apollo-helpers.ts

@@ -543,13 +543,15 @@ export type CoiFieldPolicy = {
 	expiresAt?: FieldPolicy<any> | FieldReadFunction<any>,
 	id?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type CommentKeySpecifier = ('comment' | 'commentable' | 'commenter' | 'createdAt' | 'creationEvent' | 'id' | 'link' | 'name' | 'parsedComment' | 'title' | CommentKeySpecifier)[];
+export type CommentKeySpecifier = ('comment' | 'commentable' | 'commenter' | 'createdAt' | 'creationEvent' | 'deleted' | 'deletedAt' | 'id' | 'link' | 'name' | 'parsedComment' | 'title' | CommentKeySpecifier)[];
 export type CommentFieldPolicy = {
 	comment?: FieldPolicy<any> | FieldReadFunction<any>,
 	commentable?: FieldPolicy<any> | FieldReadFunction<any>,
 	commenter?: FieldPolicy<any> | FieldReadFunction<any>,
 	createdAt?: FieldPolicy<any> | FieldReadFunction<any>,
 	creationEvent?: FieldPolicy<any> | FieldReadFunction<any>,
+	deleted?: FieldPolicy<any> | FieldReadFunction<any>,
+	deletedAt?: FieldPolicy<any> | FieldReadFunction<any>,
 	id?: FieldPolicy<any> | FieldReadFunction<any>,
 	link?: FieldPolicy<any> | FieldReadFunction<any>,
 	name?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -737,6 +739,24 @@ export type DataReleaseFieldPolicy = {
 	variantGroupTsv?: FieldPolicy<any> | FieldReadFunction<any>,
 	variantTsv?: FieldPolicy<any> | FieldReadFunction<any>
 };
+export type DeleteCommentActivityKeySpecifier = ('comment' | 'createdAt' | 'events' | 'id' | 'note' | 'organization' | 'parsedNote' | 'subject' | 'user' | 'verbiage' | DeleteCommentActivityKeySpecifier)[];
+export type DeleteCommentActivityFieldPolicy = {
+	comment?: FieldPolicy<any> | FieldReadFunction<any>,
+	createdAt?: FieldPolicy<any> | FieldReadFunction<any>,
+	events?: FieldPolicy<any> | FieldReadFunction<any>,
+	id?: FieldPolicy<any> | FieldReadFunction<any>,
+	note?: FieldPolicy<any> | FieldReadFunction<any>,
+	organization?: FieldPolicy<any> | FieldReadFunction<any>,
+	parsedNote?: FieldPolicy<any> | FieldReadFunction<any>,
+	subject?: FieldPolicy<any> | FieldReadFunction<any>,
+	user?: FieldPolicy<any> | FieldReadFunction<any>,
+	verbiage?: FieldPolicy<any> | FieldReadFunction<any>
+};
+export type DeleteCommentPayloadKeySpecifier = ('clientMutationId' | 'comment' | DeleteCommentPayloadKeySpecifier)[];
+export type DeleteCommentPayloadFieldPolicy = {
+	clientMutationId?: FieldPolicy<any> | FieldReadFunction<any>,
+	comment?: FieldPolicy<any> | FieldReadFunction<any>
+};
 export type DeprecateComplexMolecularProfileActivityKeySpecifier = ('createdAt' | 'events' | 'id' | 'note' | 'organization' | 'parsedNote' | 'subject' | 'user' | 'verbiage' | DeprecateComplexMolecularProfileActivityKeySpecifier)[];
 export type DeprecateComplexMolecularProfileActivityFieldPolicy = {
 	createdAt?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -1440,7 +1460,7 @@ export type MolecularProfileTextSegmentKeySpecifier = ('text' | MolecularProfile
 export type MolecularProfileTextSegmentFieldPolicy = {
 	text?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type MutationKeySpecifier = ('acceptRevisions' | 'addComment' | 'addDisease' | 'addRemoteCitation' | 'addTherapy' | 'createFeature' | 'createMolecularProfile' | 'createVariant' | 'deprecateComplexMolecularProfile' | 'deprecateFeature' | 'deprecateVariant' | 'editUser' | 'flagEntity' | 'moderateAssertion' | 'moderateEvidenceItem' | 'rejectRevisions' | 'resolveFlag' | 'submitAssertion' | 'submitEvidence' | 'submitVariantGroup' | 'subscribe' | 'suggestAssertionRevision' | 'suggestEvidenceItemRevision' | 'suggestFactorRevision' | 'suggestFactorVariantRevision' | 'suggestGeneRevision' | 'suggestGeneVariantRevision' | 'suggestMolecularProfileRevision' | 'suggestSource' | 'suggestVariantGroupRevision' | 'unsubscribe' | 'updateCoi' | 'updateNotificationStatus' | 'updateSourceSuggestionStatus' | MutationKeySpecifier)[];
+export type MutationKeySpecifier = ('acceptRevisions' | 'addComment' | 'addDisease' | 'addRemoteCitation' | 'addTherapy' | 'createFeature' | 'createMolecularProfile' | 'createVariant' | 'deleteComment' | 'deprecateComplexMolecularProfile' | 'deprecateFeature' | 'deprecateVariant' | 'editUser' | 'flagEntity' | 'moderateAssertion' | 'moderateEvidenceItem' | 'rejectRevisions' | 'resolveFlag' | 'submitAssertion' | 'submitEvidence' | 'submitVariantGroup' | 'subscribe' | 'suggestAssertionRevision' | 'suggestEvidenceItemRevision' | 'suggestFactorRevision' | 'suggestFactorVariantRevision' | 'suggestGeneRevision' | 'suggestGeneVariantRevision' | 'suggestMolecularProfileRevision' | 'suggestSource' | 'suggestVariantGroupRevision' | 'unsubscribe' | 'updateCoi' | 'updateNotificationStatus' | 'updateSourceSuggestionStatus' | MutationKeySpecifier)[];
 export type MutationFieldPolicy = {
 	acceptRevisions?: FieldPolicy<any> | FieldReadFunction<any>,
 	addComment?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -1450,6 +1470,7 @@ export type MutationFieldPolicy = {
 	createFeature?: FieldPolicy<any> | FieldReadFunction<any>,
 	createMolecularProfile?: FieldPolicy<any> | FieldReadFunction<any>,
 	createVariant?: FieldPolicy<any> | FieldReadFunction<any>,
+	deleteComment?: FieldPolicy<any> | FieldReadFunction<any>,
 	deprecateComplexMolecularProfile?: FieldPolicy<any> | FieldReadFunction<any>,
 	deprecateFeature?: FieldPolicy<any> | FieldReadFunction<any>,
 	deprecateVariant?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -2687,6 +2708,14 @@ export type StrictTypedTypePolicies = {
 		keyFields?: false | DataReleaseKeySpecifier | (() => undefined | DataReleaseKeySpecifier),
 		fields?: DataReleaseFieldPolicy,
 	},
+	DeleteCommentActivity?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | DeleteCommentActivityKeySpecifier | (() => undefined | DeleteCommentActivityKeySpecifier),
+		fields?: DeleteCommentActivityFieldPolicy,
+	},
+	DeleteCommentPayload?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | DeleteCommentPayloadKeySpecifier | (() => undefined | DeleteCommentPayloadKeySpecifier),
+		fields?: DeleteCommentPayloadFieldPolicy,
+	},
 	DeprecateComplexMolecularProfileActivity?: Omit<TypePolicy, "fields" | "keyFields"> & {
 		keyFields?: false | DeprecateComplexMolecularProfileActivityKeySpecifier | (() => undefined | DeprecateComplexMolecularProfileActivityKeySpecifier),
 		fields?: DeprecateComplexMolecularProfileActivityFieldPolicy,