Scoped labels

models/issues/label.go

@@ -194,11 +194,11 @@ func (label *Label) ExclusiveScope() string {
 	if !label.Exclusive {
 		return ""
 	}
-	lastIndex := strings.LastIndex(label.Name, "/")
-	if lastIndex == -1 {
+	index := strings.Index(label.Name, "/")
+	if index == -1 || index == 0 || index == len(label.Name)-1 {
 		return ""
 	}
-	return label.Name[:lastIndex]
+	return label.Name[:index]
 }
 
 // NewLabel creates a new label

options/locale/locale_en-US.ini

@@ -1400,6 +1400,7 @@ issues.label_description = Description
 issues.label_color = Color
 issues.label_exclusive = Exclusive
 issues.label_exclusive_desc = Name the label <code>scope/item</code> to make it mutually exclusive with other <code>scope/</code> labels.
+issues.label_exclusive_warning = Any conflicting scoped labels will be removed when editing the labels of an issue or pull request.
 issues.label_count = %d labels
 issues.label_open_issues = %d open issues/pull requests
 issues.label_edit = Edit

templates/repo/issue/labels/edit_delete_label.tmpl

@@ -29,21 +29,24 @@
 			<div class="required field">
 				<label for="name">{{.locale.Tr "repo.issues.label_title"}}</label>
 				<div class="ui small input">
-					<input class="new-label-input emoji-input" name="title" placeholder="{{.locale.Tr "repo.issues.new_label_placeholder"}}" autofocus required maxlength="50">
+					<input class="label-name-input emoji-input" name="title" placeholder="{{.locale.Tr "repo.issues.new_label_placeholder"}}" autofocus required maxlength="50">
 				</div>
 			</div>
-			<div class="field">
+			<div class="field label-exclusive-input-field">
 				<div class="ui checkbox">
-					<input class="new-label-exclusive" name="exclusive" type="checkbox">
+					<input class="label-exclusive-input" name="exclusive" type="checkbox">
 					<label>{{.locale.Tr "repo.issues.label_exclusive"}}</label>
 				</div>
 				<br/>
 				<small class="desc">{{.locale.Tr "repo.issues.label_exclusive_desc" | Safe}}</small>
+				<div class="desc gt-hidden label-exclusive-warning">
+					<br/>{{.locale.Tr "repo.issues.label_exclusive_warning" | Safe}}
+				</div>
 			</div>
 			<div class="field">
 				<label for="description">{{.locale.Tr "repo.issues.label_description"}}</label>
 				<div class="ui small fluid input">
-					<input class="new-label-desc-input" name="description" placeholder="{{.locale.Tr "repo.issues.new_label_desc_placeholder"}}" maxlength="200">
+					<input class="label-desc-input" name="description" placeholder="{{.locale.Tr "repo.issues.new_label_desc_placeholder"}}" maxlength="200">
 				</div>
 			</div>
 			<div class="field color-field">

templates/repo/issue/labels/label_list.tmpl

@@ -44,10 +44,10 @@
 				<div class="three wide column">
 					{{if and (not $.PageIsOrgSettingsLabels ) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
 						<a class="ui right delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
+						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
 					{{else if $.PageIsOrgSettingsLabels}}
 						<a class="ui right delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
+						<a class="ui right edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
 					{{end}}
 				</div>
 			</div>

templates/repo/issue/labels/label_new.tmpl

@@ -8,12 +8,12 @@
 			<div class="required field">
 				<label for="name">{{.locale.Tr "repo.issues.label_title"}}</label>
 				<div class="ui small input">
-					<input class="new-label-input emoji-input" name="title" placeholder="{{.locale.Tr "repo.issues.new_label_placeholder"}}" autofocus required maxlength="50">
+					<input class="label-name-input emoji-input" name="title" placeholder="{{.locale.Tr "repo.issues.new_label_placeholder"}}" autofocus required maxlength="50">
 				</div>
 			</div>
-			<div class="field">
+			<div class="field label-exclusive-input-field">
 				<div class="ui checkbox">
-					<input class="new-label-exclusive" name="exclusive" type="checkbox">
+					<input class="label-exclusive-input" name="exclusive" type="checkbox">
 					<label>{{.locale.Tr "repo.issues.label_exclusive"}}</label>
 				</div>
 				<br/>
@@ -22,7 +22,7 @@
 			<div class="field">
 				<label for="description">{{.locale.Tr "repo.issues.label_description"}}</label>
 				<div class="ui small fluid input">
-					<input class="new-label-desc-input" name="description" placeholder="{{.locale.Tr "repo.issues.new_label_desc_placeholder"}}" maxlength="200">
+					<input class="label-desc-input" name="description" placeholder="{{.locale.Tr "repo.issues.new_label_desc_placeholder"}}" maxlength="200">
 				</div>
 			</div>
 			<div class="field color-field">

web_src/js/features/comp/LabelEdit.js

@@ -1,12 +1,36 @@
 import $ from 'jquery';
 import {initCompColorPicker} from './ColorPicker.js';
 
+function isExclusiveScopeName(name) {
+  return /.*[^/]\/[^/].*/.test(name);
+}
+
+function updateExclusiveLabelEdit(form) {
+  const nameInput = $(`${form} .label-name-input`);
+  const exclusiveField = $(`${form} .label-exclusive-input-field`);
+  const exclusiveCheckbox = $(`${form} .label-exclusive-input`);
+  const exclusiveWarning = $(`${form} .label-exclusive-warning`);
+
+  if (isExclusiveScopeName(nameInput.val())) {
+    exclusiveField.removeClass('muted');
+    if (exclusiveCheckbox.prop('checked') && exclusiveCheckbox.data('exclusive-warn')) {
+      exclusiveWarning.removeClass('gt-hidden');
+    } else {
+      exclusiveWarning.addClass('gt-hidden');
+    }
+  } else {
+    exclusiveField.addClass('muted');
+    exclusiveWarning.addClass('gt-hidden');
+  }
+}
+
 export function initCompLabelEdit(selector) {
   if (!$(selector).length) return;
   initCompColorPicker();
 
   // Create label
   $('.new-label.button').on('click', () => {
+    updateExclusiveLabelEdit('.new-label');
     $('.new-label.modal').modal({
       onApprove() {
         $('.new-label.form').trigger('submit');
@@ -19,16 +43,40 @@ export function initCompLabelEdit(selector) {
   $('.edit-label-button').on('click', function () {
     $('.edit-label .color-picker').minicolors('value', $(this).data('color'));
     $('#label-modal-id').val($(this).data('id'));
-    $('.edit-label .new-label-input').val($(this).data('title'));
-    $('.edit-label .new-label-exclusive').prop('checked', this.hasAttribute('data-exclusive'));
-    $('.edit-label .new-label-desc-input').val($(this).data('description'));
+
+    const nameInput = $('.edit-label .label-name-input');
+    nameInput.val($(this).data('title'));
+
+    const exclusiveCheckbox = $('.edit-label .label-exclusive-input');
+    exclusiveCheckbox.prop('checked', this.hasAttribute('data-exclusive'));
+    // Warn when label was previously not exclusive and used in issues
+    exclusiveCheckbox.data('exclusive-warn',
+      $(this).data('num-issues') > 0 &&
+      (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName(nameInput.val())));
+    updateExclusiveLabelEdit('.edit-label');
+
+    $('.edit-label .label-desc-input').val($(this).data('description'));
     $('.edit-label .color-picker').val($(this).data('color'));
     $('.edit-label .minicolors-swatch-color').css('background-color', $(this).data('color'));
+
     $('.edit-label.modal').modal({
       onApprove() {
         $('.edit-label.form').trigger('submit');
       }
     }).modal('show');
     return false;
   });
+
+  $('.new-label .label-name-input').on('input', () => {
+    updateExclusiveLabelEdit('.new-label');
+  });
+  $('.new-label .label-exclusive-input').on('change', () => {
+    updateExclusiveLabelEdit('.new-label');
+  });
+  $('.edit-label .label-name-input').on('input', () => {
+    updateExclusiveLabelEdit('.edit-label');
+  });
+  $('.edit-label .label-exclusive-input').on('change', () => {
+    updateExclusiveLabelEdit('.edit-label');
+  });
 }

web_src/less/_base.less

@@ -1365,6 +1365,10 @@ a.ui.card:hover,
   -webkit-text-fill-color: var(--color-black) !important;
 }
 
+.ui.form .field.muted {
+  opacity: var(--opacity-disabled);
+}
+
 .ui.loading.loading.input > i.icon svg {
   visibility: hidden;
 }