diff options
Diffstat (limited to 'app/assets/javascripts/projects/commit/components')
3 files changed, 263 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue new file mode 100644 index 00000000000..3ecc3f1d1d3 --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue @@ -0,0 +1,94 @@ +<script> +import { + GlDropdown, + GlSearchBoxByType, + GlDropdownItem, + GlDropdownText, + GlLoadingIcon, +} from '@gitlab/ui'; +import { mapActions, mapGetters, mapState } from 'vuex'; +import { I18N_DROPDOWN } from '../constants'; + +export default { + name: 'BranchesDropdown', + components: { + GlDropdown, + GlSearchBoxByType, + GlDropdownItem, + GlDropdownText, + GlLoadingIcon, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + }, + i18n: I18N_DROPDOWN, + data() { + return { + searchTerm: this.value, + }; + }, + computed: { + ...mapGetters(['joinedBranches']), + ...mapState(['isFetching', 'branch', 'branches']), + filteredResults() { + const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); + return this.joinedBranches.filter((resultString) => + resultString.toLowerCase().includes(lowerCasedSearchTerm), + ); + }, + }, + mounted() { + this.fetchBranches(this.searchTerm); + }, + methods: { + ...mapActions(['fetchBranches']), + selectBranch(branch) { + this.$emit('selectBranch', branch); + this.searchTerm = branch; // enables isSelected to work as expected + }, + isSelected(selectedBranch) { + return selectedBranch === this.branch; + }, + searchTermChanged(value) { + this.searchTerm = value; + this.fetchBranches(value); + }, + }, +}; +</script> +<template> + <gl-dropdown :text="value" :header-text="$options.i18n.headerTitle"> + <gl-search-box-by-type + :value="searchTerm" + trim + autocomplete="off" + :debounce="250" + :placeholder="$options.i18n.searchPlaceholder" + @input="searchTermChanged" + /> + <gl-dropdown-item + v-for="branch in filteredResults" + v-show="!isFetching" + :key="branch" + :name="branch" + :is-checked="isSelected(branch)" + is-check-item + @click="selectBranch(branch)" + > + {{ branch }} + </gl-dropdown-item> + <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon"> + <gl-loading-icon class="gl-mx-auto" /> + </gl-dropdown-text> + <gl-dropdown-text + v-if="!filteredResults.length && !isFetching" + data-testid="empty-result-message" + > + <span class="gl-text-gray-500">{{ $options.i18n.noResultsMessage }}</span> + </gl-dropdown-text> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/projects/commit/components/form_modal.vue b/app/assets/javascripts/projects/commit/components/form_modal.vue new file mode 100644 index 00000000000..6411b1ca921 --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/form_modal.vue @@ -0,0 +1,137 @@ +<script> +import { GlModal, GlForm, GlFormCheckbox, GlSprintf, GlFormGroup } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +import eventHub from '../event_hub'; +import csrf from '~/lib/utils/csrf'; +import BranchesDropdown from './branches_dropdown.vue'; + +export default { + components: { + BranchesDropdown, + GlModal, + GlForm, + GlFormCheckbox, + GlSprintf, + GlFormGroup, + }, + inject: { + prependedText: { + default: '', + }, + }, + props: { + i18n: { + type: Object, + required: true, + }, + openModal: { + type: String, + required: true, + }, + modalId: { + type: String, + required: true, + }, + }, + data() { + return { + checked: true, + actionPrimary: { + text: this.i18n.actionPrimaryText, + attributes: [ + { variant: 'success' }, + { category: 'primary' }, + { 'data-testid': 'submit-commit' }, + ], + }, + actionCancel: { + text: this.i18n.actionCancelText, + attributes: [{ 'data-testid': 'cancel-commit' }], + }, + }; + }, + computed: { + ...mapState([ + 'branch', + 'endpoint', + 'pushCode', + 'branchCollaboration', + 'modalTitle', + 'existingBranch', + 'prependedText', + ]), + }, + mounted() { + eventHub.$on(this.openModal, this.show); + }, + methods: { + ...mapActions(['clearModal', 'setBranch', 'setSelectedBranch']), + show() { + this.$root.$emit('bv::show::modal', this.modalId); + }, + handlePrimary() { + this.$refs.form.$el.submit(); + }, + resetModalHandler() { + this.clearModal(); + this.setSelectedBranch(''); + this.checked = true; + }, + }, + csrf, +}; +</script> +<template> + <gl-modal + v-bind="$attrs" + data-testid="modal-commit" + :modal-id="modalId" + size="sm" + :title="modalTitle" + :action-cancel="actionCancel" + :action-primary="actionPrimary" + @hidden="resetModalHandler" + @primary="handlePrimary" + > + <p v-if="prependedText.length" data-testid="prepended-text"> + <gl-sprintf :message="prependedText" /> + </p> + + <gl-form ref="form" :action="endpoint" method="post"> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + + <gl-form-group + :label="i18n.branchLabel" + label-for="start_branch" + data-testid="dropdown-group" + > + <input id="start_branch" type="hidden" name="start_branch" :value="branch" /> + + <branches-dropdown class="gl-w-half" :value="branch" @selectBranch="setBranch" /> + </gl-form-group> + + <gl-form-checkbox + v-if="pushCode" + v-model="checked" + name="create_merge_request" + class="gl-mt-3" + > + <gl-sprintf :message="i18n.startMergeRequest"> + <template #newMergeRequest> + <strong>{{ i18n.newMergeRequest }}</strong> + </template> + </gl-sprintf> + </gl-form-checkbox> + <input v-else type="hidden" name="create_merge_request" value="1" /> + </gl-form> + + <p v-if="!pushCode" class="gl-mb-0 gl-mt-5" data-testid="appended-text"> + <gl-sprintf v-if="branchCollaboration" :message="i18n.existingBranch"> + <template #branchName> + <strong>{{ existingBranch }}</strong> + </template> + </gl-sprintf> + <gl-sprintf v-else :message="i18n.branchInFork" /> + </p> + </gl-modal> +</template> diff --git a/app/assets/javascripts/projects/commit/components/form_trigger.vue b/app/assets/javascripts/projects/commit/components/form_trigger.vue new file mode 100644 index 00000000000..e92854c1ac3 --- /dev/null +++ b/app/assets/javascripts/projects/commit/components/form_trigger.vue @@ -0,0 +1,32 @@ +<script> +import { GlLink } from '@gitlab/ui'; +import eventHub from '../event_hub'; + +export default { + components: { + GlLink, + }, + inject: { + displayText: { + default: '', + }, + }, + props: { + openModal: { + type: String, + required: true, + }, + }, + methods: { + showModal() { + eventHub.$emit(this.openModal); + }, + }, +}; +</script> + +<template> + <gl-link data-is-link="true" data-testid="revert-commit-link" @click="showModal"> + {{ displayText }} + </gl-link> +</template> |