Change protected branches selector internals

to prioritize selectedBranch and
selectedBranchNames. The latter has been recently
added for components that do not have branches
objects as a whole.

EE: true
Changelog: changed

ee/app/assets/javascripts/vue_shared/components/branches_selector/protected_branches_selector.vue

@@ -21,6 +21,11 @@ export default {
       required: false,
       default: () => [],
     },
+    selectedBranchesNames: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     isInvalid: {
       type: Boolean,
       required: false,
@@ -33,9 +38,20 @@ export default {
       initialLoading: false,
       searching: false,
       searchTerm: '',
-      selected: this.selectedBranches[0] || ALL_BRANCHES,
+      selected: null,
     };
   },
+  computed: {
+    selectedBranch() {
+      const idsOnly = this.selectedBranches.map((branch) => branch.id);
+      const selectedById = this.branches.find((branch) => idsOnly.includes(branch.id));
+      const selectedByName = this.branches.find((branch) =>
+        this.selectedBranchesNames.includes(branch.name),
+      );
+
+      return selectedById || selectedByName || this.selected || ALL_BRANCHES;
+    },
+  },
   mounted() {
     this.initialLoading = true;
     this.fetchBranches()
@@ -67,7 +83,7 @@ export default {
       this.fetchBranches(this.searchTerm);
     }, BRANCH_FETCH_DELAY),
     isSelectedBranch(id) {
-      return this.selected.id === id;
+      return this.selectedBranch.id === id;
     },
     onSelect(branch) {
       this.selected = branch;
@@ -89,7 +105,7 @@ export default {
   <gl-dropdown
     :class="{ 'is-invalid': isInvalid }"
     class="gl-w-full gl-dropdown-menu-full-width"
-    :text="selected.name"
+    :text="selectedBranch.name"
     :loading="initialLoading"
     :header-text="$options.i18n.header"
   >

ee/spec/frontend/vue_shared/components/branches_selector/protected_branches_selector_spec.js

@@ -56,25 +56,29 @@ describe('Protected Branches Selector', () => {
       expect(findDropdown().classes('is-invalid')).toBe(true);
     });
 
-    it('sets the initially selected item', async () => {
+    it.each`
+      selectedBranches             | selectedBranchesNames | branchName
+      ${[]}                        | ${['development']}    | ${'development'}
+      ${[{ id: 1, name: 'main' }]} | ${[]}                 | ${'main'}
+      ${[{ id: 1, name: 'main' }]} | ${['development']}    | ${'main'}
+    `(
+      'with selectedBranches and selectedBranchesNames set to $selectedBranches and $selectedBranchesNames the item checked is: $branchName',
+      async ({ selectedBranches, selectedBranchesNames, branchName }) => {
         createComponent({
-        selectedBranches: [
-          {
-            id: 1,
-            name: 'main',
-          },
-        ],
+          selectedBranches,
+          selectedBranchesNames,
         });
         await waitForPromises();
 
-      expect(findDropdown().props('text')).toBe('main');
+        expect(findDropdown().props('text')).toBe(branchName);
         expect(
           findDropdownItems()
-          .filter((item) => item.text() === 'main')
+            .filter((item) => item.text() === branchName)
             .at(0)
             .props('isChecked'),
         ).toBe(true);
-    });
+      },
+    );
 
     it('displays all the protected branches and all branches', async () => {
       createComponent();