feat: Add sorting by exclusive labels (issue priority) (#33206)

Fix #2616

This PR adds a new sort option for exclusive labels.

For exclusive labels, a new property is exposed called "order", while in
the UI options are populated automatically in the `Sort` column (see
screenshot below) for each exclusive label scope.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

3 files changed, 17 insertions, 0 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 5a0579f356..37ee7f5832 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1127,6 +1127,7 @@ table th[data-sortt-desc] .svg {
 }
 
 .ui.list.flex-items-block > .item,
+.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
 .flex-items-block > .item,
 .flex-text-block {
   display: flex;
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index db44e2a778..91c1ee8607 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1604,6 +1604,12 @@ td .commit-summary {
   margin-right: 0;
 }
 
+.ui.label.scope-middle {
+  border-radius: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .ui.label.scope-right {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
diff --git a/web_src/js/features/comp/LabelEdit.ts b/web_src/js/features/comp/LabelEdit.ts
index 7bceb636bb..55351cd900 100644
--- a/web_src/js/features/comp/LabelEdit.ts
+++ b/web_src/js/features/comp/LabelEdit.ts
@@ -18,6 +18,8 @@ export function initCompLabelEdit(pageSelector: string) {
   const elExclusiveField = elModal.querySelector('.label-exclusive-input-field');
   const elExclusiveInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-input');
   const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning');
+  const elExclusiveOrderField = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input-field');
+  const elExclusiveOrderInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input');
   const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
   const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
   const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
@@ -29,6 +31,13 @@ export function initCompLabelEdit(pageSelector: string) {
     const showExclusiveWarning = hasScope && elExclusiveInput.checked && elModal.hasAttribute('data-need-warn-exclusive');
     toggleElem(elExclusiveWarning, showExclusiveWarning);
     if (!hasScope) elExclusiveInput.checked = false;
+    toggleElem(elExclusiveOrderField, elExclusiveInput.checked);
+
+    if (parseInt(elExclusiveOrderInput.value) <= 0) {
+      elExclusiveOrderInput.style.color = 'var(--color-placeholder-text) !important';
+    } else {
+      elExclusiveOrderInput.style.color = null;
+    }
   };
 
   const showLabelEditModal = (btn:HTMLElement) => {
@@ -36,6 +45,7 @@ export function initCompLabelEdit(pageSelector: string) {
     const form = elModal.querySelector<HTMLFormElement>('form');
     elLabelId.value = btn.getAttribute('data-label-id') || '';
     elNameInput.value = btn.getAttribute('data-label-name') || '';
+    elExclusiveOrderInput.value = btn.getAttribute('data-label-exclusive-order') || '0';
     elIsArchivedInput.checked = btn.getAttribute('data-label-is-archived') === 'true';
     elExclusiveInput.checked = btn.getAttribute('data-label-exclusive') === 'true';
     elDescInput.value = btn.getAttribute('data-label-description') || '';