From be384d590a15e221ae052a31d50a2483a93dae5e Mon Sep 17 00:00:00 2001 From: Chaoyue Zhao Date: Fri, 22 Nov 2024 18:48:52 -0500 Subject: [PATCH 1/6] Add additional fields and optional slot to commit changes modal Changelog: added --- .../components/blob_button_group.vue | 3 +- .../components/commit_changes_modal.vue | 44 ++++++++-- locale/gitlab.pot | 3 + .../components/blob_button_group_spec.js | 2 +- .../components/commit_changes_modal_spec.js | 85 +++++++++++++++---- 5 files changed, 112 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue index 3aec35ee96000b..49716210870f28 100644 --- a/app/assets/javascripts/repository/components/blob_button_group.vue +++ b/app/assets/javascripts/repository/components/blob_button_group.vue @@ -144,7 +144,8 @@ export default { +

@@ -260,9 +283,9 @@ export default {

-
- - +
+ + +
diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 17f998b956795c..2ba93322e33507 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -64366,6 +64366,9 @@ msgstr "" msgid "Your browser doesn't support WebAuthn. Please use a supported browser, e.g. Chrome (67+) or Firefox (60+)." msgstr "" +msgid "Your changes can be committed to %{branchName} because a merge request is open." +msgstr "" + msgid "Your changes can be committed to %{branch_name} because a merge request is open." msgstr "" diff --git a/spec/frontend/repository/components/blob_button_group_spec.js b/spec/frontend/repository/components/blob_button_group_spec.js index 42aed016f40f1b..2deed06dfd765b 100644 --- a/spec/frontend/repository/components/blob_button_group_spec.js +++ b/spec/frontend/repository/components/blob_button_group_spec.js @@ -155,7 +155,7 @@ describe('BlobButtonGroup component', () => { targetBranch, originalBranch, canPushCode, - deletePath, + actionPath: deletePath, emptyRepo, isUsingLfs, }); diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js index d95c4df434c374..df06fd755fcc07 100644 --- a/spec/frontend/repository/components/commit_changes_modal_spec.js +++ b/spec/frontend/repository/components/commit_changes_modal_spec.js @@ -19,7 +19,8 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); const initialProps = { modalId: 'Delete-blob', - deletePath: 'some/path', + action: 'delete', + actionPath: 'some/path', commitMessage: 'Delete File', targetBranch: 'some-target-branch', originalBranch: 'main', @@ -35,7 +36,7 @@ describe('CommitChangesModal', () => { const createComponentFactory = (mountFn) => - (props = {}) => { + ({ props, slots } = {}) => { wrapper = mountFn(CommitChangesModal, { propsData: { ...initialProps, @@ -49,6 +50,7 @@ describe('CommitChangesModal', () => { GlSprintf, GlModal: stubComponent(GlModal, { template: RENDER_ALL_SLOTS_TEMPLATE }), }, + slots, }); }; @@ -56,6 +58,7 @@ describe('CommitChangesModal', () => { const createFullComponent = createComponentFactory(mount); const findModal = () => wrapper.findComponent(GlModal); + const findSlot = () => wrapper.findByTestId('test-slot'); const findForm = () => findModal().findComponent(GlForm); const findCommitTextarea = () => findForm().findComponent(GlFormTextarea); const findFormRadioGroup = () => findForm().findComponent(GlFormRadioGroup); @@ -65,6 +68,8 @@ describe('CommitChangesModal', () => { const findCreateMrCheckbox = () => findForm().findComponent(GlFormCheckbox); const findTargetInput = () => findForm().findComponent(GlFormInput); const findCommitHint = () => wrapper.find('[data-testid="hint"]'); + const findBranchInForkMessage = () => + wrapper.findByText('GitLab will create a branch in your fork and start a merge request.'); const fillForm = async (inputValue = {}) => { const { targetText, commitText } = inputValue; @@ -84,7 +89,7 @@ describe('CommitChangesModal', () => { linkEnd: '', }); - beforeEach(() => createComponent({ isUsingLfs: true })); + beforeEach(() => createComponent({ props: { isUsingLfs: true } })); it('renders a modal containing LFS text', () => { expect(findModal().props('title')).toBe(lfsTitleText); @@ -102,24 +107,36 @@ describe('CommitChangesModal', () => { }); }); - it('renders Modal component', () => { - createComponent(); + describe('renders modal component', () => { + it('renders with correct props', () => { + createComponent(); - expect(findModal().props()).toMatchObject({ - size: 'md', - actionPrimary: { - text: 'Commit changes', - }, - actionCancel: { - text: 'Cancel', - }, + expect(findModal().props()).toMatchObject({ + size: 'md', + actionPrimary: { + text: 'Commit changes', + }, + actionCancel: { + text: 'Cancel', + }, + }); + expect(findSlot().exists()).toBe(false); + }); + + it('renders the slot when a slot is provided', () => { + createComponent({ + slots: { + default: '
test slot
', + }, + }); + expect(findSlot().text()).toBe('test slot'); }); }); describe('form', () => { it('gets passed the path for action attribute', () => { createComponent(); - expect(findForm().attributes('action')).toBe(initialProps.deletePath); + expect(findForm().attributes('action')).toBe(initialProps.actionPath); }); it('shows the correct form fields when commit to current branch', () => { @@ -142,7 +159,7 @@ describe('CommitChangesModal', () => { }); it('shows the correct form fields when `canPushToBranch` is `false`', () => { - createComponent({ canPushToBranch: false, canPushCode: true }); + createComponent({ props: { canPushToBranch: false, canPushCode: true } }); expect(wrapper.vm.$data.form.fields.branch_name.value).toBe('some-target-branch'); expect(findCommitTextarea().exists()).toBe(true); expect(findRadioGroup().exists()).toBe(false); @@ -150,6 +167,36 @@ describe('CommitChangesModal', () => { expect(findCreateMrCheckbox().text()).toBe('Create a merge request for this change'); }); + describe('when `canPushToCode` is `false`', () => { + const commitInBranchMessage = sprintf( + 'Your changes can be committed to %{branchName} because a merge request is open.', + { + branchName: 'main', + }, + ); + + it('shows the correct form fields when `branchAllowsCollaboration` is `true`', () => { + createComponent({ props: { canPushCode: false, branchAllowsCollaboration: true } }); + expect(findCommitTextarea().exists()).toBe(true); + expect(findRadioGroup().exists()).toBe(false); + expect(findModal().text()).toContain(commitInBranchMessage); + expect(findBranchInForkMessage().exists()).toBe(false); + }); + + it('shows the correct form fields when `branchAllowsCollaboration` is `false`', () => { + createComponent({ + props: { + canPushCode: false, + branchAllowsCollaboration: false, + }, + }); + expect(findCommitTextarea().exists()).toBe(true); + expect(findRadioGroup().exists()).toBe(false); + expect(findModal().text()).not.toContain(commitInBranchMessage); + expect(findBranchInForkMessage().exists()).toBe(true); + }); + }); + it('clear branch name when new branch option is selected', async () => { createComponent(); expect(wrapper.vm.$data.form.fields.branch_name).toEqual({ @@ -187,9 +234,11 @@ describe('CommitChangesModal', () => { 'passes $input as a hidden input with the correct value', ({ input, value, emptyRepo, canPushCode, canPushToBranch, exist }) => { createComponent({ - emptyRepo, - canPushCode, - canPushToBranch, + props: { + emptyRepo, + canPushCode, + canPushToBranch, + }, }); const inputMethod = findForm().find(`input[name="${input}"]`); -- GitLab From 49e6564631cfcd4a9a8da69d99706f46c0920809 Mon Sep 17 00:00:00 2001 From: Chaoyue Zhao Date: Tue, 26 Nov 2024 12:32:00 -0500 Subject: [PATCH 2/6] Code review comments: - Remove unused testids - Adjust padding around text - Update default formMethod value --- .../repository/components/blob_button_group.vue | 2 +- .../repository/components/commit_changes_modal.vue | 11 +++++------ .../components/commit_changes_modal_spec.js | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue index 49716210870f28..4268db3de2abc3 100644 --- a/app/assets/javascripts/repository/components/blob_button_group.vue +++ b/app/assets/javascripts/repository/components/blob_button_group.vue @@ -144,7 +144,7 @@ export default {
- + diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js index df06fd755fcc07..57e6b56479004c 100644 --- a/spec/frontend/repository/components/commit_changes_modal_spec.js +++ b/spec/frontend/repository/components/commit_changes_modal_spec.js @@ -19,7 +19,7 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); const initialProps = { modalId: 'Delete-blob', - action: 'delete', + method: 'delete', actionPath: 'some/path', commitMessage: 'Delete File', targetBranch: 'some-target-branch', -- GitLab From e318cf36c995b77115a247efb400165faa9ca4fc Mon Sep 17 00:00:00 2001 From: Chaoyue Zhao Date: Tue, 26 Nov 2024 15:52:19 -0500 Subject: [PATCH 3/6] Update to include two slots --- .../components/commit_changes_modal.vue | 3 ++- .../components/commit_changes_modal_spec.js | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/repository/components/commit_changes_modal.vue b/app/assets/javascripts/repository/components/commit_changes_modal.vue index 07eef56b3bcf8a..888382af9f5dd4 100644 --- a/app/assets/javascripts/repository/components/commit_changes_modal.vue +++ b/app/assets/javascripts/repository/components/commit_changes_modal.vue @@ -263,7 +263,7 @@ export default { :action-cancel="cancelOptions" @primary="handlePrimaryAction" > - +

@@ -285,6 +285,7 @@ export default { + diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js index 57e6b56479004c..f6213f224c3e10 100644 --- a/spec/frontend/repository/components/commit_changes_modal_spec.js +++ b/spec/frontend/repository/components/commit_changes_modal_spec.js @@ -123,13 +123,22 @@ describe('CommitChangesModal', () => { expect(findSlot().exists()).toBe(false); }); - it('renders the slot when a slot is provided', () => { + it('renders the body slot when one is provided', () => { createComponent({ slots: { - default: '

test slot
', + body: '
test body slot
', }, }); - expect(findSlot().text()).toBe('test slot'); + expect(findSlot().text()).toBe('test body slot'); + }); + + it('renders the form field slot when one is provided', () => { + createComponent({ + slots: { + body: '
test form fields slot
', + }, + }); + expect(findSlot().text()).toBe('test form fields slot'); }); }); -- GitLab From 76b1fa1e79018ab2aaf3e89bde0bd1f8b5d7b801 Mon Sep 17 00:00:00 2001 From: Chaoyue Zhao Date: Tue, 26 Nov 2024 21:07:56 -0500 Subject: [PATCH 4/6] Update to pass down the form handler --- .../components/blob_button_group.vue | 20 +++++++++++-- .../components/commit_changes_modal.vue | 28 +++++++++---------- .../components/blob_button_group_spec.js | 4 +++ scripts/frontend/quarantined_vue3_specs.txt | 1 - .../components/blob_button_group_spec.js | 4 +-- .../components/commit_changes_modal_spec.js | 16 ++++------- 6 files changed, 42 insertions(+), 31 deletions(-) diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue index 4268db3de2abc3..f8d43a0922e1bb 100644 --- a/app/assets/javascripts/repository/components/blob_button_group.vue +++ b/app/assets/javascripts/repository/components/blob_button_group.vue @@ -1,6 +1,8 @@