Commit 0c6f228a authored by Zamir Martins's avatar Zamir Martins Committed by Kushal Pandya

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
parent 1b777000
......@@ -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"
>
......
......@@ -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();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment