@@ -15,7 +15,7 @@ import type { AssociateIssueWithBranchCommandArgs } from '../../../../../plus/st
15
15
import { createCommandLink } from '../../../../../system/commands' ;
16
16
import { fromNow } from '../../../../../system/date' ;
17
17
import { interpolate , pluralize } from '../../../../../system/string' ;
18
- import type { BranchRef , GetOverviewBranch , OpenInGraphParams } from '../../../../home/protocol' ;
18
+ import type { BranchRef , GetOverviewBranch , OpenInGraphParams , OverviewBranchIssue } from '../../../../home/protocol' ;
19
19
import { renderBranchName } from '../../../shared/components/branch-name' ;
20
20
import type { GlCard } from '../../../shared/components/card/card' ;
21
21
import { GlElement , observe } from '../../../shared/components/element' ;
@@ -58,6 +58,25 @@ export const branchCardStyles = css`
58
58
flex-direction: column;
59
59
gap: 0.4rem;
60
60
}
61
+
62
+ .branch-item__unplug {
63
+ padding: 0.2em;
64
+ margin-block: -0.2em;
65
+ opacity: 0;
66
+ border-radius: 3px;
67
+ }
68
+
69
+ .branch-item__section:hover .branch-item__unplug,
70
+ .branch-item__section:focus-within .branch-item__unplug {
71
+ opacity: 1;
72
+ }
73
+
74
+ .branch-item__unplug:hover,
75
+ .branch-item__unplug:focus {
76
+ background-color: var(--vscode-toolbar-hoverBackground);
77
+ outline: 1px dashed var(--vscode-toolbar-hoverOutline);
78
+ }
79
+
61
80
.branch-item__section > * {
62
81
margin-block: 0;
63
82
}
@@ -499,19 +518,47 @@ export abstract class GlBranchCardBase extends GlElement {
499
518
this . toggleExpanded ( true ) ;
500
519
}
501
520
502
- protected renderIssues ( ) : TemplateResult | NothingType {
521
+ private getIssues ( ) : OverviewBranchIssue [ ] {
503
522
const { autolinks, issues } = this ;
504
- const issuesSource = issues ?. length ? issues : autolinks ;
505
- if ( ! issuesSource ?. length ) return nothing ;
523
+ const issuesMap : Record < string , OverviewBranchIssue > = { } ;
524
+ autolinks ?. map ( autolink => {
525
+ if ( autolink . type !== 'issue' ) {
526
+ return ;
527
+ }
528
+ issuesMap [ autolink . url ] = autolink ;
529
+ } ) ;
530
+ issues ?. map ( issue => {
531
+ issuesMap [ issue . url ] = issue ;
532
+ } ) ;
533
+ return Object . values ( issuesMap ) ;
534
+ }
506
535
536
+ protected renderIssues ( issues : OverviewBranchIssue [ ] ) {
537
+ if ( ! issues . length ) return nothing ;
507
538
return html `
508
- ${ issuesSource . map ( issue => {
539
+ ${ issues . map ( issue => {
509
540
return html `
510
541
< p class ="branch-item__grouping ">
511
542
< span class ="branch-item__icon ">
512
543
< issue-icon state =${ issue . state } issue-id =${ issue . id } > </ issue-icon >
513
544
</ span >
514
545
< a href =${ issue . url } class ="branch-item__name branch-item__name--secondary"> ${ issue . title } </ a >
546
+ ${ when (
547
+ issue . isAutolink && this . expanded ,
548
+ ( ) => html `
549
+ < gl-tooltip >
550
+ < a
551
+ class ="branch-item__unplug "
552
+ href =${ createCommandLink ( 'gitlens.home.unlinkIssue' , {
553
+ issue : issue ,
554
+ reference : this . branch . reference ,
555
+ } ) }
556
+ > < code-icon icon ="gl-unplug "> </ code-icon
557
+ > </ a >
558
+ < div slot ="content "> Unlink automatically linked issue</ div >
559
+ </ gl-tooltip >
560
+ ` ,
561
+ ) }
515
562
< span class ="branch-item__identifier "> #${ issue . id } </ span >
516
563
</ p >
517
564
` ;
@@ -791,7 +838,7 @@ export abstract class GlBranchCardBase extends GlElement {
791
838
}
792
839
793
840
protected renderIssuesItem ( ) : TemplateResult | NothingType {
794
- const issues = [ ... ( this . issues ?? [ ] ) , ... ( this . autolinks ?? [ ] ) ] ;
841
+ const issues = this . getIssues ( ) ;
795
842
if ( ! issues . length ) {
796
843
if ( ! this . expanded ) return nothing ;
797
844
@@ -821,7 +868,7 @@ export abstract class GlBranchCardBase extends GlElement {
821
868
822
869
return html `
823
870
< gl-work-item ?expanded =${ this . expanded } ?nested =${ ! this . branch . opened } .indicator=${ indicator } >
824
- < div class ="branch-item__section "> ${ this . renderIssues ( ) } </ div >
871
+ < div class ="branch-item__section "> ${ this . renderIssues ( issues ) } </ div >
825
872
</ gl-work-item >
826
873
` ;
827
874
}
0 commit comments