Add priority to protected branch (#32286)

## Solves

Currently for rules to re-order them you have to alter the creation
date. so you basicly have to delete and recreate them in the right
order. This is more than just inconvinient ...

## Solution

Add a new col for prioritization

## Demo WebUI Video

https://github.com/user-attachments/assets/92182a31-9705-4ac5-b6e3-9bb74108cbd1


---
*Sponsored by Kithara Software GmbH*

web_src/js/features/repo-issue-list.ts

@@ -196,7 +196,11 @@ async function initIssuePinSort() {
 
   createSortable(pinDiv, {
     group: 'shared',
-    onEnd: pinMoveEnd, // eslint-disable-line @typescript-eslint/no-misused-promises
+    onEnd: (e) => {
+      (async () => {
+        await pinMoveEnd(e);
+      })();
+    },
   });
 }
 

web_src/js/features/repo-settings-branches.test.ts

@@ -0,0 +1,71 @@
+import {beforeEach, describe, expect, test, vi} from 'vitest';
+import {initRepoBranchesSettings} from './repo-settings-branches.ts';
+import {POST} from '../modules/fetch.ts';
+import {createSortable} from '../modules/sortable.ts';
+
+vi.mock('../modules/fetch.ts', () => ({
+  POST: vi.fn(),
+}));
+
+vi.mock('../modules/sortable.ts', () => ({
+  createSortable: vi.fn(),
+}));
+
+describe('Repository Branch Settings', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="protected-branches-list" data-update-priority-url="some/repo/branches/priority">
+        <div class="flex-item tw-items-center item" data-id="1" >
+          <div class="drag-handle"></div>
+        </div>
+        <div class="flex-item tw-items-center item" data-id="2" >
+          <div class="drag-handle"></div>
+        </div>
+        <div class="flex-item tw-items-center item" data-id="3" >
+          <div class="drag-handle"></div>
+        </div>
+      </div>
+    `;
+
+    vi.clearAllMocks();
+  });
+
+  test('should initialize sortable for protected branches list', () => {
+    initRepoBranchesSettings();
+
+    expect(createSortable).toHaveBeenCalledWith(
+      document.querySelector('#protected-branches-list'),
+      expect.objectContaining({
+        handle: '.drag-handle',
+        animation: 150,
+      }),
+    );
+  });
+
+  test('should not initialize if protected branches list is not present', () => {
+    document.body.innerHTML = '';
+
+    initRepoBranchesSettings();
+
+    expect(createSortable).not.toHaveBeenCalled();
+  });
+
+  test('should post new order after sorting', async () => {
+    vi.mocked(POST).mockResolvedValue({ok: true} as Response);
+
+    // Mock createSortable to capture and execute the onEnd callback
+    vi.mocked(createSortable).mockImplementation((_el, options) => {
+      options.onEnd();
+      return {destroy: vi.fn()};
+    });
+
+    initRepoBranchesSettings();
+
+    expect(POST).toHaveBeenCalledWith(
+      'some/repo/branches/priority',
+      expect.objectContaining({
+        data: {ids: [1, 2, 3]},
+      }),
+    );
+  });
+});

web_src/js/features/repo-settings-branches.ts

@@ -0,0 +1,32 @@
+import {createSortable} from '../modules/sortable.ts';
+import {POST} from '../modules/fetch.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {queryElemChildren} from '../utils/dom.ts';
+
+export function initRepoBranchesSettings() {
+  const protectedBranchesList = document.querySelector('#protected-branches-list');
+  if (!protectedBranchesList) return;
+
+  createSortable(protectedBranchesList, {
+    handle: '.drag-handle',
+    animation: 150,
+
+    onEnd: () => {
+      (async () => {
+        const itemElems = queryElemChildren(protectedBranchesList, '.item[data-id]');
+        const itemIds = Array.from(itemElems, (el) => parseInt(el.getAttribute('data-id')));
+
+        try {
+          await POST(protectedBranchesList.getAttribute('data-update-priority-url'), {
+            data: {
+              ids: itemIds,
+            },
+          });
+        } catch (err) {
+          const errorMessage = String(err);
+          showErrorToast(`Failed to update branch protection rule priority:, error: ${errorMessage}`);
+        }
+      })();
+    },
+  });
+}

web_src/js/features/repo-settings.ts

@@ -3,6 +3,7 @@ import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.ts';
 import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
+import {initRepoBranchesSettings} from './repo-settings-branches.ts';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -154,4 +155,5 @@ export function initRepoSettings() {
   initRepoSettingsCollaboration();
   initRepoSettingsSearchTeamBox();
   initRepoSettingsGitHook();
+  initRepoBranchesSettings();
 }