Create GitHub Issue feature complete

Create GitHub Issue feature rebased and ready for review

Corrected typo

refactored to use component communication instead of service

removed unneccessary var

Refactored passing of data

Removed comment

Reverted to prior commit and re-incorporated new logic

Author: Whitney Shake

src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.html

@@ -25,6 +25,7 @@
     <ng-container *ngIf="item.type === CodePanelRowDatatype.CommentThread">
       <app-comment-thread
         [codePanelRowData]="item"
+        [associatedCodeLine]="getAssociatedCodeLine(item)"
         (cancelCommentActionEmitter)="handleCancelCommentActionEmitter($event)"
         (saveCommentActionEmitter)="handleSaveCommentActionEmitter($event)"
         (deleteCommentActionEmitter)="handleDeleteCommentActionEmitter($event)"

src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts

@@ -56,17 +56,17 @@ export class CodePanelComponent implements OnChanges{
         this.codePanelRowSource = undefined;
       }
     }
-
+  
     if (changes['scrollToNodeIdHashed'] && changes['scrollToNodeIdHashed'].currentValue) {
       this.scrollToNode(this.scrollToNodeIdHashed!);
     }
-
+  
     if (changes['loadFailed'] && changes['loadFailed'].currentValue) {
       this.isLoading = false;
     }
   }
 
-  onCodePanelItemClick(event: Event) {
+ onCodePanelItemClick(event: Event) {
     const target = event.target as Element;
     if (target.classList.contains('nav-token')) {
       const navigationId = target.getAttribute('data-navigate-to-id');
@@ -137,6 +137,13 @@ export class CodePanelComponent implements OnChanges{
     return "";
   }
 
+  getAssociatedCodeLine(item: CodePanelRowData): CodePanelRowData | undefined {
+    if (this.codePanelData?.nodeMetaData && this.codePanelData.nodeMetaData[item.nodeIdHashed]) {
+      return this.codePanelData.nodeMetaData[item.nodeIdHashed].codeLines[item.associatedRowPositionInGroup] || undefined;
+    }
+    return undefined;
+  }
+
   toggleNodeComments(target: Element) {
     const nodeIdHashed = target.closest('.code-line')!.getAttribute('data-node-id');
     const rowPositionInGroup = parseInt(target.closest('.code-line')!.getAttribute('data-row-position-in-group')!, 10);

src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.ts

@@ -17,6 +17,7 @@ import { UserProfile } from 'src/app/_models/userProfile';
 })
 export class CommentThreadComponent {
   @Input() codePanelRowData: CodePanelRowData | undefined = undefined;
+  @Input() associatedCodeLine: CodePanelRowData | undefined;
   @Output() cancelCommentActionEmitter : EventEmitter<any> = new EventEmitter<any>();
   @Output() saveCommentActionEmitter : EventEmitter<any> = new EventEmitter<any>();
   @Output() deleteCommentActionEmitter : EventEmitter<any> = new EventEmitter<any>();
@@ -62,34 +63,37 @@ export class CommentThreadComponent {
       items: [{
           title: "csharp",
           label: ".NET",
-          state: {
-            repo: "azure-sdk-for-net",
-            language: "C#"
-          }
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "java",
           label: "Java",
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "python",
           label: "Python",
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "c",
           label: "C",
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "javascript",
           label: "JavaScript",
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "go",
           label: "Go",
+          command: (event) => this.createGitHubIssue(event),
         },
         {
           title: "cplusplus",
           label: "C++",
+          command: (event) => this.createGitHubIssue(event),
         },
       ]
     });
@@ -101,6 +105,8 @@ export class CommentThreadComponent {
     if (changes['codePanelRowData']) {
       this.setCommentResolutionState();
     }
+    if (changes['associatedCodeLine']) {
+    }
   }
 
   setCommentResolutionState() {
@@ -137,9 +143,9 @@ export class CommentThreadComponent {
     this.allowAnyOneToResolve = !this.allowAnyOneToResolve;
   }
 
-  createGitHubIsuue(title : string) {
+  createGitHubIssue(event: MenuItemCommandEvent) {
     let repo = "";
-    switch (title) {
+    switch (event.item?.title) {
       case "csharp":
         repo = "azure-sdk-for-net";
         break;
@@ -162,6 +168,25 @@ export class CommentThreadComponent {
         repo = "azure-sdk-for-cpp";
         break;
     }
+  
+    const target = (event.originalEvent?.target as Element).closest("a") as Element;
+    const commentId = target.getAttribute("data-item-id");
+    const commentData = this.codePanelRowData?.comments?.find(comment => comment.id === commentId)?.commentText.replace(/<[^>]*>/g, '').trim();
+
+    const codeLineContent = this.associatedCodeLine 
+        ? this.associatedCodeLine.rowOfTokens
+            .filter(token => token.kind !== 'nonBreakingSpace')
+            .map(token => token.value)
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+        : '';
+
+    const nodeId: string = this.codePanelRowData?.nodeId ?? 'defaultNodeId';
+    const apiViewUrl = `${window.location.href.split("#")[0]}&nId=${encodeURIComponent(nodeId)}`;
+    const issueBody = encodeURIComponent(`\`\`\`${event.item?.title}\n${codeLineContent}\n\`\`\`\n#\n${commentData}\n#\n[Created from ApiView comment](${apiViewUrl})`);
+
+    window.open(`https://github.com/Azure/${repo}/issues/new?body=${issueBody}`, '_blank');
   }
 
   showReplyEditor(event: Event) {